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.

Tags

Page Summary

fuesch — (no subject) [+0]

October 2025

Previous | Memories | Tell Someone | Next

fuesch

26 October 2007 @ 01:36 am

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

Edit (June 2, 2015): improved the CSS for functionality (no big changes in how the layout looks).
Edit (January 25, 2017): took CSS out of profile layout.
Edit (October 13, 2017): I replaced the old Photobucket links, so images are back now.

Fridge, please!

info

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

The sidebar and subcontent now have changeable widths.

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://fatfrog.info/Ma/A/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;
}

body > div[style*="width"] {
margin: 0px auto!important;
padding: 0px!important;
background-color: #EBE6E2!important;
border: none!important;
}

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

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

a:hover {
color: #E02607;
text-decoration: underline;
}

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

.entry p {
margin-top: 28px;
}

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

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

q {
font-style: italic;
}

q i {
font-style: normal;
}

/* ------- GENERAL ------- */

.ljuser a, .ljuser a:link {
color: #E02607;
}

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

.ljuser a:hover {
color: #E02607;
}

.clear {
display: none;
}

#content {
margin-left: 200px;
text-align: left;
}

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

#header a:visited {
color: #E02607;
}

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: 0px 50px 0px 55px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #B81EA4;
font-weight: normal;
text-transform: uppercase;
}

#sidebar {
margin: -150px 20px 0px 0px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/sidebar-right.png) repeat-y right, url(http://fatfrog.info/Ma/A/layout/fridgeplease/sidebar-left.gif) repeat-y left;
background-color: #E5E2CD;
font-size: 14px;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #284788;
width: 205px;
float: right;
text-align: left;
}

#sidebar > div[style*="margin"] {
position: relative;
margin: 15px 20px -15px 20px!important;
text-align: center;
background: #EBE6E2;
}

#sidebar > div[style*="margin"] div {
padding-bottom: 0px!important;
background: none!important;
}

#sidebar div:first-child {
margin-top: -20px;
padding-top: 120px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/sidebar-top.png) no-repeat 1px top;
}

#sidebar div:last-child {
padding-bottom: 10px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/sidebar-bottomleft.png) no-repeat bottom left, url(http://fatfrog.info/Ma/A/layout/fridgeplease/sidebar-bottomright.png) no-repeat bottom right;
}

.j-adv div {
display: none
}

.sbarbody {
padding: 10px 5px 0px 5px;
}

.sbarbody2 {
padding: 10px 5px 0px 20px;
}

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

.defaultuserpic {
text-align: center;
}

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

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

table.calendar {
margin: 0px auto;
}

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

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

.sbarcalendarposts a {
display: block;
}

.tagcloud {
padding: 0px 15px;
list-style: none;
}

.tagcloud span {
vertical-align: middle;
}

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

#maincontent > div[style*="margin"] {
margin: 5px 220px -5px 30px!important;
background: #EBE6E2!important;
}

#maincontent > div[style*="margin"] .allbanners-close {
text-align: left!important;
}

.clearfoot {
clear: both;
}

.lj-view-recent #footer, .lj-view-friends #footer {
margin: 0px auto;
text-align: center;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
background:url(http://fatfrog.info//Ma/A/layout/fridgeplease/footer.jpg) no-repeat;
width: 425px;
height: 40px;
color: #284788;
z-index: 100;
padding: 60px 85px 85px 85px;
clear: both;
}

.lj-view-recent #footer a:visited, .lj-view-friends #footer a:visited {
color: #E02607;
}

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

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

#footer + .clearfoot {
display: none;
}

/* ------- ENTRIES & FRIENDS ------- */

.subcontent {
margin: 0px 220px 30px 30px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/subcontent-left.png) repeat-y left 8px, url(http://fatfrog.info/Ma/A/layout/fridgeplease/subcontent-right.png) repeat-y right 8px;
}

.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;
}

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

.datesubject {
margin-right: -16px;
height: 176px;
padding-top: 0px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/datesubject-left.png) no-repeat left top, url(http://fatfrog.info/Ma/A/layout/fridgeplease/datesubject-right.png) no-repeat right top;
}

.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;
}

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

.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;
}

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

.entry {
margin: 0px 0px 0px 0px;
padding: 5px 20px 10px 120px;
color: #355FB6;
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;
}

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

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

.currents {
color: #EAD11F;
}

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

.comments {
position: relative;
top: 12px;
margin: 0px -20px 0px -120px;
padding-top: 16px;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/comments-left.png) no-repeat bottom left, url(http://fatfrog.info/Ma/A/layout/fridgeplease/comments-right.png) no-repeat bottom right;
}

.separator {
height: 20px;
}

/* ------- COMMENTS ------- */

.skiplinks {
text-align: center;
}

.box {
margin: 0px 220px 30px 30px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/subcontent-left.png) repeat-y left 8px, url(http://fatfrog.info/Ma/A/layout/fridgeplease/subcontent-right.png) repeat-y right 8px;
padding: 10px;
clear: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 14px;
line-height: 28px;
}

.box + .box {
margin-top: -30px;
padding-top: 50px;
text-align: center;
}

.commentbox {
margin-top: 27px;
}

.commentbox + a + .commentbox {
margin-top: 50px;
}

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

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

.commentreply {
padding-top: 6px;
font-size: 14px;
font-family: Arial, Verdana, Helvetica, sans-serif;
color: #355FB6;
line-height: 28px;
border-left: #88DEEE 1px solid;
border-right: #88DEEE 1px solid;
}

.commentreply + div {
min-height: 48px;
margin-top: 0px!important;
padding: 7px 5px 0px 5px;
line-height: normal;
text-align: left!important;
background: #eff5ff;
border: #88DEEE 1px solid;
border-top: none;
}

.commentreply + div div {
padding: 5px 0px 0px 0px!important;
text-align: left!important;
}

.commentreply + div div img {
vertical-align: text-bottom;
}

.commentboxpartial {
padding: 10px;
margin-top: 50px;
background: #eff5ff;
}

#qrform {
}

#qrform table {
border: none!important;
}

.commentbox #qrform {
}

#content input[type='text'], #content input.textbox, #content textarea {
padding: 2px;
background-color: #EEEEEE;
color: #284788;
}

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

.lj-view-reply .subcontent + .separator + .clear + div, .lj-view-reply .subcontent + .clear + div {
display: none;
}

#postform {
}

/* ------- CALENDAR ------- */

.lj-view-archive #maincontent {
margin: 0px 250px 30px 30px!important;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/subcontent-left.png) repeat-y left 8px, url(http://fatfrog.info/Ma/A/layout/fridgeplease/subcontent-right.png) repeat-y right 8px;
}

ul.year {
height: 106px;
margin-right: -16px;
padding: 70px 80px 0px 120px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/datesubject-left.png) no-repeat left top, url(http://fatfrog.info/Ma/A/layout/fridgeplease/datesubject-right.png) no-repeat right top;
}

ul.year li {
display: inline;
font-weight: bold;
}

ul.year li + li {
margin-left: 10px;
}

table.yeartable {
margin: 0px auto;
}

td.yearmonth {
border-style: none;
font-weight: bold;
}

td.yearmonth a {
font-weight: normal;
}

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

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

table.yeartable td.yeardate a {
display: block;
}

.lj-view-month #maincontent form {
height: 86px;
margin: 0px 204px -10px 30px;
padding: 90px 0px 0px 0px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/datesubject-left.png) no-repeat left top, url(http://fatfrog.info/Ma/A/layout/fridgeplease/datesubject-right.png) no-repeat right top;
}

.lj-view-month #maincontent form br, .lj-view-month #maincontent form + br , .lj-view-month #maincontent form + br + br {
display: none;
}

.lj-view-month .entry {
font-size: 0px;
}

.lj-view-month dt {
margin: 0px;
padding: 0px 0px 2px 0px;
font-size: 24px;
border-bottom: 1px solid #FFFFFF;
}

.lj-view-month dt b {
font-weight: normal;
}

.lj-view-month dd {
margin: 0px;
font-size: 12px;
}

.lj-view-day .skiplinks {
margin: 0px 220px 0px 30px;
}

/* ------- TAGS ------- */

.lj-view-tags #maincontent {
margin: 0px 250px 30px 30px!important;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/subcontent-left.png) repeat-y left 8px, url(http://fatfrog.info/Ma/A/layout/fridgeplease/subcontent-right.png) repeat-y right 8px;
}

.lj-view-tags h2 {
height: 46px;
margin: 0px -16px 0px 0px;
padding: 130px 80px 0px 120px;
font-size: 14px;
background: url(http://fatfrog.info/Ma/A/layout/fridgeplease/datesubject-left.png) no-repeat left top, url(http://fatfrog.info/Ma/A/layout/fridgeplease/datesubject-right.png) no-repeat right top;
}

ul.ljtaglist {
margin: 0px;
padding: 5px 20px 10px 120px;
list-style: none;
line-height: 28px;
}

ul.ljtaglist li {
padding: 0px;
}

ul.ljtaglist li + li {
}

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.


	This profile layout has a fixed width, changing the width would mess up the layout. Go to Edit Profile and insert the code into the Bio part. To copy the code, click in the text area and then press Ctrl+A and Ctrl+C. <lj-raw><center> <table width="405" border="0" cellpadding="0" cellspacing="0" bgcolor="#EAE4D1"> <tr><td colspan="3" background="http://fatfrog.info/Ma/A/layout/fridgeplease/ui_top.gif" height="102"> </td></tr><tr> <td width="15" background="http://fatfrog.info/Ma/A/layout/fridgeplease/ui_left.gif" valign="top"><img src="http://fatfrog.info/Ma/A/layout/fridgeplease/ui_lefttop.gif"></td> <td align="justify"><img src="http://fatfrog.info/Ma/A/layout/fridgeplease/ui_thingy.gif"><br> <font face="Geneva, Arial, Helvetica, sans-serif" color="#54A92A" size="2">GREEN TEXT</font><br><br> <font face="Geneva, Arial, Helvetica, sans-serif" color="#355FB6" size="2">BLUE TEXT</font><br><br> <font face="Geneva, Arial, Helvetica, sans-serif" color="#B81EA4" size="2">PURPLE TEXT</font><br><br> <font face="Geneva, Arial, Helvetica, sans-serif" color="#E02607" size="2">RED TEXT</font><br><br> <font face="Geneva, Arial, Helvetica, sans-serif" color="#F48917" size="2">ORANGE TEXT</font> </td><td width="15" background="http://fatfrog.info/Ma/A/layout/fridgeplease/ui_right.gif"> </td> </tr><tr><td colspan="3" background="http://fatfrog.info/Ma/A/layout/fridgeplease/ui_bottom.gif" height="34"> </td></tr> </table> </center></lj-raw> You don't have to use the lj-raw tags. With them you can only make line breaks/new paragraphs with <br> and <p>. Without the lj-raw tags you can also create line breaks and new paragraphs just by hitting the enter key. If you want to change the link color, put a font tag with a different color in your link. Like so: `<a href="URL"><font color="#54A92A">LINK TEXT</font></a>`