It's About Time... For Layout Time!

Feb 05, 2008 09:17

Man I'm so slow some days. *fail* but here, my dear hebba18-chan, is your new journal theme! Haha, with the correct "pray" now because I'm a dumbass some days. The screenshot isn't corrected though 'cause I'm lazy and didn't take another one. ^^; But the header and code itself should be alright!



1. Go to >Customize Journal.

2. Under "#2 Select New Theme," type in FLEXIBLE SQUARES in the search field.

3. Select APPLY THEME under any of the given options.
*Blue Gray is the FLEXIBLE SQUARES default, but it really shouldn't matter which one you select.

4. Select CUSTOMIZE YOUR THEME in the upper-right box field.

5. Select CUSTOM CCS - it will be the last option on the left sidebar

6. Change all drop-down options on this page to NO.
*There should be three of them.

7. Copy/Paste this entire code into the CUSTOM STYLE SHEET field. Make sure not to put any spaces or anything in because it'll break it. =p

.subject img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 0 10px 10px 0;
background: url(http://pics.livejournal.com/galenhiril/pic/001e9cw7);
}

.subject img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 0 10px 11px 0;
background: url(http://pics.livejournal.com/galenhiril/pic/001g36ss);
}

.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://pics.livejournal.com/galenhiril/pic/001g2ryk);
padding: 16px 10px 0 16px;
}

.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(http://pics.livejournal.com/galenhiril/pic/001g2ryk);
padding: 16px 10px 0 16px;
}

.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(http://pics.livejournal.com/galenhiril/pic/001g1s5s);
padding: 16px 10px 0 16px;
}

.entryHeader img[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 11px 11px 0px 0px;
background: url("http://pics.livejournal.com/galenhiril/pic/001e9cw7");
}

.entryHeader img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 10px 11px 0px 0px;
background: url("http://pics.livejournal.com/galenhiril/pic/001g36ss");
}

.entryHeader img {
width: 0;
height: 0;
background-repeat: no-repeat;
/* so that IE users will still see an image */
background-image: url("http://pics.livejournal.com/galenhiril/pic/001e9cw7");
padding: 10px 11px 0 0;
}

li.sbaritem[src="http://stat.livejournal.com/img/icon_protected.gif"]{
width: 0;
height: 0;
padding: 11px 11px 0px 0px;
background: url("http://pics.livejournal.com/galenhiril/pic/001e9cw7");
}

li.sbaritem img[src="http://stat.livejournal.com/img/icon_private.gif"]{
width: 0;
height: 0;
padding: 10px 11px 0px 0px;
background: url("http://pics.livejournal.com/galenhiril/pic/001g36ss");
}

/*--MAIN--*/

BODY {
background-color:#ffdf9;
background-image: url('http://pics.livejournal.com/galenhiril/pic/001et8rd');
background-repeat: repeat;
background-attachment: fixed;
background-position: 0px top;
text-align: center;
color: #cab07e;
font-family: "Trebuchet MS", sans-serif;
font-size: 10px; }

a, a:link, a:visited {
text-decoration: none;
color: #b58370;
padding: 0px;
}

a:hover {
background: #fffdf9;
color: #834747;
background-image: url('http://pics.livejournal.com/galenhiril/pic/001fqqrx');
padding: 0px;
}

p, td, {
font-size: 10px;
}

blockquote {
font-size: 10px;
margin: 10px 30px 10px 30px;
padding: 10px;
border-top: 1px dashed #A97C6F;
border-bottom: 1px dashed #A97C6F;
background-color: #fffdf9;
}

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

/*--CONTAINING ELEMENTS--*/

#content {
width: 900px;
margin-left: auto; margin-right: auto;
background-color: #fffdf9;
border-top: dashed #632706 1px;
border-left: dashed #632706 1px;
border-bottom: dashed #632706 1px;
border-right: dashed #632706 1px;
text-align: justify; }

#maincontent {
margin-top: 40px;
padding: 0px;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 15px;
background-color: #fffdf9;
color:#cfbc98;
border-style: dashed;
border-color:#4a1e01;
border-width: 0px;
margin-right:0px;
margin-left: 260px;
margin-top:40px;
text-align: justify;
}

#header {
width: 100%;
padding: 0px 0px 0px 0px;
margin-top: 10px;
text-align: center;
font-family: "Garamound", sans-serif;
text-transform: uppercase;
font-size: 10px;
font-weight: none;
letter-spacing: 2px;
background-color: #fffdf9;
border-width: 0px;
color:#cab07e;
line-height: 10px;
}

#footer {
width: 100%;
float: center;
text-align: center;
font-family: "Garamound", sans-serif;
text-transform:uppercase;
font-size: 10px;
font-weight: none;
letter-spacing: 1px;
background-color: #fffdf9;
border-width: 0px;
color: #70301c;
z-index: 100;
clear: both;
}

#sidebar {
padding-top: 5px;
margin-top: 20px;
background-color: #fffdf9;
border-width: 0px;
font-size: 10px;
line-height: 10pt;
font-family: "arial", sans-serif;
color: #cfbc98;
width: 250px;
float: left;
text-align: justify;
}

/*--HEADDER--*/

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer
a:visited {
color: #723321;
padding: 5px;
}

div#header a:hover, div#footer a:hover {
color: #fffdf9;
background: ;
background-image: url('http://pics.livejournal.com/galenhiril/pic/001fkfr5');
padding: 5px;
}

ul.navheader {
padding: 10px;
margin: 10px;
}

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

.title {
text-align: center;
color: #cab07e;
font-family: "Trebuchet MS", sans-serif;
font-size: 20px;
letter-spacing: 2pt;
text-transform: uppercase;
}

.subtitle {
text-align: center;
color: #723321;
font-family: "Trebuchet MS", sans-serif;
font-size: 10px;
letter-spacing: 1pt;
text-transform: lowercase;
}

/* footer */

ul.navfooter {
padding: 10px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 0px 0 0px;
}
.clearfoot {
display: none;
clear: both;
}

/* --SIDEBAR-- */

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-size: 10px;
line-height: 10pt;
font-family: "arial", sans-serif;
color: #70301c;
}

div#sidebar a:hover {
color:#834747;
background-image: url('http://pics.livejournal.com/galenhiril/pic/001fqqrx');
background-repeat: repeat;
text-decoration: none;
}

.defaultuserpic {

text-align: center;
padding: 5px;
}

.sbarheader {
padding: 0px 5px 0px 5px;
color: #000000;
text-align: center;
}

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

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

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

.sbarcalendar {
border-color: #885526;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "arial", sans-serif;
font-size: 10px;
}

.sbarcalendarposts {
border-color: #885526;
border-width: 1px;
background-color:#885526;
text-align: center;
font-family: "Arial", sans-serif;
font-size: 10px;
}

ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}

li.sbaritem
{
padding-left: 10px;
padding-right: 10px;
list-style: none;
margin-top:5px;
}

li.sbartitle
{
padding-left: 0px;
padding-right: 0px;
text-align:left;
padding: 2px;
list-style: none;
margin-bottom: 1px;
margin-top: 0px;
color:#cfbc98;
border-bottom: dashed #4a1e01 1px;
font-weight: none;
font-family: "Garamound", sans-serif;
text-transform: uppercase;
font-size: 11px;
background-color: #fffdf9;
letter-spacing: 1pt;
}

/* MAINCONTENT */

.subcontent {
background-color: #fffdf9;
}

.entry {
margin: 0px 3px 2px 2px;
padding: 2px;
background-color: #fffdf9;
color:#cfbc98;
font-family: "arial", sans-serif;
font-size: 11px;
text-align: justify;
background-image: url('http://pics.livejournal.com/galenhiril/pic/001fy90d');
background-position: bottom center;
background-repeat: no-repeat;
border-width: 0px;
border-color: #DFDFDF;
line-height: 10pt;
border-style: dashed;
border-left: dashed 0px #C8E9E9;
border-right: dashed 0px #C8E9E9;
border-bottom: dashed 0px #C8E9E9;
}

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

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

.userpic {
position: relative;
float: left;
background-color: #eeeeee;
background-image: url('');
background-repeat: repeat;
padding: 1px;
margin-right: 0px;
margin-left: 5px;
z-index: 15;
border-width: 5px;
border-color: #fffdf9;
border-style: solid;
}

.userpicfriends {
position: relative;
float: left;
padding: 1px;
margin: 10px;
text-align: center;
border-style: solid;
background-color: #eeeeee!important;
background-image: url('');
background-repeat: repeat;
border-width: 5px;
border-color: #fffdf9;
font-family: "arial", sans-serif;
font-size: 10px;
z-index: 15;
}

.date {
line-height: 200%;
top: 5px;
font-family: "arial", sans-serif;
font-size: 9px;
color: #cfbc98;
letter-spacing: 2px;
font-weight: none;
text-transform:lowercase;
text-align:right;
letter-spacing: 0pt;
background-color: transparent;
}

.subject {
padding: 2px;
font-weight: none;
color:#4a1e01;
font-family: "Garamound", sans-serif;
border-bottom: 1px #70301c dashed;
text-transform: uppercase;
text-align:right;
font-size: 10px;
background-color: #fffdf9;
background-image: url('');
background-position: top right;
background-repeat: no-repeat;
letter-spacing: 1pt;
}
.subject a, .subject a:link, .subject a:visited {
color: #000000;
}

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

::-moz-selection {
background: #749CF8;
color: #fffdf9;
}

.datesubject {
background-color: #fffdf9;
padding: 2px;
}

.currents, .currentmood, .currentmusic {
font-family: "arial", sans-serif;
font-size: 10px;
font-weight: lighter;
color: #cfbc98;
}

.comments {
font-family: "arial", sans-serif;
font-size: 15px;
text-align: right;
background-color: #fffdf9;
font-weight: none;
padding: 5px;
position: relative;
top: 15px;
}

.separator {
height: 25px;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #fffdf9;
font-size: 15px;
font-weight: lighter;
background: ;
background-image: url('http://pics.livejournal.com/galenhiril/pic/001fpyce');
padding: 5px;
}

div.comments a:hover {
font-size: 15px;
font-weight: lighter;
color: #fffdf9;
background: ;
background-image: url('http://pics.livejournal.com/galenhiril/pic/001fkfr5');
padding: 5px;
}

.ljtags {
font-family: "arial", sans-serif;
font-size: 10px;
color: #70301c;
margin-top: 20px;
font-weight: none;
text-transform: lowercase;
position: left;
}

.headerimage {
position: relative;
width: 900px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(http://pics.livejournal.com/galenhiril/pic/001g7qr3);
background-position: center;
background-repeat: no-repeat;
border-left: 1px #632706 dashed;
border-right: 1px #632706 dashed;
}

.datesubjectcomment {
background-color:#fffdf9;
padding: 5px;
margin-top: 20px;
}

.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #ae8179;
background-color: #ae8179;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #70301c;
border-style: solid;
}

.box {
border-style: dashed;
border-width: 1px 1px 1px 1px;
border-color: #4a1e01;
padding: 8px;
clear: left;
}

input, textarea {
background-color: #fffdf9;
color: #cfbc98;
}

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

.reply {
position: relative;
margin: 20px 20px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "arial", sans-serif;
font-size: 11px;
line-height: 100%;
background-color:#fffdf9;
color: #885526;
}

.replytosubject {
font-weight: none;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "arial", sans-serif;
color: #885526;
}

.commentbox {

border-color: #ae8179;
border-width: 1px;
border-style: dotted;
padding: 10px;
margin: 10px;
background-color: #fffdf9;
}

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

.datesubjectcomment a:hover {
color: #888888;
}

.commentboxpartial {
border-color: #999999;
border-width: 1px;
border-style: solid;
padding: 9px;
margin: 9px;
background-color: #d4dce8;
}

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

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

I'm not sure how your add placements are right now, but I thought they looked best set to either vertical or between entries. But it should work with all of them, so feel free to just play around with how you prefer it.

In the CUSTOMIZE YOUR THEME area, you can play with all your sidebar and text options - none of those are changed in the CCS so you can play with that how you like.

And if you want, here's a matching default icon xD


If anything doesn't work, look right, or you just want me to change something, please let me know!

animanga: tsubasa, :theme

Previous post Next post
Up