Layout .04 - S2 Flexible Squares : Tomato

Thu, 27 Nov 2008 20:05:34 GMT

With minor up and downs, mostly on IE side I have enjoyed skimming Flexible Squares. I would like to thank so much babyelefant at Everything_LJ as always for last minute help.

Tomato was created for Livejournal base layout Flexible Squares.
Free: Cascading Style Sheet

Preview of Tomato Layout
[Click Here for Free Preview]

Details

layout available: right-side navbar position only
custom colors : in stylesheet
best view: : 1024x768 or higher (unknown with lower res)
browser checked : firefox 3.0.4, internet explorer 7(decent with IE6, unknown with lower)
works with : free, nav bar (decent with plus)
available at : http://asylums.insanejournal.com/scotchbonnet/
original design by : scotchsour
images used : scotchsour

Instructions

How to Style? (using the LiveJournal new customize journal area)

Before you start, make sure you're in the correct journal. At the very top, in Customization Area>Choose Journal Style use the drop down menu to choose.

1. In livejournal's navigational menu, go to journal > customize or press the link.

1a. The first page you see is Journal Display that shows four tabs. The first is highlighted as Basics. Look below for Style System and make sure the radio button is highlighted for:
S2 - For users who don't know HTML or CSS, or make only minor alterations.

2. Under (2. Select a New Theme), go the search box and type Flexible Squares and press search. Once the layouts appear go to the bottom and in the drop down choose (show all).

3. Find and press (apply theme) to Flexible Squares - (No plain theme available) Choose any by Yati Mansor and then press (apply theme) then press (customize).

4. Under Customize Your Theme, press (custom css).

5. Under custom css > page > where it states: ("Use layout's "Base Weblog" stylesheet") say no. Under that, Custom external stylesheet URL should be blank.

6. Add the LiveJournal "Tomato" Cascading Style Sheet for Free Users into the custom stylesheet textarea.

7. Press "save changes".

8. Go to the blue box on the page that displays your current journal and press your identity link.

9. You should be done.

10. Thank you for trying this layout.

CSS Code

LiveJournal Cascading Style Sheet for Free Users

/* template  : scotchbonnet .04 - s2 Flexible Squares : Tomato
published : November 27, 2008
y       : sam emme / scotchsour.livejournal.com + scotchsour.insanejournal.com
works with: Free, Paid, Nav Bar (Unknown with Plus)
browser  : Firefox 3.0.4, Internet Explorer 7(decent with IE6, unknown with lower)
available : http://asylums.insanejournal.com/scotchbonnet/
original design by : scotchsour
images used : scotchsour */
/* ------------ BASIC ELEMENTS ------------ */
body {background-color: #d3d48d; text-align: center; color: #ffffff; font-family: "Verdana", sans-serif; font-size: 11px; margin: 20px 0 20px 0; }
a, a:link, a:visited {color: #ff7a08; text-decoration: none; }
a:hover {color: #000000; text-decoration: underline; }
p, td, blockquote {font-size: 11px; }
code, kbd, pre, tt { font-family: monospace;	}

/* ------------ CONTAINER ------------ */
#content { width: 745px; margin-left: auto; margin-right: auto; background-color: #d3d48d; border-style: solid; border-width: none; border-style: none; border-color: #7e8997; padding: 15px; }
#maincontent { margin-top: 5px; font-family: "Verdana", sans-serif; font-size: 11px; background-color: #d3d48d; color: #ffffff; border-color: #7e8997; border-width: 0px; margin-right: 175px; text-align: left; }
#maincontent img { max-width:300px; overflow: hidden; }
.subcontent { width: 560px; background-color: #ca1604; background-image:url(tomato-top.gif); background-position:top; background-repeat:no-repeat; }

/* ------------ ENTRY ------------ */
.entry	{ margin: 0px 0px 0px 0px; padding: 10px 10px 40px 20px; background-color: #ca1604; color: #000000; font-family: "Verdana",sans-serif; font-size: 11px; text-align: left; border-width: 1px; background-image:url(tomato-bottom.gif); background-position:bottom; background-repeat:no-repeat; }

/* entry --  inside the entry */
.userpic { position: relative;	float: left; background-color: #ededed; padding: 5px; margin: 10px; z-index: 15; border-width: 1px; border-color: #999999; border-style: solid; top: 10px; }
.userpicfriends { position: relative; float: left; padding: 5px; margin: 10px; text-align: center; border-style: solid; border-width: 1px; border-color: #999999; font-family: "Verdana", sans-serif; font-size: 11px; z-index: 15; top: 10px; }
.date { line-height: 200%;	top: 5px; color: #999999; font-family: "Verdana", sans-serif; font-size: 11px; }
.subject { font-weight: bold; padding: 10px; color: #c1c1c1; font-family: "Verdana", sans-serif; font-size: 11px; }
.subject a, .subject a:link, .subject a:visited {	 color: #c0c9ce;	}
.subject a:hover { color: #ffffff; }	
.datesubject { padding: 15px 5px 5px 5px; height: 50px; }
.currents, .currentmood, .currentmusic { font-family: "Verdana", sans-serif; font-size: 11px; }
.currents { margin-top:10px; }
.comments { font-family: "Verdana", sans-serif; font-size: 11px; text-align: left; background-color: none; padding: 0px 5px 15px 5px; position: relative; top: 15px; }
div.comments a, div.comments a:link, div.comments a:visited { color: #c0c9ce; }
div.comments a:hover { color: #ffffff; text-decoration: none; }
.datesubjectcomment { background-color: #999999; padding: 5px; margin-top: 20px; }
.userpiccomment { position: relative; border-width: 5px; border-style: solid; border-color: #ededed; background-color: #ededed; top: -30px; left: 0px; padding: 5px; margin: 10px 10px -20px 10px; z-index: 15; float: left; border-width: 1px; border-color: #999999; border-style: solid; }
.box { border-style: solid; 	border-width: 1px 0px 0px 0px; border-color: #7e8997; padding: 10px; clear: left; }
.reply { position: relative; margin: 20px 30px 10px 30px; padding: 25px 10px 10px 10px;	text-align: left; font-family: "Verdana", sans-serif; font-size: 11px; line-height: 125%; background-color: #ededed; color: #000000; }
.replytosubject { font-weight: bold; }
.commentreply { position: relative; margin: 10px; font-size: 11px; font-family: "Verdana", sans-serif; color: #000000; }
.commentbox { border-color: #7e8997; border-width: 1px; border-style: solid; padding: 10px; margin: 10px; background-color: #cc1604; }
.datesubjectcomment a:link, .datesubjectcomment a:visited { color: #c0c9ce; }
.datesubjectcomment a:hover { color: #ffffff; }
.commentboxpartial { border-color: #7e8997; border-width: 0px; border-style: none; padding: 10px; margin: 10px; background-color: #ededed; }
.commentinfo { background-color: #ededed; margin-top: 10px; width: 100%; }
.entry ul li { padding-left: 5px; margin-left: 15px; }
.entry ol li { padding-left: 5px; margin-left: 15px; }

/* ------------ HEADER ------------ */
#header { width: 100%; padding: 10px 0px 0px 0px; margin: 0px; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 2px; background-color: #ffffff; background-image: url(tomato-header.gif); background-repeat:no-repeat; height: 340px; color: #ffffff; }

/* header -- links to views; title of journal; subtitle of journal */	
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited { color: #8797a0; }
div#header a:hover, div#footer a:hover { color: #ffffff; text-decoration: none; }

/* ------------ SIDEBAR ------------ */
#sidebar { padding-top: 0px; padding-bottom: 70px; background-image: url(tomato-logo.gif); background-position:bottom; background-repeat:no-repeat; margin-top: 15px; background-color: #ca1604; font-size: 11px; font-family: "Verdana", sans-serif; color: #c1c1c1; width: 160px; float: right; text-align: left; list-style: none; }
li.sbartitle { padding-left: 55px; padding-top: 10px; padding-bottom: 0px; list-style: none; border-style: solid; border-width: 0px; background-repeat:no-repeat; background-image:url(slicetomato.gif); background-position:left; border-color: #7e8997; background-color: #ca1604; margin-bottom: 10px; margin-top: 10px; height: 35px; } 
#sidebar #sidebar_summary li.sbaritem, #sidebar_summary ul.sbartitle { list-style: none; padding: 5px 0 2px 0; border-width: 0 0 1px 0; border-color: #000000; border-style: dashed; }
#sidebar #sidebar_linklist li.sbaritem, .sbarblank { list-style: none; padding:0px; }
.sbarblank { display: none; padding:0px; }
ul.sbarlist ul.sbarcontent li.sbaritem { padding:0px; }
.defaultuserpic { text-align: center; padding-top: 20px; background-image:url(tomato-logo-top.gif); background-position:top; background-repeat:no-repeat; }
.sbarheader { padding: 0px 5px 0px 5px; }
.sbarbody { padding: 0px 2px 0px 2px; background-color: #ca1604; }
.sbarbody2 { padding: 0 15px 0 15px; }
table.calendar { margin-right: auto;	margin-left: auto; padding: 5px; border-style: dashed;	border-width: 1px; border-color: #000000; }
#sidebar_calendar ul.sbarlist	{ padding-left: 0px; margin-left: 0px; list-style: none; }
#sidebar #sidebar_calendar a:hover { color: #FFFFFF; text-decoration: none; }
.sbarcalendar { border-color: #ffffff; border-width: 0px; border-style: solid; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; }
.sbarcalendarposts { border-color:  none; border-width: none; border-style: none; background-color: #000000; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; }
ul.sbarlist	{ padding-left: 5px; margin-left: 0px; list-style: none;	}
li.sbaritem { padding-left: 7px; list-style: none; }
#sidebar_tags ul.sbarcontent li.sbaritem ul li { padding-left: 0; margin-left: 0; }
#sidebar_tags ul.sbarcontent, #sidebar_tags ul.sbarcontent ul { padding-left: 5px; margin-left: 0; }
#sidebar_tags ul.sbarcontent li.sbaritem { list-style: square outside; padding-left: 0; margin-left: 10px; color:#000; }
#sidebar_tags ul.sbarcontent ul.sbarlist li.sbartitle { list-style: none; padding: 5px 0 2px 0; border-width: 0 0 1px 0; border-color: #000000; border-style: dashed;	}
div#sidebar a:hover { color: #000000; text-decoration: none; }

/* ------------ MENU ------------ */
ul.navheader { padding: 0px; margin: 0px; padding-top: 15px; }
ul.navheader li { display: inline; padding: 0 3px 0 3px; }
.title { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; line-height: 200%; top: 10px; }

/* ------------ FOOTER ------------ */
#footer { width: 100%; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #ffffff; z-index: 100; clear: both; background-image: url(tomato-footer.gif); background-repeat: no-repeat; background-position: bottom; height: 96px; }
ul.navfooter{ padding: 40px 0px 0px 125px; margin: 0px; }
ul.navfooter li { display: inline; margin: 0 5px 0 5px; }
.clearfoot { clear: both; }

/* -------- ARCHIVE -------- */
.year { background-image: url(archiveyear.png); background-position: center; background-repeat: no-repeat; margin: 10px auto; }
table.yeartable { background-image: url(tomatoarchivecalendar.png); background-repeat: no-repeat; width: 430px; height: 277px; }
table.yeartable td.yearday { background-color: #d3d48d; text-align: center; }
ul.year li { display: inline; }
ul.year { text-align: center; padding-top: 10px; padding-bottom: 10px; padding-right:30px; }
.year a, a:link, a:visited, a:hover{ color: #ff7a08; text-decoration: none; }
.yeardate div:first-child { text-align:center !important; }
.lj-view-month center{ background-image: url(archiveyear.png); background-position: center; background-repeat:no-repeat; padding-bottom: 13px; }
.lj-view-month .entry dl:first-child { width: 540px; background-color: #ca1604; background-image:url(tomato-top.gif); padding:20px 0px 0px 20px; background-position:top left; background-repeat:no-repeat; position:relative; left:-20px; top:-22px; }

/* -------- EXTRAS and MISC. -------- */
input, textarea {background-color: #d3d48d;color: #000000;}
textarea.textbox  {width: 100% !important;}
.clear {height: 5px;}
.skiplinks {text-align: center; background-image: url(archiveyear.png); background-position: center; background-repeat:no-repeat; padding-top: 18px; height:34px; }	
.headerimage {/* for formatting header image */}
.separator{/* for formatting separators between entries */height: 15px;}
blockquote {margin: 1em 3em; padding: 1em; border: 3px double #d3d48d; font-size: 1.1em; font-family: georgia, perpetua, "times new roman", serif;}

/* DON'T TOUCH BELOW*/
/* -------- MINI ICONS -------- */
.subject img {width: 0; height: 0; padding: 17px 0px 0px 16px; background-repeat: no-repeat; /* so that IE users will still see an image */
background-image: url("minitomato2.gif");}
.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 0px 0px 16px !important;
background: url(minitomato4.gif);}
.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 0px 0px 16px !important;
background: url(minitomato3.gif);}
.entry img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{width: 0; height: 0; padding: 17px 0px 0px 16px;
background: url("minitomato2.gif");}
.entry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 0px 0px 16px;
background: url("minitomato3.gif");}
.entry img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px 0px 0px 16px;
background: url("minitomato4.gif");}
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] {width: 0; height: 0; padding: 17px 0px 0px 16px !important;
background-image: url(minitomato2.gif);}
.ljuser img[src="http://p-stat.livejournal.com/img/icon_private.gif"] {width: 0; height: 0; padding: 17px 0px 0px 16px !important;
background-image: url(minitomato4.gif);}
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] {width: 0; height: 0; padding: 16px 0px 0px 16px;
background-image: url(minitomato5.gif);}
.ljuser img[src="http://p-stat.livejournal.com/img/syndicated.gif"] {width: 0; height: 0; padding: 16px 0px 0px 16px;
background-image: url(minitomato5.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato2.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato3.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/icon_private.gif"]{width: 0; height: 0; padding: 16px  0 0 16px!important;
background: url(minitomato4.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/community.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato5.gif);}
#sidebar_summary img[src="http://p-stat.livejournal.com/img/syndicated.gif"]{width: 0; height: 0; padding: 16px  0 0 16px!important;
background: url(minitomato5.gif);}

/* -------- Don't touch CONTROLSTRIP -------- */
#lj_controlstrip img[src="http://p-stat.livejournal.com/img/userinfo.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato2.gif);}
#lj_controlstrip img[src="http://p-stat.livejournal.com/img/community.gif"]{width: 0; height: 0; padding: 16px 0 0 16px!important;
background: url(minitomato5.gif);}
#lj_controlstrip {background-color: #ca1604; /*may change color*/ background-image: url(http://i193.photobucket.com/albums/z113/SourWhiskey/layout/minitomato2.gif); height:63px;}
#lj_controlstrip select, #lj_controlstrip input#xc_user, #lj_controlstrip input#xc_password, #lj_controlstrip input#xc_remember {margin: 0pt; padding: 0pt; line-height: 16.5px; background-color: #d3d48d; /*may change color*/ color: #000;/*may change color*/ font-family: tahoma; font-size: 8pt; letter-spacing: 2px; text-transform: lowercase;}
#lj_controlstrip input {background-color: #d3d48d;}

/* ------ Don't touch ICON POPUP INFO ------ */
div.ContextualPopup {margin: 5px 0 0 20px; font: normal 11px "Tahoma", sans-serif !important;}
div.ContextualPopup img { border:1px solid #CCCCCC;}
div.ContextualPopup div.Inner { background:transparent!important;color: #FFFFFF!important;border: 1px solid #CCCCCC; padding: 5px; width: 20em;}
div.ContextualPopup .Content { padding: 2px 4px 6px 4px; margin-right: 50px; line-height: 1.4; text-align:left;border:1px solid #CCCCCC; background:#ca1604;}
div.ContextualPopup .Relation {font-weight: bold !important;letter-spacing:1px;border-bottom: 1px dashed #cccccc;margin-bottom:4px; padding-bottom:4px;}
div.ContextualPopup .Content .OnlineStatus {font-weight: bold;}
div.ContextualPopup .Userpic { padding: 4px; background:#ca1604;border:1px solid #CCCCCC; margin-top:8px;}
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {text-decoration: underline !important;font-weight: bold;color: #000!important;}/*---*/

Images
If using, please don't hotlink. There is no direct link in the css layout, just the images' names. Upload to another storage online, try photobucket. Or try this post for other places I might add.

Notes
This layout is not to be changed, I spent a lot of time to get the graphics, colors and text right that I don't want to see it broken. Right now, this only available as a free theme so no fancy stuff added. However, I do plan on revisiting this layout to add a paid version as well in the future. If you want the same sidebar as mine, just go to the sidebar's customization area 1. Make sure your Tags | Page Summary | Linkslist are turned on (Yes). 2. In the 1-6 boxes choose from the drop down menu. Default Userpic | Calendare | Links List | Blurb | Tags Page | Summary. If you wish to use the Navigation Strip, which is coordinated with the layout go to Customization Area, look for Navigation Strip and check off either:
Always show on my journal/community
Always show on any journal or community I view

Credit
If you keep the image in the layout (logo), then it isn't necessary to have a link in the sidebar. However, if you wish to remove the the image then I would appreciate it.

Questions
If you have questions, please ask in comments. I'll try my best to get to you.

ScotchBonnet

Layout .04 - S2 Flexible Squares : Tomato