layout: splash of colour

[casey_bee]

works with: all LJ accounts
starts with style: S2--->Flexible Squares FRESH PAINT
colors used: yellow, orange, green, purple, black
best viewed: 1024x768px screen. Firefox browser.

SPLASH OF COLOUR


image preview
[live preview no longer available]

body {
margin-top: 30px;
background-color: #000000;
}

#content {
border: #ccff66 2px dotted;
}

#maincontent {
background-color: #330033;
border: none;
}

#header {
text-align: right;
border-bottom: #ccff66 10px solid ;
border-top: #ccff66 2px solid;
border-right: #ccff66 2px solid;
border-left: #ccff66 2px solid;
padding: 10px 20px 10px 10px;
text-transform: lowercase;
letter-spacing: 0px;
font-size: 12pt;
color: #330033;
}

#footer {
border-bottom: #ccff66 5px solid ;
border-top: #ccff66 1px solid;
border-right: #ccff66 1px solid;
border-left: #ccff66 1px solid;
padding: 5px;
text-transform: lowercase;
letter-spacing: 0px;
font-size: 10pt;
color: #330033;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ff9933;
font-size: 12pt;
}

div#header a:hover {
color: #ff9933;
font-size: 12pt;
border-bottom: #330033 2px dotted;
}

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

a, a:link, a:visited {
color: #006633;
font-weight: light;
text-decoration: none;
}

a:hover{
color: #ff9933;
font-weight: light;
text-decoration: none;
}

#sidebar {
border: #ccff66 2px dotted;
}

div.sbarbody a, div.sbarbody a:link, div.sbarbody a:visited {
color: #330033;
}

div.sbarbody a:hover {
font-weight: bold;
color: #330033;
text-decoration: none;
border: none;
}

li.sbartitle {
border: #330033 1px dotted;
color: #330033;
text-align: center;
font-weight: bold;
text-transform: lowercase;
padding: 2px;
}

.sbarcalendar {
color: #330033;
border: #ccff66 1px solid;
}

.sbarcalendarposts {
color: #330033;
border: #330033 1px solid;
background-color: #ff9933;
}

div.comments a, div.comments a:link, div.comments a:visited {
font-weight: bold;
color: #006633;
}

div.comments a:hover {
font-weight: bold;
color: #330033;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #ff9933;
}

.datesubjectcomment a:hover {
color: #330033;
text-decoration: none;
border: none;
}

.entry {
color: #330033;
font-size: 11px;
border: #ccff66 2px solid;
}

.subject {
color: #330033;
font-size: 14pt;
}

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 845px;
height: 260px;
background-repeat: no-repeat;
background-image: url("http://img81.imageshack.us/img81/8807/layoutmz4.png");
}



INSTRUCTIONS:
1. Customize Journal --> Select New Theme --> Find "FRESH PAINT flexible squares" and click Apply Theme [quickest way to do this is searching for "flexible squares" using the search feature]
2. Double check you got the FRESH PAINT theme because this layout is pretty much just an edit
3. Customize Your Theme --> Custom CSS --> make sure all drop-down boxes are set to YES
4. Copy and paste all the code from the above text box above and enter it into the Custom Stylesheet box
5. Save the changes. Feel free to change the text etc. to your liking.

CHANGING THE HEADER:
As sexy as the default header is, I'm pretty sure you want something different.

If you would like to delete the header then go to the custom CSS and delete everything from .headerimage { to the end of the text.

If you would like to change the image, simply replace the header image section with this:

.headerimage {
position: relative;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: THE WIDTH OF YOUR IMAGE IN PIXELS;
height: THE HEIGHT OF YOUR IMAGE IN PIXELS;
background-repeat: no-repeat;
background-image: url("YOUR IMAGE URL");
}

Feel free to muck around with the header image as much as you like and if you have any questions about it then please just ask!

TERMS OF USE:
1. Please credit vands88/geeky_ness somewhere in your profile. Why? Because there's so many things I could've done on my night off but I decided to do this for you wonderful people and the least you could do is credit me for my hard work.
2. Editing is okay, but editing it and then calling it yours is NOT.
3. No stealing my codes...please?
4. Comment if taking. Not mandatory, but it's good manners.

I strongly suggest you don't edit the codes unless you know what you're doing. I don't have time to answer and solve all of the comments saying "I changed this and now it's gone all wrong"...plus, the odds are I won't know what to do. So, if you edit it, on your own head be it.

NB: If you notice any mind-bogglingly obvious mistakes then please let me know. It's only my second completed layout so it's very possible that I've screwed up somewhere.

Comments make me happy. :-)