cj_26 requested the stylesheet currently in use over at
f1_challenge, so here it is. Well, nearly, I decided I couldn't upload it with the same header so gave it one of my old ones. It actually worked out quite well because it's the header the layout was originally designed around (back in 06) before I tweaked it a bit last year and changed the colour scheme for
f1_challenge.
I'm actually feeling very tempted to switch the layout here to this one, because I really like it! We will see though.
If you use it comments and credit are nice!
m_h or
pepsicons Also, the pixel helmet was made by me. The other pixel graphics are FamFamFam
For Flexible Squares
Works on basic and paid accounts (I haven't viewed it on a plus account so I'm not sure how it'll look)
It works in Firefox and IE 7 (I think IE 6 doesn't change the icons)
The basic setup is as follows:
1. Go to the Customise page and make sure you're using S2
2. In the "Select a New Theme" section type "Flexible Sqaures" in the search box and select one of the themes. I used "Blue Grey" as it used to be the default.
3. In the "Choose a Page Setup" section select "2 Column (sidebar on left)"
4. Click on "Customise Selected Theme"
5. In the "Display section under "Presentation - Additional Options" set the user picture position to right
6. Go to "Custom CSS" in the "Customise Your Theme" section and set:
- "Use layout's stylesheet(s)" to Yes
- "Use layout's stylesheet(s) when including custom external stylesheet" to No
- "Use external stylesheets" to No
7. Copy the following CSS into the "Custom stylesheet" box and "Save Changes"
Images:
HeaderPrivate IconFriends Locked IconFriends Locked IconCommunity IconUser Icon Notes:
1. Uploading the images to your own image host would be nice
The Code:
/* Layout: 1 */
/* S2 Flexible Squares */
/* Made by Marie (
http://m-h.livejournal.com/) */
/* Available from
http://community.livejournal.com/pepsicons/ */
body {background-color: #DDDAD1;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 7.5pt;
color: #ffffff;
text-align: center;
margin: 0 0 0 0}
p,
td,
blockquote {font-family: verdana, arial, helvetica, sans-serif;
font-size: 7pt;
line-height: 15px;
color: #606060;}
a,
a:link,
a:visited {color: #980A09;
text-decoration: none;
font-weight: normal;
font-family: tahoma, verdana, arial, helvetica, sans-serif}
a:hover {color: #DD4639}
code,
kbd,
pre,
tt {font-family: monospace;}
/*main table and page*/
#content {width: 720px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
border-width: 0;
padding: 10px;
text-align: justify;
border-color: #cccccc;
border-style: solid;
border-width: 0px 0px 0px 0px}
#maincontent {margin-top: 15px;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 7.5pt;
color: #404040;
background-color: #ffffff;
border-width: 0px;
margin-right: 0px;
margin-left: 150px;
text-align: justify;
padding: 10px}
/* sidebar i.e. the bar with calendar etc.*/
#sidebar {padding: 10px 35px 0px 0px;
margin-top: 5px;
background-color: #ffffff;
border-width: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 7pt;
line-height: 15px;
color: #606060;
width: 130px;
float: left;
text-align: justify}
div#sidebar a,
div#sidebar a:link,
div#sidebar a:visited {color: #980A09}
div#sidebar a:hover {color: #DD4639}
.defaultuserpic {text-align: center}
.defaultuserpic img* {border:0px
}
.sbarheader {padding: 0px 5px 0px 5px;
color: #000000;
text-align: center}
/*look of the sidebar content appart from blurb and usericon area*/
.sbarbody {padding: 0 10px 0 -11px}
/*look of the sidebar blurb*/
.sbarbody2 {padding: 0 10px 0 10px}
table.calendar {margin-right: auto;
margin-left: auto}
.sbarcalendar {padding: 2px;
border-color: #DDDAD1;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: small fonts, arial, helvetica, sans-serif;
font-size: 6pt}
.sbarcalendarposts {padding: 2px;
border-color: #DDDAD1;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
text-align: center;
font-family: small fonts, arial, helvetica, sans-serif;
font-size: 6pt}
ul.sbarlist {padding-left: 0px;
margin-left: 0px;
list-style: none}
li.sbaritem {padding-left: 8px;
text-transform: lowercase;
list-style: none}
li.sbartitle {padding-left: 5px;
padding-right: 5px;
list-style: none;
margin-bottom: 10px;
margin-top: 10px;
font-family: tahoma, verdana, arial, helvetica;
font-size: 10pt;
font-weight: normal;
color: #980A09;
text-transform: lowercase;
letter-spacing: 1px;
background-color: #ffffff;
width: 100%;
border-width: 0px 0px 4px 0px;
border-bottom: 4px solid #DDDAD1;
text-align: right}
/*the top of the page with navigational links*/
#header {width: 720px;
padding: 10px 0px 0px 0px;
margin: 0px;
text-align: right;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
letter-spacing: 1px;
text-transform: lowercase;
background-color: #ffffff;
border-width: 0px 0px 4px 0px;
border-style: solid;
border-color: #DDDAD1;
color: #211818;
line-height: 10px;
height: 350px;
background: url("
http://www.designbymarie.com/fanart/images/Banners/Fernando/FernandoMalaysia06.jpg") top
center no-repeat transparent;}
/*title and subtitle of your journal in the header*/
.title {font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 12pt;
font-weight: normal;
color: #4D0202;
text-align: right;
margin: 0px
}
/*hidden subtitle*/
.subtitle {font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 0pt;
visibility: hidden
}
/*the bottom of the page with links to entries*/
#footer {width: 100%;
padding: 10px 0px 0px 0px;
margin: 0px;
text-align: right;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
letter-spacing: 1px;
background-color: #ffffff;
border-width: 4px 0px 0px 0px;
border-style: solid;
border-color: #DDDAD1;
color: #211818;
line-height: 15px;
z-index: 100;
clear: both}
/*more footer and header*/
div#header a,
div#header a:link,
div#header a:visited,
div#footer a,
div#footer a:link,
div#footer a:visited {color: #980A09}
div#header a:hover,
div#footer a:hover {color: #DD4639}
ul.navheader {padding: 305px 0 0 0;
margin: 0px}
ul.navheader li {display: inline;
padding: 0 3px 0 3px}
/*entry layout*/
.subcontent {background-color: ffffff}
.entry {margin: 10px 10px 10px 10px;
padding: 10px;
background-color: #ffffff;
color: #211818;
font-family: tahoma verdana, arial, helvetica, sans-serif;
font-size: 9pt;
text-align: justify;
border-width: 0px}
.entry ul li {padding-left: 5px;
margin-left: 15px}
.entry ol li {padding-left: 5px;
margin-left: 15px}
.userpic {position: relative;
float: right;
text-align: center;
background-color: #ffffff;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #DDDAD1;
border-style: solid}
/*controls icon on flist and in the entry view but not recent view*/
.userpicfriends {position: relative;
float: right;
background-color: #ffffff !important;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #DDDAD1;
border-style: solid;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 7pt;
font-weight: normal;
z-index: 15}
/*appearance of the font under the usericons on flist*/
.userpicfriends a font* {font-family: tahoma, verdana, arial, helvetica;
font-size: 7.5pt;
color: #211818
}
.altuserpic {position: relative;
float: right;
text-align: center;
background-color: #ffffff;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 1px;
border-color: #DDDAD1;
border-style: solid}
.date {font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 7pt;
color: #211818;
text-transform: lowercase;
line-height: 200%;
top: 5px;
text-align: right;
background-color: transparent}
.subject {font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
color: #980A09;
text-transform: lowercase;
background-color: #ffffff;
text-align: right;
border-width: 0px 0px 4px 0px;
border-style: solid;
border-color: #DDDAD1;
padding: 0px 0px 5px 0px}
.subject a,
.subject a:link,
.subject a:visited {color: #980A09}
.subject a:hover {color: #DD4639}
.datesubject {background-color: #ffffff;
padding: 5px
}
.currents,
.currentmood,
.currentlocation,
.currentmusic {font-family: tahoma, verdana, arial, helvetica;
font-size: 7.5pt;
color: #211818;
text-transform: lowercase}
/*targets the currents as a block rather than individually Negative margin to close gap between currents and tags*/
.currents{
margin-top: -25px;
}
/*the look of the tags in entries*/
.ljtags {font-family: tahoma, verdana, arial, helvetica;
font-size: 7.5pt;
font-weight:bold;
color: #211818;
margin-top: 20px;
border-top: 2px solid #DDDAD1
}
.comments {font-family: tahoma, verdana, arial, helvetica, sans-serif;
font-size: 7.5pt;
font-weight: normal;
color: #980A09;
text-align: right;
text-transform: lowercase;
background-color: #ffffff;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px}
div.comments a,
div.comments a:link,
div.comments a:visited {color: #980A09;
font-size: 7.5pt}
div.comments a:hover {color: #DD4639;
text-decoration: none}
/*content on entries and comments*/
.datesubjectcomment {background-color: #ffffff;
padding: 5px;
margin-top: 20px}
.userpiccomment {position: right;
border-width: 5px;
border-style: solid;
border-color: #ffffff;
background-color: #ffffff;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: right}
.box {border-color: #ffffff;
padding: 10px}
input,
textarea {background-color: #ffffff;
color: #404040;}
textarea.textbox {width: 100% !important}
.reply {position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 7pt;
line-height: 125%;
background-color: #ffffff;
color: #404040}
.replytosubject {font-weight: normal;}
.commentreply {position: relative;
margin: 10px;
font-size: 7pt;
font-family: verdana, arial, helvetica, sans-serif;
color: #5d5d5d;}
.commentbox {border-color: #DDDAD1;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff}
.datesubjectcomment a:link,
.datesubjectcomment a:visited {color: #980A09}
.datesubjectcomment a:hover {color: #DD4639}
/*what comment stuff is in when page has more than 50 comments*/
.commentboxpartial {border-color: #DDDAD1;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff}
.commentinfo {background-color: #ffffff;
margin-top: 10px;
width: 100%}
/*calendar pages*/
ul.year {text-align: center;
padding-bottom: 40px}
ul.year li {display: inline}
table.yeartable {margin-left: auto;
margin-right: auto}
table.yeartable td.yeardate,
table.yeartable td.yearday {border-width: 1px;
border-style: solid;
border-color: ##DDDAD1}
table.yeartable td.yearday {background-color: #ffffff;
text-align: center}
td.yearmonth {border-style: none}
ul.navfooter {padding: 0px
margin: 0px}
ul.navfooter li {display: inline;
margin: 0 5px 0 5px}
.clearfoot {clear: both}
.clear {height: 15px}
.skiplinks {text-align: center}
.separator {height: 35px}
.headerimage {}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
/* so that IE users will still see an image */
background-image: url(
http://img.photobucket.com/albums/v402/marie_s/Other/LJ/usericon.gif); padding: 16px 0 0 16px;
}
.ljuser img[src="
http://stat.livejournal.com/img/userinfo.gif"] {
background-image: url(
http://img.photobucket.com/albums/v402/marie_s/Other/LJ/usericon.gif); padding: 16px 0 0 16px;
}
.ljuser img[src="
http://stat.livejournal.com/img/community.gif"] {
background-image: url(
http://img.photobucket.com/albums/v402/marie_s/Other/LJ/communityicon2.gif); padding: 16px 0 0 16px;
}
.subject img[src="
http://p-stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
background-image: url(
http://img.photobucket.com/albums/v402/marie_s/Other/LJ/friendslockedicon.gif); padding: 16px 16px 0 0;
}
.subject img[src="
http://p-stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
background-image: url(
http://img.photobucket.com/albums/v402/marie_s/Other/LJ/privateicon.gif); padding: 16px 16px 0 0;
}
.subject img[src="
http://p-stat.livejournal.com/img/icon_groups.gif"]{
width: 0;
height: 0;
background-image: url(
http://img.photobucket.com/albums/v402/marie_s/Other/LJ/group_locked.png); padding: 16px 16px 0 0;
}
ETA: I hope everything makes sense, I wrote the instructions a while back when I made the
LJ Layout page on my website.