Stargate Atlantis - Atlantis (Layout o4) | Atlantis Wallpaper
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: Here
The layout has a matching user profile and wallpaper.
The CSS Code
/*------------------------------------------------
LAYOUT: "Stargate Atlantis - Atlantis (Layout o4)"
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: #F8F8F8;
color: #606060;
font-family: "Verdana", sans-serif;
font-size: 10px;
margin: 0px 0 0px 0;
}
a, a:link, a:visited {
color: #A3A3A3;
text-decoration: none;
}
a:hover {
color: #C7C7C7;
text-decoration: none;
}
::-moz-selection {
background-color: #444444;
color: #FFFFFF;
}
blockquote {
padding: 18px;
border: 1px solid #CECECE;
color: #606060;
font-size: 8pt;
line-height: 12px;
font-family: "Verdana", sans-serif;
background: #F8F8F8;
text-align: justify;
}
p, td{
}
code, kbd, pre, tt {
font-family: monospace;
}
ul.ljtaglist {
text-align: left;
padding-left: 20px;
}
#content {
width: 810px;
margin-left: auto;
margin-right: auto;
text-align: justify;
padding: 0px;
}
#maincontent {
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #606060;
margin-left: 190px;
text-align: center;
margin-right: 2px;
}
#sidebar {
padding: 15px 0 0px 0px;
background-color: #FFFFFF;
border: #C7C7C7 1px solid;
margin-left: 2px;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #606060;
width: 170px;
float: left;
text-align: left;
text-transform: lowercase;
}
#header {
position: relative;
background : url(http://i153.photobucket.com/albums/s217/mercscilla_test/SGA/captainnemoheader.jpg) center top no-repeat; /* Replace the URL with your own */
background-color: transparent;
margin: 0px;
padding: 0px;
height: 450px;
width: 800px;
text-align: center;
color: #4D4D4D;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-transform: lowercase;
}
#footer {
width: 100%;
background-color: #FFFFFF;
border: #C7C7C7 1px solid;
padding: 5px 0px 5px 0px;
margin: 0px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #4D4D4D;
z-index: 100;
clear: both;
}
/* header -- links to views; title of journal; subtitle of journal */
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited{
color: #A2A2A2;
text-decoration: none;
}
div#header a:hover, div#footer a:hover{
color: #6D6D6D;
text-decoration: none;
}
ul.navheader
{
position: absolute;
bottom: 220px;
right: 600px;
width: 220px;
text-align: right;
padding: 0;
}
ul.navheader li {
display: block;
padding: 8px 8px 8px 0px;
margin: 10px;
background-color: #FFFFFF;
border-left: 20px #A0A0A0 solid;
}
.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: #A3A3A3;
padding: 3px 3px 3px 5px;
text-decoration: none;
}
div#sidebar a:hover {
padding: 3px 3px 3px 5px;
color: #C7C7C7;
}
.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;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 9px;
}
ul.sbarlist {
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
list-style: none;
border-bottom: 1px dotted #CCCCCC;
color: #A3A3A3;
padding: 3px 3px 3px 5px;
}
li:hover.sbaritem
{
list-style: none;
padding: 3px 3px 3px 5px;
}
li.sbartitle {
padding: 3px 5px 0px 3px;
margin: 13px 0 5px 0;
list-style: none;
text-align: left;
color: #44444;
text-transform: uppercase;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
/* maincontent */
span.ljuser a b {
padding: 2px 0 2px 0;
color: #A3A3A3;
font-weight: lighter;
}
span.ljuser a:hover b {
padding-top: 2px;
padding-bottom: 2px;
color: #C7C7C7;
font-weight: lighter;
}
ul.ljtaglist li {
list-style: none;
}
ul.ljtaglist {
color: #606060;
font-family: "Verdana", sans-serif;
font-size: 10px;
padding-left: 12px;
padding: 8px;
}
.subcontent {
background-color: #FFFFFF;
border: #C7C7C7 1px solid;
}
.entry {
padding: 10px;
color: #606060;
font-family: "Verdana", sans-serif;
font-size: 10px;
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 {
border: #a2a2a2 1px solid;
position: relative;
float: right;
padding: 0px;
margin: 10px;
z-index: 15;
}
.userpicfriends {
background-color:transparent !important;
border: #a2a2a2 1px solid;
position: relative;
float: right;
padding: 0px;
margin: 10px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
z-index: 15;
}
.date {
padding: 3px;
text-align: right;
color: #4E4E4E;
top: 5px;
font-family: "Verdana", sans-serif;
font-size: 9px;
text-transform: uppercase;
}
.subject {
font-weight: bold;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
color: #444444;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.subject a, .subject a:link, .subject a:visited {
color: #A3A3A3;
}
.subject a:hover {
color: #C7C7C7;
}
.datesubject {
background-color: transparent;
padding: 0px;
text-align: left;
}
.ljtags {
font-family: "Tahoma", sans-serif;
margin-top: 20px;
color: #4E4E4E;
font-weight: bold;
text-transform: lowercase;
}
.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong {
font-family: "Tahoma", sans-serif;
color: #4E4E4E;
font-weight: bold;
text-transform: lowercase;
}
.currents, .currentmood, .currentmusic, .currentlocation {
font-family: "Tahoma", sans-serif;
color: #606060;
font-weight: lighter;
text-transform: lowercase;
}
.ljtags a, .ljtags a:link, .ljtags a:visited {
font-family: "Tahoma", sans-serif;
color: #A3A3A3;
text-transform: none;
font-weight: lighter;
}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited {
font-family: "Tahoma", sans-serif;
color: #A3A3A3;
text-transform: none;
font-weight: lighter;
}
.currentlocation a:hover, .ljtags a:hover {
font-family: "Tahoma", sans-serif;
color: #C7C7C7;
font-weight: lighter;
text-transform: none;
}
.comments {
font-family: "Tahoma", sans-serif;
font-size: 11px;
text-align: right;
padding: 5px 5px 5px 5px;
position: relative;
clear: right;
margin-top: 15px;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #A3A3A3;
}
div.comments a:hover {
color: #C7C7C7;
text-decoration: none;
}
/* maincontent -- entry, reply pages */
.datesubjectcomment {
margin-top: 20px;
text-align: right;
padding: 5px;
}
.userpiccomment {
border: #a2a2a2 1px solid;
position: relative;
top: -30px;
left: 0px;
padding: 0px;
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: #C7C7C7 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: 10px;
line-height: 125%;
color: #606060;
}
.replytosubject {
color: #606060;
font-weight: bold;
padding: 5px;
}
.replytoposter {
color: #5d5d5d;
padding: 5px;
}
.commentreply {
text-align: justify;
position: relative;
margin: 10px;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #606060;
}
.commentbox {
padding: 5px;
margin: 10px;
text-align: left;
background-color: #FFFFFF;
border: #C7C7C7 1px solid;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #A3A3A3;
}
.datesubjectcomment a:hover {
color: #C7C7C7;
}
.commentboxpartial {
padding: 10px;
margin: 10px;
background-color: #FFFFFF;
border: #C7C7C7 1px solid;
}
.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 #C7C7C7 solid;
color: #606060;
}
table.yeartable td.yearday {
text-align: center;
color: #A3A3A3;
}
td.yearmonth {
color: #444444;
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: 0px;
font-size: 0.01px;
}
.skiplinks {
text-transform: lowercase;
text-align: center;
padding: 10px 0 10px 0;
}
.headerimage {
}
.separator {
height: 10px;
}
IMPORTANT: You need a title for the blurb/free text box or the sidebar goes wacko.
The Images
Header | Friends-Only Banner | User Profile Image
The User Profile
I've already coded the user profile to match the user profile image from above.
Preview: Here
Copy & paste the code into the Bio section of your profile page.
| Lorem ipsum |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet est. Donec semper ultricies purus. Donec ornare purus non neque. Aliquam erat volutpat. Nunc vitae nibh in enim bibendum posuere. Cras metus purus, sollicitudin at, pulvinar ut, ultrices sit amet, pede. Donec non elit. Vestibulum eu lorem. Proin ultrices tincidunt mi. Curabitur luctus nibh id mauris. Proin enim nisi, aliquam id, nonummy sed, dictum vitae, tortor. Nunc pede. Suspendisse ornare augue id ante. Duis vulputate nisl eu pede. |
| Lorem ipsum |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet est. Donec semper ultricies purus. Donec ornare purus non neque. Aliquam erat volutpat. Nunc vitae nibh in enim bibendum posuere. Cras metus purus, sollicitudin at, pulvinar ut, ultrices sit amet, pede. Donec non elit. Vestibulum eu lorem. Proin ultrices tincidunt mi. Curabitur luctus nibh id mauris. Proin enim nisi, aliquam id, nonummy sed, dictum vitae, tortor. Nunc pede. Suspendisse ornare augue id ante. Duis vulputate nisl eu pede. |
| Lorem ipsum |
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam sit amet est. Donec semper ultricies purus. Donec ornare purus non neque. Aliquam erat volutpat. Nunc vitae nibh in enim bibendum posuere. Cras metus purus, sollicitudin at, pulvinar ut, ultrices sit amet, pede. Donec non elit. Vestibulum eu lorem. Proin ultrices tincidunt mi. Curabitur luctus nibh id mauris. Proin enim nisi, aliquam id, nonummy sed, dictum vitae, tortor. Nunc pede. Suspendisse ornare augue id ante. Duis vulputate nisl eu pede. |
The Wallpaper
The matching wallpaper is in two sizes: One for traditional and one for widescreen.
Traditional: 1024x768
Widescreen: 1280x800
The set-up guide is HERE
Should you encounter any problems, please don't hesitate and ask me. :)
Enjoy!