quitty
in
grafikitty
layout: s2 flexible squares - tattle - 2 themes
EDIT - February 11, 2013
To anyone who may have any questions or problems with this layout, please know that because I don't regularly check in to Livejournal nowadays, I will most likely be unable to help you. I'm very sorry about this and thank you for understanding.
----------
Hot Gossip Pink Click on image for full preview.
Old News Blue Click on thumbnail for full preview.
Layout Style: S2 Flexible Squares
Template: Tattle
Themes: 2 total - Hot Gossip Pink and Old News Blue
Account Levels: All - Basic, Plus, Paid, etc.
• Tested in Firefox 3 and Internet Explorer 7. Looks fine in both. (Though I like how IE7 treats text better.)
• Liquid width; works with any screen resolution from 800x600 and up. Best viewed with at least 1024x768.
• Layout aligned to the right of page.
• All journal views fully customized -- entries, archives, etc. and comments (for Plus and Paid accounts).
• Works fine with LJ’s navigation strip and ads.
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 or 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. Make sure it’s using the S2 Style System.
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 done loading, 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. (*I recommend selecting a theme with a similar color scheme as the stylesheet you’re going to use.)
Scroll down 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.
2.) 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 following fields to the background color hex code of the theme you’re going to use:
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
BACKGROUND COLOR HEX CODES
Hot Gossip Pink » #ffffff
Old News Blue » #f9f9f9
FOR ALL ACCOUNT LEVELS
If you don’t use Friends Colors when viewing your Friends Page, or if you’re using the stylesheets for a community, change Background color of the entries (under Category: Entries) to the background color hex code of the theme you’re going to use:
Hot Gossip Pink » #ffffff
Old News Blue » #f9f9f9
This will get rid of the colored border around userpics in entries and in your Friends Page. If you don’t mind the colored border, 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.
3.) Go to the Custom CSS section and under Page, set Use layout’s stylesheet(s) to No. Then copy the codes of your preferred theme below and paste it in the box provided for Custom stylesheet.
Hot Gossip Pink Preview again?
/* CUSTOM STYLESHEET--------------------------- */
/* Layout Style: S2 Flexible Squares */
/* Template: Tattle */
/* Theme: Hot Gossip Pink */
/* Date/Version: November 8, 2008 */
/* Encoded by Quitty for GRAFIKITTY */
/* http://community.livejournal.com/grafikitty/ */
/* -------------------------------------------- */
/* PAGE */
body { margin: 0px;
background: #ffffff;
font-family: arial, sans-serif;
font-size: 11px;
color: #000000; }
a:link, a:visited { color: #f06eaa;
text-decoration: none; }
a:hover, a:active { color: #f49ac1; }
#content { width: 75%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: 10px;
background: #ffffff;
font-size: 12px; }
#content input, #content select,
#content textarea { background: transparent; }
.clear { height: 0px; }
/* HEADER */
.headerimage {}
#header { background: #ffffff;
font-weight: bold;
text-align: right; }
ul.navheader { margin: 0px;
padding: 20px 0px 20px 0px; }
ul.navheader li { display: inline;
margin: 0px 0px 0px -1px;
text-transform: lowercase;
text-align: center; }
li.view { padding: 20px;
background: #ec008c url(http://pics.livejournal.com/winklescoat/pic/000ahdgp) repeat;
color: #ffffff; }
div#header a:link, div#header a:visited {
padding: 20px;
background: #f06eaa url(http://pics.livejournal.com/winklescoat/pic/000aks6d) repeat;
color: #ffffff; }
div#header a:hover, div#header a:active {
background: #f49ac1 url(http://pics.livejournal.com/winklescoat/pic/000apk4w) repeat; }
.title { margin: 5px 0px 0px 0px;
font-size: 48px;
line-height: 40px; }
.subtitle { font-size: 24px;
font-weight: normal;
line-height: 16px; }
/* FOOTER */
#footer { background: #ffffff;
font-weight: bold;
text-align: right; }
ul.navfooter { margin: 0px;
padding: 20px 0px 20px 0px; }
ul.navfooter li { display: inline;
margin: 0px 0px 0px -1px;
text-transform: lowercase;
text-align: center; }
li.viewing { padding: 20px;
background: #ec008c url(http://pics.livejournal.com/winklescoat/pic/000ahdgp) repeat;
color: #ffffff; }
div#footer a:link, div#footer a:visited {
padding: 20px;
background: #f06eaa url(http://pics.livejournal.com/winklescoat/pic/000aks6d) repeat;
color: #ffffff; }
div#footer a:hover, div#footer a:active {
background: #f49ac1 url(http://pics.livejournal.com/winklescoat/pic/000apk4w) repeat; }
.clearfoot { clear: both; }
/* SIDEBAR */
#sidebar { width: 180px;
float: right;
margin: 10px 0px 0px 0px;
background: #ffffff;
text-align: right; }
.defaultuserpic { margin-top: 10px; }
li.sbartitle { list-style: none;
margin: 10px 0px 1px 0px;
padding: 3px;
background: #ec008c url(http://pics.livejournal.com/winklescoat/pic/000ahdgp) repeat;
font-size: 16px;
color: #ffffff;
font-weight: bold;
text-transform: uppercase; }
.sbarbody { margin: 0px; }
.sbarbody2 { padding: 0px 2px 0px 2px;
font-family: arial black, sans-serif;
font-size: 14px;
line-height: 14px; }
.sbarlist { margin: 0px;
padding: 0px; }
ul.sbarlist { list-style: none; }
li.sbaritem, .tagcloud { list-style: none; }
#sidebar_summary li.sbaritem {
padding: 2px 0px 2px 0px;
border-bottom: 1px solid #f0f0f0; }
table.calendar { margin: 0px 0px 0px auto; }
.sbarcalendar, .sbarcalendarposts {
padding: 2px;
background: #f9f9f9;
border: 1px solid #f0f0f0;
font-family: Verdana, sans-serif;
font-size: 11px;
color: #e0e0e0;
text-align: center; }
.sbarcalendarposts { background: #ffffff; }
/* ENTRIES */
#maincontent { margin: 20px 200px 0px 0px;
background: #ffffff; }
.subcontent {}
.datesubject { margin: 0px 0px 5px 0px; }
.date { font-family: Verdana, sans-serif;
font-size: 11px;
text-transform: lowercase;
letter-spacing: 3px;
line-height: 11px; }
.subject { font-size: 22px;
font-weight: bold;
line-height: 22px; }
.userpic { position: relative;
float: left;
margin: 0px 10px 5px 0px;
z-index: 15; }
.userpic br { display: block;
height: 0px;
font-size: 0px; }
.userpicfriends { position: relative;
float: left;
margin: 0px 5px 5px 0px;
padding: 5px;
font-family: "trebuchet ms", sans-serif;
font-size: 11px;
text-align: center;
z-index: 15; }
.userpicfriends br { display: block;
height: 0px; }
.entry {}
.entry_text { font-size: 14px;
text-align: justify;
line-height: 20px; }
.entry_text blockquote { padding: 10px;
background: #ffffff url(http://pics.livejournal.com/winklescoat/pic/000aq11z) repeat-x bottom;
border: 1px solid #f0f0f0;
font-size: 16px;
line-height: normal; }
.ljtags { margin: 5px 0px 0px 0px;
padding: 3px 0px 3px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000axdea) no-repeat 0px 2px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0;
font-size: 12px;
text-align: left;
line-height: normal; }
.currents { margin: 5px 0px 0px 0px;
padding: 1px 0px 1px 0px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0; }
.currents strong { display: none; }
.currentlocation { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000ayk40) no-repeat left center;
}
.currentgroups { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000azc2s) no-repeat left center;
}
.currentmood { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000b035w) no-repeat left center;
}
.currentmusic { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000b1s76) no-repeat left center;
}
.comments { position: relative;
margin: 5px 0px 0px 0px;
font-size: 18px;
color: #ffffff;
text-transform: lowercase;
text-align: right; }
.separator { height: 40px; }
/* ENTRY VIEWS, REPLY PAGE & COMMENTS */
.skiplinks { margin: 0px 0px 5px 0px;
font-size: 18px;
color: #ffffff;
text-transform: lowercase;
text-align: center; }
.box { background: #ffffff;
clear: left; }
.replytosubject { font-weight: bold; }
textarea.textbox { width: 95% !important; }
.commentbox { margin: 5px 0px 5px 0px;
padding: 5px;
background: #f0f0f0; }
.commentboxpartial { margin: 5px 0px 5px 0px;
padding: 4px;
background: #ffffff;
border: 1px solid #f0f0f0; }
.userpiccomment { position: relative;
float: left;
top: -15px;
left: -10px;
margin: 5px 5px -10px 5px;
z-index: 15; }
.datesubjectcomment { margin: 5px 0px 5px 0px;
padding: 5px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0; }
.commentreply { position: relative;
margin: 5px; }
/* ARCHIVES */
ul.year { margin: 0px 0px 20px 0px;
padding: 0px;
font-size: 18px;
text-align: center; }
ul.year li { display: inline; }
table.yeartable { margin-left: auto;
margin-right: auto; }
td.yearmonth {}
table.yeartable td.yearday {
background: #fbd7e6;
text-align: center; }
table.yeartable td.yearday,
table.yeartable td.yeardate
{ border: 1px solid #c0c0c0; }
table.yeartable td.yeardate a
{ font-weight: bold; }
dd { margin-bottom: 1em; }
/* TAGS PAGE */
h2 { margin: 0px 0px 10px 0px;
font-size: 22px;
text-align: center; }
.ljtaglist { list-style: none;
margin: 10px 0px 0px 0px;
padding: 0px;
text-align: center; }
/* CONTEXTUAL POPUP */
div.ContextualPopup {
font: normal 12px Arial, sans-serif !important;
}
div.ContextualPopup div.Inner { width: 200px;
padding: 5px;
background: #b9b9b9 url(http://pics.livejournal.com/winklescoat/pic/000b21rc) repeat !important;
border: 1px solid #b0b0b0;
color: #000000 !important; }
div.ContextualPopup .Content {
margin: 0px 5px 0px 0px;
padding: 0px;
line-height: normal; }
div.ContextualPopup .Userpic
{ padding: 0px 0px 5px 5px; }
div.ContextualPopup .Content .OnlineStatus
{ font-weight: normal; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited
{ color: #ec008c !important; }
/* IE HACKS */
li.view, li.viewing {
*margin: 0px 3px 0px -1px !important;
*padding: 20px 17px 20px 20px; }
* html div.subcontent { height: 1%;
clear: none; }
* html div.box#commentform
{ position: absolute; }
/* ---END OF CUSTOM STYLESHEET--- */
Old News Blue Preview again?
/* CUSTOM STYLESHEET--------------------------- */
/* Layout Style: S2 Flexible Squares */
/* Template: Tattle */
/* Theme: Old News Blue */
/* Date/Version: November 8, 2008 */
/* Encoded by Quitty for GRAFIKITTY */
/* http://community.livejournal.com/grafikitty/ */
/* -------------------------------------------- */
/* PAGE */
body { margin: 0px;
background: #f9f9f9;
font-family: arial, sans-serif;
font-size: 11px;
color: #333333; }
a:link, a:visited { color: #00aac0;
text-decoration: none; }
a:hover, a:active { color: #9ccad4; }
#content { width: 75%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: 10px;
background: #f9f9f9;
font-size: 12px; }
#content input, #content select,
#content textarea { background: transparent;
color: #333333; }
.clear { height: 0px; }
/* HEADER */
.headerimage {}
#header { background: #f9f9f9;
font-weight: bold;
text-align: right; }
ul.navheader { margin: 0px;
padding: 20px 0px 20px 0px; }
ul.navheader li { display: inline;
margin: 0px 0px 0px -1px;
text-transform: lowercase;
text-align: center; }
li.view { padding: 20px;
background: #008aae url(http://pics.livejournal.com/winklescoat/pic/000aryaz) repeat;
color: #f9f9f9; }
div#header a:link, div#header a:visited {
padding: 20px;
background: #00aac0 url(http://pics.livejournal.com/winklescoat/pic/000asye3) repeat;
color: #f9f9f9; }
div#header a:hover, div#header a:active {
background: #6dc0cd url(http://pics.livejournal.com/winklescoat/pic/000atrp3) repeat; }
.title { margin: 5px 0px 0px 0px;
font-size: 48px;
line-height: 40px; }
.subtitle { font-size: 24px;
font-weight: normal;
line-height: 16px; }
/* FOOTER */
#footer { background: #f9f9f9;
font-weight: bold;
text-align: right; }
ul.navfooter { margin: 0px;
padding: 20px 0px 20px 0px; }
ul.navfooter li { display: inline;
margin: 0px 0px 0px -1px;
text-transform: lowercase;
text-align: center; }
li.viewing { padding: 20px;
background: #008aae url(http://pics.livejournal.com/winklescoat/pic/000aryaz) repeat;
color: #f9f9f9; }
div#footer a:link, div#footer a:visited {
padding: 20px;
background: #00aac0 url(http://pics.livejournal.com/winklescoat/pic/000asye3) repeat;
color: #f9f9f9; }
div#footer a:hover, div#footer a:active {
background: #6dc0cd url(http://pics.livejournal.com/winklescoat/pic/000atrp3) repeat; }
.clearfoot { clear: both; }
/* SIDEBAR */
#sidebar { width: 180px;
float: right;
margin: 10px 0px 0px 0px;
background: #f9f9f9;
text-align: right; }
.defaultuserpic { margin-top: 10px; }
li.sbartitle { list-style: none;
margin: 10px 0px 1px 0px;
padding: 3px;
background: #008aae url(http://pics.livejournal.com/winklescoat/pic/000aryaz) repeat;
font-size: 16px;
color: #f9f9f9;
font-weight: bold;
text-transform: uppercase; }
.sbarbody { margin: 0px; }
.sbarbody2 { padding: 0px 2px 0px 2px;
font-family: arial black, sans-serif;
font-size: 14px;
line-height: 14px; }
.sbarlist { margin: 0px;
padding: 0px; }
ul.sbarlist { list-style: none; }
li.sbaritem, .tagcloud { list-style: none; }
#sidebar_summary li.sbaritem {
padding: 2px 0px 2px 0px;
border-bottom: 1px solid #e0e0e0; }
table.calendar { margin: 0px 0px 0px auto; }
.sbarcalendar, .sbarcalendarposts {
padding: 2px;
background: #e9e9e9;
border: 1px solid #e0e0e0;
font-family: Verdana, sans-serif;
font-size: 11px;
color: #d0d0d0;
text-align: center; }
.sbarcalendarposts { background: #f9f9f9; }
/* ENTRIES */
#maincontent { margin: 20px 200px 0px 0px;
background: #f9f9f9; }
.subcontent {}
.datesubject { margin: 0px 0px 5px 0px; }
.date { font-family: Verdana, sans-serif;
font-size: 11px;
text-transform: lowercase;
letter-spacing: 3px;
line-height: 11px; }
.subject { font-size: 22px;
font-weight: bold;
line-height: 22px; }
.userpic { position: relative;
float: left;
margin: 0px 10px 5px 0px;
z-index: 15; }
.userpic br { display: block;
height: 0px;
font-size: 0px; }
.userpicfriends { position: relative;
float: left;
margin: 0px 5px 5px 0px;
padding: 5px;
font-family: "trebuchet ms", sans-serif;
font-size: 11px;
text-align: center;
z-index: 15; }
.userpicfriends br { display: block;
height: 0px; }
.entry {}
.entry_text { font-size: 14px;
text-align: justify;
line-height: 20px; }
.entry_text blockquote { padding: 10px;
background: #f9f9f9 url(http://pics.livejournal.com/winklescoat/pic/000awaax) repeat-x bottom;
border: 1px solid #e9e9e9;
font-size: 16px;
line-height: normal; }
.ljtags { margin: 5px 0px 0px 0px;
padding: 3px 0px 3px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000axdea) no-repeat 0px 2px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0;
font-size: 12px;
text-align: left;
line-height: normal; }
.currents { margin: 5px 0px 0px 0px;
padding: 1px 0px 1px 0px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0; }
.currents strong { display: none; }
.currentlocation { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000ayk40) no-repeat left center;
}
.currentgroups { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000azc2s) no-repeat left center;
}
.currentmood { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000b035w) no-repeat left center;
}
.currentmusic { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000b1s76) no-repeat left center;
}
.comments { position: relative;
margin: 5px 0px 0px 0px;
font-size: 18px;
color: #f9f9f9;
text-transform: lowercase;
text-align: right; }
.separator { height: 40px; }
/* ENTRY VIEWS, REPLY PAGE & COMMENTS */
.skiplinks { margin: 0px 0px 5px 0px;
font-size: 18px;
color: #f9f9f9;
text-transform: lowercase;
text-align: center; }
.box { background: #f9f9f9;
clear: left; }
.replytosubject { font-weight: bold; }
textarea.textbox { width: 95% !important; }
.commentbox { margin: 5px 0px 5px 0px;
padding: 5px;
background: #e9e9e9; }
.commentboxpartial { margin: 5px 0px 5px 0px;
padding: 4px;
background: #f9f9f9;
border: 1px solid #e9e9e9; }
.userpiccomment { position: relative;
float: left;
top: -15px;
left: -10px;
margin: 5px 5px -10px 5px;
z-index: 15; }
.datesubjectcomment { margin: 5px 0px 5px 0px;
padding: 5px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0; }
.commentreply { position: relative;
margin: 5px; }
/* ARCHIVES */
ul.year { margin: 0px 0px 20px 0px;
padding: 0px;
font-size: 18px;
text-align: center; }
ul.year li { display: inline; }
table.yeartable { margin-left: auto;
margin-right: auto; }
td.yearmonth {}
table.yeartable td.yearday {
background: #6dc0cd;
text-align: center; }
table.yeartable td.yearday,
table.yeartable td.yeardate
{ border: 1px solid #c0c0c0; }
table.yeartable td.yeardate a
{ font-weight: bold; }
dd { margin-bottom: 1em; }
/* TAGS PAGE */
h2 { margin: 0px 0px 10px 0px;
font-size: 22px;
text-align: center; }
.ljtaglist { list-style: none;
margin: 10px 0px 0px 0px;
padding: 0px;
text-align: center; }
/* CONTEXTUAL POPUP */
div.ContextualPopup {
font: normal 12px Arial, sans-serif !important;
}
div.ContextualPopup div.Inner { width: 200px;
padding: 5px;
background: #b9b9b9 url(http://pics.livejournal.com/winklescoat/pic/000b21rc) repeat !important;
border: 1px solid #b0b0b0;
color: #000000 !important; }
div.ContextualPopup .Content {
margin: 0px 5px 0px 0px;
padding: 0px;
line-height: normal; }
div.ContextualPopup .Userpic
{ padding: 0px 0px 5px 5px; }
div.ContextualPopup .Content .OnlineStatus
{ font-weight: normal; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited
{ color: #ffffff !important; }
/* IE HACKS */
li.view, li.viewing {
*margin: 0px 3px 0px -1px !important;
*padding: 20px 17px 20px 20px; }
* html div.subcontent { height: 1%;
clear: none; }
* html div.box#commentform
{ position: absolute; }
/* ---END OF CUSTOM STYLESHEET--- */
Click on Save Changes and it’s done!
I’m hosting all layout graphics in my ScrapBook account so there’s no need to worry about them, but you’re welcome to save and upload them to your own file server or image host:
Hot Gossip Pink
DOWNLOAD via 4shared
Old News Blue
DOWNLOAD via 4sharedDon’t forget to replace the images’ URLs in your stylesheet.
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
• If you want to change the alignment of your journal, go to the /* PAGE */ section of your stylesheet and look for #content. Modify the settings for margin-left and margin-right according to one of the following:
Centered
margin-left: auto;
margin-right: auto;
Aligned Left
margin-left: 10px;
margin-right: auto;
• If you’d like to add a header image to your journal, go to the /* HEADER */ section of your stylesheet and look for .headerimage {}. Insert the following codes within the brackets and change the settings in red:
.headerimage { position: relative;
width: 0px; /* width of image in pixels */
height: 0px; /* height of image in pixels */
margin-top: 0px; /* space between top of page & top of image in pixels */
margin-bottom: 0px; /* space between bottom of image & top of journal in pixels */
margin-left: auto;
margin-right: 10px;
background: url(IMAGE URL) no-repeat; }
Don’t forget that you must first upload your header image to your own file server or image host. Also, if you’re going to change your journal’s alignment, you might want to adjust your header image’s left and right margins accordingly.
If you want your journal to be as wide as your header image, you have to switch your journal to a fixed width. To do this, go to the /* PAGE */ section of your stylesheet, look for #content and change width: 75%; to the width of your header image in pixels (e.g. width: 750px;).
• 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 ads or a combination of Between Entries and Vertical ads. (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 will move downwards or they may stretch to accommodate overly large images or lengthy comment threads.
• Please visit s2flexisquares for additional or advanced customizations.
CREDITS
cartonage & s2flexisquares for tutorials
Sweetie for the tags & metadata icons
Please enjoy! :)
To anyone who may have any questions or problems with this layout, please know that because I don't regularly check in to Livejournal nowadays, I will most likely be unable to help you. I'm very sorry about this and thank you for understanding.
----------
Hot Gossip Pink Click on image for full preview.
Old News Blue Click on thumbnail for full preview.
Layout Style: S2 Flexible Squares
Template: Tattle
Themes: 2 total - Hot Gossip Pink and Old News Blue
Account Levels: All - Basic, Plus, Paid, etc.
• Tested in Firefox 3 and Internet Explorer 7. Looks fine in both. (Though I like how IE7 treats text better.)
• Liquid width; works with any screen resolution from 800x600 and up. Best viewed with at least 1024x768.
• Layout aligned to the right of page.
• All journal views fully customized -- entries, archives, etc. and comments (for Plus and Paid accounts).
• Works fine with LJ’s navigation strip and ads.
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 or 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. Make sure it’s using the S2 Style System.
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 done loading, 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. (*I recommend selecting a theme with a similar color scheme as the stylesheet you’re going to use.)
Scroll down 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.
2.) 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 following fields to the background color hex code of the theme you’re going to use:
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
BACKGROUND COLOR HEX CODES
Hot Gossip Pink » #ffffff
Old News Blue » #f9f9f9
FOR ALL ACCOUNT LEVELS
If you don’t use Friends Colors when viewing your Friends Page, or if you’re using the stylesheets for a community, change Background color of the entries (under Category: Entries) to the background color hex code of the theme you’re going to use:
Hot Gossip Pink » #ffffff
Old News Blue » #f9f9f9
This will get rid of the colored border around userpics in entries and in your Friends Page. If you don’t mind the colored border, 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.
3.) Go to the Custom CSS section and under Page, set Use layout’s stylesheet(s) to No. Then copy the codes of your preferred theme below and paste it in the box provided for Custom stylesheet.
Hot Gossip Pink Preview again?
/* CUSTOM STYLESHEET--------------------------- */
/* Layout Style: S2 Flexible Squares */
/* Template: Tattle */
/* Theme: Hot Gossip Pink */
/* Date/Version: November 8, 2008 */
/* Encoded by Quitty for GRAFIKITTY */
/* http://community.livejournal.com/grafikitty/ */
/* -------------------------------------------- */
/* PAGE */
body { margin: 0px;
background: #ffffff;
font-family: arial, sans-serif;
font-size: 11px;
color: #000000; }
a:link, a:visited { color: #f06eaa;
text-decoration: none; }
a:hover, a:active { color: #f49ac1; }
#content { width: 75%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: 10px;
background: #ffffff;
font-size: 12px; }
#content input, #content select,
#content textarea { background: transparent; }
.clear { height: 0px; }
/* HEADER */
.headerimage {}
#header { background: #ffffff;
font-weight: bold;
text-align: right; }
ul.navheader { margin: 0px;
padding: 20px 0px 20px 0px; }
ul.navheader li { display: inline;
margin: 0px 0px 0px -1px;
text-transform: lowercase;
text-align: center; }
li.view { padding: 20px;
background: #ec008c url(http://pics.livejournal.com/winklescoat/pic/000ahdgp) repeat;
color: #ffffff; }
div#header a:link, div#header a:visited {
padding: 20px;
background: #f06eaa url(http://pics.livejournal.com/winklescoat/pic/000aks6d) repeat;
color: #ffffff; }
div#header a:hover, div#header a:active {
background: #f49ac1 url(http://pics.livejournal.com/winklescoat/pic/000apk4w) repeat; }
.title { margin: 5px 0px 0px 0px;
font-size: 48px;
line-height: 40px; }
.subtitle { font-size: 24px;
font-weight: normal;
line-height: 16px; }
/* FOOTER */
#footer { background: #ffffff;
font-weight: bold;
text-align: right; }
ul.navfooter { margin: 0px;
padding: 20px 0px 20px 0px; }
ul.navfooter li { display: inline;
margin: 0px 0px 0px -1px;
text-transform: lowercase;
text-align: center; }
li.viewing { padding: 20px;
background: #ec008c url(http://pics.livejournal.com/winklescoat/pic/000ahdgp) repeat;
color: #ffffff; }
div#footer a:link, div#footer a:visited {
padding: 20px;
background: #f06eaa url(http://pics.livejournal.com/winklescoat/pic/000aks6d) repeat;
color: #ffffff; }
div#footer a:hover, div#footer a:active {
background: #f49ac1 url(http://pics.livejournal.com/winklescoat/pic/000apk4w) repeat; }
.clearfoot { clear: both; }
/* SIDEBAR */
#sidebar { width: 180px;
float: right;
margin: 10px 0px 0px 0px;
background: #ffffff;
text-align: right; }
.defaultuserpic { margin-top: 10px; }
li.sbartitle { list-style: none;
margin: 10px 0px 1px 0px;
padding: 3px;
background: #ec008c url(http://pics.livejournal.com/winklescoat/pic/000ahdgp) repeat;
font-size: 16px;
color: #ffffff;
font-weight: bold;
text-transform: uppercase; }
.sbarbody { margin: 0px; }
.sbarbody2 { padding: 0px 2px 0px 2px;
font-family: arial black, sans-serif;
font-size: 14px;
line-height: 14px; }
.sbarlist { margin: 0px;
padding: 0px; }
ul.sbarlist { list-style: none; }
li.sbaritem, .tagcloud { list-style: none; }
#sidebar_summary li.sbaritem {
padding: 2px 0px 2px 0px;
border-bottom: 1px solid #f0f0f0; }
table.calendar { margin: 0px 0px 0px auto; }
.sbarcalendar, .sbarcalendarposts {
padding: 2px;
background: #f9f9f9;
border: 1px solid #f0f0f0;
font-family: Verdana, sans-serif;
font-size: 11px;
color: #e0e0e0;
text-align: center; }
.sbarcalendarposts { background: #ffffff; }
/* ENTRIES */
#maincontent { margin: 20px 200px 0px 0px;
background: #ffffff; }
.subcontent {}
.datesubject { margin: 0px 0px 5px 0px; }
.date { font-family: Verdana, sans-serif;
font-size: 11px;
text-transform: lowercase;
letter-spacing: 3px;
line-height: 11px; }
.subject { font-size: 22px;
font-weight: bold;
line-height: 22px; }
.userpic { position: relative;
float: left;
margin: 0px 10px 5px 0px;
z-index: 15; }
.userpic br { display: block;
height: 0px;
font-size: 0px; }
.userpicfriends { position: relative;
float: left;
margin: 0px 5px 5px 0px;
padding: 5px;
font-family: "trebuchet ms", sans-serif;
font-size: 11px;
text-align: center;
z-index: 15; }
.userpicfriends br { display: block;
height: 0px; }
.entry {}
.entry_text { font-size: 14px;
text-align: justify;
line-height: 20px; }
.entry_text blockquote { padding: 10px;
background: #ffffff url(http://pics.livejournal.com/winklescoat/pic/000aq11z) repeat-x bottom;
border: 1px solid #f0f0f0;
font-size: 16px;
line-height: normal; }
.ljtags { margin: 5px 0px 0px 0px;
padding: 3px 0px 3px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000axdea) no-repeat 0px 2px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0;
font-size: 12px;
text-align: left;
line-height: normal; }
.currents { margin: 5px 0px 0px 0px;
padding: 1px 0px 1px 0px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0; }
.currents strong { display: none; }
.currentlocation { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000ayk40) no-repeat left center;
}
.currentgroups { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000azc2s) no-repeat left center;
}
.currentmood { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000b035w) no-repeat left center;
}
.currentmusic { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000b1s76) no-repeat left center;
}
.comments { position: relative;
margin: 5px 0px 0px 0px;
font-size: 18px;
color: #ffffff;
text-transform: lowercase;
text-align: right; }
.separator { height: 40px; }
/* ENTRY VIEWS, REPLY PAGE & COMMENTS */
.skiplinks { margin: 0px 0px 5px 0px;
font-size: 18px;
color: #ffffff;
text-transform: lowercase;
text-align: center; }
.box { background: #ffffff;
clear: left; }
.replytosubject { font-weight: bold; }
textarea.textbox { width: 95% !important; }
.commentbox { margin: 5px 0px 5px 0px;
padding: 5px;
background: #f0f0f0; }
.commentboxpartial { margin: 5px 0px 5px 0px;
padding: 4px;
background: #ffffff;
border: 1px solid #f0f0f0; }
.userpiccomment { position: relative;
float: left;
top: -15px;
left: -10px;
margin: 5px 5px -10px 5px;
z-index: 15; }
.datesubjectcomment { margin: 5px 0px 5px 0px;
padding: 5px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0; }
.commentreply { position: relative;
margin: 5px; }
/* ARCHIVES */
ul.year { margin: 0px 0px 20px 0px;
padding: 0px;
font-size: 18px;
text-align: center; }
ul.year li { display: inline; }
table.yeartable { margin-left: auto;
margin-right: auto; }
td.yearmonth {}
table.yeartable td.yearday {
background: #fbd7e6;
text-align: center; }
table.yeartable td.yearday,
table.yeartable td.yeardate
{ border: 1px solid #c0c0c0; }
table.yeartable td.yeardate a
{ font-weight: bold; }
dd { margin-bottom: 1em; }
/* TAGS PAGE */
h2 { margin: 0px 0px 10px 0px;
font-size: 22px;
text-align: center; }
.ljtaglist { list-style: none;
margin: 10px 0px 0px 0px;
padding: 0px;
text-align: center; }
/* CONTEXTUAL POPUP */
div.ContextualPopup {
font: normal 12px Arial, sans-serif !important;
}
div.ContextualPopup div.Inner { width: 200px;
padding: 5px;
background: #b9b9b9 url(http://pics.livejournal.com/winklescoat/pic/000b21rc) repeat !important;
border: 1px solid #b0b0b0;
color: #000000 !important; }
div.ContextualPopup .Content {
margin: 0px 5px 0px 0px;
padding: 0px;
line-height: normal; }
div.ContextualPopup .Userpic
{ padding: 0px 0px 5px 5px; }
div.ContextualPopup .Content .OnlineStatus
{ font-weight: normal; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited
{ color: #ec008c !important; }
/* IE HACKS */
li.view, li.viewing {
*margin: 0px 3px 0px -1px !important;
*padding: 20px 17px 20px 20px; }
* html div.subcontent { height: 1%;
clear: none; }
* html div.box#commentform
{ position: absolute; }
/* ---END OF CUSTOM STYLESHEET--- */
Old News Blue Preview again?
/* CUSTOM STYLESHEET--------------------------- */
/* Layout Style: S2 Flexible Squares */
/* Template: Tattle */
/* Theme: Old News Blue */
/* Date/Version: November 8, 2008 */
/* Encoded by Quitty for GRAFIKITTY */
/* http://community.livejournal.com/grafikitty/ */
/* -------------------------------------------- */
/* PAGE */
body { margin: 0px;
background: #f9f9f9;
font-family: arial, sans-serif;
font-size: 11px;
color: #333333; }
a:link, a:visited { color: #00aac0;
text-decoration: none; }
a:hover, a:active { color: #9ccad4; }
#content { width: 75%;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: 10px;
background: #f9f9f9;
font-size: 12px; }
#content input, #content select,
#content textarea { background: transparent;
color: #333333; }
.clear { height: 0px; }
/* HEADER */
.headerimage {}
#header { background: #f9f9f9;
font-weight: bold;
text-align: right; }
ul.navheader { margin: 0px;
padding: 20px 0px 20px 0px; }
ul.navheader li { display: inline;
margin: 0px 0px 0px -1px;
text-transform: lowercase;
text-align: center; }
li.view { padding: 20px;
background: #008aae url(http://pics.livejournal.com/winklescoat/pic/000aryaz) repeat;
color: #f9f9f9; }
div#header a:link, div#header a:visited {
padding: 20px;
background: #00aac0 url(http://pics.livejournal.com/winklescoat/pic/000asye3) repeat;
color: #f9f9f9; }
div#header a:hover, div#header a:active {
background: #6dc0cd url(http://pics.livejournal.com/winklescoat/pic/000atrp3) repeat; }
.title { margin: 5px 0px 0px 0px;
font-size: 48px;
line-height: 40px; }
.subtitle { font-size: 24px;
font-weight: normal;
line-height: 16px; }
/* FOOTER */
#footer { background: #f9f9f9;
font-weight: bold;
text-align: right; }
ul.navfooter { margin: 0px;
padding: 20px 0px 20px 0px; }
ul.navfooter li { display: inline;
margin: 0px 0px 0px -1px;
text-transform: lowercase;
text-align: center; }
li.viewing { padding: 20px;
background: #008aae url(http://pics.livejournal.com/winklescoat/pic/000aryaz) repeat;
color: #f9f9f9; }
div#footer a:link, div#footer a:visited {
padding: 20px;
background: #00aac0 url(http://pics.livejournal.com/winklescoat/pic/000asye3) repeat;
color: #f9f9f9; }
div#footer a:hover, div#footer a:active {
background: #6dc0cd url(http://pics.livejournal.com/winklescoat/pic/000atrp3) repeat; }
.clearfoot { clear: both; }
/* SIDEBAR */
#sidebar { width: 180px;
float: right;
margin: 10px 0px 0px 0px;
background: #f9f9f9;
text-align: right; }
.defaultuserpic { margin-top: 10px; }
li.sbartitle { list-style: none;
margin: 10px 0px 1px 0px;
padding: 3px;
background: #008aae url(http://pics.livejournal.com/winklescoat/pic/000aryaz) repeat;
font-size: 16px;
color: #f9f9f9;
font-weight: bold;
text-transform: uppercase; }
.sbarbody { margin: 0px; }
.sbarbody2 { padding: 0px 2px 0px 2px;
font-family: arial black, sans-serif;
font-size: 14px;
line-height: 14px; }
.sbarlist { margin: 0px;
padding: 0px; }
ul.sbarlist { list-style: none; }
li.sbaritem, .tagcloud { list-style: none; }
#sidebar_summary li.sbaritem {
padding: 2px 0px 2px 0px;
border-bottom: 1px solid #e0e0e0; }
table.calendar { margin: 0px 0px 0px auto; }
.sbarcalendar, .sbarcalendarposts {
padding: 2px;
background: #e9e9e9;
border: 1px solid #e0e0e0;
font-family: Verdana, sans-serif;
font-size: 11px;
color: #d0d0d0;
text-align: center; }
.sbarcalendarposts { background: #f9f9f9; }
/* ENTRIES */
#maincontent { margin: 20px 200px 0px 0px;
background: #f9f9f9; }
.subcontent {}
.datesubject { margin: 0px 0px 5px 0px; }
.date { font-family: Verdana, sans-serif;
font-size: 11px;
text-transform: lowercase;
letter-spacing: 3px;
line-height: 11px; }
.subject { font-size: 22px;
font-weight: bold;
line-height: 22px; }
.userpic { position: relative;
float: left;
margin: 0px 10px 5px 0px;
z-index: 15; }
.userpic br { display: block;
height: 0px;
font-size: 0px; }
.userpicfriends { position: relative;
float: left;
margin: 0px 5px 5px 0px;
padding: 5px;
font-family: "trebuchet ms", sans-serif;
font-size: 11px;
text-align: center;
z-index: 15; }
.userpicfriends br { display: block;
height: 0px; }
.entry {}
.entry_text { font-size: 14px;
text-align: justify;
line-height: 20px; }
.entry_text blockquote { padding: 10px;
background: #f9f9f9 url(http://pics.livejournal.com/winklescoat/pic/000awaax) repeat-x bottom;
border: 1px solid #e9e9e9;
font-size: 16px;
line-height: normal; }
.ljtags { margin: 5px 0px 0px 0px;
padding: 3px 0px 3px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000axdea) no-repeat 0px 2px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0;
font-size: 12px;
text-align: left;
line-height: normal; }
.currents { margin: 5px 0px 0px 0px;
padding: 1px 0px 1px 0px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0; }
.currents strong { display: none; }
.currentlocation { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000ayk40) no-repeat left center;
}
.currentgroups { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000azc2s) no-repeat left center;
}
.currentmood { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000b035w) no-repeat left center;
}
.currentmusic { padding: 2px 0px 2px 17px;
background: url(http://pics.livejournal.com/winklescoat/pic/000b1s76) no-repeat left center;
}
.comments { position: relative;
margin: 5px 0px 0px 0px;
font-size: 18px;
color: #f9f9f9;
text-transform: lowercase;
text-align: right; }
.separator { height: 40px; }
/* ENTRY VIEWS, REPLY PAGE & COMMENTS */
.skiplinks { margin: 0px 0px 5px 0px;
font-size: 18px;
color: #f9f9f9;
text-transform: lowercase;
text-align: center; }
.box { background: #f9f9f9;
clear: left; }
.replytosubject { font-weight: bold; }
textarea.textbox { width: 95% !important; }
.commentbox { margin: 5px 0px 5px 0px;
padding: 5px;
background: #e9e9e9; }
.commentboxpartial { margin: 5px 0px 5px 0px;
padding: 4px;
background: #f9f9f9;
border: 1px solid #e9e9e9; }
.userpiccomment { position: relative;
float: left;
top: -15px;
left: -10px;
margin: 5px 5px -10px 5px;
z-index: 15; }
.datesubjectcomment { margin: 5px 0px 5px 0px;
padding: 5px;
border-top: 1px dashed #d0d0d0;
border-bottom: 1px dashed #d0d0d0; }
.commentreply { position: relative;
margin: 5px; }
/* ARCHIVES */
ul.year { margin: 0px 0px 20px 0px;
padding: 0px;
font-size: 18px;
text-align: center; }
ul.year li { display: inline; }
table.yeartable { margin-left: auto;
margin-right: auto; }
td.yearmonth {}
table.yeartable td.yearday {
background: #6dc0cd;
text-align: center; }
table.yeartable td.yearday,
table.yeartable td.yeardate
{ border: 1px solid #c0c0c0; }
table.yeartable td.yeardate a
{ font-weight: bold; }
dd { margin-bottom: 1em; }
/* TAGS PAGE */
h2 { margin: 0px 0px 10px 0px;
font-size: 22px;
text-align: center; }
.ljtaglist { list-style: none;
margin: 10px 0px 0px 0px;
padding: 0px;
text-align: center; }
/* CONTEXTUAL POPUP */
div.ContextualPopup {
font: normal 12px Arial, sans-serif !important;
}
div.ContextualPopup div.Inner { width: 200px;
padding: 5px;
background: #b9b9b9 url(http://pics.livejournal.com/winklescoat/pic/000b21rc) repeat !important;
border: 1px solid #b0b0b0;
color: #000000 !important; }
div.ContextualPopup .Content {
margin: 0px 5px 0px 0px;
padding: 0px;
line-height: normal; }
div.ContextualPopup .Userpic
{ padding: 0px 0px 5px 5px; }
div.ContextualPopup .Content .OnlineStatus
{ font-weight: normal; }
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited
{ color: #ffffff !important; }
/* IE HACKS */
li.view, li.viewing {
*margin: 0px 3px 0px -1px !important;
*padding: 20px 17px 20px 20px; }
* html div.subcontent { height: 1%;
clear: none; }
* html div.box#commentform
{ position: absolute; }
/* ---END OF CUSTOM STYLESHEET--- */
Click on Save Changes and it’s done!
I’m hosting all layout graphics in my ScrapBook account so there’s no need to worry about them, but you’re welcome to save and upload them to your own file server or image host:
Hot Gossip Pink
DOWNLOAD via 4shared
Old News Blue
DOWNLOAD via 4sharedDon’t forget to replace the images’ URLs in your stylesheet.
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
• If you want to change the alignment of your journal, go to the /* PAGE */ section of your stylesheet and look for #content. Modify the settings for margin-left and margin-right according to one of the following:
Centered
margin-left: auto;
margin-right: auto;
Aligned Left
margin-left: 10px;
margin-right: auto;
• If you’d like to add a header image to your journal, go to the /* HEADER */ section of your stylesheet and look for .headerimage {}. Insert the following codes within the brackets and change the settings in red:
.headerimage { position: relative;
width: 0px; /* width of image in pixels */
height: 0px; /* height of image in pixels */
margin-top: 0px; /* space between top of page & top of image in pixels */
margin-bottom: 0px; /* space between bottom of image & top of journal in pixels */
margin-left: auto;
margin-right: 10px;
background: url(IMAGE URL) no-repeat; }
Don’t forget that you must first upload your header image to your own file server or image host. Also, if you’re going to change your journal’s alignment, you might want to adjust your header image’s left and right margins accordingly.
If you want your journal to be as wide as your header image, you have to switch your journal to a fixed width. To do this, go to the /* PAGE */ section of your stylesheet, look for #content and change width: 75%; to the width of your header image in pixels (e.g. width: 750px;).
• 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 ads or a combination of Between Entries and Vertical ads. (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 will move downwards or they may stretch to accommodate overly large images or lengthy comment threads.
• Please visit s2flexisquares for additional or advanced customizations.
CREDITS
cartonage & s2flexisquares for tutorials
Sweetie for the tags & metadata icons
Please enjoy! :)