Fuesch's graphics & layouts - Converse layout & matching profile layout and a single icon

Previous | Memories | Tell Someone | Next

12 February 2009 @ 09:28 pm

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>`

Tags: - icons, - layouts, miscellaneous

29 comments | Leave a comment

( Post a new comment )

zonikita.livejournal.com on February 12th, 2009 08:42 pm (UTC)

Very cool!