Layout + Profile: Coffee Love: cheeky

thecheekydragon in cheeky_layouts

Layout + Profile: Coffee Love

Feb 05, 2012 15:23

Layout: Coffee Love
Style: S2 Flexible Squares
Credit: cheeky_layouts
Profile Layout: Included
Theme: Luvers

Layout Preview:

GENERAL INSTRUCTIONS:

(1) Go to "Journal Style"
(2) Select Flexible Squares (any stylesheet)
(3) Choose 2 column with sidebar on right
(4) Click on Customize Theme
(5) Click on Custom CSS in sidebar
(6) Use layout's stylesheet - No
Use layout's stylesheet when including custom external stylesheet - No
Use external stylesheet - Yes
(7) Copy and paste the following code into the big Custom Stylesheet box (the Custom external stylesheet URL box should remain blank)

/*----------------------------------------------------
Coffee Love
S2 Flexible Squares
by thecheekydragon at cheeky_layouts
----------------------------------------------------*/

body {
background-color: #ffffff;
text-align: center;
color: #000000;
font-family: "Georgia", sans-serif;
font-size: 16px;
margin: 20px 0 20px 0;
background-image: url("http://imageshack.us/a/img402/4117/ub6c.jpg");
background-repeat: repeat;
}

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

a:hover {
color: #8b4513;
text-decoration: bold;
}

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

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

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

#content
{
width: 850px;
margin-left: auto; margin-right: auto;
background-color: transparent;
border-width: 2px;
border-style: solid;
border-color: #6b4226;
padding: 15px;
background-image: url(" http://imageshack.us/a/img690/6009/m5ie.jpg");
background-repeat: repeat;
}

#maincontent {
margin-top: 15px;
font-family: "Georgia", sans-serif;
font-size: 14px;
background-color: #ffffff;
color: #000000;
border-style: solid;
border-color: #6b4226;
border-width: 2px;
margin-right: 200px;
text-align: left;
}

#sidebar {

padding-top: 15px;
margin-top: 15px;
background-color: transparent;
border-color: #6b4226;
border-width: 2px;
border-style: solid;
font-size: 14px;
font-family: "Georgia", sans-serif;
color: #603311;
width: 180px;
float: right;
text-align: left;
background-image: url(" http://imageshack.us/a/img29/8457/rg9i.jpg");
background-repeat: repeat;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 768px;
padding: 7px 0px 7px 0px;
margin: 0px;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 3px;
border-style: solid;
border-color: #6b4226;
border-width: 2px;
background-color: transparent;
color: #6b4226;
}

.headerimage {
position: relative;
width: 800px;
height: 450px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url("http://imageshack.us/a/img507/783/c917.png");
background-repeat: no-repeat;
}

/*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: #603311;
}

div#header a:hover, div#footer a:hover {
color: #8b4513;
font-weight: bold;
}

/*title and subtitle*/
.title {
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: bold;
line-height: 200%;
top: 16px;
color: #6b4226;
}

.subtitle{
font-family: "Georgia", sans-serif;
font-size: 11px;
font-weight: normal;
top: 12px;
color: #8b4513;
}

/*-----------------------------------------------------------------------------
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 {
}

.entry {
margin: 0px 10px 10px 30px;
padding: 10px;
background-color: #ffffff;
color: #000000;
font-family: "Georgia", sans-serif;
font-size: 14px;
text-align: left;
border-width: 2px;
border-color: #6b4226;
border-style: solid;
}

.userpic {
position: relative;
float: left;
background-color: transparent;
padding: 5px;
margin: 10px;
z-index: 15;
border-width: 2px;
border-color: #6b4226;
border-style: solid;
}

.date {
line-height: 200%;
top: 5px;
color: #ffffff;
font-family: "Georgia", sans-serif;
font-size: 12px;
background-color: transparent;
}

.subject {
font-weight: normal;
padding: 10px;
color: #e7c6a5;
font-family: "Georgia", sans-serif;
font-size: 22px;
letter-spacing: 2px;
background-color: transparent;
}

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

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

.datesubject {
background-color: transparent;
padding: 5px;
background-image: url("http://imageshack.us/a/img402/4117/ub6c.jpg");
background-repeat: repeat;
}
.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: "Georgia", sans-serif;
font-size: 13px;
}

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

.comments {
font-family: "Georgia", sans-serif;
font-size: 13px;
text-align: right;
background-color: transparent;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
background-image: url("http://imageshack.us/a/img402/4117/ub6c.jpg");
background-repeat: repeat;
}

div.comments a, div.comments a:link, div.comments a:visited{
color: #e7c6a5;
font-weight: bold;
}

div.comments a:hover {
color: #ffffff;
text-decoration: bold;
}

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

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

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

.userpicfriends {
position: relative;
float: left;
background-color: #ffffff !important;
padding: 5px;
margin: 10px;
text-align: center;
border-style: solid;
border-width: 2px;
border-color: #6b4226;
font-family: "Georgia", 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: #603311;
}

div#sidebar a:hover {
color: #8b4513;
font-weight: bold;
}

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

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

.sbarcalendar {
border-color: #6b4226;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
}

.sbarcalendarposts {
border-color: #6b4226;
border-width: 1px;
border-style: solid;
background-color: #ffffff;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
}

/*------------------------------------------------------------
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: 2px;
border-color: transparent;
background-image: url("http://imageshack.us/a/img402/4117/ub6c.jpg");
background-repeat: repeat;
background-color: transparent;
margin-bottom: 10px;
margin-top: 10px;
color: #e7c6a5;
font-weight: bold;
}

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

#footer {
width: 800px;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 13px;
font-weight: bold;
letter-spacing: 1px;
background-color: transparent;
background-image: url("http://imageshack.us/a/img402/4117/ub6c.jpg");
background-repeat: repeat;
color: #e7c6a5;
border-color: #6b4226;
border-width: 2px;
border-style: solid;
z-index: 100;
clear: both;
padding: 7px 0px 7px 0px;}

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: #6b4226;
background-color: #ffffff;
}

table.yeartable td.yearday {
background-color: transparent;
text-align: center;
color: transparent;
color: #ffffff;
background-image: url("http://imageshack.us/a/img402/4117/ub6c.jpg);
background-repeat: repeat;
}

td.yearmonth {
border-style: none;
}

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

.datesubjectcomment {
background-color: transparent;
padding: 5px;
margin-top: 20px;
background-image: url("http://imageshack.us/a/img402/4117/ub6c.jpg");
background-repeat: repeat;
}

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

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

}

input, textarea {
background-color: transparent;
color: #000000;
background-image: url("http://imageshack.us/a/img29/8457/rg9i.jpg");
background-repeat: repeat;
}

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

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

.replytosubject {
font-weight: bold;
}

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

.commentbox {

border-color: #6b4226;
border-width: 2px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

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

.commentboxpartial {
border-color: #6b4226;
border-width: 2px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

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

.skiplinks {
text-align: center;
}

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

.clear {

height: 15px;
}

.ljtags {
margin-top: 25px;
}

/* Generated by Malionette's Tiny Icon Generator */

.ljuser img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://imageshack.us/a/img12/5687/rj.gif) no-repeat !important; padding: 20px 0 0 20px !important; }
.ljuser img[src*="img/community.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://img4.imageshack.us/img4/7426/pzm5.png) no-repeat !important; padding: 20px 0 0 20px !important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important;
background: transparent url(http://imageshack.us/a/img442/294/90m1.png) no-repeat !important; padding: 16px 0 0 16px !important; }

For continuity, it is always recommended that you upload the images to your own image hosting site and then replace in the code. If that's too much to do right now, I've re-uploaded the images and replaced in the code so they should work but links sometimes break.

Background: http://imageshack.us/a/img402/4117/ub6c.jpg (there are several places this image appears)
Header: http://imageshack.us/a/img507/783/c917.png
Sidebar Background: http://imageshack.us/a/img29/8457/rg9i.jpg (there are a couple of places this appears)
Content Background: http://imageshack.us/a/img690/6009/m5ie.jpg

These go in at the end of the code under Misc:

User Icon: http://imageshack.us/a/img12/5687/rj.gif
Comm Icon: http://imageshack.us/a/img4/7426/pzm5.png
Lock Icon: http://imageshack.us/a/img442/294/90m1.png

Colours Used:
#603311 (sign brown)
#6B4226 (semisweet chocolate)
#8B4513 (saddle brown)
#E7C6A5 (espresso)

Suggested Text Changes:

Recent Entries = Espresso!
Archive = Cafe
Friends = Latte Lounge
User Info = Barista
Leave a comment = pour me a cup
1 comment//# comments = 1 cup//# cups

Profile Preview:

http://img708.imageshack.us/img708/5089/coffeecup600x600.jpg">

link ♥ link ♥ link

Profile Images

Profile Header
Bean Bar Left
Bean Bar Right

theme: luvrs, theme: food, profile layout, colour: brown, style: flexible squares