From RNWiki
Default styling
Default styling in the form of CSS classes has been added to ravennuke.css, for many commonly used CSS properties. This allows block, module, and theme designers to avoid the use of inline styling or deprecated elements such as <center>, <i>, <u>, <b>, <font>, <strike>, <tt> and so forth. Although many of the classes are self-explanatory, and not every declaration will be addressed here, what follows is a general reference. Should you desire a ravennuke.css cheat sheet this page should print reasonably well in most recent browsers. Note that some examples will not format properly, or are difficult to simulate here on the wiki.
- It is highly recommended that you override the default CSS statements rather than edit ravennuke.css. Since ravennuke.css is loaded prior to the style.css of any given theme, CSS overrides should be placed in style.css so that changes do not effect other themes or core functionality.
Text Alignment and Styling
| Default CSS Classes: Text alignment and Styling | ||
| .text-center 1 | <div class="text-center">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .text-right 1 | <div class="text-right">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .text-left 1 | <div class="text-left">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .text-justify 1 | <div class="text-justify">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .overline | <span class="overline">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .line-through | <span class="line-through">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .underline | <span class="underline">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .normal-text 2 | <span class="line-through">Lorem ipsum <span class="normal-text">dolor</span> sit amet</span> | Lorem ipsum dolor sit amet |
| .normal-font | <span class="italic">Lorem ipsum <span class="normal-font">dolor</span> sit amet</span> | Lorem ipsum dolor sit amet |
| .normal | <span class="thick">Lorem ipsum <span class="normal">dolor</span> sit amet</span> | Lorem ipsum dolor sit amet |
| .thick | <span class="thick">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .italic | <span class="italic">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .oblique | <span class="oblique">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .small-caps | <span class="small-caps">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .uppercase | <span class="uppercase">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .lowercase | <span class="lowercase">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .capitalize | <span class="capitalize">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .transform-none | <span class="uppercase">Lorem ipsum <span class="transform-none">dolor</span> sit amet</span> | Lorem ipsum dolor sit amet |
| .smaller | <span class="smaller">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .larger | <span class="larger">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .large | <span class="large">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
| .x-large | <span class="x-large">Lorem ipsum dolor sit amet</span> | Lorem ipsum dolor sit amet |
1. Should not be used on inline elements such as <span>
2. Demo does not override properly on the wiki
Whitespace and Line Wraps
| Default CSS Classes: Whitespace and Line Wraps | ||
| .nowrap 4 | <div class="nowrap">Lorem ipsum dolor sit amet</div> | Multiple whitespaces collapse into a single whitespace. Text will never wrap unless <br /> tag is used |
| .pre 4 | <div class="pre">Lorem ipsum dolor sit amet</div> | Multiple whitespaces are preserved, text will only wrap on line breaks - like the <pre> html tag |
| .pre-wrap 4 | <div class="pre-wrap">Lorem ipsum dolor sit amet</div> | Multiple whitespaces are preserved, text will wrap when needed, and on line breaks |
| .pre-line 4 | <div class="pre-line">Lorem ipsum dolor sit amet</div> | Multiple whitespaces collapse into a single whitespace. Text will wrap when needed, and on line breaks |
| .break-word 4 | <div class="break-word">Lorem ipsum dolor sit amet</div> | Allows long words to be broken and wrap onto the next line |
4. Demo is difficult to represent on the wiki without breaking formatting
Display, Visibility, and Positioning
| Default CSS Classes: Display, Visibility, and Positioning | ||
| .invisible | <div class="invisible">Lorem ipsum dolor sit amet</div> | |
| .visible | <div class="visible">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .display-none | <div class="display-none">Lorem ipsum dolor sit amet</div> | |
| .display-inline 5 | <div class="display-inline">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .display-block 5 | <div class="display-block">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .display-inline-block 5 | <div class="display-inline-block">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .float-right | <div class="float-right">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .float-left | <div class="float-left">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .float-none 5 | <div class="float-none">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .clear-right 5 | <div class="clear-right">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .clear-left 5 | <div class="clear-left">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .clear-both 5 | <div class="clear-both">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .clear-none 5 | <div class="clear-none">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| .centered | <div class="centered">Lorem ipsum dolor sit amet</div> | Lorem ipsum dolor sit amet
|
| img.centered 5 | <img src="yourimage.png" class="centered" /> | A centered image |
5. Demo is difficult to represent on the wiki
| Default CSS Classes/ID's: Footer Styling | ||
| .footmsg | Undeclared: No default styling applied | CSS Class of the container which holds footer content |
| .rn-footer | Default style: padding:0; margin:0 0 14px 0; | CSS Class added to each of the 3 possible footer sections |
| #rn-foot1 | Undeclared: No default styling applied | CSS ID added to the first of the 3 possible footer sections |
| #rn-foot2 | Undeclared: No default styling applied | CSS ID added to the second of the 3 possible footer sections |
| #rn-foot3 | Undeclared: No default styling applied | CSS ID added to the third of the 3 possible footer sections |
| #rn-total-time | Default style: padding:0; margin:0; | CSS ID of the container which holds "Page Generation: XX Seconds" |
| #fb-copyright | Default style: padding:0; margin:0; | CSS ID of the container which holds the original php-nuke copyright |
General Purpose
| Default CSS Classes: General Purpose | ||
| .padrtl-box | Default style: margin: 0 auto; padding:0 6px; | 6px padding on the left and right |
| .padded-box | Default style: margin: 0 auto; padding:10px 0; | 10px padding on the top and bottom |
| .padtop-box | Default style: margin: 0 auto; padding:10px 0 0 0; | 10px padding on the top |
| .padbot-box | Default style: margin: 0 auto; padding:0 0 10px 0; | 10px padding on the bottom |
| .block-spacer | Default style: clear:both; font-size:1px; height:1px; | Not for Content - spacer to prevent floating content from escaping it's container |
| .wrapped | Uses Pseudo-elements | wrap an element in braces [ content ] |
| .minmax | Default style: min-width:800px; max-width:1600px; margin:0 auto | Added to the full width themes within the distribution, to help control center block styling issues |
Block List Styling
For a detailed overview of the styling of unordered <ul> and ordered <ol> lists used in center and side blocks, please see: RavenNuke2:Block Functionality and Styling
User Info Block
For a detailed overview of the User Info Block, and it's styling which resides in ravennuke.css, please see: RavenNuke2:User Info Block
Miscellaneous styles
Several other default styles reside in ravennuke.css which are outside the scope of this general overview. Please refer to ravennuke.css for other default styles ranging from forms to the noscript warning used in registration. As mentioned previously, it is highly recommended that you override the default CSS statements rather than edit ravennuke.css; so that changes do not effect other themes or core functionality.