quitty
in
grafikitty
layout: flexible squares - straightforward - 1 theme
Graying Hair Click on image for full preview.
Layout Style: Flexible Squares
Template: Straightforward
Themes: 1 total - Graying Hair
Account Levels: All - Basic, Plus, Paid, etc.
• Tested in Firefox 18 and Internet Explorer 8. Looks fine in both.
• Liquid width set at 100%. Best viewed with at least 1024x768 screen resolution.
• All journal views fully customized -- entries, archives, etc. and comments (for Plus and Paid accounts).
• Works fine with Livejournal's navigation strip and ads.
• Inspired by the Georgia and Randomness themes of Livejournal's Minimalism journal style.
RULES
» COMMENT when taking.
» CREDIT grafikitty when using. Not necessary but very nice. If you choose to credit, you may do so anywhere in your journal you see fit.
» Feel free to MODIFY or USE AS BASE CODES.
» DON'T REDISTRIBUTE/REPOST AS IS.
» Please read everything in this post and follow instructions carefully. If you have any questions, encounter problems with your journal while using this layout, or if there are any mistakes in this page or in the stylesheets, just leave a comment. I can't guarantee I'll be able to answer all queries, but I'll try my best. Also, I won't entertain questions that have already been answered in this post or in comments, and I won't help with major modifications to the layout other than those already included in this post.
HOW TO INSTALL
1.) Go to the Select Journal Style page of your account. Under 2. Select a New Theme, type Flexible Squares in the search box and click on the Search button. When the Flexible Squares themes are displayed, select one of them by clicking on its Apply Theme button. A dialogue box will appear saying that your theme has been changed so just click OK.
2.) Scroll down the page to 3. Choose a Page Setup and select 2 Column (sidebar on right) by clicking on its Apply Layout button (if it's not already selected). Then click on the Customize Selected Theme button following below that.
3.) In the Customize Journal Style page and under Customize Your Theme, the following must be your settings for the fields listed below:
Section:
Display
Sub-section:
Presentation
Category: Additional Options
Show user picture icons with each of your entries? » Yes OPTIONAL BUT RECOMMENDED
Set the user picture position for each entry » Left IMPORTANT!
<< -------------------- O P T I O N A L -------------------- >>
Section:
Style
Sub-section:
Colors
FOR BASIC & PLUS ACCOUNTS ONLY
To make ads blend in to your layout, change the color hex code to #ffffff for the following fields:
Category: Page
Background color of the outer table
Category: Entries
Background color of the entries
Border color of the content and header/footer boxes
Background color of the subject, date and comment links
FOR ALL ACCOUNT LEVELS
If you don't use Friends Colors when viewing your Friends Page, or if you're using the stylesheet for a community, change Background color of the entries (under Category: Entries) to #ffffff.
This will get rid of the colored background behind usernames in entries and in your Friends Page. If you don't mind the colored background, then you may just skip this step. Or you can change it to another color you like.
Don't forget to click on Save Changes.
4.) Go to the Custom CSS section and under Page, set Use layout's stylesheet(s) to No. Then copy the codes below and paste it in the box provided for Custom stylesheet.
Preview again?
/* CUSTOM STYLESHEET--------------------------- */
/* Layout Style: Flexible Squares */
/* Template: Straightforward */
/* Theme: Graying Hair */
/* Date/Version: February 11, 2013 */
/* Encoded by Quitty for GRAFIKITTY */
/* http://grafikitty.livejournal.com/ */
/* -------------------------------------------- */
/* PAGE */
body { margin: 0px; background: #fff;
font-family: arial; font-size: 12px;
color: #888; }
a { color: #888; text-decoration: none; }
a:link, a:visited { color: #555;
text-decoration: underline; }
a:hover, a:active { color: #c56b80; }
code, kbd, pre, tt { color: #000; }
input, select, textarea, option {
background: #fff; }
#content { width: 100%;
margin: 0px; }
.clear { height: 0px; }
/* HEADER */
#header { padding-bottom: 40px;
border-bottom: 1px dotted #ccc;
font-family: georgia;
text-align: center; }
ul.navheader { margin: 0px;
padding: 20px 0px 20px 0px;
font-size: 10px; text-transform: uppercase;
line-height: 10px; }
ul.navheader li { display: inline;
margin: 0px 5px 0px 5px; }
li.view { padding: 0px 0px 2px 0px; }
div#header a { padding: 0px 0px 2px 0px;
border-bottom: 1px solid #ddd;
color: #888; text-decoration: none; }
div#header a:hover, div#header a:active {
border-bottom: 1px solid #c56b80; }
.title { margin-bottom: 10px;
font-size: 30px; font-weight: bold;
font-style: italic; line-height: 32px; }
.subtitle { font-size: 20px;
font-style: italic; line-height: 22px; }
/* FOOTER */
#footer { margin: 40px 0px 20px 0px;
font-family: georgia; font-size: 10px;
text-transform: uppercase;
text-align: center; line-height: 10px; }
ul.navfooter { margin: 0px; padding: 0px; }
ul.navfooter li { display: inline;
margin: 0px 5px 0px 5px; }
li.viewing { padding: 0px 0px 2px 0px; }
div#footer a { padding: 0px 0px 2px 0px;
border-bottom: 1px solid #ddd;
color: #888; text-decoration: none; }
div#footer a:hover, div#footer a:active {
border-bottom: 1px solid #c56b80; }
.clearfoot { clear: both; }
/* SIDEBAR */
#sidebar { width: 200px; float: left;
margin: 30px 0px 20px 200px; }
div#sidebar a { text-decoration: none; }
.defaultuserpic { margin-top: 10px;
text-align: center; }
.defaultuserpic img { padding: 9px;
background: #eee;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; }
li.sbartitle { list-style: none;
margin-top: 10px; font-family: georgia;
font-size: 14px; letter-spacing: 1px;
text-transform: uppercase; }
.sbarbody { margin-bottom: 10px; }
.sbarbody2 { margin: 10px 0px 10px 0px;
font-family: georgia; font-size: 14px;
text-align: center; }
.sbarlist { margin: 0px; padding: 0px; }
ul.sbarlist { list-style: none; }
li.sbaritem { list-style: none; }
li.sbaritem a { border-bottom: 1px solid #ddd;
text-decoration: none; line-height: 18px; }
li.sbaritem a:hover, li.sbaritem a:active {
border-bottom: 1px solid #555; }
.tagcloud { font-family: georgia;
text-align: center; }
table.calendar { margin: 0px;
font-family: georgia; }
.sbarcalendar, .sbarcalendarposts {
padding: 3px; background: #eee;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
text-align: center; }
.sbarcalendarposts { background: #fff; }
.sbarcalendarposts a { color: #c56b80; }
/* ENTRIES */
#maincontent { margin: 40px 200px 0px 420px; }
.datesubject { margin-bottom: 10px;
font-family: georgia; }
.date { padding-bottom: 5px;
font-style: italic; text-transform: lowercase;
line-height: 12px; }
.subject { font-size: 20px; color: #555; }
.subject a { border-bottom: 1px solid #ddd;
color: #555; text-decoration: none; }
.subject a:hover, .subject a:active {
border-bottom: 1px solid #c56b80; }
.userpic { position: relative;
float: right; z-index: 15;
margin: 0px 0px 10px 10px; padding: 5px;
background: #eee;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; }
.userpic br { display: block;
height: 0px; font-size: 0px; }
.userpicfriends { position: relative;
float: right; z-index: 15;
margin: 0px 0px 10px 10px;
font-size: 11px; text-align: center; }
.userpicfriends img { padding: 5px;
background: #eee;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; }
.userpicfriends br { display: block;
height: 0px; }
.userpicfriends a { text-decoration: none; }
.entry_text { text-align: justify; }
.entry_text blockquote {
margin: 16px 0px 16px 0px;
padding: 20px 20px 20px 40px;
background: #eee;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: georgia; color: #777; }
.entry_text dl { margin: 16px 0px 16px 0px;
padding: 10px 40px 0px 40px;
background: #eee;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: georgia; color: #777; }
.entry_text dt { margin: 0px;
padding: 0px; font-weight: bold; }
.entry_text dd { margin: 0px;
padding: 0px 0px 10px 0px; font-style: italic; }
.entry_text ol { list-style: list;
margin: 0px 0px 0px 20px; padding: 0px; }
.entry_text ul { list-style: list;
margin: 0em 0em 0em 1.1em; padding: 0px; }
.ljtags { margin-top: 16px;
font-size: 11px; text-align: left;
line-height: 13px; }
.currents { margin-top: 16px;
font-size: 11px; text-align: left;
line-height: 13px; }
.currents strong { font-weight: strong; }
.comments { position: relative;
margin-top: 16px; padding-bottom: 10px;
border-bottom: 1px dotted #ccc;
font-family: georgia; font-size: 14px;
color: #fff; font-style: italic;
text-align: center; line-height: 14px; }
.separator { height: 40px; }
/* ENTRY VIEWS, REPLY PAGE & COMMENTS */
.skiplinks { margin-bottom: 16px;
padding-top: 10px;
border-top: 1px dotted #ccc;
font-family: georgia; font-size: 14px;
color: #fff; font-style: italic;
text-align: center; line-height: 14px; }
.box { clear: right; background: #fff; }
textarea.textbox { width: 95% !important; }
.commentbox, .commentboxpartial {
margin: 5px 0px 5px 0px; padding: 5px;
background: #eee;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; }
.userpiccomment { position: relative;
float: left; top: -15px;
left: -10px; z-index: 15;
margin: 5px 5px -10px 5px; padding: 5px;
background: #fff;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc; }
.datesubjectcomment { margin: 5px 0px 5px 0px;
padding: 5px; font-family: georgia; }
.datesubjectcomment a { text-decoration: none; }
.commentreply { position: relative;
margin: 5px; }
.commentreply blockquote { text-align: justify; }
/* ARCHIVES */
ul.year { margin: 0px 0px 40px 0px;
font-family: georgia; text-align: center; }
ul.year li { display: inline;
margin: 0px 1px 0px 1px; }
table.yeartable { margin-left: auto;
margin-right: auto; }
td.yearmonth { padding-bottom: 2px; }
table.yeartable td.yearday,
table.yeartable td.yeardate {
background: #eee;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd; }
table.yeartable td.yearday {
text-align: center; }
table.yeartable td.yeardate a {
font-family: georgia; font-size: 14px;
font-weight: bold; text-decoration: none; }
dl { margin: 0px; padding: 0px 20px 0px 20px; }
dt { margin-bottom: 5px; }
dd { margin: 0px 0px 20px 0px; }
/* TAGS PAGE */
h2 { border-bottom: 1px dotted #ccc;
font-family: georgia; font-size: 20px;
font-weight: normal; text-transform: lowercase; }
.ljtaglist { list-style: none; }
/* IE HACKS */
* html div.subcontent {
/* fixes an IE reply page bug */
height: 1%; clear: none; }
* html div.box#commentform {
/* fixes an IE reply page bug */
position: absolute; }
/* ---END OF CUSTOM STYLESHEET--- */
Click on Save Changes and it's done!
If you haven't already done so, customize the rest of your journal. Most journal elements not mentioned in the instructions above must be customized through the customization wizard.
ADDITIONAL NOTES
• I don't recommend adding a header image or banner for this layout but if you really want to, please read this tutorial. What I do recommend is adding a background pattern for the header. To do this, go to the /* HEADER */ section of your stylesheet, look for #header and after its opening curly bracket, insert this code:
background: url(IMAGE URL) repeat;
Don't forget that you must first upload the background pattern to a file server or image host and replace IMAGE URL with the pattern's URL.
• If you want the body of your journal (i.e. sidebar and entries) to be as wide as the header and fill up the page, then follow these steps:1.) Go to the /* SIDEBAR */ section of your stylesheet, look for #sidebar and change the following settings:
width: 200px; → width: 300px;
margin: 30px 0px 20px 200px; → margin: 30px 0px 20px 20px;
2.) Go to the /* ENTRIES */ section of your stylesheet, look for #maincontent and change the following setting:
margin: margin: 40px 200px 0px 420px; → margin: 40px 20px 0px 340px;
• Please visit s2flexisquares for additional or advanced customizations.
• For Basic and Plus accounts: This layout works with any type of Ad Placement, either Vertical, Horizontal or Between Entries. But I recommend using either plain Vertical or a combination of Vertical and Between Entries. (To customize Ad Placement for your journal, go to the Select Journal Style page of your account and scroll down to 3. Choose a Page Setup.)
• For Internet Explorer users: Just a warning that your journal entries and Friends Page may move downwards or stretch to accommodate overly large images or lengthy comment threads.
CREDITS
s2flexisquares & cartonage for tutorials
Please enjoy! :)