59 - Winter (art: Sara Forlenza): gawariel

gawariel in gawariel_design

59 - Winter (art: Sara Forlenza)

Dec 06, 2007 00:13

D E S C R I P T I O NName:Winter (Art © Sara Forlenza)
Description:Flexible Squares layout in wintery colours centering around an artwork by Sara Forlenza.
Instead of a header, I opted to put the artwork in the sidebar. As a result the sidebar is fixed and should only contain the bare essentials.

Special thanks goes to Yolanda from potof_gold for providing me the inspiration.
Also a big thank you to irinafan as she was the first with the sidebar idea!

G E N E R A L I N F O R M A T I O NWorks with ads?:YesStyle:Flexible Squares.Tested in:IE, Mozilla Firefox and Opera.Best Resolution:1024*768 and above (I think the higher your resolution, the better it looks)Works with Navigation Strip?:Yes BUT the sidebar will overlap it and your entry text gets a bit squished on the sides.Credit:Please put a link to Sara Forlenza AND gawariel_design in your profile or sidebar.

{Bigger} ~ {Live Preview}

I N S T A L L A T I O NGo to Manage:CustomizeSelect a New Theme:

Type Flexible Squares in the search box.
Click 'Search'.
Apply any theme that you get in the search results, it doesn't really matter which one!

Choose a Page Setup:

Apply the following: 2 Column (sidebar on LEFT).
Click Customize Selected Theme

Note:The following section(s) can be found in the left, blue sidebar of the page.
Only the sections I mention are the ones you MUST adjust. You can play with the rest as you please.Sidebar:The sidebar is fixed, so it's height depends on the height of your screen. If you have too many stuff in your sidebar, part of it will be hidden, because you can't scroll down. So I advise you to limit the sideboxes to a minimum. I'll leave it up to you to decide which you find important.
IMHO the page summary is something highly unnecessairy, and also tags for a private user are somewhat silly. But, I'll leave it up to you, LOLCustom CSS:

Use layout's stylesheet(s): No
Use layout's stylesheet(s) when including custom external stylesheet: No
Use external stylesheets: No
Custom external stylesheet URL: Leave empty
Custom stylesheet: Paste the stylesheet (given bellow) in this box.

Hit "save changes".

I M A G E S & C O D E
Images:
The images are hosted on my account, but it is recommended that you upload them yourself. Don't forget to change the URL's in the code!

Code:

/* LAYOUT 59: WINTER BY SARA FORLENZA */
/* S2 STYLE: FLEXIBLE SQUARES */
/* AVAILABLE AT GAWARIEL_DESIGN (http://community.livejournal.com/gawariel_design/) */
/* ART BELONGS TO SARA FORLENZA (http://www.saraforlenza.com/)
/* CREATED BY GAWARIEL (http://gawariel.livejournal.com/) */
/* ALL IMAGES MADE IN PHOTOSHOP CS */
/*-----------------------------------------------------------------------------------------------*/

/*--------------------------*/
/*---------- MISC ----------*/
/*--------------------------*/

blockquote {
background: #6D7DA2 url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/Blockquote.jpg) repeat-y left center;
border: 3px double #6C626C;
padding: 5px 10px 5px 90px;
color: #A6B2CB;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/LJUser.png);
padding: 19px 19px 0 0!important;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/LJComm.png);
padding: 18px 18px 0 0!important;
}

/*--------------------------*/
/*---------- MAIN ----------*/
/*--------------------------*/

body {
background: #8E9DBC url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/BG.jpg) repeat-y top left;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
font-family: candara, arial;
font-size: 9pt;
color: #4F618B;
}

a, a:link, a:visited {
color: #CDD5E4;
font-family: palatino linotype, georgia;
font-size: 12px;
text-decoration: none;
}

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

/*--------------------------*/
/*---------- PAGE ----------*/
/*--------------------------*/

#content{
width: 99%;
margin-left:0px;
padding: 0px;
}

#maincontent {
margin-left: 500px;
padding: 0px;
}

#sidebar {
width: 500px;
float: left;
background-image:url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/Sidebar2.jpg);
background-position:center right;
background-repeat:no-repeat;
position:fixed;
height: 100%;
top: 0px;
left: 10px;
}

/*----------------------------*/
/*---------- HEADER ----------*/
/*----------------------------*/

#header {
positon:absolute;
margin-left:470px;
top:0px;
}

.title, .subtitle {
display: none;
}

/*--------------------------------*/
/*---------- NAVIGATION ----------*/
/*--------------------------------*/

ul.navheader {
font-family: palatino linotype, georgia;
font-size: 12px;
text-transform: lowercase;
line-height: 35px;
}

ul.navheader li {
display: inline;
background: #7E8EB0;
margin: 10px 3px;
padding: 5px 0px;
border: 1px solid #BEC8DB;
}

ul.navheader li a{
color: #BEC8DB;
text-decoration: none;
padding: 5px 10px 5px 10px;
}

html*ul.navheader li a{
padding: 0px 10px 0px 10px;
}

ul.navheader li a:hover {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/NavHover.jpg) repeat-x bottom center;
padding: 5px 10px 5px 10px;
}

html*ul.navheader li a:hover{
padding: 0px 10px 0px 10px;
}

ul.navheader li.view {
color: #D6E5EC;
text-decoration: underline;
padding: 5px 10px 5px 10px;
font-size: 12px;
}

/*---------------------------*/
/*---------- ENTRY ----------*/
/*---------------------------*/

.subcontent {
margin: 20px 10px 0px 10px;
}

.entry {
text-align: justify;
line-height: 20px;
}

.userpic {
position: relative;
float: right;
padding: 5px;
background: #7E8EB0!important;
margin: 60px 1px 0px 8px;
border: 1px Solid #6C626C;
}

.datesubject {
border-bottom: 3px double #6C626C;
padding: 0px 0px 5px 0px;
margin: 0px 0px 10px 0px;
}

.date {
float: right;
padding: 20px 0px 0px 0px;
}

.subject {
font-family: palatino linotype, georgia;
font-size: 14pt;
color: #6C626C;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/Subject.png) no-repeat center left;
padding: 10px 0px 10px 45px;
width: 250px;
}

.currents {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/Meta.png) repeat-y left center;
padding:5px 5px 0px 15px;
margin-left: 20px;
}

.currents, .currentmood, .currentmusic {
font-size: 8pt;
color: #6C626C;
}

.currents a{
font-family: candara, arial;
font-size: 8pt;
text-decoration: none;
}

.ljtags {
font-size: 8pt;
color: #6C626C;
margin:30px 0px 0px 20px;
padding:5px 5px 0px 20px;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/Tags.png) no-repeat top left;
height: 20px;
}

.ljtags a {
font-family: candara, arial;
font-size: 8pt;
text-decoration: none;
}

.comments {
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/Divider.png) no-repeat bottom center;
height: 150px;
text-align: center;
margin: 10px 0px 0px 0px;
}

div.comments a, div.comments a:link, div.comments a:visited{
font-size: 16px;
padding: 0px 8px;
}

/*----------------------------------*/
/*---------- FRIENDS PAGE ----------*/
/*----------------------------------*/

.userpicfriends {
position: relative;
float: right;
padding: 5px;
background: #7E8EB0!important;
margin: 60px 1px 0px 8px;
border: 1px Solid #6C626C;
text-align: center!important;
}

.userpicfriends a font {
color: #CDD5E4;
font-family: palatino linotype, georgia;
font-size: 12px;
text-decoration: none;
}

.userpicfriends a:hover font {
color: #E5E9F1;
text-decoration: underline;
}

/*-----------------------------*/
/*---------- SIDEBAR ----------*/
/*-----------------------------*/

.defaultuserpic {
width:164px;
text-align:center;
margin-top: 20px;
}

.defaultuserpic img {
padding: 5px;
background: #7E8EB0!important;
border: 1px Solid #6C626C;
}

.sbarbody, .sbarbody2 {
width:164px;
text-align:justify;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #007EA1;
}

div#sidebar a:hover {
color: #00B1DC;
}

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

}

.sbarcalendar {
text-align: center;
background: #8E9DBC;
font-family: candara, arial;
font-size: 9pt;
}

.sbarcalendarposts {
text-align: center;
border: 1px solid #8E9DBC;
font-family: candara, arial;
font-size: 9pt;
}

.sbarcalendarposts a {
font-family: candara, arial;
font-size: 9pt;
}

ul.sbarlist {
list-style: none;
margin-left: -30px;
text-align: center;
}

li.sbartitle {
margin: 10px 0px 10px -10px;
border-bottom: 3px double #6C626C;
width: 164px;
text-align: center;
color: #6C626C;
font-family: palatino linotype, georgia;
font-size: 12px;
}

html*li.sbartitle {
margin: 10px 0px 10px 20px;
}

/*---------- FOOTER (bottom page) ----------*/

#footer {
width: 100%;
z-index: 100;
clear: both;
text-align: right;
background: url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/Footer.png) no-repeat bottom right;
height: 120px;
}

ul.navfooter{
list-style: none;
}

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

.clearfoot {
clear: both;
}

/*_____________________________________________________*/
/*____________________ OTHER PAGES ____________________*/
/*_____________________________________________________*/

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

ul.year {
text-align: center;
padding-bottom: 20px;
text-decoration: none;
font-variant: small-caps;
font-size: 12pt;
}

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

ul.year li a{
font-family: candara, arial;
font-size: 12pt;
}

table.yeartable {
margin-left: auto;
margin-right: auto;
width: 80%;
}

table.yeartable td.yeardate, table.yeartable td.yearday {
background: #7E8EB0;
border: 1px solid #BEC8DB;
font-size: 12pt;
color: #6C626C;
}

table.yeartable td.yeardate a{
padding: 2px 5px 0px 5px;
text-decoration: none;
}

table.yeartable td.yeardate a:hover {
color:#FF7C00;
}

table.yeartable td.yearday {
background: #7E8EB0;
text-align: center;
border: 1px solid #BEC8DB;
font-family: palatino linotype, georgia;
font-size: 14pt;
color: #6C626C;
}

td.yearmonth {
border-style: none;
}

/*----------------------------------*/
/*---------- COMMENT PAGE ----------*/
/*----------------------------------*/

.box {
border: none;
padding: 10px 20px 10px 0px;
clear: left;
}

.commentbox {
border: 3px double #6C626C;
padding: 10px;
margin: 10px;
background: #CCCEDB url(http://i19.photobucket.com/albums/b153/gawariel_design/59_Winter%20-%20Sara%20Forlenza/CommentBG.jpg) repeat-y top left;
}

.commentbox a {
color: #007EA1;
}

.commentbox a:hover {
color: #00B1DC;
}

.commentboxpartial {
border: 3px double #6C626C;
padding: 10px;
margin: 10px;
background:#8897B7;
}

.datesubjectcomment {
text-align: center;
color: #6C626C;
border-bottom: 3px Double #6C626C;
padding: 5px;
}

.userpiccomment {
position: relative;
float: left;
background: #7E8EB0;
border: 1px Solid #6C626C;
padding: 5px;
margin: 0px 5px 0px 0px;
top: -6px;
left: -10px;
z-index: 15;
float: left;
}

.commentreply {
position: relative;
margin: 10px;
}

/*--- REPLY PAGE ---*/

textarea {
background-color: #C4C7D7;
font-family: candara, arial;
font-size: 9pt;
color: #4F618B;
line-height: 20px;
}

input {
background: #94A2BF;
color: #4F618B;
font-family: candara, arial;
font-size: 9pt;
margin-top: 10px;
}

option {
background: #94A2BF;
color: #4F618B;
border-bottom:1px solid #6C626C;
padding:1px;
letter-spacing: 2px;
font-size: 10px;
}

textarea.textbox {
width: 100% !important;
padding: 5px;
}

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
line-height: 125%;
background-color: #1A0900;
}

.replytosubject {
font-family: palatino linotype, georgia;
font-size: 14pt;
color: #6C626C;
}

/*--- LINKS AT THE TOP ---*/

.skiplinks {
text-align: center;
margin: 0px 0px 0px 0px;
}

.skiplinks a{
padding: 0px 5px;
}

/*---------------------------*/
/*---------- MISC2 ----------*/
/*---------------------------*/

.clear {
height: 15px;
}

E X T R AIcons:

FO Banner:

T R O U B L E S H O O T I N GBefore asking any questions, make sure you read all information above thouroughly and that your question isn't adressed in the FAQ.If your problem still isn't solved, you are welcome to ask your question here

layouts: account status: plus, graphics, layouts: account status: paid, layouts: account status: basic, graphics: fo banners, layouts: [s2], layouts, graphics: icons, layouts: [s2]: flexible squares