Post Reforge CSS
appearanceStyle
Nav:
Hide Wiki Page Names
Font Sizes/Colors/Family
First-Letter Alterations
Buttons
DST
Tables
Hide Wiki Page Names
.wiki-page-name {display:none;}
Font Sizes/Colors
Wiki Pages Only
.wiki-page {font-size:12px;color:red;}
Headers
Headers are changed by using the h# tag (h1, h2, h3, h4, h5, h6) in reverse relation to size normally (h1 = the largest header)
Ex. Change Font-family and color of all headers
h1, h2, h3, h4, h5, h6{font-family:Bilbo Swash Caps;color: maroon;}
Ex. Change the space at the bottom (between header and next line), make bold, and center all h2 tags
h2
{
font-weight: bold;
text-align: center;
margin-bottom: 0.75em;
}
Menu Font Type
This will change the type of font used for the menu items.
.menu-text{font-family:Georgia,serif;}
First-Letter Alterations
The ONLY ability to edit a particular “portion” of text is by using a pseudo element called “:first-element” (without writing a ridiculous amount of code to style each individual character with inline styled/classed spans). This allows you to apply special styling to the first character in a piece of text.
Ex. you can style the first character in a paragraph of text to look different (similar to an illuminated manuscript).
/*Create class to add Dropcaps to first letter of a paragraph*/
p.dropcap:first-letter {float: left;color: #800000;font-size: 50px;line-height:40px;
padding-top: 3px;padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;}
The HTML would look like this:
<p class="dropcap">Lorem ipsum dolor sit amet, ad prompta tractatos repudiandae vim,
has minim dicit intellegebat ei. In ubique accusamus vel, tation alienum ea usu. Duo
dolores oporteat constituto at, ad usu aliquam concludaturque. Aeque mandamus
gubergren id est, fugit definitiones ne ius. An dictas assueverit vel, est ferri eripuit ocurreret
no. Laudem molestie ei sed, dignissim pertinacia sea no, ad aperiam sapientem usu. Veri
possit ad vix, sed ea nostrud utroque nominati, sed facer probatus scripserit in. Eam
atomorum explicari id. Duis postulant sententiae pri id. Quo nihil nostro pertinacia an, pri
cu rationibus disputando. Idque fugit definiebas nec id, an eum stet probo, nibh nihil dicant
te usu.</p>
And the Effect would look like this (minus the italic):
Lorem ipsum dolor sit amet, ad prompta tractatos repudiandae vim, has minim dicit intellegebat ei. In ubique accusamus vel, tation alienum ea usu. Duo dolores oporteat constituto at, ad usu aliquam concludaturque. Aeque mandamus gubergren id est, fugit definitiones ne ius. An dictas assueverit vel, est ferri eripuit ocurreret no. Laudem molestie ei sed, dignissim pertinacia sea no, ad aperiam sapientem usu. Veri possit ad vix, sed ea nostrud utroque nominati, sed facer probatus scripserit in. Eam atomorum explicari id. Duis postulant sententiae pri id. Quo nihil nostro pertinacia an, pri cu rationibus disputando. Idque fugit definiebas nec id, an eum stet probo, nibh nihil dicant te usu.
special note – Bilbo Swash Caps not a standard font, it does require that you add it as a Google Font under the Advanced Features (underneath the CSS Field) in order to use it.
And since I mentioned it – here is how to write the ridiculous amount of code:
RAINBOW
<span style="color:red;font-size: 50px;line-height:40px;
padding-top: 3px;padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;">R</span>
<span style="color:orange;font-size: 50px;line-height:40px;
padding-top: 3px;padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;">A</span>
<span style="color:yellow;font-size: 50px;line-height:40px;
padding-top: 3px;padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;">I</span>
<span style="color:green;font-size: 50px;line-height:40px;
padding-top: 3px;padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;">N</span>
<span style="color:blue;font-size: 50px;line-height:40px;
padding-top: 3px;padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;">B</span>
<span style="color:indigo;font-size: 50px;line-height:40px;
padding-top: 3px;padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;">O</span>
<span style="color:violet;font-size: 50px;line-height:40px;
padding-top: 3px;padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;">W</span>
Alternatively as ONE CSS Class with a color override:
.span-font{font-size: 50px;line-height:40px; padding-top: 3px;
padding-right: 12px;padding-left: 3px;font-family:Bilbo Swash Caps;}
<span class="span-font" style="color:red;">R</span>
<span class="span-font" style="color:orange;">A</span>
<span class="span-font" style="color:yellow;">I</span>
<span class="span-font" style="color:green;">N</span>
<span class="span-font" style="color:blue;">B</span>
<span class="span-font" style="color:indigo;">O</span>
<span class="span-font" style="color:violet;">W</span>
Buttons
These are alterations for the buttons on your site.
Button Text Color
.button {color:white !important;}
“Float” Save Button
Float the Save Button so it’s not hidden at the bottom of a long page.
input[value=Save] { position:fixed ;left:100px;top:100px;}
DSTs
Remove the scrollbars on DSTs even when the screen is wide enough that no scrollbars should exist.
.dynamic_sheet_container {overflow: visible;}
Tables
Removes all background and borders from tables
#content table{background-color:transparent; border-style:none;}
#content tr:nth-child(even) {background-color:transparent}
Navigation | |
General |
OP User CSS Templates • Tools Templates • CSS Snippets • CSS Tutorials |
Snippets |
Usability Snippets • Appearance Styles |