victoriaely (victoriaely) wrote in lemon_craze,
victoriaely
victoriaely
lemon_craze

Layout tutorial: Opal (S2)

We'll go from Photobucket - Video and Image Hosting to Photobucket - Video and Image Hosting.
There are no images used for this, just css coding.


I decided to be more organized for this tut, hope it'll be clear.

First, I'll explain the way I work: I usually start working form the outside: start with the backgrounds and end up fixing the entry details. As this layout doesn't use any images, the only thing I had to decide on was how I was going to use the colors.

For the colors, I used one of the color schemes I posted a few days ago:

_______________________

The code we start with (the default LJ code) is:




Background color



body {
font-family: sans-serif;
background-color: #2d3851;
margin: 10px;
}





body {
font-family: sans-serif;
background-color: #346667;
margin: 10px;
}





Header - journal name



#headerinfo {
background-color: #2d3851;
color: #ffffff;
text-align: right;
font-size: 10px;
padding: 2px;
margin-top: 1px;
}







#headerinfo {
display: none;
background-color: #2d3851;
color: #ffffff;
text-align: right;
font-size: 10px;
padding: 2px;
margin-top: 1px;
}





Header - background color



#header { color: #e9f2fc; }







#header {
color: #e9f2fc;
background: #81b38d;
}






Header - Title color



#header { color: #e9f2fc; background: #81b38d; }






#header { color: #346667;
background: #81b38d; }





Content area - background color



#bodycontent { background-color: #7c8aa4; border: 1px solid #2d3851; padding: 3px; }

#content {
background-color: #bfc4cb;
border: 1px solid #a9b0b9;
padding: 4px;
}







#bodycontent { background-color: #81b38d; border: 1px solid #2d3851; padding: 3px; }


#content {
background-color: #81b38d;
border: 1px solid #a9b0b9;
padding: 4px;
}






Content area - border



#content {
background-color: #bfc4cb;
border: 1px solid #a9b0b9;
padding: 4px;
}






#content {
background-color: #81b38d;
border: 0px solid #a9b0b9;
padding: 4px;
}






Header links - background and border



#nav A {
border: 1px solid #2d3851;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
height: 20px;
text-decoration: none;
color: #ffffff;
background-color: #425378;
}






#nav A {
border: 0px solid #2d3851;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
height: 20px;
text-decoration: none;
color: #ffffff;
background-color: #81b38d;
}






Header links - font



#nav A {
border: 1px solid #2d3851;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
height: 20px;
text-decoration: none;
color: #ffffff;
background-color: #425378;
}






#nav A {
border: 0px solid #2d3851;
padding-left: 10px;
padding-right: 10px;
padding-top: 2px;
padding-bottom: 2px;
height: 20px;
text-decoration: none;
color: #ecf2f2;
text-transform: lowercase;

background-color: #81b38d;
font-size: 16px;

}






Header links - mouse hover



#nav A:Hover { background-color: #2d3851; }







#nav A:Hover { background-color: #81b38d;
font-weight: bold;
}







Sidebar colors



.columncontent {
background-color: #425378;
border: 1px solid #2d3851;
padding: 3px;
width: 200px;
font-size: 12px;
color: #ffffff;
}







.columncontent {
background-color: #b2cccb;
border: 1px solid #2d3851;
padding: 3px;
width: 200px;
font-size: 12px;
color: #346667;
}






Sidebar - subject list items



.columnitem {
background-color: #a9b0b9;
padding: 3px;
margin-top: 5px;
color: #333333;
border-top: 1px solid #88919e;
border-bottom: 1px solid #88919e;
overflow: hidden;
}







.columnitem {
background-color: #b2cccb;
padding: 3px;
margin-top: 5px;
color: #346667;
border-top: 1px dotted #346667;
border-bottom: 1px dotted #346667;

overflow: hidden;
font-weight: bold;
}






Calendar - days with posts



#cal A {
text-decoration: none;
color: #333333;
}

.calactitem {
float: left;
margin: 1px;
width: 23px;
font-size: 11px;
text-align: center;
background-color: #a9b0b9;
border-right: 1px solid #425378;
border-bottom: 1px solid #425378;
}







#cal A {
text-decoration: none;
color: #346667;
}


.calactitem {
float: left;
margin: 1px;
width: 23px;
font-size: 11px;
text-align: center;
color: #b2cccb;
background-color: #ecf2f2;
border-right: 0px solid #425378;
border-bottom: 0px solid #425378;

}






Calendar - days without posts



.calinitem {
float: left;
margin: 1px;
width: 23px;
font-size: 11px;
text-align: center;
border-right: 1px solid #a9b0b9;
border-bottom: 1px solid #a9b0b9;
}







.calinitem {
float: left;
margin: 1px;
width: 23px;
font-size: 11px;
text-align: center;
border-right: 1px solid #346667;
border-bottom: 1px solid #346667;

}






Entries colors



.entries { color: #333333; }







.entries { background-color: #ecf2f2;
color: #346667;
}







Entries - Info lines



.entryinfo {
background-color: #a9b0b9;
font-size: 12px;
padding: 4px;
color: #333333;
}
.entrylinks {
border-bottom: 1px solid #bfc4cb;
background-color: #a9b0b9;
padding-top: 4px;
padding-bottom: 4px;
font-size: 12px;
}

.entrylinks A {
text-decoration: none;
padding-top: 4px;
padding-bottom: 4px;
white-space: nowrap;
color: #333333;
border-right: 1px solid #bfc4cb;
}

.entrylinks A:Hover {
background-color: #bfc4cb;
}







.entryinfo {
background-color: #ecf2f2;
font-size: 12px;
padding: 1px;
color: #346667;
text-transform: lowercase;
font-weight: bold;

}


.entrylinks {
border-bottom: 0px solid #bfc4cb;
background-color: #ecf2f2;

padding-top: 4px;
padding-bottom: 4px;
font-size: 12px;
color: #346667;
text-transform: lowercase;
font-weight: bold;


}

.entrylinks A {
text-decoration: none;
padding-top: 4px;
padding-bottom: 4px;
white-space: nowrap;
border-right: 0px solid #bfc4cb;
color: #346667;
text-transform: lowercase;
font-weight: bold;


}

.entrylinks A:Hover {
background-color: #ecf2f2;
}






Entries - info lines separators



.entrydivider {
border-top: 1px solid #88919e;
border-bottom: 1px solid #bfc4cb;
}







.entrydivider {
border-bottom: 1px dotted #346667;
}





Userpics



#userpic { float: right; }

.userpic2 {
float: right;
text-align: right;
margin-top: 2px;
margin-right: 3px;
}







#userpic { float: right;
padding: 5px;
border: 1px dotted #346667;
background-color: #ecf2f2;

}

.userpic2 {
float: right;
text-align: right;
margin-top: 2px;
margin-right: 3px;
padding: 5px;
border: 1px dotted #346667;


margin-right: 3px;
background-color: #ecf2f2;


}






Navigation links



.systemmessage {
background-color: #425378;
color: #ffffff;
border: 1px solid #7c8eb6;
font-size: 12px;
}

.systemtext {
font-weight: normal;
padding-left: 10px;
padding-right: 10px;
}

.systemmessage A {
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
padding-top: 4px;
padding-bottom: 4px;
}

.systemmessage A:Hover {
background-color: #2d3851;
}








.systemtext {
font-weight: normal;
padding-left: 10px;
padding-right: 10px;
}

.systemmessage A {
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
color: #346667;
padding-top: 4px;
padding-bottom: 4px;
}

.systemmessage A:Hover {
background-color: #b2cccb;
}

.systemmessage input, .systemmessage textarea, .systemmessage select {
background-color: #b2cccb;
color: #346667;

}

.systemmessage TD {
padding: 4px;
font-size: 12px;
color: #346667;
}






Borders



.border4 { border: 1px solid #2d3851; }
.border3 { border: 1px solid #bfc4cb; }
.border2 { border: 2px solid #7c8eb6; }







.border4 { border: 1px dotted #346667; }
.border3 { border: 0px solid #bfc4cb; }
.border2 { border: 0px solid #7c8eb6; }






Links color



-






a
{
color: #346667;
}









The final code is:


These are the basic customizations. There are other elements you can change and more changes than the ones I have presented.

Hope this is useful :) I'd love to hear your opinions/suggestions
Tags: layout: opal, tutorial: layout
Subscribe
  • Post a new comment

    Error

    default userpic
    When you submit the form an invisible reCAPTCHA check will be performed.
    You must follow the Privacy Policy and Google Terms of use.
  • 2 comments