With the theme editor update now live, we thought we would write a little tips and tricks post about some of the things you can do with the new custom css feature.
Using the Custom CSS feature does require some knowledge of CSS, if you are not familiar with it and are interested in learning, we recommend checking out the W3 Schools website -
http://www.w3schools.com/css/default.aspRepositioning ElementsOne of the many features of CSS is the ability to reposition elements on the page. Here is a few examples:
Place Main Menu Above BannerSay you want to position the main menu above the banner (by default it is below). You can do this by adding this custom css to your theme:
/* position main menu above banner */
#main_menu { position: absolute; top: 0px; width: 1000px; }
#banner { margin-top: 28px; }
/* hacked added for IE7, as it renders incorrectly */
#banner { #margin-bottom: 10px; }
What this does is reposition the main menu absolutely to the top of the page. By default, the main menu is set to use all of the available width, so since it has been moved out of the normal flow of the page you will want to set the width of it to the same width you have set for your theme so that it looks correct (in this example, 1000px). You can find out or change the width of your theme by clicking on Global Settings.
The banner also needs to be told to make space available to fit the main menu above it, so we add a 28px space above the banner (the height of the main menu). And, since IE7 is not web standards complaint and fails to render this properly, we add a hack to make it look correct on IE7; the #margin-bottom is not valid css so will be ignored by standard complaint browsers, but IE7 will still use it.
Place the user status bar at the bottom of the browser windowFor another example, say you want to position the user status bar to be at the bottom of the users browser window, so it is always visible there even while they scroll the page.
To do this you would add this line of css:
/* fix position user status to bottom of browser window */
#user_status { position: fixed; bottom: 0px; left: 15%; width: 70%; border: 1px solid black !important; }
This will position the user status bar right at the bottom of the browser window, in a fixed position, so it stays there even while they scroll the page. We set the user status to be 70% of the width of the page, and starts from 15% of the left of the page, this will make it appear centered and look a little nicer. Finally since by default the user status has no side or top borders we add them; the "!important" statement tells css to give this rule higher priority then others, to ensure our border will be set.
If you wanted, you could also position this at the top of the browser window rather then the bottom, by just changing the bottom: 0px to top: 0px:
/* fix position user status to top of browser window */
#user_status { position: fixed; top: 0px; left: 15%; width: 70%; border: 1px solid black !important; }
*note: this trick requires the browser to support the css rule position: fixed, it is well supported in all modern browsers such as Mozilla Firefox, Epiphany, Safari, and Opera. It does work in IE 7 also, but it will not work with IE 6.Over-writing existing stylesWith the Custom CSS feature, you can change or over-write any style that we apply to your site.
To find out what styles we apply to your site, you can right click on the page while viewing your guild site and go to "View Source", then right at the top of the page you will see two stylesheet links.
Our default styles:
http://assets0.mmoguildsites.net/stylesheets/design_v3.css
Your custom styles, which are generated from the theme editor: (the id will vary depending on your site)
http://assets0.mmoguildsites.net/stylesheets/custom/41310_style.css
You can view these and if you see anything you dislike or want to change, you can just modify those rules and paste them into the custom css. Because you are over-writing styles, you will likely want to include the "!important" rule with them, to ensure your rule takes precedent to the existing rules. Here is a few examples:
Changing font scalingWe make text smaller in some parts of the site when we feel it is less important, and larger in other parts of the site when we feel it is more important, we do this primarily with the css classes .small_font and .large_font, which set the font to be either 90% the original size or 120% of the original size. You can over-ride these styles, if for example you wanted the small_font to be even smaller, say 80%, and you wanted the large font to be even larger, say 130%
/* change font scaling for small and large fonts */
.small_font { font-size: 0.8em !important; }
.large_font { font-size: 1.3em !important; }
Changing side blocks spacingBy default we add a margin to the bottom of the side blocks, to space them out slightly from each other to look more correct. If you were planning to add your own graphics for the side block and wanted to create a linked effect, where all the side blocks were together, you may wish to remove this spacing. You can disable it by adding the css:
/* make sideblocks positioned together without vertical spacing */
div.side_box { margin-bottom: 0px !important; }
Adding your own extra stylesAlong with changing any styles we set and repositioning elements, you can also add your own additional styles to the site, adding some extra visual flair. Here are a few examples:
Making Menu Links UppercaseYou could make your menu links stand out more by making them all uppercase with the css rule:
/* make main menu links small-caps */
#main_menu { font-variant: small-caps; }
Make Calendar weekends have their own colorWe have extra css classes on quite a few elements in the site you can use to add extra styles, and one example of this is with the calendar, the weekends have the class .weekend, so you can use this to color those differently if you would like:
/* make calendar weekends a special color */
table.calendar td.weekend { background: #1c1c1c !important; }
Hopefully that shows some of the things which you can do with the custom CSS feature.
We have created an example theme with the custom css from this blog post applied to it you can view and play around with here -
http://www.mmoguildsites.com/themes/41305. (all of the styles except the side blocks spacing one are applied to it)
If you come up with a creative use for the custom CSS feature or the theme editor we'd love to see it, email us to let us know at staff@mmoguildsites.com
