Syaoran Theme Time!

Feb 12, 2008 21:56

Hahah, ok, so I've been staring at the word "Strong" for so long, I've had to spell check it twice, because it started looking completely wrong. I think its funny when that happens. O-or when you say a word over and over again, and it loses it's meaning...

ANYWAY! This is the theme I just finished for tsuyoisyao I'm sort of on a spree right now, cause I'm also halfway-done with a new theme for toadwart as well. (lol, I hope you like blue Becca =p)



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. (Or you can also select the CUSTOMIZE button beneath whichever FLEXIBLE SQUARES theme you've just chosen - either way works. *MAKE SURE the green "Apply Theme" button underneath has turned into a link that says CUSTOMIZE.)

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

/*------------------------------------------------

profile/navigation links under Headder Image layout
* CCS-- "Strong Syaoran" FlexiSquares theme made for Tsuyoisyao
820x400

------------------------------------------------*/

/* ------ MAIN ------ */

body
{
background-color: #fefefe;
background-image: url();
background-repeat: repeat;
background-attachment: fixed;
background-position: 0px top;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
color: #31331a;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 0px;
}

a, a:link, a:visited
{
color: #aa5b5a;
text-decoration: none;
}

a:hover
{
color: #31331a;
text-decoration: none;
}

::-moz-selection
{
background-color: #87B860;
color: #fefefe;
}

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

b,
{
colour: #000000;
}

i, s
{
color: #31331a;
}

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

blockquote {
margin: 10px 30px 10px 30px;
padding: 10px;
border: 2px dashed #e1e1de;
background-color: #f0efe8;
}

ul.ljtaglist
{
text-align: left;
padding-left: 20px;
}

input, textarea
{
background-color: #fefefe;
color: #e1e1de;
}

/* ------ CONTAINING ELEMENTS ------ */

#content
{
width: 818px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
text-align: justify;
background-color: #fefefe;
border-left: 1px #31331a solid;
border-right: 1px #31331a solid;
}

#maincontent
{
margin-left: 190px;
margin-right: 10px;
margin-top:20px;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #31331a;
text-align: center;
padding: 10px 0px 0px 0px;
}

#sidebar
{
width: 160px;
padding: 10px 5px 0px 5px;
margin-top: 18px;
margin-left: 10px;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #aa5b5a;
float: left;
text-align: left;
background-color: #fefefe;
border: 0px #fefefe solid;
}

#header {
width: 100%;
margin-left: auto;
margin-right: auto;
color: #9c9464;
text-align: center;
font-family: "Garamound", sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
clear: both;
background-color: #fefefe;
padding-top: 10px;
}

#footer
{
width: 100%;
background-color: #fefefe;
color: #bebfb7;
text-align: center;
font-family: "Garamound", sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
z-index: 100;
clear: both;
}

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

.title
{
color: #9c9464;
text-decoration: none;
font-family: "Impact", sans-serif;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
}

.subtitle
{
color: #e1e1de;
text-decoration: i;
font-family: "Garamound", sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}

div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited
{
color: #e1e1de;
text-decoration: none;
}

div#header a:hover, div#footer a:hover
{
color: #aa5b5a;
text-decoration: none;
}

ul.navheader
{
padding: 0px 5px 0px 5px;
line-height: 0px;
}

ul.navheader li
{
display: inline;
padding: 0px 10px 0px 10px;
}

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

#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link, .sbarcalendarposts a:visited
{
color: #31331a;
padding: 0px;
text-align: center;
}

#sidebar .sbarcalendarposts a:hover
{
color: #aa5b5a;
padding: 0px;
text-align: center;
}

div#sidebar a, div#sidebar a:link, div#sidebar a:visited
{
color: #aa5b5a;
text-decoration: none;
padding: 3px 5px 2px 3px;
}

div#sidebar a:hover
{
color: #eddcdc;
text-decoration: none;
padding: 3px 5px 2px 3px;
}

.defaultuserpic
{
text-align: center;
}

.defaultuserpic img
{
background-color: #fefefe;
padding: 3px;
border: 1px #31331a solid;
}

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

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

.sbarbody2 {
padding: 0px 5px 10px 5px;
}

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

.sbarcalendar
{
padding: 2px;
border: 1px solid #31331a;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}

.sbarcalendarposts
{
padding: 2px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
border: 2px solid #aa5b5;
background-color: #eedcdc;
}

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

li.sbaritem
{
text-align: right;
list-style: none;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-transform: lowercase;
margin-top: 3px;
padding: 3px 5px 2px 3px;
border-right: 1px #eddcdc solid;
}

li.sbaritem a
{
padding: 3px 5px 2px 3px;
list-style: none;
color: #A09752;
}

li.sbaritem a:hover
{
padding: 3px 5px 2px 3px;
color: #aa5b5a;
}

li.sbartitle
{
background-color: #fefefe;
border-right: 1px #eddcdc;
border-bottom: 1px #eddcdc;
padding: 5px 0px 5px 0px;
margin: 10px 0 0px 0;
list-style: none;
text-align: center;
color: #e1e1de;
font-family: "Garamound", sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
}

/* ------ MAINCONTENT ------ */

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

.ljuser img[src="http://stat.livejournal.com/img/user.gif"] {
background-image: url(http://pics.livejournal.com/galenhiril/pic/001gzd5b);
padding: 13px 0px 0px 13px;
}

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

span.ljuser a b
{
padding: 2px 0 2px 0;
color: #aa5b5a;
font-weight: lighter;
}

span.ljuser a:hover b
{
padding: 2px 0 2px 0;
color: #31331a;
font-weight: lighter;
}

ul.ljtaglist li
{
list-style: none;
margin-bottom: 5px;
}

ul.ljtaglist
{
color: #31331a;
font-family: "Verdana", sans-serif;
font-size: 11px;
padding: 12px;
}

.subcontent
{
}

.entry
{
padding: 10px 10px 5px 10px;
color: #31331a;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: justify;
}

hr
{
color: transparent;
height: 1px;
border-style : none;
border-bottom: 2px solid #31331a;
}

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

.userpic
{
background-color: #fefefe !important;
border: 2px #9c9464 solid;
position: relative;
float: right;
padding: 3px;
margin: 0px 0px 10px 10px;
z-index: 15;
}

.userpicfriends a font
{
color: #9c9464 !important;
}

.userpicfriends
{
background-color: #fefefe !important;
border: 2px #9c9464
position: relative;
float: right;
padding: 5px;
margin: 0px 0px 10px 10px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}

.userpic a font
{
color: #eddcdc !important;
}

.date
{
margin: 0px;
padding: 3px 0px 3px 3px;
text-align: right;
color: #b1a569;
top: 5px;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-transform: lowercase;
}

.subject
{
margin: 0px;
padding: 3px 3px 3px 8px;
color: #31331a;
font-family: "Garamound", sans-serif;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 10px #9c9464 solid;
}

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

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

.datesubject
{
background-color: #f0efe8;
padding: 0px;
text-align: left;
}

.ljtags
{
margin-top: 20px;
padding-left: 12px;
color: #e1e1de;
font-weight: lighter;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
background: url(http://pics.livejournal.com/galenhiril/pic/0015d5q7) no-repeat center left;
}

.currentlocation
{
background: url(http://pics.livejournal.com/galenhiril/pic/001dxe5x) no-repeat left center;
padding: 0px 0px 0px 10px;
}

.currentmood
{
background: url(http://pics.livejournal.com/galenhiril/pic/001dt8hk) no-repeat left center;
padding: 0px 0px 0px 8px;
}

.currentmusic
{
background: url(http://pics.livejournal.com/galenhiril/pic/000s5r4r) no-repeat left center;
padding: 0px 0px 0px 8px;
}

.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong
{
display: none;
color: #b1a569;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
padding: 4px 0 4px 0;
}

.currents, .currentmood, .currentmusic, .currentlocation
{
color: #b1a569;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
}

.ljtags a, .ljtags a:link, .ljtags a:visited
{
color: #b1a569;
text-transform: lowercase;
font-weight: lighter;
font-family: "Verdana", sans-serif;
}

.currentlocation a, .currentlocation a:link, .currentlocation a:visited
{
color: #b1a569;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
}

.currentlocation a:hover, .ljtags a:hover
{
color: #f0efe8;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
}

.comments
{
font-family: "Garamound", sans-serif;
font-size: 12px;
letter-spacing: 1px;
text-align: center;
text-transform: uppercase;
padding: 3px 0px 3px 0px;
position: relative;
clear: right;
margin-top: 10px;
letter-spacing: 1px;
border-top: 5px #31331a solid;
}

div.comments a, div.comments a:link, div.comments a:visited
{
color: #9c9464;
}

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

/* ------MAINCONTENT -- ENTRY, REPLY PAGES ------ */

.datesubjectcomment
{
color: #b1a569;
margin-top: 10px;
text-align: right;
padding: 5px 0px 5px 5px;
}

.userpiccomment
{
background-color: #fefefe !important;
border: 1px #31331a solid;
position: relative;
top: -30px;
left: 0px;
padding: 5px;
margin: 20px 0px -20px 10px;
z-index: 15;
float: right;
}

.box
{
padding: 10px;
margin-top: 0px;
text-align: left;
clear: right;
}

.box a, .box a:link, .box a:visited
{
color: #aa5b5a;
}

.box a:hover
{
color: #31331a;
text-decoration: none;
}

form div.box
{
text-align:center;
}

form div.box a, form div.box a:link, form div.box a:visited
{
color: #aa5b5a;
}

form div.box a:hover
{
color: #31331a;
text-decoration: none;
}

div#content input, div#content textarea, div#content select
{
color: #31331a;
border: 1px solid #31331a;
background-color: #f0efe8;
}

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

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

.replytosubject
{
border-bottom: 15px #9c9464 solid;
color: #6c6c6c;
font-family: "Garamound", sans-serif;
text-transform: uppercase;
font-size: 20px;
letter-spacing: 1px;
padding: 3px 3px 3px 8px;
}

.replytoposter
{
font-weight: lighter;
color: #b1a569;
padding: 5px;
}

.commentreply
{
text-align: justify;
position: relative;
margin: 10px;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #aa5b5a;
}

.commentbox
{
padding: 5px;
margin: 10px;
text-align: left;
border: 1px #31331a solid;
background-color: #f6f6f2;
}

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

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

.commentboxpartial
{
padding: 10px;
margin: 10px;
border: 1px #31331a solid;
}

.commentinfo
{
margin-top: 10px;
width: 100%;
}

/* ------ MAINCONTENT -- YEAR/ACHIVE PAGES ------ */

ul.year
{
text-align: center;
padding: 10px 0 10px 0;
}

ul.year li
{
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday
{
background-color: #fefefe;
color: #aa5b5a;
border: 1px #31331a solid;
}

table.yeartable td.yearday
{
text-align: center;
color: #31331a;
}

td.yearmonth
{
color: #9c9464;
border-style: none;
}

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

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

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

.clearfoot
{
clear: both;
}

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

.clear
{
height: 10px;
font-size: 0.01px;
}

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

.headerimage {
position: relative;
width: 820px;
height: 400px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
background-image: url(http://pics.livejournal.com/galenhiril/pic/001gwr5z);
background-position: center;
background-repeat: no-repeat;
border-left: 1px #fefefe solid;
border-right: 1px #fefefe solid;
}

.separator {
height: 130px;
background-image: url(http://pics.livejournal.com/galenhiril/pic/001gy43d);
background-position: center;
background-repeat: no-repeat;
}

.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);
}

8. Save Changes. And you're done!

*The CCS code I gave you only changes the look of your journal, none of the text. You can modify many things to your liking by just playing around with the options in the CUSTOMIZE YOUR THEME area. Just roam around the sidebar on the left. But it is all quite user friendly.

If you have any problems at all, or any other questions, just lemme know!

Oh, and if you want, I made this icon to match your theme - cause I like making matching icons. Feel free to use it if you like!


♥ galenhiril

character: syaoran, :theme

Previous post Next post
Up