Iron Man - Tony/Pepper (animated header) Layout
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: Version o1 | Version o2 | Version o3 | Version o4
This layout has a top-sidebar. The sidebar user icon, sidebar page summary and sidebar calendar have been disabled.
The CSS Code
/*------------------------------------------------
LAYOUT: "Iron Man - Tony/Pepper"
BY: Mercy @ street_of_mercy
STYLE: S2 Flexible Squares
WORKS WITH: Free, Sponsored and Paid accounts
BROWSER: Firefox and Internet Explorer
The mini icons are from http://www.famfamfam.com
------------------------------------------------*/
/* ------ MAIN ------ */
body
{
background-color: #1E1E1E;
color: #AAAAAA;
font-family: "Verdana", sans-serif;
font-size: 11px;
margin: 0px;
}
a, a:link, a:visited
{
color: #9E0202;
text-decoration: none;
}
a:hover
{
color: #910202;
text-decoration: none;
}
b, i, s, u
{
font-family: "Georgia", sans-serif;
font-size: 11px;
color: #A2A2A2;
}
::-moz-selection
{
background-color: #910202;
color: #000000;
}
p, td
{
font-size: 11px;
}
code, kbd, pre, tt
{
font-family: monospace;
}
ul.ljtaglist
{
text-align: left;
padding-left: 20px;
}
blockquote {
margin: 10px 30px 0px 30px;
padding: 10px;
background-color: #1E1E1E;
border-left: 6px solid #888888;
}
input, textarea
{
background-color: #232323;
color: #AAAAAA;
}
/* ------ CONTAINING ELEMENTS ------ */
#content
{
width: 720px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
text-align: justify;
}
#maincontent
{
width: 720px;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #AAAAAA;
text-align: center;
padding: 10px 0px 0px 0px;
}
#sidebar
{
padding: 1px 20px 2px 10px;
margin: 15px 0px 5px 0px;
background-color: #232323;
font-family: "Verdana", sans-serif;
font-size: 10px;
color: #AAAAAA;
width: auto;
text-align: left;
float: top;
}
#header {
width: 100%;
margin-left: auto;
margin-right: auto;
background-color: #232323;
color: #A6A6A6;
padding: 5px 0px 10px 0px;
text-align: center;
font-family: "Georgia", sans-serif;
font-size: 14px;
letter-spacing: 1pt;
text-transform: lowercase;
clear: both;
}
#footer
{
width: 100%;
background-color: #292929;
color: #A6A6A6;
padding: 5px 0px 5px 0px;
text-align: right;
font-family: "Georgia", sans-serif;
font-size: 14px;
letter-spacing: 1pt;
text-transform: lowercase;
z-index: 100;
clear: both;
line-heigth: 10px;
}
/* ------ HEADER ------ */
div#header a, div#header a:link, div#header a:visited
{
color: #9E0202;
text-decoration: none;
padding: 2px;
font-family: "Georgia", sans-serif;
font-size: 14px;
letter-spacing: 1pt;
font-style: italic;
}
div#footer a, div#footer a:link, div#footer a:visited
{
color: #9E0202;
text-decoration: none;
font-family: "Georgia", sans-serif;
font-size: 14px;
letter-spacing: 1pt;
font-style: italic;
}
div#header a:hover
{
color: #910202;
text-decoration: none;
padding: 2px;
}
div#footer a:hover
{
color: #910202;
text-decoration: none;
}
ul.navheader
{
margin: 0px;
padding: 0px 0px 5px 0px;
background-color: #232323;
}
ul.navheader li
{
display: inline;
padding: 5px;
}
.title
{
display: none;
}
.subtitle
{
display: none;
}
/* ------ SIDEBAR ------ */
#sidebar .sbarcalendarposts a, #sidebar .sbarcalendarposts a:link, .sbarcalendarposts a:visited
{
color: #707070;
padding: 0px;
text-align: center;
}
#sidebar .sbarcalendarposts a:hover
{
color: #494949;
padding: 0px;
text-align: center;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited
{
color: #707070;
text-decoration: none;
}
div#sidebar a:hover
{
color: #494949;
text-decoration: none;
}
.defaultuserpic
{
display: none;
float: left;
text-align: center;
}
.defaultuserpic img
{
margin: 10px;
padding: 5px;
background-color: #1E1E1E;
}
.sbarheader
{
padding: 0px;
}
.sbarbody
{
padding: 0px 10px 5px 0px;
}
.sbarbody2
{
padding: 0px 10px 10px 0px;
}
#sidebar_calendar, #sidebar_summary
{
display: none;
}
#sidebar_linklist, #sidebar_tags
{
width: 100%;
max-height: 100px;
overflow: auto;
overflow-x: hidden;
margin: 0px 0px 10px 0px;
border-top: 1px solid #494949;
border-bottom: 1px solid #494949;
}
table.calendar
{
margin-right: auto;
margin-left: auto;
}
.sbarcalendar
{
padding: 2px 4px 2px 4px;
border: 1px solid #CCCCCC;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
.sbarcalendarposts
{
padding: 2px 4px 2px 4px;
border: 1px solid #CCCCCC;
background-color: #EEEEEE;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 10px;
}
ul.sbarlist
{
padding-left: 0px;
margin-left: 0px;
list-style: none;
}
li.sbaritem
{
display: inline;
text-align: left;
list-style: none;
margin: 3px 0px 0px 0px;
padding: 3px 4px 3px 11px;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-transform: lowercase;
background: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/arrow_grey.png);
;){kind=link}
background-position: left;
background-repeat: no-repeat;
}
li.sbaritem a
{
padding: 3px 6px 3px 0px;
list-style: none;
color: #707070;
}
li.sbaritem a:hover
{
padding: 3px 6px 3px 0px;
color: #494949;
}
li.sbartitle
{
padding: 3px 0px 0px 0px;
margin: 5px 0 5px 0;
list-style: none;
text-align: left;
color: #AAAAAA;
font-family: "Georgia", sans-serif;
font-size: 11px;
letter-spacing: 1pt;
font-style: italic;
}
/* ------ MAINCONTENT ------ */
.ljuser img {
width: 0px;
height: 0px;
background-repeat: no-repeat;
/*so that IE users will still see an image*/
background-image: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/user_greyred.png);
;){kind=link}
padding: 16px 0px 0px 16px;
}
.ljuser img[src*="userinfo.gif"] {
background-image: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/user_greyred.png);
padding: 16px 0px 0px 16px;
}
.ljuser img[src*="community.gif"] {
background-image: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/vcard_greyred.png);
;){kind=link}
padding: 16px 0px 0px 17px;
}
span.ljuser a b
{
padding: 2px 0 2px 0;
color: #9E0202;
font-weight: lighter;
}
span.ljuser a:hover b
{
padding: 2px 0 2px 0;
color: #910202;
font-weight: lighter;
}
ul.ljtaglist li
{
list-style: none;
margin-bottom: 5px;
}
ul.ljtaglist
{
color: #AAAAAA;
font-family: "Verdana", sans-serif;
font-size: 11px;
padding: 12px;
}
.subcontent
{
background-color: #232323;
}
.entry
{
padding: 10px 10px 5px 10px;
color: #888888;
font-family: "Verdana", sans-serif;
font-size: 11px;
text-align: justify;
}
hr
{
color: transparent;
height: 1px;
border-style : none;
border-bottom: 2px solid #707070;
}
.entry ul li, ol li, li
{
padding-left: 0px;
margin-left: 0px;
}
.userpic
{
background-color: #1E1E1E !important;
position: relative;
float: right;
padding: 5px;
margin: 10px 10px 10px 10px;
z-index: 15;
}
.userpicfriends a font
{
color: #9E0202 !important;
}
.userpicfriends
{
background-color: #1E1E1E !important;
position: relative;
float: right;
padding: 5px;
margin: 10px 10px 10px 10px;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
z-index: 15;
}
.datesubject
{
background: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/date_red.png);
;){kind=link}
background-position: left center;
background-repeat: no-repeat;
background-color: #232323;
text-align: left;
margin: 0px 4px 0px 4px;
border-bottom: 1px solid #494949;
}
.date
{
padding: 2px 3px 4px 20px;
text-align: left;
color: #494949;
font-family: "Verdana", sans-serif;
font-size: 10px;
text-transform: lowercase;
}
.subject
{
padding: 0px 3px 1px 20px;
color: #707070;
text-transform: lowercase;
font-family: "Georgia", sans-serif;
font-size: 13px;
letter-spacing: 1pt;
font-style: italic;
font-weight: bold;
}
.subject:first-letter {
}
.subject a, .subject a:link, .subject a:visited
{
color: #707070;
}
.subject a:hover
{
color: #707070;
}
.ljtags
{
color: #494949;
font-weight: lighter;
font-family: "Verdana", sans-serif;
text-transform: uppercase;
margin: 20px 0px 0px 0px;
padding: 0px;
}
.currentmood img
{
}
.currents strong, .currentmood strong, .currentmusic .currentlocation, .ljtags strong
{
color: #494949;
font-weight: lighter;
text-transform: uppercase;
font-family: "Verdana", sans-serif;
}
.currents, .currentmood, .currentmusic, .currentlocation
{
color: #707070;
font-weight: lighter;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
}
.ljtags a, .ljtags a:link, .ljtags a:visited
{
color: #9E0202;
font-weight: lighter;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
}
.currentlocation a, .currentlocation a:link, .currentlocation a:visited
{
color: #9E0202;
font-weight: lighter;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
}
.currentlocation a:hover, .ljtags a:hover
{
color: #910202;
font-weight: lighter;
text-transform: lowercase;
font-family: "Verdana", sans-serif;
}
.comments
{
font-family: "Verdana", sans-serif;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
text-align: right;
padding: 3px 15px 3px 10px;
position: relative;
clear: center;
margin-top: 10px;
border-top: 1px solid #494949;
border-bottom: 1px solid #494949;
}
div.comments a, div.comments a:link, div.comments a:visited
{
color: #494949;
}
div.comments a:hover
{
color: #707070;
}
/* ------MAINCONTENT -- ENTRY, REPLY PAGES ------ */
.datesubjectcomment
{
border-bottom: 1px #494949 solid;
margin-top: 10px;
text-align: right;
padding: 5px;
}
.userpiccomment
{
background-color: #1E1E1E !important;
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
{
background-color: #232323;
color: #888888;
}
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: #888888;
}
.replytosubject
{
color: #494949;
font-family: "Verdana", sans-serif;
font-size: 13px;
padding: 3px 3px 3px 8px;
}
.replytoposter
{
color: #707070;
padding: 5px;
}
.commentreply
{
text-align: justify;
position: relative;
margin: 10px;
font-family: "Verdana", sans-serif;
font-size: 11px;
color: #888888;
}
.commentbox
{
padding: 5px;
margin: 10px;
text-align: left;
background-color: #232323;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited
{
color: #9E0202;
}
.datesubjectcomment a:hover
{
color: #910202;
}
.commentboxpartial
{
padding: 10px;
margin: 10px;
background-color: #232323;
}
.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
{
background-color: #232323;
color: #888888;
}
table.yeartable td.yearday
{
text-align: center;
color: #494949;
}
td.yearmonth
{
color: #707070;
border-style: none;
}
/* ------ FOOTER ------ */
ul.navfooter
{
padding: 0px 6px 6px 6px;
margin: 0px;
}
ul.navfooter li
{
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot
{
clear: both;
}
/* ------ MISC ------ */
.clear
{
height: 3px;
font-size: 0.01px;
}
.skiplinks
{
text-transform: lowercase;
text-align: center;
padding: 10px 0 10px 0;
}
.entry img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]
{
width: 0;
height: 0;
padding: 15px 17px 0px 0px !important;
background: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/lock_grey.png);
;){kind=link}
}
.entry img[src="http://p-stat.livejournal.com/img/icon_private.gif"]
{
width: 0;
height: 0;
padding: 15px 17px 0px 0px !important;
background: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/lock_grey.png);
}
.subject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"]
{
width: 0;
height: 0;
padding: 15px 17px 0px 0px !important;
background: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/lock_grey.png);
}
.subject img[src="http://p-stat.livejournal.com/img/icon_private.gif"]
{
width: 0;
height: 0;
padding: 15px 17px 0px 0px !important;
background: url(http://i153.photobucket.com/albums/s217/mercscilla_test/mini%20icons/lock_grey.png);
}
.headerimage {
position: relative;
width: 720px;
height: 346px;
margin-left: auto;
margin-right: auto;
padding: 10px 0px 10px 0px;
background-image: url(http://www.universefairytales.com/ironman/ironman_tonypepper-aniheader_01.gif);
;){kind=link}
background-position: center;
background-repeat: no-repeat;
background-color: #232323;
}
.separator {
height: 15px;
}
The Images
Header o1 | Header o2 | Header o3 | Header o4
The How-To-XYZ Stuff
There's no limit to the numbers of tags and links you can have in the top-sidebar. The max-height of the tag-box and link-box is 100 px. After that the scrollbar appears.
To use one of the otherheaders, scroll down in the CSS to the bottom. Change the number at the end of the image-link from 01 to either 02, 03 or 04.
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!