Celebrity - Karl Urban Layout / Rosamund Pike Layouts
Style: S2 Flexible Squares
Website: Not Needed
Custom Colors: Taken care of in the stylesheet
Best view: 1024x768 or higher
Browser(s) Compatible: Firefox & IE
Live Preview: Karl Urban | Rosamund Pike
The CSS Code
/*------------------------------------------------
LAYOUT: "Celebrity - Karl Urban (Layout o1)"
BY: Mercy @ street_of_mercy
STYLE: S2 Flexible Squares
WORKS WITH: Free, Sponsored and Paid accounts
BROWSER: Firefox and Internet Explorer
------------------------------------------------*/
/* ------ MAIN ------ */
body {
background-color: #ECEAEB;
color: #000000
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 0 0 0 0;
}
a, a:link, a:visited {
color: #3d90d2;
text-decoration: none;
}
a:hover {
color: #98c5ec;
text-decoration: none;
}
blockquote {
padding: 18px;
border: 1px dashed #CECECE;
color: #4e4e4e;
font-size: 8pt;
line-height: 13px;
font-family: "Verdana", sans-serif;
background: #FFFFFF;
text-align: justify;
}
p, td{
}
code, kbd, pre, tt {
font-family: monospace;
}
ul.ljtaglist {
text-align: left;
padding-left: 20px;
}
/* ------ CONTAINING ELEMENTS ------ */
#content {
width: 710px;
margin-left: auto;
margin-right: auto;
text-align: justify;
padding: 8px;
background-color: #FFFFFF;
border-color: #cccccc;
border-style: solid;
border-width: 0px 1px 1px 1px;
}
#maincontent {
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #000000;
margin-left: 175px;
text-align: center;
}
#sidebar {
padding: 0px 0 15px 0;
background-color: #FFFFFF;
margin-top: 0px;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #4E4E4E;
width: 165px;
float: left;
text-align: left;
text-transform: lowercase;
border-right: 1px #e4e4e4 dotted;
}
#header {
position: relative;
text-align: center;
color: #5d5d5d;
font-family: "Verdana", sans-serif;
font-size: 10px;
width: 100%;
padding: 0px 0px 10px 0px;
margin-bottom: 20px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px #e4e4e4 dotted;
}
#footer {
width: 100%;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #5d5d5d;
z-index: 100;
}
/* ------ HEADER ------ */
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{
color: #3d90d2;
text-decoration: none;
}
div#header a:hover, div#footer a:hover{
color: #98c5ec;
text-decoration: none;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 6px;
margin: 0 2px;
}
.title, .subtitle {
display: none;
}
/* ------ SIDEBAR ------ */
#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link, .sbarcalendarposts a:visited{
padding: 0px;
text-align: center;
}
#sidebar .sbarcalendarposts a:hover {
padding: 0px;
text-align: center;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #3d90d2;
padding: 3px 3px 3px 5px;
text-decoration: none;
}
div#sidebar a:hover {
padding: 3px 3px 3px 5px;
color: #98c5ec;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
padding: 1px;
border: 1px solid #CECECE;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 9px;
}
.sbarcalendarposts {
padding: 1px;
border: 1px solid #CECECE;
background-color: #EEEEEE;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 9px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding: 3px 3px 3px 5px;
border-bottom: 1px dotted #CCCCCC;
list-style: none;
}
li.sbartitle {
padding: 3px 5px 3px 5px;
margin: 10px 0 10px 0;
background-color: #EEEEEE;
list-style: none;
text-align: left;
color: #333333;
text-transform: uppercase;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
/* ------ MAINCONTENT ------ */
span.ljuser a b {
padding: 2px 0 2px 0;
color: #3d90d2;
font-weight: lighter;
}
span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #98c5ec;
font-weight: lighter;
}
ul.ljtaglist li {
list-style: none;
margin-bottom: 5px;
}
ul.ljtaglist {
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
padding: 12px;
}
.subcontent {
background-color: #FFFFFF;
}
.entry {
padding: 10px;
color: #606060;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: justify;
}
hr {
color: transparent;
height: 1px;
border-style : none;
border-bottom: 2px solid #CECECE;
}
.entry ul li, ol li, li {
padding-left: 5px;
margin-left: 0px;
}
.userpic {
background-color: #FFFFFF;
position: relative;
float: right;
padding: 5px;
margin: 10px;
z-index: 15;
}
.userpicfriends {
background-color:transparent !important;
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}
.date {
padding-top: 5px;
padding-bottom: 5px;
text-align: right;
color: #4E4E4E;
top: 5px;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-transform: uppercase;
}
.subject {
background-color: #EEEEEE;
font-weight: none;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 10px;
color: #333333;
font-family: "Verdana", sans-serif;
font-size: 12px;
text-transform: lowercase;
}
.subject a, .subject a:link, .subject a:visited {
color: #3d90d2;
}
.subject a:hover {
color: #98c5ec;
}
.datesubject {
background-color: transparent;
padding: 0px;
text-align: left;
}
.ljtags {
margin-top: 20px;
color: #888888;
font-weight: lighter;
text-transform: lowercase;
}
.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #888888;
font-weight: lighter;
text-transform: lowercase;
}
.currents, .currentmood, .currentmusic, .currentlocation {
color: #78b3df;
font-weight: lighter;
text-transform: lowercase;
}
.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #3d90d2;
text-transform: lowercase;
font-weight: lighter;
}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #3d90d2;
text-transform: lowercase;
font-weight: lighter;
}
.currentlocation a:hover, .ljtags a:hover {
color: #ABABAB;
font-weight: lighter;
text-transform: lowercase;
}
.comments {
font-family: "Verdana", sans-serif;
font-size: 10px;
text-align: right;
padding: 5px 5px 5px 5px;
position: relative;
clear: right;
margin-top: 15px;
text-transform: lowercase;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #3d90d2;
}
div.comments a:hover {
color: #98c5ec;
text-decoration: none;
}
/* ------MAINCONTENT -- ENTRY, REPLY PAGES ------ */
.datesubjectcomment {
margin-top: 20px;
text-align: right;
padding: 5px;
background-color: #EEEEEE;
color: #333333;
}
.userpiccomment {
background-color: #FFFFFF;
position: relative;
top: -30px;
left: 0px;
padding: 5px;
margin: 20px 10px -20px 10px;
z-index: 15;
float: right;
}
.box {
padding: 10px;
margin-top: 0px;
text-align: left;
clear:right;
}
form div.box {
text-align:center;
}
div#content input,
div#content textarea,
div#content select {
color: #5d5d5d;
border:#4E4E4E solid 1px;
background-color:#FFFFFF;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
color: #000000;
}
.replytosubject {
color: #333333;
font-weight: bold;
text-transform: lowercase;
padding: 5px;
background-color: #EEEEEE;
}
.replytoposter {
background-color: #EEEEEE;
color: #5d5d5d;
text-transform: lowercase;
padding: 5px;
}
.commentreply {
text-align: justify;
position: relative;
margin: 10px;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #000000;
}
.commentbox {
padding: 5px;
margin: 10px;
text-align: left;
background-color: #FFFFFF;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #3d90d2;
}
.datesubjectcomment a:hover {
color: #98c5ec;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
/* ------ MAINCONTENT -- YEAR/ACHIVE PAGES ------ */
ul.year {
text-align: center;
padding: 20px 0 20px 0;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px #CECECE solid;
color: #000000;
}
table.yeartable td.yearday {
text-align: center;
color: #98c5ec;
}
td.yearmonth {
color: #3d90d2;
border-style: none;
}
/* ------ FOOTER ------ */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/* ------ MISC ------ */
.clear {
height: 7px;
font-size: 0.01px;
}
.skiplinks {
text-transform: lowercase;
text-align: center;
padding: 10px 0 10px 0;
}
.headerimage {
position: relative;
border-color: #cccccc;
border-style: solid;
border-width: 1px 1px 0px 1px;
width: 726px;
height: 350px;
margin-left: auto;
margin-right: auto;
margin-top: 6px;
background-color: #FFFFFF;
background-image: url(http://i153.photobucket.com/albums/s217/mercscilla_test/Celebrity/karlheader.jpg);
;){kind=link}
background-position: center;
background-repeat: no-repeat;
}
.separator {
height: 20px;
}
/*------------------------------------------------
LAYOUT: "Celebrity - Rosamund Pike (Layout o1)"
BY: Mercy @ street_of_mercy
STYLE: S2 Flexible Squares
WORKS WITH: Free, Sponsored and Paid accounts
BROWSER: Firefox and Internet Explorer
------------------------------------------------*/
/* ------ MAIN ------ */
body {
background-color: #ECEAEB;
color: #000000
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 0 0 0 0;
}
a, a:link, a:visited {
color: #d7064a;
text-decoration: none;
}
a:hover {
color: #e15582;
text-decoration: none;
}
blockquote {
padding: 18px;
border: 1px dashed #CECECE;
color: #4e4e4e;
font-size: 8pt;
line-height: 13px;
font-family: "Verdana", sans-serif;
background: #FFFFFF;
text-align: justify;
}
p, td{
}
code, kbd, pre, tt {
font-family: monospace;
}
ul.ljtaglist {
text-align: left;
padding-left: 20px;
}
/* ------ CONTAINING ELEMENTS ------ */
#content {
width: 710px;
margin-left: auto;
margin-right: auto;
text-align: justify;
padding: 8px;
background-color: #FFFFFF;
border-color: #cccccc;
border-style: solid;
border-width: 0px 1px 1px 1px;
}
#maincontent {
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #000000;
margin-left: 175px;
text-align: center;
}
#sidebar {
padding: 0px 0 15px 0;
background-color: #FFFFFF;
margin-top: 0px;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #4E4E4E;
width: 165px;
float: left;
text-align: left;
text-transform: lowercase;
border-right: 1px #e4e4e4 dotted;
}
#header {
position: relative;
text-align: center;
color: #5d5d5d;
font-family: "Verdana", sans-serif;
font-size: 10px;
width: 100%;
padding: 0px 0px 10px 0px;
margin-bottom: 20px;
text-align: center;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px #e4e4e4 dotted;
}
#footer {
width: 100%;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #5d5d5d;
z-index: 100;
}
/* ------ HEADER ------ */
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{
color: #d7064a;
text-decoration: none;
}
div#header a:hover, div#footer a:hover{
color: #e15582;
text-decoration: none;
}
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 6px;
margin: 0 2px;
}
.title, .subtitle {
display: none;
}
/* ------ SIDEBAR ------ */
#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link, .sbarcalendarposts a:visited{
padding: 0px;
text-align: center;
}
#sidebar .sbarcalendarposts a:hover {
padding: 0px;
text-align: center;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #d7064a;
padding: 3px 3px 3px 5px;
text-decoration: none;
}
div#sidebar a:hover {
padding: 3px 3px 3px 5px;
color: #e15582;
}
.defaultuserpic {
text-align: center;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 0 15px 0 15px;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
padding: 1px;
border: 1px solid #CECECE;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 9px;
}
.sbarcalendarposts {
padding: 1px;
border: 1px solid #CECECE;
background-color: #EEEEEE;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 9px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem {
padding: 3px 3px 3px 5px;
border-bottom: 1px dotted #CCCCCC;
list-style: none;
}
li.sbartitle {
padding: 3px 5px 3px 5px;
margin: 10px 0 10px 0;
background-color: #EEEEEE;
list-style: none;
text-align: left;
color: #333333;
text-transform: uppercase;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
/* ------ MAINCONTENT ------ */
span.ljuser a b {
padding: 2px 0 2px 0;
color: #d7064a;
font-weight: lighter;
}
span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #e15582;
font-weight: lighter;
}
ul.ljtaglist li {
list-style: none;
margin-bottom: 5px;
}
ul.ljtaglist {
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
padding: 12px;
}
.subcontent {
background-color: #FFFFFF;
}
.entry {
padding: 10px;
color: #606060;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: justify;
}
hr {
color: transparent;
height: 1px;
border-style : none;
border-bottom: 2px solid #CECECE;
}
.entry ul li, ol li, li {
padding-left: 5px;
margin-left: 0px;
}
.userpic {
background-color: #FFFFFF;
position: relative;
float: right;
padding: 5px;
margin: 10px;
z-index: 15;
}
.userpicfriends {
background-color:transparent !important;
position: relative;
float: right;
padding: 5px;
margin: 10px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}
.date {
padding-top: 5px;
padding-bottom: 5px;
text-align: right;
color: #4E4E4E;
top: 5px;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-transform: uppercase;
}
.subject {
background-color: #EEEEEE;
font-weight: none;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 10px;
color: #333333;
font-family: "Verdana", sans-serif;
font-size: 12px;
text-transform: lowercase;
}
.subject a, .subject a:link, .subject a:visited {
color: #d7064a;
}
.subject a:hover {
color: #e15582;
}
.datesubject {
background-color: transparent;
padding: 0px;
text-align: left;
}
.ljtags {
margin-top: 20px;
color: #888888;
font-weight: lighter;
text-transform: lowercase;
}
.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
color: #888888;
font-weight: lighter;
text-transform: lowercase;
}
.currents, .currentmood, .currentmusic, .currentlocation {
color: #af5271;
font-weight: lighter;
text-transform: lowercase;
}
.ljtags a, .ljtags a:link, .ljtags a:visited {
color: #d7064a;
text-transform: lowercase;
font-weight: lighter;
}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
color: #d7064a;
text-transform: lowercase;
font-weight: lighter;
}
.currentlocation a:hover, .ljtags a:hover {
color: #ABABAB;
font-weight: lighter;
text-transform: lowercase;
}
.comments {
font-family: "Verdana", sans-serif;
font-size: 10px;
text-align: right;
padding: 5px 5px 5px 5px;
position: relative;
clear: right;
margin-top: 15px;
text-transform: lowercase;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #d7064a;
}
div.comments a:hover {
color: #e15582;
text-decoration: none;
}
/* ------MAINCONTENT -- ENTRY, REPLY PAGES ------ */
.datesubjectcomment {
margin-top: 20px;
text-align: right;
padding: 5px;
background-color: #EEEEEE;
color: #333333;
}
.userpiccomment {
background-color: #FFFFFF;
position: relative;
top: -30px;
left: 0px;
padding: 5px;
margin: 20px 10px -20px 10px;
z-index: 15;
float: right;
}
.box {
padding: 10px;
margin-top: 0px;
text-align: left;
clear:right;
}
form div.box {
text-align:center;
}
div#content input,
div#content textarea,
div#content select {
color: #5d5d5d;
border:#4E4E4E solid 1px;
background-color:#FFFFFF;
}
textarea.textbox {
width: 100% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: "Verdana", sans-serif;
font-size: 11px;
line-height: 125%;
color: #000000;
}
.replytosubject {
color: #333333;
font-weight: bold;
text-transform: lowercase;
padding: 5px;
background-color: #EEEEEE;
}
.replytoposter {
background-color: #EEEEEE;
color: #5d5d5d;
text-transform: lowercase;
padding: 5px;
}
.commentreply {
text-align: justify;
position: relative;
margin: 10px;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #000000;
}
.commentbox {
padding: 5px;
margin: 10px;
text-align: left;
background-color: #FFFFFF;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #d7064a;
}
.datesubjectcomment a:hover {
color: #e15582;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
}
.commentinfo {
margin-top: 10px;
width: 100%;
}
/* ------ MAINCONTENT -- YEAR/ACHIVE PAGES ------ */
ul.year {
text-align: center;
padding: 20px 0 20px 0;
}
ul.year li {
display: inline;
}
table.yeartable {
margin-left: auto;
margin-right: auto;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border: 1px #CECECE solid;
color: #000000;
}
table.yeartable td.yearday {
text-align: center;
color: #e15582;
}
td.yearmonth {
color: #d7064a;
border-style: none;
}
/* ------ FOOTER ------ */
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/* ------ MISC ------ */
.clear {
height: 7px;
font-size: 0.01px;
}
.skiplinks {
text-transform: lowercase;
text-align: center;
padding: 10px 0 10px 0;
}
.headerimage {
position: relative;
border-color: #cccccc;
border-style: solid;
border-width: 1px 1px 0px 1px;
width: 726px;
height: 326px;
margin-left: auto;
margin-right: auto;
margin-top: 6px;
background-color: #FFFFFF;
background-image: url(http://i153.photobucket.com/albums/s217/mercscilla_test/Celebrity/rosamundheader.jpg);
;){kind=link}
background-position: center;
background-repeat: no-repeat;
}
.separator {
height: 20px;
}
IMPORTANT: You need a title for the blurb/free text box or the sidebar goes wacko.
The Images
For Karl Urban : Header | Friends-Only Banner
For Rosamund Pike: Header | Friends-Only Banner
I've uploaded the images to my photobucket account. If you want, you can keep the links as it is or you can upload the images to your own account and change the links in the stylesheet.
The How-To-XYZ Stuff
The colors for Karl Urban: #3D90D2 | #98C5EC | #78B3DF plus various grey variations.
The colors for Rosamund Pike: #D7064A | #E15582 | #AF5271 plus various grey variations.
Change them to your choice of colors.
To add your own header, please visit this post.
The set-up guide is HERE
Should you encounter any problems, please don't hesitate and ask me. :)
Enjoy!