CSS Guide 3: Time to (finally) customize your Gax page!

Gax users, it's (finally) time to make Gax look just how you've always wanted!

First, some recommendations:

Read CSS Guide 1 and CSS Guide 2 to get a basic understanding of the terminology here and to learn what I've shown so far.

Use Firefox 2 with Firebug 1.1 Beta add-on. (Firebug is an add-on for Firefox which will allow you to right click an object on your page and see the html path to that element. This will be necessary if, say, you need to find a unique selector for customizing a certain element of your page.) Make your page look good in Firefox first, even if it's not your browser of choice. Part 4 of my CSS Guide will focus on browser specific tips to make pages look good in browsers other than Firefox. If you still decide after this that you wish to continue with IE (maybe because your work mandates it, or whatever)- wait until part 4 of my guide is out, design your site in Firefox, THEN use the browser tips to replicate that in IE. Then your page will look spiffy to over 94% of browsers used today (stats from TheCounter).

Second, the setup:

To edit your CSS, you have to click the "My Page" tab at the top of the site. Below your icon is the option to "Change my theme". Click that and the edit menu will appear. Two tabs are accessible from here- you'll want the "Advanced" tab. The text box that pops up is your default CSS file. BE SURE TO SELECT ALL THE TEXT HERE AND SAVE A COPY TO YOUR COMPUTER! You don't want to accidentally make your page unreadable, and have no way of reverting it, now do you? Once you have the text box showing, you should open a second tab (File > New Tab) in Firefox, and load the "My Page" tab in it- this is the tab you'll use with Firebug to select various elements you want to customize.

If you don't plan on changing a lot of stuff (just color changes, for example), I recommend leaving the entire default CSS page there, and putting any rules you wish to implement at the bottom. If, however, you plan on totally redesigning your page from scratch, you may want to delete the original CSS page first (Save a backup copy just in case!) and start a new one. Remember, if two CSS rules are written in your CSS file that affect the same elements, the one at the bottom will take precedence over those at the top- meaning if the top CSS rule says the text should be green, but the bottom says black, the text will be black. However, some elements are "stackable"- for example, position elements will add up.

Third, a short review:

Remember, every CSS Rule is

selector {declaration}

selector's are what you're affecting with your rule, and declarations are what's being done to that element. Selectors can include classes (identified with a period ".") and IDs (identified with a pound sign "#"). Multiple selectors can be applied to a rule if they're seperated by commas, and multiple declarations can be applied in the {} with semi-colons.

Fourth, the method of how you should edit:

If you're only planning minor changes (no position changes), it should be fine to write in a few rules at a time before saving and checking your work. If you wish to change the position of elements, however, you should save after every rule to see how that rule affected your layout- One messup can affect everything, and you wouldn't want to write 10 positioning rules only to have one of them mess the page up without you noticing first. Be sure to leave comments in your work, too. A comment is written like this:

/* Place a comment here, in between the astericks and slashes- Detail what the rule below it does */

These comment should spell out exactly what each rule of CSS you write does, and what browsers it works for (don't worry, we're covering cross-browser support in CSS Guide 4). Also, once you're done editing, save a copy of your finished CSS file to your computer for backup purposes.

Fifth, The names of the gax page elements: The part in parenthesis will be one selector that will target that element specifically. There is more than one way to select each of these elements, and some of the default CSS in your page may try to overwrite this. If you notice that a rule you place in your CSS doesn't do what you planned, and you're POSITIVE the selector you used targets that element, check the CSS above your rules to see if some other rule is overriding yours. (This is another area where Firebug is handy- any element you right click and select "Inspect Element" on will show what rules are affecting it in the right pane of Firebug.)

Stuff you shouldn't move, since they're promotional/navigation:

Your message/friend bar at the top of the page (div#xn_bar_menu)
Your navigation tabs (Main, My Page, etc.) (div#xg_navigation)
Basically anything with a navigation class, or an ID (div.navigation or div#*)
Your "Hello, *USERNAME*" box (div.account-links)
Your footer (another ID-) (div#xg_footer)

The above items can be customized, but you should probably only change their color or background transparency- not their location.

Stuff you can mess with, but wait until you're comfortable with how positioning works until you move them:

Your Icon and "Change my Theme" box (div.module_user_summary)
Your content area (Div#xg)- This is the invisible "box" that contains all the elements on your page. You can see it with Firebug.

Good stuff to start your experimenting with

Your Gax Chat box (div#xg_module_account + div.xg_module + div.xg_module + div.xg_module)- Try making it wider {width:150%;}, or changing the background color: {background-color:#FFFF00}

So I bet you're dying to try out a bunch of different things, but maybe need a push in the right direction- here are some great examples.

Basic changes

/*Set the headings to display bold white and in small caps */
div.xg_3col > ul + h1 {color:white; font-variant:small-caps; font-weight:900;}

The above rule sets your page titles to display in super-bold white, and for the letters to all be in small caps format.

/* Set the Activity Feed, Custom RSS Box, "Promote this Page!", Custom Gadgets modules, "My Photos", ad, and "Gax Exclusives" modules to not display */
div.xg_2col > div.xg_module_activity, div#xg_module_account + div.html_module, div.xg_1col > div.module_user_summary + div.module_members + div.music + div.module_feed,

div.xg_2col > div.xg_module_activity + div.module_about_user + div.xg_module + div.feed_module, div#xg_module_account + div.xg_module + div.xg_module, div.module_photo > div.xg_module_head, div.module_photo > div.xg_module_body, div.module_photo > div.xg_module_foot, div.xg_1col > div + div + div + div + div.xg_ads {display:none;}

The above rule tells those elements to disappear from the page- They won't even take up space anymore. This "unclutters" your page and allows it to have more room for the elements you want to make bigger- like your chat and blog modules.

Advanced Changes

/* Set the main body to be wider and move left */
div#xg {position:absolute; float:left; top:25px;}

The above rule actually sets your content to sit in the upper left corner of your screen (insted of the top middle like the default layout)- This is a design that forces all of your "negative space" (The area called the "sides" in the default layout) to the right of your screen- This is useful if you wish to emphasize certain objects in that space (such as I have done with my gax chat box).

Now you're getting the hang of it. All you have to do is pick an element with a selector, and apply something cool to it. Here's some more cool things you can do (declarations) to the different elements on your page:

{position:static} This is the default value for all elements in the page. This value simply means that your element will follow the standard rules for how elements fit together in CSS based pages, stacking one on top of another, and filling up their parent elements as appropriate. Other values for the "position" property are "relative", which tells an element to move relative to its starting position in the page (while maintaining the space originally given to it), "absolute", which breaks an element free of all its parents (meaning that the element will only be placed based on the page's body- its total area on the browser. It will also lose the space assigned to it from default positioning), and "fixed"- This value also positions elements according to their position in the browser, but the element will always be in that position in the browser- meaning it will stay put, even when scrolled.

{backgound-color:#FFFFFF;} Sets the background color of the selected element. The #FFFFFF should be substituted for the HEX color code of your choice.

{top:15%;} Top, Left, Right, and bottom set how far away that part of your selected elements are from their parent element- the box they're contained within. Values can be in absolute values (such as pixles) or percentages- Percentages are preferred, since they will allow your elements to "grow" and "shrink", based on the size of the browser they are in.

{display:none} Sets the selected module to not display- it won't even take up space on your page. Other common values for the "display" property are "inline", which sets an element to not create its own "block" (meaning it won't make its own line), and "block", which WILL have the element create a block around itself, taking up its own defined space.

{clear:left;} Any element with this rule applied will make elements to the left of it that take up space in its area move below it in the layout. Other values for this property include "right", "clearing" elements on the right of the selected elements, "both", or "none". "None" is useful if you're trying to make elements sit side by side- setting both to {clear:none;} should force them to sit next to each other (assuming their is enough room for them to sit inside the box their parent element creates).

{float:left;} "Float" tells the selected element that if any other elements are entrenching on its space, it should "float" to the left of that element instead. This keeps elements from overlapping each other. "right" and "none" are other valid values for the "float" property- setting it to "none" tells the element that its ok for it to be overlapped with something else.

Most of the techniques and examples here are basic, and don't cover the breadth of possibility in CSS. If you're interested in more complex examples, or in learning more intricate details of each of the parts of CSS, I'd advise by reading the tutorial courses of the W3C School () And of course if you need help, you can PM me! Stay tuned for part 4- we'll start making your page look good in IE, as well!