howto_user (![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small} howto_user) wrote in ![[info]](http://l-stat.livejournal.com/img/community.gif){kind=small} howto,@ 2002-12-27 14:20:00 |
|
| Entry tags: | - all styles, changing font, changing links, css, link alteration, link color and decoration, text alteration |
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 0em | Changes 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.2em | Changes 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<=
<style type="text/css">
<!--
a:hover {
color: #FF0000;
text-transform: capitalize;
text-decoration: underline;
}
-->
</style>
<=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 emmavescence
