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