Welcome to my first entry in what will become a library of tutorials helping you get to know your Poker Affiliate Solutions rakeback skin.Headers are among the most simple elements to tailor and can go a long way toward making your skin unique, professional and even, for those who dare, eye popping.Locating the CodeThe code for headers is located in the Skin CSS entry in your CMS root (root means you can see it right away, there is no need to expand any folders).By clicking on the pencil icon to the left of this entry you may behold the CSS Stylesheet in all its glory.The portion I will be working today should begin around line 70. In its unedited form it will look similar to the following:h1.pas { font-size : 20px; color : #2F65A8; border-bottom : 2px solid #2F65A8; width : 95%; } h2.pas { font-size : 16px; color : #7F7F7F; } h3.pas { font-size : 12px; font-weight : bold; color : #000; } What is it and what does it do?Headings are just what you would expect them to be, a larger bolder typeface that introduces or succinctly describes subsequent elements or text. Almost every page will have a large header at the very top indicating the contents of that page. For example: Welcome, My Account, Quick Statistics or Refferral Center.By default PAS uses three levels of headers, with header 1 being the largest of the three, and header 3 being the smallest.The html code seen on the page will look like the following:

Welcome

The class in this example simply links it to the correct heading category in our stylesheet. You may recognize it from the earlier excerpt – “h1.pas”. Therefore, whenever we use h1 class=”pas”, it will get all the style elements in the h1.pas css style entry.All the largest or main headings are already defined as such for you. The practical implication of this is that by changing the style elements in the Skin CSS entry in your CMS, you can change the headings on each and every page in one go!Application and ExamplesIf your stylesheet is identical to the example above, the code

Welcome

will result in a heading that looks like:Welcome

We can easily change the color by locating the Skin CSS entry for color. In this case “color : #2F65A8”. The color is expressed in a hexidecimal color code. You can use a variety of tools to translate a color into its hexidecimal code. A simple online color picker can be found at http://www.colorpicker.com/.Using the color picker, I can now choose a bright shade of red and replace it with the existing color:h1.pas { font-size : 20px; color : #FF0000;border-bottom : 2px solid #2F65A8; width : 95%; } Now our headings look like the following:Welcome

You may have noticed our heading also has a border on the bottom. The border is 2 pixels wide (2px), it is a solid color (solid), and its color is blue (#2F65A8). By changing the color element to our bright red color code we can make it match our new bright red text.Now our headings look like the following:Welcome

Changing the border from solid to “dotted” will give us the following look:Welcome

Lets add a thin solid border to the top by inserting the following: border-top: 1px solid #FF0000.Welcome

We can change or remove the width tag to make the borders more narrow, and change the font size to make the font bigger or smaller.Welcome

Finally, we can add an entry for background color if we like: background-color: #F3F3F3; .Welcome

To review: your Skin CSS code now looks like this:h1.pas { font-size : 26px; color : #FF0000; background-color: #F3F3F3; border-bottom : 2px dotted #FF0000; border-top : 1px solid #FF0000; width : 50%; } Remember: When editing in any file be sure to save a backup first! The easiest way to do this is to just copy the entire contents of the orginal entry into notepad and save to a location where you won’t loose it. Every CSS entry must be inclused in brackets: h1.pas{ }. Each individual style entry must end in a semi-colon.I have included a few more examples to get you started.This Example has a dark background and border that make it look 3 dimensional.

font-size:16px;color: #ffffff;background-color: #3C5A93;border-top: 1px solid #4970B6;border-left: 1px solid #4970B6;border-bottom: 1px solid #26395E;border-right: 1px solid #26395E;Padding gives your text more room to breathe.

font-size:16px;color: #336600;background-color: #DBF5CF;border: 1px solid #83DF5B;padding:5px;Borders are not required

font-size:16px;color: #ffffff;background-color: #A6A6A6;Nor are bold fonts

font-size:24px;color: #DF7000;border-bottom:2px solid #838383;font-weight:normal;Headings can be Centered

font-size:24px;color: #408080;border-bottom:2px dashed #D1E9E9;text-align:center;Be Creative & Have fun!

font-size:20px;color: #FFFFB7;background color: #2E8C92;border-left:4px solid #1F6265;border-right:4px solid #1F6265;text-align:center;