Flexible Squares: Zoro is Very Very Pretty

Jan 08, 2011 21:17

A request from a friend, figured I'd share.




Image Preview - Live Preview

"zoro is very very pretty"



Template: zoro is very very pretty

For: Flexible Squares

Rules of the Game: - Credit betterdolphin somewhere viewable, like a stickied post or userinfo, and leave the credit on the sheet
- You may edit to suit your needs, but credit would still be nice.
- Commenting not necessary, but makes me feel good all over anyway if you do.

Notes: Tested in IE7-8, FF, Opera, Safari and Chrome.

Directions: Click here. In search box put "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "1 column (no sidebar)".

Click on Customize Selected Theme. Click on "Customize CSS" menu link on left. Make sure all options are set to "no", and "Custom external stylesheet URL" field remains blank.

Then, copy and paste the entire stylesheet below into "Custom stylesheet" field and click Save Changes.

Images: These are hosted on my own Photobucket account, I encourage you to save and upload to your own server/account. Just be sure to change the URLs in the style sheet when you do!

To make things easy, here's a zip of the images.

Code:

/*
zoro is very very pretty
For: Flexible Squares
Available: http://community.livejournal.com/betterdolphin/
By: Toby
*/

/* DIRECTIONS: Full directions on how to install are on the bottom of this document! */

/*******************************General/Misc*******************************/

body {
background: #c2d691 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/bg.jpg) repeat-x;
text-align: center;
color: #460909;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 0 0 20px 0;
}

a, a:link, a:visited {
color: #be1919;
font-weight: bold;
text-decoration: none;
}

a:hover {
color: #c06549;
font-weight: bold;
text-decoration: none;
}

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

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

@font-face {
font-family: 'Chewy';
font-style: normal;
font-weight: normal;
src: local('Chewy'), url('http://themes.googleusercontent.com/font?kit=9pHJyFOcO5WaMZJw9XnkAw') format('truetype');
}

/*******************************Header*******************************/

#header {
height: 230px;
padding: 0 10px;
margin: 0;
text-align: left;
font-size: 11px;
width: 100%;
z-index: 0;
}

.title {
font-family: 'Chewy';
font-size: 40px;
font-weight: bold;
color: #be1919;
top: 180px;
.top: 120px;
.right: 240px;
text-align: center;
letter-spacing: 2px;
position: absolute;
text-align: left;
line-height: 40px;
width: 770px;
margin: 0 auto;
height: 100px;
}

.subtitle{
display: none
}

.headerimage {
/* for formatting header image */
}

/*******************************Navigation*******************************/

ul.navheader {
color: #b0b554;
padding: 0;
margin: 0 0 0 -10px;
list-style-type: none;
position: relative;
margin-top: 114px;
.margin: 160px 0 0 -10px;
float: left;
text-transform: lowercase;
font-weight: bold;
letter-spacing: 2px;
z-index: 10000000;
}

ul.navheader li a, ul.navheader li a:visited {
color: #be1919;
text-align: left;
height: 23px;
width: 740px;
display: block;
}

ul.navheader li a:hover {
color: #c06549;
text-align: left;
text-decoration: none;
height: 23px;
width: 740px;
display: block;
}

ul.navheader li {
padding: 10px 0 0 40px;
width: 740px;
background: #f0d1a6 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower01.png) left center no-repeat;
display: block;
text-align: left;
position: relative;
height: 23px;
}

ul.navheader li:hover {
background: #f0d1a6 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower01b.png) left center no-repeat;
}

ul.navheader li.view {
background: #f0d1a6 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower01b.png) left center no-repeat;
color: #c06549 !important;
}

ul.navheader li + li {
background: #f1dcad url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower02.png) left center no-repeat;
text-align: left;
}

ul.navheader li + li:hover {
background: #f1dcad url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower02b.png) left center no-repeat;
}

ul.navheader li + li.view {
background: #f1dcad url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower02b.png) left center no-repeat;
color: #c06549 !important;
}

ul.navheader li + li + li {
background: #f1e5b3 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower03.png) left center no-repeat;
display: block;
text-align: left;
}

ul.navheader li + li + li:hover {
background: #f1e5b3 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower03b.png) left center no-repeat;
}

ul.navheader li + li + li.view {
background: #f1e5b3 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower03b.png) left center no-repeat;
color: #c06549 !important;
}

ul.navheader li + li + li + li {
background: #dde3a8 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower04.png) left center no-repeat;
display: block;
text-align: left;
}

ul.navheader li + li + li + li:hover {
background: #dde3a8 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower04b.png) left center no-repeat;
}

ul.navheader li + li + li + li.view {
background: #dde3a8 url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/flower04b.png) left center no-repeat;
color: #c06549 !important;
}

/*******************************Sidebar*******************************/

#sidebar {
display: none;
}

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

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

.defaultuserpic {
text-align: center;
border: 1px solid #f1f3f4;
padding: 5px;
width: 100px;
height: 100px;
margin: 0 auto;
}

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

.sbarbody {
}

.sbarbody2 {
padding: 0 7px;
}

#sidebar_summary li {
border-bottom: 1px solid #f1f3f4;
margin: 0;
}

.sbaritem {
padding: 3px 10px !important;
}

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

.sbarcalendar {
border: 1px solid #f1f3f4;
text-align: center;
font-size: 11px;
}

.sbarcalendarposts {
border: 1px solid #f1f3f4;
background-color: #ffa927;
text-align: center;
font-size: 11px;
}

.sbarcalendarposts a,.sbarcalendarposts a:visited {
color: #fff6ac !important;
}

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

li.sbaritem, .tagcloud {
padding: 0 0 5px 0;
margin: 0 0 0 15px;
list-style: none;
}

#sidebar_summary ul li{
list-style-type: none;
}

li.sbartitle {
width: 159px;
font-weight: bold;
letter-spacing: 1px;
padding: 3px 0 3px 10px;
list-style: none;
border-top: 1px solid #f1f3f4;
border-bottom: 1px solid #f1f3f4;
background-color:#ffa927;
color: #fff6ac;
}

/*******************************Content*******************************/

#content {
width: 780px;
margin: 0 auto;
margin-top: 115px;
background: url(http://i621.photobucket.com/albums/tt296/quillsh/zoro/trans-bg.png);
}

#maincontent {
width: 100%;
font-size: 11px;
text-align: left;
float: left;
}

.subcontent {
clear: both;
padding: 50px 0 0 0;
.padding: 100px 0 0 0;
}

/*******************************Entry*******************************/

.entry {
font-size: 11px;
text-align: left;
width: 83%;
float: right;
}

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

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

.entry_text {
position: relative;
clear: none;
padding: 15px;
}

.userpic {
float: left;
background-color: #f1dcad;
padding: 1px;
margin: 7px;
border: 0;
width: 100px !important;
height: 100px !important;
}

.userpic img{
width: 100px !important;
height: 100px !important;
}

.userpicfriends {
position: relative;
float: left;
padding: 5px;
margin: 10px;
text-align: center;
border: 0;
background-color: #f1dcad !important;
font-size: 11px;
z-index: 1500000;
}

.userpicfriends a:link, .userpicfriends a:visited {
color: #be1919 !important;
text-decoration: none;
}

.date {
margin: 5px 20px 0 0;
text-align: right;
color: #c1a270;
font-weight: bold;
font-size: 10px;
letter-spacing: 1px;
text-transform: lowercase;
position: relative;
}

.subject {
font-family: 'Chewy';
color: #be1919;
font-size: 24px;
line-height: 15px;
letter-spacing: 2px;
text-transform: lowercase;
}

.subject a, .subject a:link, .subject a:visited, .subject a:hover {
color: #be1919;
text-decoration: none;
}

.datesubject {
z-index: 10000;
text-align: right;
}

.currents {
font-size: 11px;
margin: -4px 0 0 15px;
}

.ljtags {
margin: 15px 0 0 0;
font-weight: bold;
color: #702807;
}

.ljtags a, .ljtags a:hover, .ljtags a:visited {
font-weight: bold;
}

.comments {
font-size: 9px;
text-align: right;
padding: 5px;
position: relative;
top: 15px;
z-index: 0;
clear: both;
letter-spacing: 1px;
border-right: 5px solid #be1919;
}

.comments a, .comments a:link, .comments a:visited{
color: #be1919;
font-weight: bold;
letter-spacing: 1px;
text-transform: lowercase;
text-decoration: none;
}

.comments a:hover {
color: #c06549;
font-weight: bold;
letter-spacing: 1px;
text-transform: lowercase;
text-decoration: none;
}

/*******************************Comments*******************************/

#userpics {
margin-top: 5px;
}

.datesubjectcomment {
padding: 5px;
color: #be1919;
text-align: right;
}

.userpiccomment {
position: relative;
border: 0;
background-color: #f1dcad;
margin-top: 20px;
left: 0px;
padding: 1px;
margin: 10px 10px 5px 10px;
z-index: 15;
float: left;
border: 1px solid #f1f3f4;
}

.box {
padding: 25px 10px;
clear: both;
margin-top: 0;
}

input, textarea {
background-color: #ffffff;
color: #999999;
}

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

.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-size: 11px;
line-height: 125%;
background-color: #ffffff;
color: #000000;
}

.replytosubject {
font-weight: bold;
}

.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
color: #000000;
}

#commenttext {
border: 1px solid #c2c5c6;
}

.commentbox {
border: 0;
margin: 10px;
background-color: #f1e5b3;
}

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

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

.commentboxpartial {
border: 1px solid #f1f3f4;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

/*******************************Archive*******************************/

ul.year {
text-align: center;
padding-bottom: 40px;
margin-top: 5px;
}

ul.year li {
display: inline;
}

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

table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px solid #dde3a8;
}

table.yeartable td.yearday {
background-color: #dde3a8;
color: #c06549;
text-align: center;
font-weight: bold;
}

td.yearmonth {
border-style: none;
}

/*******************************Footer*******************************/

#footer {
text-align: center;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
z-index: 100;
clear: both;
padding: 50px 0 0 0;
width: 100%;
margin-top: -13px;
color: #c1a270;
}

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

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

.clearfoot {
clear: both;
}

/*******************************Utility*******************************/

.clear {
height: 0;
margin: 0;
}

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

.separator{
/* for formatting separators between entries */
height: 55px;
}

* 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;
border: 1px solid #f1f3f4;
background-color: #000000;
}

input {
background-color: #f1f3f4;
border: 1px solid #c2c5c6;
font-weight: bold;
}

#subject {
background-color: #ffffff;
border: 1px solid #c2c5c6;
color: #999999;
font-weight: normal;
}

/*******************************Control Strip*******************************/

#Logout{
border: 1px #3f3f3f solid;
background-color: #3f3f3f !important;
color: #f1f3f4 !important;
}

#lj_controlstrip, #lj_controlstrip_statustext{
background:url() !important;
background-color: #000000 !important;
color: #fff6ac !important;
}

#lj_controlstrip b {
color: #fff6ac !important;
}

#lj_controlstrip a, #lj_controlstrip a:visited {
color: #f1f3f4 !important;
text-decoration: none;
}

#lj_controlstrip a:hover {
color: #fff6ac !important;
text-decoration: none;
}

.lj_controlstrip_search_submit_sup{
border: 1px #3f3f3f solid;
background-color: #3f3f3f !important;
color: #f1f3f4 !important;
height: 20px;
}

#lj_controlstrip_search_input_text {
font-weight: normal;
}

#lj_controlstrip_search_input_text_sup{
border: 0;
height: 18px;
background-color: #e5e7cf !important;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right:0 !important;
}

/* DIRECTIONS: To install, go to your Home section in LJ. Scroll over Journal in the menu, click Journal Style. Below you'll find a section of themes to select and a search field. In the search box put in "Flexible Squares" and choose the template called "Black and White and Red All Over". In the top right you'll see a box called Current Theme, click "Change page setup" and there choose "2 column (sidebar on the right)". Then click the "Customize selected theme" button next to that. On your left you'll see a sidebar, click on "Custom CSS." You'll see a drop down options, make sure they're all marked "No". Leave "Custom external stylesheet URL" entry blank.

Click "Save Changes" and it should be ready to go

flower brushes from http://gvalkyrie.deviantart.com/art/Flower-Brush-Set-1-50733102*/

flexible squares

Previous post Next post
Up