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
Options
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.
Comment Entry
#qrformdiv { }
#qrform table { }
This is for the area behind the comment entry form.
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 Basics
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.
Inner Border
outline: 20px solid #fff;
outline-offset: -20px;
Occasionally you'll come across an area that if you add a border it will make the section larger than the rest of your journal so try this outline feature to make the border go inside of the area.
Rounded Corners
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.
Transparent
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.
Content Areas
Centering
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.
Sometimes the auto margins don't work. Especially if your content has a position of absolute. In that case, try:
left: 0; right: 0; margin: auto;
text-align: center;
This is similar to the left and right auto but it works together with the additional coding to center things. In my case, my journal width is 70% of my entire window. Because my header is absolute, I can control where the navbar is landing but this means my Title won't center. It just stays to the left at the edge of that 70% window. But the left and right 0 are essentially an auto, along with that margin auto making the text-align: center work.
Images
Entry Image
.entry_text img { max-width: 534px; }
You can make it possible 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.
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.
Text
Coloring 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
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;
Essentially 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.
text-align
text-align: right;
center and left are also acceptable
text-decoration
text-decoration: underline;
or
text-decoration-line: underline;
text-decoration-style: double;
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).
The line style can be solid, double, dotted, dashed, wavy, initial, and inherit.
text-shadow
text-shadow: 2px 2px 1px #bbbbbb;
horizontal offset, vertical offset, blur.
text stroke
-webkit-text-stroke: 10px #202C5C;
paint-order: stroke fill;
or
-webkit-text-stroke-color: #ffffff;
-webkit-text-stroke-width: 10px; or -webkit-text-stroke-width: 10px 10px 10px 10px;
When dealing with 4 px numbers they are always TOP, RIGHT, BOTTOM, LEFT. The stroke around text is great for when say your journal title is disappearing into an image. This gives some separation and makes the text pop.
text-transform
text-transform: uppercase;
lowercase, none or capitalize are other options beyond uppercase
If you have any questions feel free to comment.
Design
Options
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.
Comment Entry
#qrformdiv { }
#qrform table { }
This is for the area behind the comment entry form.
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 Basics
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.
Inner Border
outline: 20px solid #fff;
outline-offset: -20px;
Occasionally you'll come across an area that if you add a border it will make the section larger than the rest of your journal so try this outline feature to make the border go inside of the area.
Rounded Corners
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.
Transparent
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.
Content Areas
Centering
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.
Sometimes the auto margins don't work. Especially if your content has a position of absolute. In that case, try:
left: 0; right: 0; margin: auto;
text-align: center;
This is similar to the left and right auto but it works together with the additional coding to center things. In my case, my journal width is 70% of my entire window. Because my header is absolute, I can control where the navbar is landing but this means my Title won't center. It just stays to the left at the edge of that 70% window. But the left and right 0 are essentially an auto, along with that margin auto making the text-align: center work.
Images
Entry Image
.entry_text img { max-width: 534px; }
You can make it possible 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.
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.
Text
Coloring 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
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;
Essentially 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.
text-align
text-align: right;
center and left are also acceptable
text-decoration
text-decoration: underline;
or
text-decoration-line: underline;
text-decoration-style: double;
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).
The line style can be solid, double, dotted, dashed, wavy, initial, and inherit.
text-shadow
text-shadow: 2px 2px 1px #bbbbbb;
horizontal offset, vertical offset, blur.
text stroke
-webkit-text-stroke: 10px #202C5C;
paint-order: stroke fill;
or
-webkit-text-stroke-color: #ffffff;
-webkit-text-stroke-width: 10px; or -webkit-text-stroke-width: 10px 10px 10px 10px;
When dealing with 4 px numbers they are always TOP, RIGHT, BOTTOM, LEFT. The stroke around text is great for when say your journal title is disappearing into an image. This gives some separation and makes the text pop.
text-transform
text-transform: uppercase;
lowercase, none or capitalize are other options beyond uppercase
If you have any questions feel free to comment.