cottontails | Flexible Squares: Pink Splash

Large Preview | Temporarily Live @

demozone
Tested in Chrome, Opera, FF
Not recommended for IE

This is my FIRST attempt at making a layout! Hope you like!

/* Flexible Squares CSS: */

/*---------------------------------------------------
DO NOT REMOVE

css coding by meekosan at fanaticism.livejournal.com
meta icons by abasium at mintyapple.livejournal.com
-----------------------------------------------------*/

body    {
        background-color: #000000;
        background-image: url(http://i.imgur.com/WTosu.jpg);
        background-repeat: yes;
        background-attachment: fixed;
        text-align: center;
        color: #000000;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        margin: 20px 0 20px 0;
        }

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

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

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

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

/*---------------------------------------------------------------------
   General page alignment and width
------------------------------------------------------------------------*/

#content
    {
        width: 800px;
        margin-left: auto; margin-right: auto;
        background-color: #ffffff;
        background-image: url(http://i.imgur.com/WTosu.jpg);
        background-repeat: yes;
        background-attachment: fixed;
        padding: 15px;
    }

#maincontent {
        margin-top: 15px;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        background-color: #ffffff;
        background-image: url(http://i.imgur.com/WTosu.jpg);
        background-repeat: yes;
        background-attachment: fixed;
        color: #000000;
        margin-right: 180px;
        text-align: left;
        }

#sidebar {
        padding-top: 15px;
        padding-bottom: 15px;
        margin-top: 15px;
        margin-bottom: 15px;
        background-color: #eee;
        border-color: #000;
        border-width: 1px;
        border-style: solid;
        border-radius: 0px 40px 0px 40px;
        -moz-border-radius: 0px 40px 0px 40px;
        -webkit-border-radius: 0px 40px 0px 40px;
        font-size: 11px;
        font-family: Arial, "Verdana", sans-serif;
        color: #000000;
        width: 175px;
        float: right;
        text-align: left;
        }

/*-----------------------------------------------------------------------------
   Header - you can add a header image with either #header or .headerimage
-------------------------------------------------------------------------------

-*/

#header {
        background-image: url(http://i.imgur.com/5SERI.jpg);
        background-repeat: yes;
        height: 100px;
        width: 100%;
        padding: 30px 0px 20px 0px;
        margin: 0px;
        text-align: right;
        color: #eee;
        font-family: Arial;
        font-size: 16px;
        text-transform: uppercase;
        text-shadow: 1px 1px 0px #666, 2px 2px 0px #000;
        border-radius: 0px 40px 0px 40px;
        -moz-border-radius: 0px 40px 0px 40px;
        -webkit-border-radius: 0px 40px 0px 40px;
        border-style: solid;
        border-color: #000;
        border-width: 1px;
        background-color: #eee;
        }

/*look  and color of links (also partly for footer)*/
    div#header a, div#header a:link, div#header a:visited, div#footer a,

div#footer a:link, div#footer a:visited {
        color: #fff;
    }

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

/*title and subtitle*/
    .title  {
        font-family: "Verdana", sans-serif;
        font-size: 20px;
        font-weight: normal;
        line-height: 200%;
        top: 10px;
        }

.subtitle{
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: normal;
        top: 10px;
        }

/*-----------------------------------------------------------------------------
   Header - top navigation
-------------------------------------------------------------------------------

-*/

/* header -- links to views; title of journal; subtitle of journal */

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

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

/*-----------------------------------------------------------------------------
   Entry stuff
------------------------------------------------------------------------*/

.subcontent {
    background-color: #ffffff;
    background-image: url(http://i.imgur.com/WTosu.jpg);
    background-repeat: yes;
    background-attachment: fixed;
    }

.entry  {
        margin: 10px 10px 10px 10px;
        padding: 15px;
        background-color: #eee;
        color: #000000;
        font-family: Arial, "Verdana", sans-serif;
        font-size: 12px;
        text-align: left;
        border-width: 1px;
        border-color: #919bad;
        border-style: solid;
        border-radius: 0px 40px 0px 40px;
        -moz-border-radius: 0px 40px 0px 40px;
        -webkit-border-radius: 0px 40px 0px 40px;
        border: 1px solid #000000;
        }

blockquote {
        font-family: Courier New, "trebuchet ms";
        background-color:#ecf0f6;
        padding:5px;
        border:1px dashed;
        color:#919bad;
        }

.userpic {
        position: relative;
        float: left;
        background-color: #eee;
        padding: 5px;
        margin: 10px;
        z-index: 15;
        border-width: 1px;
        border-color: #919bad;
        border-style: solid;
        }

.date {
        line-height: 100%;
        top: 0px;
        color: #000000;
        font-family: "Verdana", sans-serif;
        font-size: 8px;
        }

.subject {
        font-weight: bold;
        padding: 0px;
        color: #000000;
        font-family: Arial, "Verdana", sans-serif;
        font-size: 25px;
        text-transform: uppercase;
        text-shadow: 1px 1px 0px #eee, 2px 2px 0px #707070;
        }

.subject a, .subject a:link, .subject a:visited {
        color: #707070;
        font-family: Arial;
        font-size: 25px;
        text-transform: uppercase;
        text-shadow: 1px 1px 0px #eee, 2px 2px 0px #707070;
        }

.subject a:hover {
        color: #ff78c5;
        text-transform: uppercase;
        }

.datesubject {
        padding: 15px;
        }

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

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

/*---------------------------------------------------------------------
  Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/

.currents, .currentmood, .currentmusic {
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        color: #ff78c5;
        text-transform: lowercase;
        }

.ljtags {
        margin-left: 15px;
        padding-left: 20px;
        color: #ff78c5;
        font-size: 11px;
        font-weight: none;
        text-transform: lowercase;
        background: url(http://i.imgur.com/OnB6G.jpg) no-repeat center left;
        }

.ljtags a:link, .ljtags a, .ljtags a:active, .ljtags a:visited
        {
        text-transform: lowercase;
        }

.currentlocation
        {
        background: url(http://i.imgur.com/aUZmg.jpg) no-repeat center left;
        padding-left: 20px;
        }

.currentmusic
        {
        background: url(http://i.imgur.com/ZukFr.jpg) no-repeat center left;
        padding-left: 20px;
        }

.currentmood
        {
        background: url(http://i.imgur.com/2HrZm.jpg) no-repeat center left;
        padding-left: 20px;
        }

.clear
        {
        height: 2px;
        }

/*---------------------------------------------------------------------
  Entry Stuff - Comments
------------------------------------------------------------------------*/

.comments {
        font-family: Arial, "Verdana", sans-serif;
        font-size: 15px;
        font-variant: uppercase;
        text-align: right;
        padding: 5px 5px 5px 5px;
        border-radius: 0px 40px 0px 40px;
        -moz-border-radius: 0px 40px 0px 40px;
        -webkit-border-radius: 0px 40px 0px 40px;
        position: left;
        top: 35px;
        }

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

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

/*---------------------------------------------------------------------
  Entry Stuff - Separator
------------------------------------------------------------------------*/

.separator{
        /* for formatting separators between entries */
        height: 0px;
        background-color: #ffffff;
    }

/*------------------------------------------------------------
  Special friends page customization
-------------------------------------------------------------------------------

.userpicfriends {
        position: relative;
        float: left;
        padding: 5px;
        margin: 10px;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        border-color: #000;
        border-radius: 0px 10px 0px 10px;
        -moz-border-radius: 0px 10px 0px 10px;
        -webkit-border-radius: 0px 10px 0px 10px;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        z-index: 15;
        }

/*------------------------------------------------------------
  Sidebar
-------------------------------------------------------------------------------

.defaultuserpic {
        text-align: center;
        }

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

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

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

div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
                 color: #ff78c5;
                 text-decoration: bold;
         }

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

/*------------------------------------------------------------
  Sidebar - Calendar
-------------------------------------------------------------------------------

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

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

.sbarcalendarposts {
        border-color:  #000000;
        border-width: 1px;
        border-style: solid;
        background-color: #eee;
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        }

/*------------------------------------------------------------
  Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------

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

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

li.sbartitle
    {
        padding-left: 15px;
        list-style: none;
        border-style: solid;
        border-width: 1px;
        border-color: #000;
        background-color: #eee;
        margin-bottom: 10px;
        margin-top: 10px;
    }

/*----------------------------------------------------
  footer
----------------------------------------------------------------*/

#footer {
        width: 100%;
        text-align: center;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        font-weight: bold;
        letter-spacing: 1px;
        background-color: #eee;
        background-image: url(http://i.imgur.com/WTosu.jpg);
        background-repeat: yes;
        background-attachment: fixed;
        color: #000000;
        z-index: 100;
        clear: both;
        }

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

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

.clearfoot {
        clear: both;
        }

/*----------------------------------------------------
 Archive Pages
----------------------------------------------------------------*/

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

ul.year li {
        display: inline;
        }

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

table.yeartable td.yeardate, table.yeartable td.yearday {
        border-width: 1px;
        border-style: solid;
        border-color: #999999;
        }

table.yeartable td.yearday {
        background-color: #eee;
        text-align: center;
        }

td.yearmonth {
        border-style: none;
        }

/*----------------------------------------------------
 Comments pages
----------------------------------------------------------------*/

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

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

.box {
        border-style: solid;
        border-width: 1px 0px 0px 0px;
        border-color: #999999;
        padding: 10px;
        clear: left;
        }

input, textarea {
        background-color: #eee;
        color: #000000;
        }

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

.reply  {
        position: relative;
        margin: 20px 30px 10px 30px;
        padding: 25px 10px 10px 10px;
        border-radius: 0px 0px 40px 40px;
        -moz-border-radius: 0px 0px 40px 40px;
        -webkit-border-radius: 0px 0px 40px 40px;
        text-align: left;
        font-family: "Verdana", sans-serif;
        font-size: 11px;
        line-height: 125%;
        background-color: #eee;
        color: #000000;
        }

.replytosubject {
        font-weight: bold;
        }

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

.commentbox {

border-color: #000;
        border-width: 1px;
        border-style: solid;
        border-radius: 0px 0px 40px 40px;
        -moz-border-radius: 0px 0px 40px 40px;
        -webkit-border-radius: 0px 0px 40px 40px;
        padding: 10px;
        margin: 10px;
        background-color: #eee;
        }

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

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

.commentboxpartial {
        border-color: #000;
        border-width: 1px;
        border-style: solid;
        border-radius: 0px 0px 40px 40px;
        -moz-border-radius: 0px 0px 40px 40px;
        -webkit-border-radius: 0px 0px 40px 40px;
        padding: 10px;
        margin: 10px;
        background-color: #eee;
        }

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

.skiplinks {
        text-align: center;
        }

/*--------------------------------------------
Misc
-----------------------------------------*/

.clear {
        height: 15px;
        }

Images featured:

: Background Image, used multiple times in code.

: Header Graphic, if replaced, recommended dimensions are 800x200.
Both graphics are by meekosan @ fanaticism. Please save the graphics and load to your own image host such as ImageShack, TinyPic, or Imgur and credit appropriately.

INSTALL INSTRUCTIONS

Visit customize and set your style to S2 & save changes.

Select Flexible Squares and save.

Make sure sidebar is set to the right and ads (if Basic or Plus account) as horizontal. Save changes.

Proceed to custom options and click Custom CSS. Select NO in all the dropdown boxes. Then copy & paste the CSS into the box & save changes.

If you have any questions, please feel free to leave a comment on this post.