Post Friends My journal
justcyanide in mintyapple

s2 Flexible Squares: #006 "Sing, little bird"

Jan 04, 2011 17:25




live preview (temporary) ~ img preview



S2 Flexible Squares
Tested in Chrome, Firefox, Opera & Safari. Doesn't look very good in Explorer.

&Code
/* Cleaned CSS: */

/*-------------------------------------------------------
LAYOUT: #006 "Sing, little bird"
by JUSTCYANIDE @ community.livejournal.com/hiddencolours/
***Credit is LOVE***
--------------------------------------------------------*/

/*-----------------BODY-----------------*/

body {
background-color: #dfdfdf;
background-image: url(http://i54.tinypic.com/f35jrr.png);
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
text-align: justify;
padding: 0;
}

a, a:link, a:visited {
color: #2b2b2b;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
}

a:hover {
color: #929292;
text-transform: uppercase;
}

.subject a, .subject a:link, .subject a:visited {
color: #434343;
}

.subject a:hover {
color: #efefef;
}

blockquote {
background-image: url(http://i54.tinypic.com/qziuzc.png);
background-color: #0c0c0c;
color: #222222;
font-size: 13px;
line-height: 14px;
padding: 8px;
text-align: justify;
}

code, kbd, pre, tt {
font-family: arial;
}

/*-----------------VIEWS, TITLE & SUBTITLE-----------------*/

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #434343;
text-transform: uppercase;
font-size: 20px;
float: center;
font-family: impact;
}

div#header li {
float: left;
color: #434343;
text-transform: uppercase;
font-family: impact;
font-weight: bold;
font-size: 20px;
padding: 10px;
}

div#header a:hover, div#footer a:hover {
color: #f2f2f2;
text-decoration: none;
font-size: 20px;
}

ul.navheader {
padding: 15px;
margin-top: 0px;
}

ul.navheader li {
color: #434343;
text-transform: uppercase;
font-size: 20px;
padding: -10px;
display: inline;
}

.title {
display: none;
}

.subtitle {
display: none;
}

/*-----------------CONTENT-----------------*/

#content {
width: 650px;
background-color: #00000;
background: url();
padding: 35px;
margin-right: 320px;
margin-left: auto;
}

.subcontent {
background:transparent;
position:relative;
}

#maincontent {
margin-top: 25px;
font-family: "arial";
font-size: 11px;
background-color: #00000;
background: url();
color: #929292;
padding: 30px 30 30 10px;
margin-right: auto;
text-align: left;
}

.clear {
height: 35px;
}

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

.separator{
height: 100%;
}

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

.headerimage {
width: 441px;
height: 130px;
margin-bottom: -90px;
margin-left: auto;
margin-right: 40px;
background-image: url(http://i51.tinypic.com/2mwgor9.png);
background-position: top right;
background-repeat: no-repeat;
}

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

#sidebar {
background: url(http://i54.tinypic.com/qziuzc.png) repeat-x;
margin: 0px 10px 0px 10px;
padding: 10px;
margin-top: 68px;
color: #585858;
text-align: justify;
font-size: 12px;
margin: 0px 10px 10px 10px;
padding: 15px;
padding-top: 55px;
background-color: #ececec;
border-bottom: 1px dashed #929292;
font-family: "arial", serif;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #434343;
font-family: arial;
font-size: 13px;
font-weight: bold;
}

div#sidebar a:hover {
color: #898989;
}

.sbarheader {
padding: 0px 5px 0px 5px;
}

.sbarbody {
padding: 0px 5px 0px 5px;
}

.sbarbody2 {
padding: 0 15px 0 15px;
}

ul.sbarlist {
display: inline;
text-transform: uppercase;
padding-left: 0px;
margin-left: 20px;
list-style: none;
}

.defaultuserpic {
display: none;
}

.sbarcalendar {
display: none;
}

.sbarcalendarposts{
display: none;
}

#sidebar_tags {
display: none;
}

#sidebar_summary {
display: none;
}

li.sbaritem {
display: inline;
padding-left: 15px;
list-style: none;
}

li.sbartitle {
display: none;
}

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

.entry {
background: url();
margin: 0px 10px 10px 10px;
padding: 30px;
background-color: #f2f2f2;
color: #434343;
font-size: 13px;
border-bottom: 7px solid #434343;
font-family: "arial";
text-align: justify;
min-height: 120px;
}

.entrytext {
padding: 20px;
}

.entry ul li, .entry ol li {
padding-left: 15px;
margin-left: 5px;
}

/*-----------------USERPICS & FriendsUSERPICS------------*/

.userpic {
float: left;
margin: 55px 15px 5px 20px;
}

.userpicfriends {
float: left;
margin: 55px 15px 5px 20px;
background-color: #ececec !important;
}

.userpicfriends font {
color: #898989;
text-transform: uppercase;
text-align: center;
background-color: #ececec !important;
}

/*-----------------DATE & SUBJECT-----------------*/
.date {
border-top: 1px solid #595959;
line-height: 12px;
text-transform: uppercase;
text-align: center;
background-color: #434343;
font-size: 10px;
color: #e5e5e5;
font-weight: bold;
}

.subject {
line-height: 28px;
padding-left: 3px;
background: url(http://i54.tinypic.com/qziuzc.png);
background-color: #d4d4d4;
font-size: 18pt;
font-family: impact;
text-transform: uppercase;
text-align: center;
border-bottom: double 4px #929292;
}

.datesubject {
margin: 0px 10px 0px 10px; }
}

.subject a, .subject a:link, .subject a:visited {
color: #383838;
}

.subject a:hover {
color: #767676;
}

.lj-view-entry .title{
display:none;
}

.lj-view-entry .subject{
color: #434343;
}

.lj-view-friends .title{
display:none;
}

/*-----------------COMMENT & REPLY-----------------*/

.comments {
text-align: right;
font-family: arial;
font-weight: bold;
margin: 9px 15px 9px -10px;
margin-top: 50px;
padding-right: -5px;
margin-bottom: -10px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #91919;
font-size: 10px;
padding: 1px -5px 1px 15px;
text-transform: uppercase;
}

div.comments a:hover {
color: #929292;
text-decoration: none;
}

.datesubjectcomment {
text-transform: uppercase;
font-size: 10px;
color: #222222;
background-color: transparent;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
float: left;
margin: -15px 5px 5px -5px;
padding: 5px;
}

.skiplinks {
color: #434343;
text-transform: uppercase;
font-size: 15px;
}

.box {
color: #898989;
padding: 10px;
clear: left;
}

input, textarea {
background-color: #f2f2f2;
color: #898989;
}

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

.reply {
background: url();
margin: 0px 10px 10px 10px;
padding: 20px;
background-color: #040404;
color: #585858;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #0c0c0c;
font-family: arial;
font-size: 13px;
text-align: left;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 14px;
font-family: arial;
color: #4343431;
}

.commentbox {
background: url();
margin: 0px 10px 10px 10px;
padding: 5px;
background-color: #f2f2f2;
color: #434343;
font-family: "arial";
text-align: left;
}

.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #898989;
}

.datesubjectcomment a:hover {
color: #;
}

.commentboxpartial {
border-color: #898989;;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #;
}

.commentinfo {
color: #898989;
background-color: #;
margin-top: 10px;
width: 100%;
}

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

ul.year {
text-align: center;
padding-bottom: 40px;
color: #898989;
font-family: "times new roman", serif;
font-size: 25px;
font-style: italic;
font-weight: bold;
}

ul.year li {
display: inline;
}

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

table.yeartable td.yearday {
margin: 0px 0px 0px px;
padding: 15px;
color: #898989;
font-family: garamon;
font-size: 13px;
text-align: left;
}

td.yearmonth {
font-size: 20px;
color: #898989;
font-family: arial;
text-transform: uppercase;
}

td.yearday {
font-size: 20px;
color: #898989;
font-family: arial;
font-style: italic;
font-weight: bold;
}

td.yeardate {
font-size: 13px;
background: url();
color: #b1b1b1;
font-family: arial;
font-style: italic;
font-weight: bold;
}

.yeardate a {
font-size: 15px;
margin-left: 50px;
margin-top: 25px;
font-style: normal;
color: #585858;
}

.yeardate a:hover {
color: #898989;
border: 2px solid #929292;
}

/*-----------------FOOTER-----------------*/

#footer {
width: 100%;
text-align: center;
font-family: "arial";
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
background-color: #;
color: transparent;
z-index: 100;
clear: both;
}

ul.navfooter{
padding: 0px;
margin: 0px;
}

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

.clearfoot {
clear: both;
}

/*----------------LJ USER & COMM ICON ----------------*/

.ljuser img {
height: 0;
padding: 10px 00px 5px 0px;
margin-right: -3px;
background-image: url(http://i53.tinypic.com/14v36lg.png);
background-repeat: no-repeat;
background-position: left center;
}

/*----------------LJ CONTROL STRIP---------------*/

#lj_controlstrip {
background-image: url(http://i54.tinypic.com/qziuzc.png);
height: 0;
padding: 10px 00px px 0px;
margin-right: 3px;
color: #333;
background-color: transparent;
background-repeat: no-repeat;
background-position: left center;
}
#lj_controlstrip td {
background-image: url(http://i54.tinypic.com/qziuzc.png); }

#lj_controlstrip a {
color: #333;
}

#lj_controlstrip a:hover {
color: #e5e5e5;
}

#lj_controlstrip_statustext {
color: #333;
}

.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i53.tinypic.com/14v36lg.png) no-repeat center left !important;
padding: 18px 8px 0 0px !important;
margin-right: -8px !important;
}

.ljuser img[src*="community.gif"] {
background: transparent url(http://i53.tinypic.com/14v36lg.png) no-repeat center left !important;
padding: 20px 8px 0 2px !important;
margin-right: -8px !important;
}

/*----------------CURRENTS - MOOD, MUSIC, TAGS----------------*/

.currents, .currentmood, .currentlocation, .currentmusic {
font-family: "arial";
font-size: 11px;
}

.currents {
background-color: transparent;
}

.currents strong{
display: none;
font-weight: normal;
font-size: 8pt;
color: #555;
text-transform: lowercase;
}

.currentlocation {
padding-left: 14px;
padding-top: 8px;
font-size: 8pt;
color: #898989;
background: url('http://i46.tinypic.com/xqjfgy.png') 0px 11px no-repeat;
}

.currentmood {
padding-left: 14px;
padding-bottom: 2px;
padding-top: 18px;
margin-top: -15px;
text-transform: uppercase;
font-size: 10px;
color: #898989;
font-weight: bold;
background: url('http://i47.tinypic.com/33wkxeq.png') 0px 20px no-repeat;
}

.currentmusic {
padding-left: 14px;
padding-top: 2px;
margin-bottom: -80px;
font-size: 8pt;
color: #898989;
background: url('http://i49.tinypic.com/2i8by20.png') 0px 5px no-repeat;
}

.ljtags {
margin-top: 40px;
padding-left: 9px;
padding-bottom: -25px;
margin-bottom: -40px;
padding-top: 3px;
text-transform: uppercase;
font-size: 1px;
color: #ececec;
font-weight: bold;
background: url('http://i50.tinypic.com/ffbpro.png') 0px 6px no-repeat;
}

.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #434343;
font-size: 10px;
text-transform: uppercase;
}

.ljtags a:hover {
color: #929292;
}

H2 {
padding: 80px;
float: right;
color: #434343;
font-size: 30pt;
text-transform: uppercase;
font-family: impact;
}

/*-----------------BACKGROUND, TINY & METADATA ICONS CREDIT-----------------*/
Metadataicons by community.livejournal.com/graphicsbyjulz
TinyIcons by pinvoke.com

#01 Go to Select Journal Stlyle choose any Flexible Squares Layout and Apply Theme.
#02 Go to Customize Your Theme and then go to the Custom CSS section. Select NO in all three options and then paste the code in the Custom Stylesheet Box. Save changes.
#03 Credit justcyanide or hiddencolours. ENJOY <3

&Notes
~Editing is fine as long as I'm credited for the original layout :)

~Metadata icons by graphicsbyjulz & tiny icons by Pinvoke.



img preview



&Code






http://i52.tinypic.com/kbemtd.png">
#01.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend consectetur rutrum. Proin sollicitudin risus rhoncus elit blandit nec vehicula ante vestibulum. In hac habitasse platea dictumst. Ut rhoncus, enim et laoreet, massa felis facilisis massa, quis elementum diam ipsum in nulla. Vestibulum ultrices dui et lectus sagittis commodo. Vestibulum rutrum lacinia lacus, sit amet ultricies lectus euismod ut.
#02.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend consectetur rutrum. Proin sollicitudin risus rhoncus elit blandit nec vehicula ante vestibulum. In hac habitasse platea dictumst. Ut rhoncus, enim et laoreet, massa felis facilisis massa, quis elementum diam ipsum in nulla. Vestibulum ultrices dui et lectus sagittis commodo. Vestibulum rutrum lacinia lacus, sit amet ultricies lectus euismod ut.
#03.
link ~ link ~ link~ http://community.livejournal.com/hiddencolours">profile code


Hope you like it <3
Watch hiddencolours for updates :)
Comments are <3 ~

Kam~

profile codes: general, style: flexible squares

Leave a comment

Read comments 53
Previous post Next post
Up
Homepage Read journal... Full version Help Русская версия
© 1999-2025 LiveJournal, Inc.