Jenny (minty_peach) wrote,

Flexible Squares Layouts

* There are very few CSS guides on LJ. I think very few people have the time or patience. I was inspired by the guide at Cartonage, which is so incredibly helpful and well put together. I thought it would help those who visit my journal if I had a similar guide.

* This is a work in progress, so keep checking back for updates. ;]

The RED color in each picture will indicate
what section I am talking about. Click the small images to get a larger view.


body {

click it
Controls the look of the entire page, including background color or image, the main font and font size of the entire page. Usually looks like this:

body {
margin: 50px 0px 50px 0px;
background-color: #444444;
font-family: "Verdana", sans-serif;
text-align: left;
font-size: 10px;
color: #777777;
background-image: url(''); <-- you would add a background URL here
background-repeat: repeat;
}


#content {

click it
Controls the look of the part of the page that contains every section (like entry, sidebar, header links, etc.) Usually looks like this:

#content {
width: 780px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
}


.comments {

click it
Controls the look of the comment section at the bottom of each entry. You can add a background, change the text alignment, etc. Controlled by this section:

.comments {
font-size: 8pt;
text-align: right;
font-weight: none;
padding: 5px;
position: relative;
color: #888888;
top: 10px;
border-top: 1px dashed #cccccc;
}

but also includes these sections when it comes to the links:

div.comments a, div.comments a:link, div.comments a:visited {
color: #999999;
padding: 8pt;
text-transform: uppercase;
}

div.comments a:hover {
color: #777777;
}


blockquote {

click it
Controls the look of any text you add into a blockquote tag. Allows you to change the background color, text size, text color, or add a border so this text will stand out in any entry. Looks like this:

blockquote {
margin: 5px; padding: 5px;
color: #666666;
font-size: 10px;
border: 1px solid #bbbbbb;
background: #f5f5f5;
text-align: justify;
}


#header, #footer {

click it
This IS NOT where you are supposed to put your header image. This section controls the "Entry, Calendar, Friends, and Profile" links that are located at the very top of the layout. Its sister section called #footer { controls the back # entries and forward # entries links at the very bottom of the layout. Looks like this:

#header, #footer { (sometimes these will be in separate sections)
width: auto;
padding: 10px;
text-align: center;
background-color: #444444;
font-size: 10px;
color: #999999;
text-transform: lowercase;
}

these sections control the header and footer links:

div#header a, div#header a:link, div#header a:visited {
color: #FDFDFD;
font-size: 10px;
text-transform: uppercase;
}

div#header a:hover {
color: #999999;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #FDFDFD;
font-size: 10px;
text-transform: uppercase;
}

div#footer a:hover {
color: #999999;
}


.headerimage {

click it
This is the section located at the top of the Content. It allows you to add an image there. You DO NOT need to add this section to the CSS again. (because i find that most people do instead of actually looking for it); Looks like this:

.headerimage {
position: relative;
width: 0px; <-- important
height: 0px; <-- important
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(''); <-- important
background-repeat: no-repeat;
}


#maincontent {

click it
This section controls the space around the entries, and is key to making space for your sidebar (the margin depends on what side you want your sidebar on.) Basically looks like this:

#maincontent {
margin-left: 190px;
}




---> Please see my FAQ Page for questions and answers.

IF YOU ASK A QUESTION HERE, I WILL DELETE IT WITHOUT ANSWERING IT.
Tags: !ff css guide, !help, !important
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded  

  • 45 comments
Previous
← Ctrl← Alt
Next
Ctrl →Alt →
Previous
← Ctrl← Alt
Next
Ctrl →Alt →