Road to Awe [Blurple] - First Layout *-*
Image Preview:
» Layout: Road to Awe.
» Color Scheme: White, blue and purple.
» Style: S2 Flexible Squares.
» Accounts: Free, Paid and Plus(but it looks ugly xP).
» Resolution: 800x600 and up.
» Customized Comments Page: Yep x].
» Browser Compatibility: Firefox, Opera and IE(thank you nandy_pandy *_*).
CSS
/*-------------------------------------------
S2 Flexible Squares
Road To Awe Layout(white, blue and purple)
By petit_potato
petitpotato.livejournal.com @ community.livejournal.com/theafa_castle
Try really hard to not remove this area because if you do, well that is really nothing I can do ~.~
-------------------------------------------*/
body {
background-image:url(http://i44.photobucket.com/albums/f9/spamya/RTA/BG_shadow.png) ;
background-repeat:repeat-y;
color:#BCB8DB;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:11px;
text-align:center;
background-position:center top;
}
/*-------------------------------------------
LINKS
-------------------------------------------*/
a {
color:#99BCDF;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:#99BCDF;
text-decoration:none;
}
a:hover {
color:#C8BAE4;
text-decoration:none;
}
p, td, blockquote {
font-size:11px;
}
code, kbd, pre, tt {
font-family:monospace;
}
/*-------------------------------------------
General page alignment and width
-------------------------------------------*/
#content {
margin:0px auto 20px;
padding:0px 0px 22px;
width:410px;
}
#maincontent {
margin-top:10px;
padding:0px 20px 0px 0px;
text-align:left;
}
#sidebar {
display:none;
}
/*-------------------------------------------
HEADER
-------------------------------------------*/
#header {
color:#9D8FBF;
font-family:"times new roman",helvetica;
font-size:30px;
font-weight:normal;
letter-spacing:-1px;
margin-left:0px;
margin-top:35px;
text-align:center;
text-transform:lowercase;
width:100%;
}
ul.navheader {
margin:auto;
}
ul.navheader li {
display:inline;
margin-left:-10px;
padding:0px 19px 0px 5px;
}
li.view {
font-weight:bold;
color:#C8BAE4;
}
.title {
display:none;
}
.subtitle {
background:transparent url(http://s44.photobucket.com/albums/f9/spamya/AFAC/HEADER_Bridget.png) repeat scroll 0%;
height:316px;
font-size:0px;
}
/* look and color of links */
div#header a, div#header a:link, div#header a:visited {
color:#99BCDF;
}
div#header a:hover {
color:#C8BAE4;
}
/*-------------------------------------------
Entry stuff
-------------------------------------------*/
.entry {
color:#BCB8DB;
font-family:tahoma;
font-size:11px;
margin:31px -5px auto 15px;
padding:0px 10px 10px 10px;
text-align:left;
}
.entry ul li {
margin-left:15px;
padding-left:5px;
}
.entry ol li {
margin-left:15px;
padding-left:5px;
}
.userpic {
position:relative;
float:right;
border:1px dashed #DDD;
padding:5px;
background-color:#FFF;
margin:5px;
z-index:15px;
display:none;
}
.date {
border-bottom:1px dashed #DDD;
color:#DDDDDD;
font-family:"Verdana",sans-serif;
font-size:9px;
line-height:200%;
text-align:right;
top:5px;
margin-left:5px;
margin-right:-18px;
padding-right:10px;
}
.subject {
color:#99BCDF;
font-family:Times New Roman;
font-size:19px;
font-weight:bold;
letter-spacing:-1px;
margin:40px 0px 0px 16px;
text-align:center;
text-transform:none;
}
.subject a, .subject a:link, .subject a:visited {
color:#99BCDF;
}
.subject a:hover {
color:#C8BAE4;
}
.datesubject {
background-color:#FFFFFF;
margin-top:20px;
padding:10px;
}
/*-------------------------------------------
Currents & Tags
-------------------------------------------*/
.currents strong {
color:#9D8FBF;
font-weight:normal;
}
.currents {
border-left:5px solid #C8BAE4;
color:#C8BAE4;
margin-top:-9px;
padding:6px 0px 5px;
text-transform:capitalize;
}
.currents, .currentmood, .currentmusic {
font-family:"Verdana",sans-serif;
font-size:10px;
letter-spacing:-1px;
margin-left:8px;
text-transform:capitalize;
width:306px;
}
.currentlocation {
display:none;
}
.ljtags {
border-left:5px solid #C8BAE4;
color:#9D8FBF;
font-size:10px;
font-weight:normal;
margin:60px 8px -29px;
padding:6px 0px 6px 10px;
width:300px;
}
.ljtags a {
color:#88A5C4;
font-size:10px;
font-weight:normal;
}
.ljtags a:hover {
color:#C8BAE4;
font-size:10px;
font-weight:normal;
}
/*-------------------------------------------
Comments(on the bottom of each entry)
-------------------------------------------*/
.comments {
font-family:"Verdana",sans-serif;
font-size:11px;
margin-left:-31px;
margin-right:-18px;
padding:10px 30px ;
position:relative;
text-align:right;
text-decoration:none;
top:15px;
margin-top:50px;
}
div.comments a, div.comments a:link, div.comments a:visited {
color:#ADA1C5;
border-bottom:4px #ADA1C5 solid ;
padding:0px 4px 4px 4px;
font-weight:normal;
}
div.comments a:hover {
color:#99BCDF;
border-bottom:4px #99BCDF solid ;
}
/*-------------------------------------------
Separator
-------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*-------------------------------------------
Quotation, Line-Breaker(etc)
-------------------------------------------*/
blockquote {
border-bottom:2px solid #C8BAE4;
border-top:2px solid #C8BAE4;
color:#99BCDF;
font-family:arial;
padding:15px 1px;
text-align:justify;
margin:20px 26px 10px 10px;
}
blockquote:hover {
border-top:2px solid #9BB5CF;
color:#9D8FBF;
font-family:arial;
text-align:justify;
border-bottom:2px solid #9BB5CF;
}
hr {
border-bottom:1px solid #EAEAEA;
border-width:0px 0px 1px;
color:#FFFFFF;
margin:0px 10px 0px 1px;
}
code {
background-color:#EFF7FF;
border:1px dashed #9D8FBF;
color:#9D8FBF;
display:block;
padding:15px;
margin:20px 26px 10px 10px;
}
code:hover {
background-color:#F4EFFF;
border:1px dashed #9BB5CF;
color:#9BB5CF;
}
*::-moz-selection {
background:#C8BAE4 none repeat scroll 0%;
color:#FFF;
}
/*-------------------------------------------
Archive Pages
-------------------------------------------*/
ul.year {
padding-bottom:20px;
text-align:center;
padding-top:15px;
}
ul.year li {
display:inline;
font-size:18px;
color:#9D8FBF;
}
table.yeartable {
margin-left:13px;
margin-right:-6px;
color:#9D8FBF;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border:1px dotted #DDD;
}
table.yeartable td.yearday {
background-color:#DDD;
text-align:center;
}
td.yearmonth {
border-style:none;
}
/*-------------------------------------------
Friends Page
-------------------------------------------*/
.userpicfriends {
border:1px dashed #DDDDDD;
color:#99BCDF;
float:right;
font-family:arial;
font-size:10px;
margin:5px;
padding:5px;
position:relative;
text-align:center;
z-index:15;
}
.userpicfriends a font {
color:#9D8FBF;
}
.userpicfriends a:hover font {
color:#99BCDF;
}
/*-------------------------------------------
EDIT LJ USER(at the navigation bar)
-------------------------------------------*/
.ljuser a:link, .ljuser a:visited, .ljuser a:active {
color:9D8FBF !important;
font-weight:normal;
text-decoration:none;
}
.ljuser a:hover {
color:#99BCDF !important;
font-weight:normal;
text-decoration:none;
}
span.ljuser a b {
color:#9D8FBF !important;
font-weight:bold !important;
}
span.ljuser a:hover b:hover {
color:#99BCDF !important;
font-weight:bold !important;
}
/*-------------------------------------------
Contextual Pop-up
-------------------------------------------*/
/*defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background-color:#FFF !important;
border:1px solid #DDD;
color:#9D8FBF !important;
padding:8px;
width:20em;
}
/* defines the look of the links*/
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
color:#81A8CF !important;
font-weight:bold;
text-decoration:underline !important;
}
/*-------------------------------------------
FOOTER
-------------------------------------------*/
#footer {
clear:both;
color:#C8BAE4;
font-family:tahoma;
font-size:17px;
padding:50px;
text-align:center;
width:auto;
z-index:-1;
}
ul.navfooter {
font-weight:normal;
list-style-type:none;
margin:0px;
padding:10px 0px 3px;
text-align:center;
width:100%;
}
ul.navfooter li {
display:inline;
font-weight:normal;
list-style-type:none;
margin:10px;
padding:10px 0px 3px;
text-align:center;
width:100%;
}
div#footer a, div#footer a:link, div#footer a:visited {
color:#9D8FBF;
}
div#footer a:hover {
color:#88A5C4;
}
/*-------------------------------------------
Tiny Icons
-------------------------------------------*/
.ljuser img {
background-color:transparent;
background-image:url(http://i44.photobucket.com/albums/f9/spamya/RTA/userby_excentric_.gif);
background-repeat:no-repeat;
height:3pt;
padding:6px 8px 0pt 2px;
width:0pt;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image:url(http://i44.photobucket.com/albums/f9/spamya/RTA/userby_excentric_.gif);
padding:6px 8px 0pt 8px;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image:url(http://i44.photobucket.com/albums/f9/spamya/RTA/flowerby_excentric_.gif);
padding:10px 10px 0pt 16px;
}
/*-------------------------------------------
Comments pages
-------------------------------------------*/
.datesubjectcomment {
border-bottom:1px dashed #DDDDDD;
color:#99BCDF;
margin-top:15px;
padding:8px;
}
.userpiccomment {
background-color:#FFFFFF;
border:1px dashed #DDDDDD;
float:right;
left:10px;
margin:34px 10px -20px;
padding:5px;
position:relative;
top:-31px;
z-index:15;
}
.box {
border-color:#DDDDDD;
border-style:dashed;
border-width:1px 0px 0px;
clear:left;
margin-left:20px;
padding:20px 0px 0px;
margin-top:50px;
}
input, textarea {
background-color:#EFEFEF;
color:#9D8FBF;
}
textarea.textbox {
width:100% !important;
}
.reply {
background-color:#D4DCE8;
color:#FF0;
font-family:"Verdana",sans-serif;
font-size:11px;
line-height:125%;
margin:20px 30px 10px;
padding:25px 10px 10px;
position:relative;
text-align:left;
}
.replytosubject {
font-weight:bold;
color:#99BCDF;
font-size:24px;
font-family:times New Roman;
text-align:center;
letter-spacing:-1px;
}
.commentreply {
color:#BCB8DB;
font-family:tahoma;
font-size:11px;
margin:10px;
position:relative;
}
.commentbox {
background-color:#FFFFFF;
border:1px solid #DDDDDD;
margin:30px 0px;
padding:10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color:#99BCDF;
}
.datesubjectcomment a:hover {
color:#C8BAE4;
}
.commentboxpartial {
border:1px solid #DDDDDD;
margin:10px;
padding:10px;
}
.commentinfo {
background-color:#FF0000;
margin-top:10px;
width:100%;
}
.skiplinks {
color:#9D8FBF;
text-align:center;
}
/*-------------------------------------------
Misc
-------------------------------------------*/
.clear {
height: 15px;
}
Pictures/Header
You don't need do re-upload the images if you don't want to. But if you do:
Background-image
Header
How to install
» Go to Customize.
» Search for "Flexible Squares" in the search box.
» Apply the first theme.
» Click Customize Selected Theme.
» Click Custom CSS in the menu on the left.
» Under "Page", set the 3 drop down menus to "NO" (IMPORTANT!)
» And finally, copy and paste the whole css code above in the big white field.
» Save it and you are done! :D
Credits
Header by me
Tiny Icons by _excentric_
» Layout: Road to Awe.
» Color Scheme: White, blue and purple.
» Style: S2 Flexible Squares.
» Accounts: Free, Paid and Plus(but it looks ugly xP).
» Resolution: 800x600 and up.
» Customized Comments Page: Yep x].
» Browser Compatibility: Firefox, Opera and IE(thank you nandy_pandy *_*).
CSS
/*-------------------------------------------
S2 Flexible Squares
Road To Awe Layout(white, blue and purple)
By petit_potato
petitpotato.livejournal.com @ community.livejournal.com/theafa_castle
Try really hard to not remove this area because if you do, well that is really nothing I can do ~.~
-------------------------------------------*/
body {
background-image:url(http://i44.photobucket.com/albums/f9/spamya/RTA/BG_shadow.png) ;
background-repeat:repeat-y;
color:#BCB8DB;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:11px;
text-align:center;
background-position:center top;
}
/*-------------------------------------------
LINKS
-------------------------------------------*/
a {
color:#99BCDF;
text-decoration:none;
font-weight:bold;
}
a:visited {
color:#99BCDF;
text-decoration:none;
}
a:hover {
color:#C8BAE4;
text-decoration:none;
}
p, td, blockquote {
font-size:11px;
}
code, kbd, pre, tt {
font-family:monospace;
}
/*-------------------------------------------
General page alignment and width
-------------------------------------------*/
#content {
margin:0px auto 20px;
padding:0px 0px 22px;
width:410px;
}
#maincontent {
margin-top:10px;
padding:0px 20px 0px 0px;
text-align:left;
}
#sidebar {
display:none;
}
/*-------------------------------------------
HEADER
-------------------------------------------*/
#header {
color:#9D8FBF;
font-family:"times new roman",helvetica;
font-size:30px;
font-weight:normal;
letter-spacing:-1px;
margin-left:0px;
margin-top:35px;
text-align:center;
text-transform:lowercase;
width:100%;
}
ul.navheader {
margin:auto;
}
ul.navheader li {
display:inline;
margin-left:-10px;
padding:0px 19px 0px 5px;
}
li.view {
font-weight:bold;
color:#C8BAE4;
}
.title {
display:none;
}
.subtitle {
background:transparent url(http://s44.photobucket.com/albums/f9/spamya/AFAC/HEADER_Bridget.png) repeat scroll 0%;
height:316px;
font-size:0px;
}
/* look and color of links */
div#header a, div#header a:link, div#header a:visited {
color:#99BCDF;
}
div#header a:hover {
color:#C8BAE4;
}
/*-------------------------------------------
Entry stuff
-------------------------------------------*/
.entry {
color:#BCB8DB;
font-family:tahoma;
font-size:11px;
margin:31px -5px auto 15px;
padding:0px 10px 10px 10px;
text-align:left;
}
.entry ul li {
margin-left:15px;
padding-left:5px;
}
.entry ol li {
margin-left:15px;
padding-left:5px;
}
.userpic {
position:relative;
float:right;
border:1px dashed #DDD;
padding:5px;
background-color:#FFF;
margin:5px;
z-index:15px;
display:none;
}
.date {
border-bottom:1px dashed #DDD;
color:#DDDDDD;
font-family:"Verdana",sans-serif;
font-size:9px;
line-height:200%;
text-align:right;
top:5px;
margin-left:5px;
margin-right:-18px;
padding-right:10px;
}
.subject {
color:#99BCDF;
font-family:Times New Roman;
font-size:19px;
font-weight:bold;
letter-spacing:-1px;
margin:40px 0px 0px 16px;
text-align:center;
text-transform:none;
}
.subject a, .subject a:link, .subject a:visited {
color:#99BCDF;
}
.subject a:hover {
color:#C8BAE4;
}
.datesubject {
background-color:#FFFFFF;
margin-top:20px;
padding:10px;
}
/*-------------------------------------------
Currents & Tags
-------------------------------------------*/
.currents strong {
color:#9D8FBF;
font-weight:normal;
}
.currents {
border-left:5px solid #C8BAE4;
color:#C8BAE4;
margin-top:-9px;
padding:6px 0px 5px;
text-transform:capitalize;
}
.currents, .currentmood, .currentmusic {
font-family:"Verdana",sans-serif;
font-size:10px;
letter-spacing:-1px;
margin-left:8px;
text-transform:capitalize;
width:306px;
}
.currentlocation {
display:none;
}
.ljtags {
border-left:5px solid #C8BAE4;
color:#9D8FBF;
font-size:10px;
font-weight:normal;
margin:60px 8px -29px;
padding:6px 0px 6px 10px;
width:300px;
}
.ljtags a {
color:#88A5C4;
font-size:10px;
font-weight:normal;
}
.ljtags a:hover {
color:#C8BAE4;
font-size:10px;
font-weight:normal;
}
/*-------------------------------------------
Comments(on the bottom of each entry)
-------------------------------------------*/
.comments {
font-family:"Verdana",sans-serif;
font-size:11px;
margin-left:-31px;
margin-right:-18px;
padding:10px 30px ;
position:relative;
text-align:right;
text-decoration:none;
top:15px;
margin-top:50px;
}
div.comments a, div.comments a:link, div.comments a:visited {
color:#ADA1C5;
border-bottom:4px #ADA1C5 solid ;
padding:0px 4px 4px 4px;
font-weight:normal;
}
div.comments a:hover {
color:#99BCDF;
border-bottom:4px #99BCDF solid ;
}
/*-------------------------------------------
Separator
-------------------------------------------*/
.separator{
/* for formatting separators between entries */
height: 35px;
}
/*-------------------------------------------
Quotation, Line-Breaker(etc)
-------------------------------------------*/
blockquote {
border-bottom:2px solid #C8BAE4;
border-top:2px solid #C8BAE4;
color:#99BCDF;
font-family:arial;
padding:15px 1px;
text-align:justify;
margin:20px 26px 10px 10px;
}
blockquote:hover {
border-top:2px solid #9BB5CF;
color:#9D8FBF;
font-family:arial;
text-align:justify;
border-bottom:2px solid #9BB5CF;
}
hr {
border-bottom:1px solid #EAEAEA;
border-width:0px 0px 1px;
color:#FFFFFF;
margin:0px 10px 0px 1px;
}
code {
background-color:#EFF7FF;
border:1px dashed #9D8FBF;
color:#9D8FBF;
display:block;
padding:15px;
margin:20px 26px 10px 10px;
}
code:hover {
background-color:#F4EFFF;
border:1px dashed #9BB5CF;
color:#9BB5CF;
}
*::-moz-selection {
background:#C8BAE4 none repeat scroll 0%;
color:#FFF;
}
/*-------------------------------------------
Archive Pages
-------------------------------------------*/
ul.year {
padding-bottom:20px;
text-align:center;
padding-top:15px;
}
ul.year li {
display:inline;
font-size:18px;
color:#9D8FBF;
}
table.yeartable {
margin-left:13px;
margin-right:-6px;
color:#9D8FBF;
}
table.yeartable td.yeardate, table.yeartable td.yearday {
border:1px dotted #DDD;
}
table.yeartable td.yearday {
background-color:#DDD;
text-align:center;
}
td.yearmonth {
border-style:none;
}
/*-------------------------------------------
Friends Page
-------------------------------------------*/
.userpicfriends {
border:1px dashed #DDDDDD;
color:#99BCDF;
float:right;
font-family:arial;
font-size:10px;
margin:5px;
padding:5px;
position:relative;
text-align:center;
z-index:15;
}
.userpicfriends a font {
color:#9D8FBF;
}
.userpicfriends a:hover font {
color:#99BCDF;
}
/*-------------------------------------------
EDIT LJ USER(at the navigation bar)
-------------------------------------------*/
.ljuser a:link, .ljuser a:visited, .ljuser a:active {
color:9D8FBF !important;
font-weight:normal;
text-decoration:none;
}
.ljuser a:hover {
color:#99BCDF !important;
font-weight:normal;
text-decoration:none;
}
span.ljuser a b {
color:#9D8FBF !important;
font-weight:bold !important;
}
span.ljuser a:hover b:hover {
color:#99BCDF !important;
font-weight:bold !important;
}
/*-------------------------------------------
Contextual Pop-up
-------------------------------------------*/
/*defines general look, font color/size/background color*/
div.ContextualPopup div.Inner {
background-color:#FFF !important;
border:1px solid #DDD;
color:#9D8FBF !important;
padding:8px;
width:20em;
}
/* defines the look of the links*/
div.ContextualPopup div.Inner a, div.ContextualPopup div.Inner a:visited {
color:#81A8CF !important;
font-weight:bold;
text-decoration:underline !important;
}
/*-------------------------------------------
FOOTER
-------------------------------------------*/
#footer {
clear:both;
color:#C8BAE4;
font-family:tahoma;
font-size:17px;
padding:50px;
text-align:center;
width:auto;
z-index:-1;
}
ul.navfooter {
font-weight:normal;
list-style-type:none;
margin:0px;
padding:10px 0px 3px;
text-align:center;
width:100%;
}
ul.navfooter li {
display:inline;
font-weight:normal;
list-style-type:none;
margin:10px;
padding:10px 0px 3px;
text-align:center;
width:100%;
}
div#footer a, div#footer a:link, div#footer a:visited {
color:#9D8FBF;
}
div#footer a:hover {
color:#88A5C4;
}
/*-------------------------------------------
Tiny Icons
-------------------------------------------*/
.ljuser img {
background-color:transparent;
background-image:url(http://i44.photobucket.com/albums/f9/spamya/RTA/userby_excentric_.gif);
;){kind=link}
background-repeat:no-repeat;
height:3pt;
padding:6px 8px 0pt 2px;
width:0pt;
}
.ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image:url(http://i44.photobucket.com/albums/f9/spamya/RTA/userby_excentric_.gif);
padding:6px 8px 0pt 8px;
}
.ljuser img[src="http://stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image:url(http://i44.photobucket.com/albums/f9/spamya/RTA/flowerby_excentric_.gif);
;){kind=link}
padding:10px 10px 0pt 16px;
}
/*-------------------------------------------
Comments pages
-------------------------------------------*/
.datesubjectcomment {
border-bottom:1px dashed #DDDDDD;
color:#99BCDF;
margin-top:15px;
padding:8px;
}
.userpiccomment {
background-color:#FFFFFF;
border:1px dashed #DDDDDD;
float:right;
left:10px;
margin:34px 10px -20px;
padding:5px;
position:relative;
top:-31px;
z-index:15;
}
.box {
border-color:#DDDDDD;
border-style:dashed;
border-width:1px 0px 0px;
clear:left;
margin-left:20px;
padding:20px 0px 0px;
margin-top:50px;
}
input, textarea {
background-color:#EFEFEF;
color:#9D8FBF;
}
textarea.textbox {
width:100% !important;
}
.reply {
background-color:#D4DCE8;
color:#FF0;
font-family:"Verdana",sans-serif;
font-size:11px;
line-height:125%;
margin:20px 30px 10px;
padding:25px 10px 10px;
position:relative;
text-align:left;
}
.replytosubject {
font-weight:bold;
color:#99BCDF;
font-size:24px;
font-family:times New Roman;
text-align:center;
letter-spacing:-1px;
}
.commentreply {
color:#BCB8DB;
font-family:tahoma;
font-size:11px;
margin:10px;
position:relative;
}
.commentbox {
background-color:#FFFFFF;
border:1px solid #DDDDDD;
margin:30px 0px;
padding:10px;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color:#99BCDF;
}
.datesubjectcomment a:hover {
color:#C8BAE4;
}
.commentboxpartial {
border:1px solid #DDDDDD;
margin:10px;
padding:10px;
}
.commentinfo {
background-color:#FF0000;
margin-top:10px;
width:100%;
}
.skiplinks {
color:#9D8FBF;
text-align:center;
}
/*-------------------------------------------
Misc
-------------------------------------------*/
.clear {
height: 15px;
}
Pictures/Header
You don't need do re-upload the images if you don't want to. But if you do:
Background-image
Header
How to install
» Go to Customize.
» Search for "Flexible Squares" in the search box.
» Apply the first theme.
» Click Customize Selected Theme.
» Click Custom CSS in the menu on the left.
» Under "Page", set the 3 drop down menus to "NO" (IMPORTANT!)
» And finally, copy and paste the whole css code above in the big white field.
» Save it and you are done! :D
Credits
Header by me
Tiny Icons by _excentric_