Fuesch's graphics & layouts - Layout (incl. one for profile): Fridge, please!

House Rules

~~Driver picks the music, shotgun shuts his cakehole.~~

Everything is snaggable - no need to ask.

Please credit.
<lj user=fuesch>

Comments are great.

Nominations are awesome.

If you find a typo, please let me know!

If you'd like a graphic customized, just ask - please don't edit it yourself.

I don't mind if you adjust layouts a bit.

Got a question? Don't be afraid to ask. But keep it on topic.

If your question/comment doesn't fit into any entry, please >send me a message<.

>Resources<

Tags

Page Summary

December 2009

Previous | Memories | Tell a Friend | Next

fuesch

26 October 2007 @ 01:36 am

Layout (incl. one for profile): Fridge, please!

Fridge, please!

info

based on Flexible Squares
works for all account types
tested in Internet Explorer 6 and Firefox 2
screen resolution should be at least 1024x768

how to

Go to the Customize Journal Page. Make sure Style System is S2.

Click on Look and Feel.

Choose the Flexible Squares layout.

Go to Custom Options > Custom CSS
» Use layout's stylesheet(s): No
» Use layout's stylesheet(s) when including custom external stylesheet: No
» Use external stylesheets: No
insert custom stylesheet

/* Fridge, please
http://fuesch.livejournal.com/12789.html */

body {
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/bodybg.jpg) repeat-y left top;
background-color: #EEEEEE;
text-align: right;
color: #284788;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0px;
}

a, a:link, a:hover {
color: #E02607;
text-decoration: none;
}

a:visited {
color: #F48917;
text-decoration: none;
}

blockquote {
border-top:#355FB6 2px solid;
border-bottom:#355FB6 2px solid;
}

p, td, blockquote {
font-size: 14px;
}

code, kbd, pre, tt {
font-family: monospace;
}

.ljuser a, .ljuser a:link, .ljuser a:hover {
color: #E02607!important;
background:none!important;
}

.ljuser a:visited {
color: #F48917!important;
background:none!important;
}

.userpicfriends, .userpicfriends font {
color: #284788;
}

#content {
width: 900px;
margin-left: auto; margin-right: 50px;
text-align: left;
}

#maincontent {
margin-top: 15px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #284788;
margin-right: 200px;
text-align: left;
}

#sidebar {
margin-top: -150px;
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/sbarbottom.gif) no-repeat bottom;
background-color: #E5E2CD;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #284788;
width: 205px;
float: right;
text-align: left;
}

#header {
padding: 80px 0px 0px 0px;
margin: 0px;
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/header.jpg) no-repeat left top;
height: 230px;
width: 540px;
color: #284788;
}

#footer {
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/footer.jpg) no-repeat;
width: 425px;
height: 40px;
color: #284788;
z-index: 100;
padding: 60px 85px 85px 85px;
clear: both;
}

/* header */

div#header a, div#header a:link, div#header a:hover, div#footer a, div#footer a:link, div#footer a:hover {
color: #E02607;
}

div#header a:visited, div#footer a:visited {
color: #F48917;
text-decoration: none;
}

ul.navheader {
padding: 0px;
text-align: right;
padding-right: 70px;
font-size: 14px;
text-transform: uppercase;
}

ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}

.title {
padding: 40px 50px 5px 50px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
color: #F48917;
line-height: 16px;
text-transform: uppercase;
}

.subtitle {
padding-left: 55px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #B81EA4;
font-weight: normal;
text-transform: uppercase;
}

/* sidebar */

div#sidebar a, div#sidebar a:link, div#sidebar a:hover {
color: #E02607;
}

div#sidebar a:visited {
color: #F48917;
text-decoration: none;
}

.defaultuserpic {
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/sbarheader.gif) no-repeat top;
width: 205px;
padding-top: 120px;
text-align: center;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/sbarbg.gif) repeat-y;
margin-top: -20px;
padding: 20px 5px 0px 5px;
margin-bottom: 20px;
}

.sbarbody2 {
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/sbarbg.gif) repeat-y;
margin-top: -20px;
padding: 20px 5px 0px 5px;
}

#sidebar_summary li.sbaritem {
margin: 0 10px;
padding: 3px 0;
border-bottom: 1px #DAD7C5 solid;
}

table.calendar {
margin-right: auto;
margin-left: auto;
}

.sbarcalendar {
border: #DAD7C5 1px solid;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}

.sbarcalendarposts {
border: #DAD7C5 1px solid;
background-color: #DAD7C5;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}

ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem, .tagcloud {
padding-left: 15px;
list-style: none;
}

li.sbartitle {
padding-left: 15px;
list-style: none;
margin-bottom: 10px;
margin-top: 10px;
color: #54A92A;
}

/* maincontent */

.subcontent {
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/entryheader.jpg) no-repeat left top;
width: 516px;
padding: 0px;
margin-left: 150px;
margin-bottom: 30px;
}

.entry {
margin: 0px 0px 0px 0px;
padding: 7px 20px 10px 10px;
color: #355FB6;
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/entrybg.jpg) repeat-y left top;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: left;
line-height: 28px;
}

.entry ul li {
padding-left: 5px;
margin-left: 15px;
}

.entry ol li {
padding-left: 5px;
margin-left: 15px;
}

.entry_text {
padding: 0px 0px 0px 110px;
}

.userpic {
position: relative;
float: left;
background: none!important;
padding: 44px 5px 5px 7px;
z-index: 15;
}

.userpicfriends {
position: relative;
float: left;
text-align: center;
background: none!important;
padding: 43px 5px 5px 7px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
z-index: 15;
}

.date {
padding-top: 40px;
line-height: 200%;
padding-right: 25px;
color: #EAD11F;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: right;
}

.subject {
text-align: left!important;
font-weight: bold;
padding: 60px 30px 10px 130px;
color: #54A92A;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
}

.subject a, .subject a:link, .subject a:hover {
color: #E02607;
}

.subject a:visited {
color: #F48917;
}

.datesubject {
height: 176px;
padding-top: 0px;
}

.currents {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0px 0px 0px 110px;
}

.ljtags {
color: #EAD11F;
margin-top: 28px;
}

.currents {
color: #EAD11F;
margin-top: -28px;
}

.ljtags a, .currents a {
color: #EAD11F;
}

.comments {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
padding: 0px 0px 0px 0px;
position: relative;
margin-left: -10px;
top: 15px;
width: 501px;
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/entrybottom.gif) no-repeat bottom left;
}

div.comments a, div.comments a:link, div.comments a:hover {
color: #E02607;
}

div.comments a:visited {
color: #F48917;
text-decoration: none;
}

/* maincontent */

.datesubjectcomment {
border-bottom: #54A92A 2px solid;
padding: 5px;
margin-top: 0px;
color: #54A92A;
line-height: 28px;
height: 100px;
}

.userpiccomment {
position: relative;
left: 0px;
padding: 5px;
margin: 0px 10px 10px -10px;
z-index: 15;
float: left;
}

.box {
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/entrybg.jpg) repeat-y top left;
width: 480px;
padding: 10px;
margin: 0px 20px 0px 150px;
clear: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
line-height: 28px;
}

input, textarea {
background-color: #EEEEEE;
color: #284788;
}

textarea.textbox {
width: 95% !important;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
line-height: 28px;
color: #355FB6;
}

.replytosubject {
font-weight: bold;
color: #54A92A;
padding: 20px 50px 0px 10px;
}

.replytoposter {
padding: 70px 50px 10px 10px;
color: #EAD11F;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 14px;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #355FB6;
line-height: 28px;
}

.commentbox {
margin-top: 56px;
padding: 0px -10px 0px -10px;
}

.datesubjectcomment a:link, .datesubjectcomment a:hover {
color: #E02607;
}

.datesubjectcomment a:visited {
color: #F48917;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
}

.commentinfo {
background-color: #eff5ff;
margin-top: 10px;
width: 100%;
}

/* maincontent -- year/achive pages */

ul.year {
text-align: center;
padding-bottom: 40px;
}

ul.year li {
display: inline;
}

table.yeartable {
margin-left: 150px;
margin-right: auto;
background:url(http://s125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/entrybg.jpg) repeat-y top right;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid #355FB6;
}

table.yeartable td.yearday {
color: #54A92A;
text-align: center;
font-weight: bold;
}

td.yearmonth {
border-style: none;
}

/* footer */

ul.navfooter{
padding: 0px;
margin: 0px;
}

ul.navfooter li  {
display: inline;
margin: 0 5px 0 5px;
}

.clearfoot {
clear: both;
}

/* misc  */

.clear {
height: 28px;
}

.skiplinks {
text-align: center;
}

.headerimage {
/* for formatting header image */
}

.separator{
/* for formatting separators between entries */
height: 20px;
}

* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%;
clear: none;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
border-width: 1px;
border-style: solid;
border-color: #999999;
background-color: #c2cde0;
}

Go to Custom Options > Sidebar
» Show the default user picture on the sidebar?: Yes
and make it the first box in the sidebar.

The ads of a plus account take their background color from the Custom Options. If you want to adjust the color, go to Colors and change them to #EEEEEE. But don't ask me which - I have no idea. Just change everything that has the same color as the ad background - it won't affect the rest of the layout.


	Hello, my name is fuesch and I'm a Hufflepuff. If Jo had chosen different colors for Hufflepuff, I would have got a black and yellow scarf. But she didn't and so I didn't (because I didn't want to be mistaken for a fan of our city's football (soccer) club) so I got a Gryffindor colors scarf instead. ...Even though I'd be a Ravenclaw if I wasn't a Hufflepuff. But I like the Gryffindor colors better. Ooh, look: I also made you a matching table for your user info. And you can choose from different text colors. Or use all of them. Or just some. Go to Edit Profile and insert the code into the Bio part. ctrl+a & ctrl+c <lj-raw><table width="405" border="0" cellpadding="0" cellspacing="0" bgcolor="#EAE4D1"> <tr><td colspan="3" background="http://i125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/ui_top.gif" height="102"> </td></tr><tr> <td width="15" background="http://i125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/ui_left.gif" valign="top"><img src="http://i125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/ui_lefttop.gif"></td> <td align="justify"><img src="http://i125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/ui_thingy.gif"><p> <font face="font-family: Geneva, Arial, Helvetica, sans-serif" color="#54A92A" style="line-height:18px;font-size:12px;">green text</font> <p> <font face="font-family: Geneva, Arial, Helvetica, sans-serif" color="#355FB6" style="line-height:18px;font-size:12px;">blue text</font> <p> <font face="font-family: Geneva, Arial, Helvetica, sans-serif" color="#B81EA4" style="line-height:18px;font-size:12px;">purple text</font> <p> <font face="font-family: Geneva, Arial, Helvetica, sans-serif" color="#E02607" style="line-height:18px;font-size:12px;">red text</font> <p> <font face="font-family: Geneva, Arial, Helvetica, sans-serif" color="#F48917" style="line-height:18px;font-size:12px;">orange text</font> </td><td width="15" background="http://i125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/ui_right.gif"> </td> </tr><tr><td colspan="3" background="http://i125.photobucket.com/albums/p72/fuesch/layout/fridgeplease/ui_bottom.gif" height="34"> </td></tr> </table></lj-raw>