howto_user
in
howto
CSS text and link alteration
Prerequisites:
GLOBAL_HEAD tutorial
Basic knowledge of CSS
There are a lot of neat things you can do with CSS to customize the text in your journal. In this tutorial we'll cover many of the most common attributes that can be added to any CSS property, such as body or a:hover
Attribute
Choices
What it does
color:Any hexadecimal color code*Changes the color of the text.
background-color:Any hexadecimal color code*Changes the background color that text appears on.
letter-spacing:Any whole number or decimal value relative to the font size(i.e. .3em;); default is 0emChanges the amount of space between letters.
line-height:Any whole number or decimal value relative to the font size(i.e. .8em;); default is 1.2emChanges the amount of space
between multiple lines of text.
font-style:
italic;
Makes text appear italic.
font-weight:
bold;
Makes text appear bold-faced.
text-decoration:underline;Underlines text.
overline;Puts a line over text.
underline overline;Combines underline; and overline;
line-through;Puts a line through text.
none;Leaves text as normal. This is useful for getting rid of an underline when a link is hovered over, etc.
text-transform:
capitalize;
capitalizes the first letter of all words.
uppercase;
changes all letters to capitals.
lowercase;
CHanGes All leTters to loweRcase.
none;
LeavEs aLL letteRs As theY wEre tYpeD.
font-variant:small-caps;Changes all text to small-caps.
border:width style color;
width is a pixel value (ie 2px;), style can be solid; dashed; dotted; or double; and color is any hexadecimal color code*Puts a border around the element for which it is defined
*A list of available hexadecimal color codes can be found here.
So, for example, if you wanted to make your links red, capitalized, and underlined when they're hovered over, you could add this CSS property to a GLOBAL_HEAD override:
GLOBAL_HEAD<=
<=GLOBAL_HEAD
If you're adding this code to existing GLOBAL_HEAD overrides, you'll need to make sure to merge them correctly. Instructions on how to merge overrides can be found in this tutorial.
You can also use text filters to make text blur, glow, and several other effects. There is a seperate tutorial on text filters, found here.
The cursor that displays on your journal can be changed, as well. This tutorial explains how.
contributed by thewildrose and girl_from_mars
GLOBAL_HEAD tutorial
Basic knowledge of CSS
There are a lot of neat things you can do with CSS to customize the text in your journal. In this tutorial we'll cover many of the most common attributes that can be added to any CSS property, such as body or a:hover
Attribute
Choices
What it does
color:Any hexadecimal color code*Changes the color of the text.
background-color:Any hexadecimal color code*Changes the background color that text appears on.
letter-spacing:Any whole number or decimal value relative to the font size(i.e. .3em;); default is 0emChanges the amount of space between letters.
line-height:Any whole number or decimal value relative to the font size(i.e. .8em;); default is 1.2emChanges the amount of space
between multiple lines of text.
font-style:
italic;
Makes text appear italic.
font-weight:
bold;
Makes text appear bold-faced.
text-decoration:underline;Underlines text.
overline;Puts a line over text.
underline overline;Combines underline; and overline;
line-through;Puts a line through text.
none;Leaves text as normal. This is useful for getting rid of an underline when a link is hovered over, etc.
text-transform:
capitalize;
capitalizes the first letter of all words.
uppercase;
changes all letters to capitals.
lowercase;
CHanGes All leTters to loweRcase.
none;
LeavEs aLL letteRs As theY wEre tYpeD.
font-variant:small-caps;Changes all text to small-caps.
border:width style color;
width is a pixel value (ie 2px;), style can be solid; dashed; dotted; or double; and color is any hexadecimal color code*Puts a border around the element for which it is defined
*A list of available hexadecimal color codes can be found here.
So, for example, if you wanted to make your links red, capitalized, and underlined when they're hovered over, you could add this CSS property to a GLOBAL_HEAD override:
GLOBAL_HEAD<=
<=GLOBAL_HEAD
If you're adding this code to existing GLOBAL_HEAD overrides, you'll need to make sure to merge them correctly. Instructions on how to merge overrides can be found in this tutorial.
You can also use text filters to make text blur, glow, and several other effects. There is a seperate tutorial on text filters, found here.
The cursor that displays on your journal can be changed, as well. This tutorial explains how.
contributed by thewildrose and girl_from_mars