Code Index
If there is something you wish to accomplish that is not listed please comment and ask and I will let you know the coding and list it. Actual coding is normal while explanations are in highlighted text.
Design
Coding
Background Color/Image
background-color: #ece9e6;
background-image: url(IMAGE URL);
background-repeat: repeat;
background-attachment: fixed;
Make sure the ( ) are around the image url. Repeat options are no-repeat (no repeating just the one image), repeat-x (repeats across horizontally), repeat-y (repeats vertically). Attachment can be fixed (background doesn't move with the rest of the journal which looks great for a image behind your journal) and scroll (it will move). Also see this tutorial.
background: #ffffff url("img_tree.gif") no-repeat fixed center;
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
You can insert these properties or not. I like to break each up into a separate line but there are times you don't get that option.
Blurb/Free Text Links inline with text
display: inline;
this prevents and links in the blurb from moving text after it to another line and would be added to the .sbarbody2 section.
Borders
border: 3px dashed #cccccc; or border-width: 3px 3px 3px 3px; border-style: dashed; border-color: #cccccc;
The reason to choose the longer code would be if you want the width of the border to be different on certain sides.
The border style can be changed to none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.
box-shadow
box-shadow: 0 6px 10px 12px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 6px 10px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 6px 10px 12px rgba(0, 0, 0, 0.3);
Makes it look a bit like your post is coming off the page. First is the horizontal offset, then the vertical offset, blur and then spread. If you set both the horizontal and vertical offsets to 0 you will see a shadow behind the entire object you have the shadow behind. rgba is a color coding. 0,0,0 is black and 0.7 indicates opacity.
Center (non-text)
margin-right: auto; margin-left: auto;
When needing to center something like your entire journal or the header at the top you'll get better results with the margin left and right. For centering text see text-align.
Colored Bold, Italics, etc
b, strong { color: #0F609C; }
i, em { color: #e64a6b; }
u { color: #676767; }
s, strike { color: #934545; }
b and strong=bold, i and em=italics, u=underline, s=strikethrough
Comment Entry Background
#qrformdiv { }
#qrform table { }
This is for the area behind the comment entry form.
Entry Image
.entry_text img {max-width: 534px;}
You can make it possibel to control how bit an image can be in your posts either on our own journal or a community but using the above code. If you maincontent or subcontent section is 600px then a max-width of 534 might be nice. You can also try adding the text-align attribute. This might work.
Font
color: #FFFFFF; font-family: "trebuchet ms", arial, sans-serif; font-size: 12px;
Font family should always have multiple fonts as back up. If I wanted my main font to be something fancy I can see on my computer then that font would go between the quotes. Adding , arial, san-serif means that if someone viewing my journal can't see the font between the quotes (not a font they have in their system) then it will show them the next font I've listed.
font-style
font-style: italic;
There are other options for font-style: normal, italic, oblique, & initial. The only options I've ever used are normal or italic. If you are going to use normal, generally you can just remove that line of the coding. On occasion you will need it to prevent your text from being italicize because of another bit of coding in your layout.
font-weight
font-weight: bold;
other options for this coding are normal, bold, bolder, lighter or increments of 100 (100, 200 etc up to 900). 400 is the same as normal and 700 is bold.
letter-spacing
letter-spacing: 1px;
Esentially what you are doing is adding a space between your letters like t h i s. Some fonts you use will look squished and letter-spacing comes in handy.
Opacity
background-color: rgba(0, 0, 0, 0.7);
0, 0, 0, indicates that the background image will be black while 0.7 indicates that the black will have opacity. If you use ColorPicker.com the zeros here represent the RGB of a color which you can find on ColorPicker.com. You can essentially make any color see through.
Rotate Image
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
You can rotate your image almost as much as you'd like.From -360 to 360 though -360 and 360 are essentially the same and are the same as not rotating at all.
Rounded Corners/Borders
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
-khtml-border-radius: 2px 2px 2px 2px;
(top left, top right, bottom right, bottom left), all codes listed for cross browser interaction. If I wanted all the "corners" to have the same radius I can eliminate three of the 2px and just have one which will tell the coding all sides are the same.
text-align
text-align: right;
center and left are also acceptable
text-decoration
text-decoration: underline;
also none, overline, line-through, blink, initial and inherit. If you are going to use none just remove the coding unless for some reason it continues to underline the text. If you are seeing underlined links go to your browser Options (Tools>Options>Content>Color).
text-shadow
text-shadow: 2px 2px 1px #bbbbbb;
horizontal offset, vertical offset, blur.
text-transform
text-transform: uppercase;
lowercase, none or capitalize are other options beyond uppercase
If you have any questions feel free to comment.
Design
Coding
Background Color/Image
background-color: #ece9e6;
background-image: url(IMAGE URL);
background-repeat: repeat;
background-attachment: fixed;
Make sure the ( ) are around the image url. Repeat options are no-repeat (no repeating just the one image), repeat-x (repeats across horizontally), repeat-y (repeats vertically). Attachment can be fixed (background doesn't move with the rest of the journal which looks great for a image behind your journal) and scroll (it will move). Also see this tutorial.
background: #ffffff url("img_tree.gif") no-repeat fixed center;
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
You can insert these properties or not. I like to break each up into a separate line but there are times you don't get that option.
Blurb/Free Text Links inline with text
display: inline;
this prevents and links in the blurb from moving text after it to another line and would be added to the .sbarbody2 section.
Borders
border: 3px dashed #cccccc; or border-width: 3px 3px 3px 3px; border-style: dashed; border-color: #cccccc;
The reason to choose the longer code would be if you want the width of the border to be different on certain sides.
The border style can be changed to none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset.
box-shadow
box-shadow: 0 6px 10px 12px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 6px 10px 12px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 6px 10px 12px rgba(0, 0, 0, 0.3);
Makes it look a bit like your post is coming off the page. First is the horizontal offset, then the vertical offset, blur and then spread. If you set both the horizontal and vertical offsets to 0 you will see a shadow behind the entire object you have the shadow behind. rgba is a color coding. 0,0,0 is black and 0.7 indicates opacity.
Center (non-text)
margin-right: auto; margin-left: auto;
When needing to center something like your entire journal or the header at the top you'll get better results with the margin left and right. For centering text see text-align.
Colored Bold, Italics, etc
b, strong { color: #0F609C; }
i, em { color: #e64a6b; }
u { color: #676767; }
s, strike { color: #934545; }
b and strong=bold, i and em=italics, u=underline, s=strikethrough
Comment Entry Background
#qrformdiv { }
#qrform table { }
This is for the area behind the comment entry form.
Entry Image
.entry_text img {max-width: 534px;}
You can make it possibel to control how bit an image can be in your posts either on our own journal or a community but using the above code. If you maincontent or subcontent section is 600px then a max-width of 534 might be nice. You can also try adding the text-align attribute. This might work.
Font
color: #FFFFFF; font-family: "trebuchet ms", arial, sans-serif; font-size: 12px;
Font family should always have multiple fonts as back up. If I wanted my main font to be something fancy I can see on my computer then that font would go between the quotes. Adding , arial, san-serif means that if someone viewing my journal can't see the font between the quotes (not a font they have in their system) then it will show them the next font I've listed.
font-style
font-style: italic;
There are other options for font-style: normal, italic, oblique, & initial. The only options I've ever used are normal or italic. If you are going to use normal, generally you can just remove that line of the coding. On occasion you will need it to prevent your text from being italicize because of another bit of coding in your layout.
font-weight
font-weight: bold;
other options for this coding are normal, bold, bolder, lighter or increments of 100 (100, 200 etc up to 900). 400 is the same as normal and 700 is bold.
letter-spacing
letter-spacing: 1px;
Esentially what you are doing is adding a space between your letters like t h i s. Some fonts you use will look squished and letter-spacing comes in handy.
Opacity
background-color: rgba(0, 0, 0, 0.7);
0, 0, 0, indicates that the background image will be black while 0.7 indicates that the black will have opacity. If you use ColorPicker.com the zeros here represent the RGB of a color which you can find on ColorPicker.com. You can essentially make any color see through.
Rotate Image
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
You can rotate your image almost as much as you'd like.From -360 to 360 though -360 and 360 are essentially the same and are the same as not rotating at all.
Rounded Corners/Borders
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
-khtml-border-radius: 2px 2px 2px 2px;
(top left, top right, bottom right, bottom left), all codes listed for cross browser interaction. If I wanted all the "corners" to have the same radius I can eliminate three of the 2px and just have one which will tell the coding all sides are the same.
text-align
text-align: right;
center and left are also acceptable
text-decoration
text-decoration: underline;
also none, overline, line-through, blink, initial and inherit. If you are going to use none just remove the coding unless for some reason it continues to underline the text. If you are seeing underlined links go to your browser Options (Tools>Options>Content>Color).
text-shadow
text-shadow: 2px 2px 1px #bbbbbb;
horizontal offset, vertical offset, blur.
text-transform
text-transform: uppercase;
lowercase, none or capitalize are other options beyond uppercase
If you have any questions feel free to comment.