Custom CSS Hacks: Difference between revisions
Jump to navigation
Jump to search
ShadowWolf (talk | contribs) m add the first hacks to this page |
ShadowWolf (talk | contribs) m minor fix |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
__TOC__ | __TOC__ | ||
== Font Face Hacks == | == Font Face Hacks == | ||
Some people find the [[ | Some people find the [[wikipedia:sans-serif|sans-serif]] font that is used on Shifti hard to read. If you agree, you'll want to add one of the following pieces of CSS to your custom css: | ||
<pre> | <pre> | ||
// change all fonts to serif | // change all fonts to serif | ||
| Line 12: | Line 12: | ||
// change the 'article' area to serif | // change the 'article' area to serif | ||
#column-content { | #column-content { | ||
font-family: Times, Roman, serif; // you could try: | font-family: Times, Roman, serif; // you could try: Georgia, Palatino, serif :) | ||
font-size: 120%; | font-size: 120%; | ||
} | } | ||
| Line 31: | Line 31: | ||
} | } | ||
</pre> | </pre> | ||
{{Non-Fiction}}{{example}} | |||
Latest revision as of 22:55, 15 February 2009
These are all user-submitted 'hacks' that use the Custom CSS facility to change how some facets of the way Shifti looks on a per-user basis.
Font Face Hacks
Some people find the sans-serif font that is used on Shifti hard to read. If you agree, you'll want to add one of the following pieces of CSS to your custom css:
// change all fonts to serif
#globalWrapper {
font-family: Times, Roman, serif; // select the most generic serif fonts
font-size: 120%; // Serif fonts tend to be a little smaller than sans-serif
}
// change the 'article' area to serif
#column-content {
font-family: Times, Roman, serif; // you could try: Georgia, Palatino, serif :)
font-size: 120%;
}
// change just the body-text area of a page to serif
#bodyContent {
font-family: Times, Roman, serif;
font-size: 120%;
}
Miscelaneous Display Hacks
Some people like having the first line of paragraphs indented. If you do too, try adding the following to your custom css:
// we only want to have an effect on <p> elements in the page-content area
#bodyContent p {
text-indent: 2em; // a 2em indent should be plenty...
}