fuesch | Converse layout & matching profile layout and a single icon

The layout was made for this challenge. I knew that comm and promised myself to never go there again, because it's really bad for my self esteem. But then it was in

lj_spotlight and for some reason (I still have absolutely no idea why) I clicked the link. I found the challenge and because I seem to be unable to resist a challenge, I decided to make a layout for it. But then my muse left me without saying goodbye or telling me when it would be back. As always when this happens I was depressed. I looked through my layout and fandom folders but found nothing. So I went looking for some inspiration at sxc.hu. And I found it! Beautiful picture is beautiful!
So then I got creative. I just ignored the challenge terms, because I can't work like that. Because if I try to work like that I can't see anything in my mind. The requirement just sits there and blocks the way for any ideas. And usually my layouts aren't built that simple, so I thought a challenge term or two will be in there when I just follow the muse.
And now I'm gonna go and see which challenge terms have made it in.

Converse

info

based on Flexible Squares
works for all account types
tested in Internet Explorer 6 and Firefox 2

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

/* Converse
http://fuesch.livejournal.com/20359.html */

body {
background: #E5E2D5 url(http://fatfrog.info/Ma/A/layout/converse/bg.gif) top left repeat-y;
margin: 0px 0px 20px 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 12px;
color: #000000;
}

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

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

a:hover {
color: #8C0000;
text-decoration: none;
}

code, kbd, pre, tt {
font-family: "Courier New", Courier, monospace;
font-size: 12px;
}

code {
background: #FFFFFF;
}

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

blockquote {
background: #FFFFFF url(http://fatfrog.info/Ma/A/layout/converse/quote.gif) top left no-repeat;
padding: 45px 10px 10px 20px;
}

q {
font-style: italic;
}

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

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color: transparent;
/*so that IE users will still see an image*/
background-image: url(http://fatfrog.info/Ma/A/layout/converse/user.gif);
padding: 15px 0px 0px 15px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color: transparent;
background-image: url(http://fatfrog.info/Ma/A/layout/converse/user.gif);
padding: 15px 0px 0px 15px !important;
}

.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://fatfrog.info/Ma/A/layout/converse/comm.gif);
padding: 15px 0px 0px 25px !important;
}

.clear {
height: 15px;
}

#content {
background: url(http://fatfrog.info/Ma/A/layout/converse/navheader.gif) top left repeat-x;
}

#header {
height: 245px;
background: url(http://fatfrog.info/Ma/A/layout/converse/header.jpg) top left no-repeat;
padding: 50px 50px 0px 490px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
color: #000000;
}

ul.navheader {
padding: 0px 0px 1px 0px;
margin-bottom: 50px;
background: url(http://fatfrog.info/Ma/A/layout/converse/navi.gif) top left;
line-height: 22px;
}

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

div#header a, div#header a:link, div#header a:visited {
color: #E5E2D5;
}

div#header a:hover {
color: #EEECE4;
}

.title {
font-family: "Verdana", sans-serif;
font-size: 20px;
font-weight: bold;
top: 10px;
}

.subtitle {
font-family: "Verdana", sans-serif;
font-size: 20px;
top: 10px;
}

#sidebar {
float: left;
width: 230px;
padding-left: 20px;
font-size: 12px;
font-family: "Verdana", sans-serif;
color: #000000;
text-align: left;
}

div#sidebar a, div#sidebar a:link {
color: #E5E2D5;
}

div#sidebar a:visited {
color: #E0CEC2;
}

div#sidebar a:hover {
color: #EEECE4;
}

.sbarbody {
padding: 0px;
}

.sbarbody2 {
padding: 0px;
}

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

li.sbartitle {
list-style: none;
text-transform: uppercase;
font-weight: bold;
margin: 20px 0px -10px 0px;
}

.sbarlist sbarcontent {
}

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

li.sbaritem {
margin: 0px;
padding: 7px 0px 5px 0px;
background: url(http://fatfrog.info/Ma/A/layout/converse/sbaritem.gif) bottom left repeat-x;
}

.defaultuserpic {
text-align: center;
}

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

.sbarcalendar {
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 12px;
padding: 2px 4px;
border: #BA3C38 1px solid;
}

.sbarcalendarposts {
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 12px;
padding: 2px 4px;
border: #8C0000 1px solid;
}

.sbarcalendarposts:hover {
text-align: center;
padding: 2px 4px;
background: #8C0000;
}

#maincontent {
font-family: "Verdana", sans-serif;
font-size: 12px;
color: #000000;
margin: 15px 50px 0px 350px;
text-align: left;
}

#footer {
float: left;
width: 230px;
padding-left: 20px;
text-align: right;
font-family: "Verdana", sans-serif;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
color: #000000;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 0px 0px 1px 0px;
background: url(http://fatfrog.info/Ma/A/layout/converse/navi.gif) top left;
line-height: 22px;
margin: 0px;
}

ul.navfooter li {
display: block;
list-style: none;
}

div#footer a, div#footer a:link, div#footer a:visited {
color: #E5E2D5;
}

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

.clearfoot {
clear: both;
}

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

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

.userpic {
position: relative;
float: right;
background: #E5E2D5 url(http://fatfrog.info/Ma/A/layout/converse/iconbg.gif) top left no-repeat;
padding: 5px 10px 10px 5px;
top: 19px;
margin: 0px 0px 10px 10px;
z-index: 15;
}

.userpicfriends {
position: relative;
float: right;
background: #E5E2D5 url(http://fatfrog.info/Ma/A/layout/converse/iconbg.gif) top left no-repeat !important;
padding: 5px 10px 10px 5px;
top: 19px;
margin: 0px 0px 10px 10px;
font-family: "Verdana", sans-serif;
font-size: 10px;
z-index: 15;
}

.userpicfriends img {
margin-bottom: 3px;
}

.userpicfriends font {
color: #AA0000;
}

.date {
font-family: "Verdana", sans-serif;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) bottom left repeat-x;
padding-bottom: 11px;
}

.subject {
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) bottom left repeat-x;
padding: 10px 0px 16px 0px;
font-family: "Verdana", sans-serif;
font-size: 14px;
font-weight: bold;
}

.entry {
font-family: "Verdana", sans-serif;
font-size: 12px;
text-align: left;
padding-top: 16px;
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) bottom left repeat-x;
padding-bottom: 11px;
}

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

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

.ljtags {
margin-top: 15px;
background: url(http://fatfrog.info/Ma/A/layout/converse/tags.gif) top left no-repeat;
padding: 10px 0px 10px 35px;
}

.currents {
margin-top: -15px;
font-family: "Verdana", sans-serif;
font-size: 12px;
}

.currentmood {
background: url(http://fatfrog.info/Ma/A/layout/converse/mood.gif) top left no-repeat;
padding: 10px 0px 10px 35px;
margin-bottom: 2px;
}

.currentmusic {
background: url(http://fatfrog.info/Ma/A/layout/converse/music.gif) top left no-repeat;
padding: 10px 0px 10px 35px;
margin-bottom: 2px;
}

.currentlocation {
background: url(http://fatfrog.info/Ma/A/layout/converse/location.gif) top left no-repeat;
padding: 10px 0px 10px 35px;
margin-bottom: 2px;
}

.comments {
position: relative;
font-family: "Verdana", sans-serif;
font-weight: bold;
color: #E5E2D5;
text-align: center;
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) top left repeat-x;
padding-top: 11px;
}

.separator {
height: 80px;
background: url(http://fatfrog.info/Ma/A/layout/converse/separator.gif) center no-repeat;
margin-top: 15px;
}

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

.skiplinks {
text-align: center;
}

.commentbox {
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) bottom left repeat-x;
padding: 0px 0px 16px 0px;
margin: 50px 0px;
}

.datesubjectcomment {
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) top left repeat-x;
padding-top: 10px;
font-size: 14px;
}

.userpiccomment {
position: relative;
float: right;
background: #E5E2D5 url(http://fatfrog.info/Ma/A/layout/converse/iconbg.gif) top left no-repeat;
padding: 5px 0px 10px 5px;
top: -10px;
margin: 0px 0px 10px 10px;
z-index: 15;
}

.commentreply {
position: relative;
margin: 4px 0px 10px 0px;
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) top left repeat-x;
padding-top: 10px;
font-family: "Verdana", sans-serif;
font-size: 12px;
}

.commentboxpartial {
border: 1px solid #AA0000;
padding: 10px;
margin: 30px 0px;
}

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

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

.replytoposter {
margin-top: 10px;
font-family: "Verdana", sans-serif;
font-size: 12px;
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) bottom left repeat-x;
padding-bottom: 11px;
}

.replytosubject {
background: url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) bottom left repeat-x;
padding: 10px 0px 16px 0px;
font-family: "Verdana", sans-serif;
font-size: 14px;
font-weight: bold;
}

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

input, textarea {
background: #FFFFFF;
color: #000000;
}

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

/*#postform
.ljdeem*/

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

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

ul.year li {
display: inline;
}

.active {
font-size: 24px;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
background: #AA0000;
}

td.yearmonth {
border-style: none;
font-size: 14px;
padding: 1px 3px;
}

td.yearmonth a {
color: #E5E2D5;
}

table.yeartable td.yearday {
background: #E5E2D5 url(http://fatfrog.info/Ma/A/layout/converse/datesubject.gif) bottom left repeat-x;
padding-bottom: 8px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
}

table.yeartable td.yeardate {
padding: 1px 3px;
background: #E5E2D5;
}

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
	As you can see this profile layout has 2 columns. You can add more (or make it only one column), but adding columns is a bit more complicated than adding rows. So if you want to do this, you should know how tables work or ask someone who knows. 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 & Ctrl+C. <lj-raw><center> <table border="0" cellpadding="0" cellspacing="0" background="http://fatfrog.info/Ma/A/layout/converse/profile-bg.gif"> <tr><td height="131" colspan="2" background="http://fatfrog.info/Ma/A/layout/converse/profile-converse.gif"> </td><td background="http://fatfrog.info/Ma/A/layout/converse/profile-hl-separator.gif"></td><td></td><td background="http://fatfrog.info/Ma/A/layout/converse/profile-hl-separator.gif"></td></tr><tr><td colspan="2" background="http://fatfrog.info/Ma/A/layout/converse/profile-hl-converse.gif" height="52" align="right" valign="top"><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#E5E2D5"> HEADLINE COLUMN 1 </font></td><td width="12" background="http://fatfrog.info/Ma/A/layout/converse/profile-crossing.gif"></td><td width="250" background="http://fatfrog.info/Ma/A/layout/converse/profile-hl.gif" align="right" valign="top"><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#E5E2D5"> HEADLINE COLUMN 2 </font></td><td width="12" background="http://fatfrog.info/Ma/A/layout/converse/profile-crossing.gif"></td></tr><tr><td width="12" background="http://fatfrog.info/Ma/A/layout/converse/profile-separator.gif"></td><td width="250" bgcolor="#E5E2D5" valign="top"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"> CONTENT COLUMN 1 <br> </font></td><td width="12" background="http://fatfrog.info/Ma/A/layout/converse/profile-separator.gif"></td><td width="250" bgcolor="#E5E2D5" valign="top"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000000"> CONTENT COLUMN 2 <br> </font></td><td width="12" background="http://fatfrog.info/Ma/A/layout/converse/profile-separator.gif"></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="#AA0000">LINK TEXT</font></a>`

Flat | Top-Level Comments Only

Very cool!

I love this layout!

This layout is kinda awesome. I saw it over at the layout challenge, and totally snatched it. Will definitely credit, no worries :D

I came over here from the layout challenge, and want to say that I REALLY like this layout. Snagging it for use and going to give credit!

Edited 2009-03-09 04:41 (UTC)

This is awesome!! Saving to mems. Thanks for sharing.

This layout rocks the schoolyard. I usually make my own header for my layout, but I may just have to break my own rule and use this puppy because it's so good. Kudos to you! Converse=love.

Lovely layout! I'm saving it in my memories for future use & credit. Keep up the good work!

I saw this at the layout challenge, I love it! I'm snagging, will credit. Thank you!

This is so great, I stole it.

This is so cool and looks wonderful :)
I'm using both right now.

I changed my mind - this layout is flawless. I can't see a thing about it I want to alter and that is a first. you could make an entire series like this with different images at the top though I'm a converse addict so I'll be happy with that image for a long while. Thank you!

OMG!!!

I love it! Love it love it love it!

Do you make wordpress themes?

Because I have a Wordpress journal at www.gnomeangel.com that I would love to use this theme for.

The lil cons for quote icons are too cute too!!!

Thanks. :o)

No, I don't make wordpress themes. I don't know how their layouts are built. And I don't have the time to find out. Sorry.

Thanks - I just thought I'd ask.

I know a little bit of WP theme coding - I was wondering if you'd mind if I used the show graphic - with credit of course - to make my own layout?

I completely understand if you say no.

Thanks again for taking the time to answer my questions :)

Sure you can use it.
And I wouldn't mind if you made the whole layout into a wordpress theme, as long as I get credit for the original layout.

I ADORE this layout. I just put it up and credited you in my profile info. :)

Using! Very cool!

I LOVEEEEEEEEEEe this layout, icon, and profile. Am using and have credited in my profile. Thanks for making this and sharing it with us all

Incredibly cute! Using, will credit!

Love this! I'm using it now, and I've credited you. Thanks so much!

it's wonderfull!!!!!
i adore it)
thanks!

I've taken this adorable profile bar. The only thing is that I can't get the headers to come up properly. I've copy and pasted the code twice but I can't work it, is it something I'm doing?

Will credit when I've properly got the profile sorted, I'm trying to do it now :)

Sorry, that's probably my fault. I posted it like this:

...color="#E5E2D5">

[HEADLINE COLUMN 1]

</font></td><td...

and I'm not sure, but I suspect that when you start a new paragraph without using <p> the empty line still gets added. But I posted it like this so the place where the text goes is easier to find.
It should be without any linebreaks:

...color="#E5E2D5">[HEADLINE COLUMN 1]</font></td><td...

Ahhh thank you, I will try that straight away! This is my first time using a profile thingy so I'm probably just out of the know :)

Found ur layout from thefulcum..
I love it.. using and credit. :)

Hi!

I'm using this now. :) My favorite shoes.

Oh my! How cute is that? I love it.

I just snagged this for my LJ. SO AWESOME. I love your layouts! (just discovered your journal) :)

I just found this layout, and I think it's great :)

Converse layout & matching profile layout and a single icon

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject