Fuesch's graphics & layouts

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

August 2024

Previous | Memories | Tell Someone | Next

fuesch

28 February 2011 @ 10:27 pm

Pretty Odd layout and matching profile layout

I don't know if you remember, but once upon a time I liked Panic! at the Disco. And because of the upcoming release of the second album there was a layout contest at

patd, the official LJ community. I made a layout and it was chosen, which made me ridiculously proud, especially since apparently the band had seen and chosen it. They didn't like the original header (linked so you can use it, if you prefer that one) though, so I made another one.
After the split the comm got a new layout and I was free to post my layout here. But since I master procrastination like I studied it (seriously, I should have a degree), I didn't until now. So I made it my one layout a month February project and made some small changes.

Edit (March 16, 2016): Profile layout edited, because the valign attribute isn't supported in HTML5.

Pretty Odd

Click here for live preview, then click on the layout's icon.

info

based on Flexible Squares
works for all account types
tested in Firefox 3 and Google Chrome 9. Also in Internet Explorer 8, but there it looked shit and right now I can't be bothered to fix it

how to

Go to the Customize Journal page.

Make sure Style System is S2.

Choose the Flexible Squares layout.

Go to 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

/* Pretty Odd
http://fuesch.livejournal.com/23596.html */

body {
background-color: #3D2034;
text-align: center;
color: #3C341F;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
margin: 20px 0 20px 0;
}

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

a:visited, a:active {
color: #3D2034;
text-decoration: none;
}

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

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

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

blockquote {
background: #A6B7AB;
padding: 5px;
}

q {
font-style: italic;
}

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

.ljuser img { 
width: 0px;
height: 0px;
background-repeat: no-repeat;
/*so that IE users will still see an image*/
background-image:url(http://fatfrog.info/Ma/A/layout/PrettyOdd/user.png); 
padding: 18px 0px 0px 18px;
}

.ljuser img[src="http://stat.livejournal.com/img/user.gif"] {
background-image:url(http://fatfrog.info/Ma/A/layout/PrettyOdd/user.png);
padding: 18px 0px 0px 18px;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-image:url(http://fatfrog.info/Ma/A/layout/PrettyOdd/user.png);
padding: 18px 0px 0px 18px;
}
	
.ljuser a, .ljuser a:link, .ljuser a:visited, .ljuser a:hover {
color: #3D2034!important;
font-style: italic;
}

.clear {
height: 15px;
}

.headerimage {
}

#content {
width: 800px;
margin-left: auto;
margin-right: auto;
}

#header {
padding: 10px 0px 20px 0px;
margin-bottom: 25px;
background: url(http://fatfrog.info/Ma/A/layout/PrettyOdd/header1.jpg) top center no-repeat;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #E2B548;
text-transform: uppercase;
}

ul.navheader {
padding: 328px 0px 20px 0px;
margin: 0px;
}

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

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

div#header a:hover, div#footer a:hover {
color: #E2B548;
text-decoration: underline;
}

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

.view {
font-weight: bold;
}

.title {
display: none;
}

.subtitle {
display: none;
}

#sidebar {
padding-top: 15px;
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #C1776A;
width: 180px;
float: right;
text-align: left;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:hover, div#sidebar a:visited {
color: #99AA9E!important;
text-decoration: none;
}

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

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

.sbarbody2 {
padding: 0 15px 0 15px;
}

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

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

.sbarcalendar {
border: #512343 1px solid;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
}

.sbarcalendarposts {
border: #512343 1px solid;
background-color: #512343;
text-align: center;
font-family: Georgia, "Times New Roman", Times, 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: 12px 50px 20px 10px;
list-style: none;
background: url(http://fatfrog.info/Ma/A/layout/PrettyOdd/sidebartitle.png) top right no-repeat;
margin-top: 10px;
margin-bottom: -15px;
}

.defaultuserpic {
text-align: center;
}

#maincontent {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #3C341F;
margin-right: 200px;
text-align: left;
}

#footer {
background: url(http://fatfrog.info/Ma/A/layout/PrettyOdd/header1.jpg) bottom center no-repeat;
padding: 23px 0px 25px 0px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #E2B548;
text-transform: uppercase;
z-index: 100;
clear: both;
}

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

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

.viewing {
font-weight: bold;
}

.clearfoot {
clear: both;
}

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

.subcontent {
width: 585px;
background: url(http://fatfrog.info/Ma/A/layout/PrettyOdd/bg.gif) center;
}

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

.userpic {
position: relative;
background: #3D2034 url(http://fatfrog.info/Ma/A/layout/PrettyOdd/iconbg.png) bottom right no-repeat;
height: 123px;
top: 15px;
padding: 45px 16px 0px 0px;
margin: -20px 0px 0px -5px;
float: right;
z-index: 15;
}

.userpicfriends {
position: relative;
float: right;
background: #3D2034 url(http://fatfrog.info/Ma/A/layout/PrettyOdd/iconbg.png) bottom right no-repeat!important;
height: 123px;
top: 15px;
padding: 45px 16px 0px 0px;
margin: -20px 0px 0px -5px;
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
z-index: 15;
}

.userpicfriends, .userpicfriends font {
color: #3D2034;
font-style: italic;
}

.datesubject {
background: url(http://fatfrog.info/Ma/A/layout/PrettyOdd/subject.png) top left no-repeat;
height: 163px;
}

.date {
padding: 20px 0px 10px 50px;
color: #CCBAA4;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
}

.subject {
font-weight: bold;
font-style: italic;
padding: 35px 142px 0px 10px;
color: #DDB64D;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
text-align: center;
}

.subject a, .subject a:link, .subject a:visited {
color: #EDC1AE;
}

.subject a:hover{
color: #EDC1AE;
text-decoration: underline;
}

.entry {
margin: 0px 10px 0px 10px;
padding: 10px 10px 0px 10px;
color: #3C341F;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
text-align: left;
}

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

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

.ljtags {
margin-top: 20px;
background: #A6B7AB;
padding: 5px;
width: 250px;
font-size: 11px;
}

.currents {
margin-top: -15px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 11px;
background: #A6B7AB;
padding: 5px;
width: 250px;
}

.comments {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
text-align: right;
margin: 0px -10px 0px -10px;
background: url(http://fatfrog.info/Ma/A/layout/PrettyOdd/entry.png) bottom center no-repeat;
padding: 45px 85px 60px 0px;
position: relative;
}

div.comments a, div.comments a:link, div.comments a:hover, div.comments a:visited {
color: #485827;
text-decoration: none;
}

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

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

.skiplinks {
text-align: center;
color: #3D2034;
text-transform: uppercase;
font-size: 11px;
}

.skiplinks a, .skiplinks a:link, .skiplinks a:hover, .skiplinks a:visited {
text-align: center;
color: #DDB64D;
border: 1px solid #DDB64D;
padding: 2px 6px;
}

.box {
width: 545px;
background: #99AA9E url(http://fatfrog.info/Ma/A/layout/PrettyOdd/entry.png) bottom center no-repeat;
padding: 10px 10px 110px 10px;
clear: left;
color: #C1776A;
}

.box a, .box a:link, .box a:hover, .box a:visited {
color: #3D2034;
}

.commentbox {
margin: 10px 0px;
padding: 0px 0px 5px 0px;
background: #A6B7AB;
}

.datesubjectcomment {
background-color: #D6612C;
padding: 5px;
margin-top: 20px;
color: #DDB64D;
}

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

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

.commentreply {
position: relative;
margin: 10px;
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #3C341F;
}

.commentboxpartial {
padding: 10px;
margin: 10px;
background: #A6B7AB;
}

#content + div {
background-color: #3D2034!important;
border: none!important;
}

/* COMMENTING ------------------------------------------------------------------------------------------------------------------------------------------------- */

.replytoposter {
padding: 5px 0px 10px 20px;
color: #CCBAA4;
font-size: 12px;
}

.replytosubject {
font-weight: bold;
font-style: italic;
padding: 35px 142px 0px 10px;
color: #DDB64D;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
text-align: center;
}

.replytosubject a, .replytosubject a:link, .replytosubject a:hover, .replytosubject a:visited {
color: #EDC1AE;
}

* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute;
background: #99AA9E;
}

input, textarea {
background: #A6B7AB;
color: #3D2034;
}

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

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

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

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

.year a {
color: #99AA9E;
}

.active {
padding: 0px 3px;
color: #C1776A;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
width: 565px;
background: #99AA9E url(http://fatfrog.info/Ma/A/layout/PrettyOdd/entry.png) bottom no-repeat;
padding: 10px 10px 120px 10px;
}

td.yearmonth {
border-style: none;
color: #C1776A;
font-size: 20px;
}

td.yearmonth a {
font-size: 14px;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background: #A6B7AB;
color: #C1776A;
padding: 2px 7px;
}

table.yeartable td.yearday {
background-color: #D6612C;
padding: 5px 2px;
text-align: center;
color: #DDB64D;
font-weight: bold;
border: 1px solid #DDB64D;
}

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

.ljtaglist {
margin-left: auto;
margin-right: auto;
width: 545px;
background: #99AA9E url(http://fatfrog.info/Ma/A/layout/PrettyOdd/entry.png) bottom no-repeat;
padding: 10px 10px 120px 10px;
}

ul.ljtaglist li {
list-style: inside circle;
padding: 2px 0px;
}

/* EXTRAS ------------------------------------------------------------------------------------------------------------------------------------------------------ */

.caption img {
border-bottom: 5px solid #99AA9E;
margin-bottom: 2px;
}

.caption {
background: #A6B7AB;
padding-bottom: 2px;
font-size: 11px;
text-align: right;
}

The ads of a plus account take their color from the Custom Options. If you want to adjust the colors, go to Style and change Page - Background color of the outer table and Entries - Border color of the content and header/footer boxes.


	*Profile 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="585" border="0" cellpadding="0" cellspacing="0"> <tr><td height="67" colspan="4" background="http://fatfrog.info/Ma/A/layout/PrettyOdd/profile-top.png"> </td></tr> <tr> <td width="30" bgcolor="#D6612C" height="71" background="http://fatfrog.info/Ma/A/layout/PrettyOdd/profile-topleft.png"> </td> <td width="392" bgcolor="#D6612C" valign="middle" align="center"><font face="Georgia, Times New Roman, Times, serif" size="3" color="#DDB64D"><b><i> HEADLINE IF YOU WANT </i></b></font></td> <td width="133" height="71" background="http://fatfrog.info/Ma/A/layout/PrettyOdd/profile-topright1.png"> </td> <td width="30" bgcolor="#D6612C" height="71" background="http://fatfrog.info/Ma/A/layout/PrettyOdd/profile-topright2.png"> </td></tr> <tr><td height="28" colspan="4" background="http://fatfrog.info/Ma/A/layout/PrettyOdd/profile-topbottom.png"> </td></tr> <tr> <td width="30" background="http://fatfrog.info/Ma/A/layout/PrettyOdd/profile-left.png"> </td> <td colspan="2" width="525" bgcolor="#99AA9E"> <font face="Georgia, Times New Roman, Times, serif" size="2" color="#3C341F"> TEXT GOES HERE </font></td> <td width="30" background="http://fatfrog.info/Ma/A/layout/PrettyOdd/profile-right.png"> </td></tr> <tr><td height="112" colspan="4" background="http://fatfrog.info/Ma/A/layout/PrettyOdd/profile-bottom.png"> </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="#512343">LINK TEXT</font></a>`