Layout: S2 - Variable Flow
(click for full size)
I decided to try to work with the original coding for a layout and customize it from scratch. I chose Variable Flow for that :)
It's a simple layout, without a sidebar.
Setting it up
Go to Customize Journal.
Basics -> select S2 in the Style System section
Look and Feel -> select Variable Flow and for Theme select Default
Custom options -> Click on Custom CSS
Use layout's stylesheet(s): No
Paste this code in the Custom stylesheet box:
/* body formatting - settings for the entire layout */
body {
margin: 0;
padding: 0;
border: 0;
background: #9a9a9a;
color: #000000;
font-size: 10px;
font-family: Verdana, Arial;
}
table, tr, td, th {
font-size: 1em;
}
/* content formatting */
#page {
margin-left: 25%;
margin-right: 25%;
margin-top: 5px;
margin-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
border: 2px solid #8c8c8c;
background: #ffffff none;
}
/*title and subtitle*/
#title h1 {
font-size: 20px;
font-weight: bold;
text-align: left;
color:#9a9a9a;
font-family: palatino;
margin: 5px;
text-transform: uppercase;
}
#title #viewtitle {
font-size: 12px;
font-weight: bold;
text-align: left;
color:#9a9a9a;
font-family: palatino;
margin: 5px;
text-transform: lowercase;
}
#title {
margin-top: 3em;
margin-bottom: 0.5em;
color: #190f57;
background: transparent;
}
/*navigation bar*/
.navbar {
text-align: right;
list-style: none;
padding: 0;
margin: 0;
display: list-item;
background: url(http://i31.photobucket.com/albums/c376/victoriaely/header3.png) no-repeat;
height: 0px;
color: #555555;
font-size: 15px;
font-weight:bold;
padding-top:80px;
}
.navbar li { display: inline; white-space: nowrap;
color: #ff438e;
text-transform:lowercase;
}
.navbar li.active { display: inline; }
.navbar a { color: #ff438e;}
/* next,previous links */
.viewspecnavbar {
text-align: center;
list-style: none;
padding: 0;
margin: 0;
display: block;
margin-top: 1em;
margin-bottom: 1em;
}
.viewspecnavbar li { display: inline; white-space: nowrap; color: #555555;}
.viewspecnavbar li.active { display: inline; }
/*entry*/
.entry {
margin-bottom: 4em;
}
.entryheading {
font-weight: bold; font-size: 1.0em;
float: left;
margin-top: 0;
color: #555555;
}
.entrylinkbar {
float: right;
}
.entrytext {
margin-left: auto;
margin-right: auto;
clear: both;
color: #555555;
}
.entry .metadata {
margin-top: 0.5em;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
.entry .metacaption
{
font-weight: bold;
}
.entryextra {
list-style: none;
padding: 0;
margin-left: 0;
margin-right: 0;
display: block;
}
.entryextra li {
display: inline;
}
.entryextra li.entryreadlink {
font-weight: bold;
}
.entryextra { text-align: right; font-size: 0.9em; margin-right: 5px;}
/*comments*/
#commentform table, #commentform textarea {
width: 100%;
}
.comments, .commentsitem {
list-style: none;
margin: 0;
padding: 0;
}
.comments {
margin-left: 20px;
}
/*userpic*/
.uglykludgeuserpic {
width: 100%;
margin: 0;
padding: 5px;
float: leftt;
}
/*links*/
a:link { color: #ff438e; background: transparent; text-transform: lowercase; text-decoration: none;}
a:visited { color: #ffc0d9; background: transparent; text-transform: lowercase; text-decoration: none;}
a:active, a:hover { color: #ff438e; background: transparent; text-transform: lowercase; text-decoration: none;}}
/* IE hack - center the block with text-align! */
.calendarmonthcontainer {
text-align: center;
}
/*calendar*/
.calendarmonth {
margin-top: 2em;
margin-bottom: 2em;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.calendarmonth h2 {
font-size: 1em;
font-weight: bold;
margin: 0;
}
.calendarday {
width: 3em;
max-width: 3em;
height: 3em;
}
I have added a few comments and grouped the related pieces to it's easier to customize it.
The patters was made by peoplemachines
If you want any customizations (different color, different header) let me know. Can't promise I'll do it straight away, but I'll do it as soon as I can. If you want to customize it yourself and have questions, feel free to ask :)
If you use it, please credit lemon_craze
I plan to do this thing for other layouts and I'd appreciate any suggestions.