VIII | Remixed
VIII; Remixed
LIVE PREVIEWS
This is the Remix style
S2; Flexible Squares
accounts
Basic & Paid, no plus
browsers
All
Resolutions
all
disabled features
subtitle
INSTALLATION
HOW TO INSTALL if you need help installing your S2 layout, click the "how to install" link for a detailed guide on how to install any S2 layout.
install the code /*---------------------------------------------
NAME: Remixed
STYLE: S2 | Flexible Squares
TINY ICONS: none
CREDIT: apologize @ jealouss
---------------------------------------------*/
/*---------page--------*/
body {
background: #000 url(
http://i39.tinypic.com/2iuoxeu.png) no-repeat;
text-align: center;
color: #fff;
font-family: arial;
font-size: 12px;
margin: 20px 0 20px 0;
}
/*---------body--------*/
#content
{
width: 90%;
margin-left: auto; margin-right: auto;
background-color: transparent! important;
border: none;
padding: 0px;
}
#maincontent {
margin-top: 0;
font-family: Arial;
font-size: 11px;
background-color: #000;
color: #000000;
border: none;
margin: 0;
text-align: left;
}
/*---------header--------*/
#header {
width: 100%;
padding: 5px 0px 20px 0px;
margin: 0px;
text-align: right;
font-family: arial black;
font-size: 48px;
font-weight: ligther;
letter-spacing: -3px;
border-bottom: none;
background: transparent !important;
color: #fff;
text-transform: uppercase;
}
.headerimage {
}
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer
a:visited {
color: #9267B5;
}
div#header a:hover, div#footer a:hover {
color: yellow;
text-decoration: none;
}
.title:first-letter{color: #FF4DA5;}
.title {
position: absolute;
width: 530px;
font-family: arial black;
font-size: 38px;
font-weight: lighter;
line-height: 110%;
top: 30px;
text-transform: uppercase;
letter-spacing: -2px;
text-align: left;
top: 285px;
}
.subtitle:first-letter{color:yellow;}
.subtitle{
position: absolute;
font-family: arial;
font-size: 26px;
font-weight: normal;
top: 435px;
right: 80px;
}
ul.navheader
{
padding: 0px;
margin: 0px;
border-bottom: 1px solid #eee;
top: 5px;
line-height: 130%;
}
ul.navheader li {
display: block;
padding: 0 3px 0 3px;
background-color: transparent !important;
}
li.view:first-letter{color:#FF4DA5;}
li.view {
font-color: #9267B5;
text-tranform: capitalize;}
/*---------entries--------*/
.subcontent {
}
.entry {
margin: 0px 0px 0px 0px;
padding: 10px;
background-color: #000;
color: #B1B1B1;
font-family: arial;
font-size: 16px;
text-align: left;
border: none;
letter-spacing: -1px;
}
.userpic {
position: relative;
float: left;
background-color: #FF4DA5;
padding: 15px;
margin: 10px;
z-index: 15;
border: 2px solid yellow;
}
.date {
line-height: 200%;
top: 5px;
color: #000000;
font-family: "Verdana", sans-serif;
font-size: 11px;
display: none;
}
.subject {
font-weight: lighter;
padding: 10px;
color: #eee;
font-family: arial black;
font-size: 40px;
text-transform: uppercase;
background-color: #000;
border-bottom: 1px solid #9267B5;
}
.subject a, .subject a:link, .subject a:visited {
color: #FF4DA5;
}
.subject a:hover {
color: yellow;
text-decoration: none;
}
.datesubject {
background-color: transparent !important;
padding: 5px;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
/*---------tags--------*/
.ljtags{
background: url(
http://i44.tinypic.com/2hnp1ug.png) no-repeat;
padding: 0px 5px 3px 15px;
font-family: arial;
font-size: 14px;
font-weight: lighter;
margin-top: 3px;
color: #777;
text-transform: lowercase;
line-height: 6px;
}
/*---------currents--------*/
.currents strong {
display: none;
}
.currents, .currentmood, .currentmusic {
font-family: arial;
font-size: 14px;
text-transform: lowercase;
}
.currentmood {
padding: 0px 5px 3px 15px;
margin-top: 3px;
line-height: 7px;
background: url(
http://i42.tinypic.com/im5tp4.png) no-repeat;
}
.currentmusic {
padding: 0px 5px 3px 15px;
margin-top: 3px;
line-height: 7px;
background: url(
http://i44.tinypic.com/2iw82tf.png) no-repeat;
}
.currentlocation {
padding: 0px 5px 3px 15px;
margin-top: 3px;
line-height: 7px;
background: url(
http://i39.tinypic.com/3346m2s.png) no-repeat;
}
/*---------comments--------*/
.comments {
font-family: arial black;
font-size: 25px;
text-align: left;
background-color: #9267B5;
padding: 0px 5px 0px 5px;
position: relative;
top: 15px;
text-transform: uppercase;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #FF4DA5;
}
div.comments a:hover {
color: #FFEE2C;
text-decoration: none;
}
/*---------separator--------*/
.separator{
/* for formatting separators between entries */
background-color: transparent important!;
border-bottom: none;
height: 55px;
}
/*---------friends page--------*/
.userpicfriends {
position: relative;
float: left;
padding: 15px;
margin: 10px;
text-align: center;
font-family: century gothic;
font-size: 16px;
z-index: 15;
background-color: #FF4DA5;
}
/*---------sidebar--------*/
#sidebar {
float: top;
padding: 0 0 0 0;
margin: 0 0 10px 0;
background-color: transparent !important;
border: none;
font-size: 12px;
font-family: arial, sans-serif;
color: #fff;
height: 190px;
width: 100%;
text-align: justify;
overflow: hidden;
border-bottom: 1px solid #eee;
}
.defaultuserpic {
text-align: center;
float: left;
padding: 0 5px 0 5px;
margin-right: -5px;
display: none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
}
.sbarbody {
padding: 0px 5px 0px 5px;
float: right;
width: 10px;
display: none;
}
.sbarbody2 {
padding: 0 5px 0 5px;
float: right;
width: 460px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
color: #777;
}
div#sidebar a:hover {
color: #777;
text-decoration: none;
}
table.calendar {
margin-right: auto;
margin-left: auto;
}
.sbarcalendar {
border-color: #000000;
border-width: 1px;
border-style: solid;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
.sbarcalendarposts {
border-color: #000000;
border-width: 1px;
border-style: solid;
background-color: #d4dce8;
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 11px;
}
#sidebar_summary, #sidebar_tags {
display: none;}
#sidebar_linklist {
text-align: left;
width: 35%;}
#sidebar_calendar {
margin-right: 25px;
margin-left: 15px;
display: none;
width: 15%;}
ul.sbarlist
{
padding-left: 0px;
margin-left: 5px;
list-style: none;
margin-bottom: -5px;
}
li.sbaritem
{
padding-left: 5px;
list-style: none;
display: inline;
width: 100%;
margin-top: 0px;
margin-left: 10px;
}
li.sbartitle
{
display: none;
}
/*---------footer--------*/
#footer {
width: 100%;
text-align: left;
font-family: arial black;
font-size: 40px;
font-weight: lighter;
letter-spacing: 1px;
background-color: transform !important;
color: #777;
border: none;
z-index: 100;
clear: both;
}
#footer .viewing {
display: none;
}
ul.navfooter{
padding: 0px;
margin: 0px;
}
ul.navfooter li {
display: inline;
margin: 0 5px 0 5px;
}
.clearfoot {
clear: both;
}
/*---------archive page--------*/
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: #eee;
}
table.yeartable td.yearday {
background-color: #eee;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*---------comment page--------*/
.datesubjectcomment {
background: #eee;
padding: 5px;
margin-top: 20px;
}
.userpiccomment {
position: relative;
border-width: 5px;
border-style: solid;
border-color: #eee;
background: ;
top: -30px;
left: 0px;
padding: 5px;
margin: 10px 10px -20px 10px;
z-index: 15;
float: left;
border-width: 1px;
border-color: #eee;
border-style: solid;
}
.box {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #eee;
padding: 10px;
clear: left;
}
input, textarea {
background: );
color: #444;
}
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%;
background: url(
http://i44.tinypic.com/20r5qw4.jpg; color: #444;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: "arial";
color: #444;
}
.commentbox {
border-color: #eee;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background: url(
http://i44.tinypic.com/20r5qw4.jpg); }
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #777;
}
.datesubjectcomment a:hover {
color: #999;
}
.commentboxpartial {
border-color: #eee;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background: url(
http://i44.tinypic.com/20r5qw4.jpg); }
.commentinfo {
background-color: #eee;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
}
/*---------misc--------*/
.clear {
height: 15px;
}
div.ContextualPopup div.Inner{
width: 235px;
color: #545456 !important;
padding: 10px;
font: normal 8pt arial;
font-weight: ligther;
letter-spacing: -1px;
background-color: #FF4DA5;
border: 1px solid yellow;
}
div.ContextualPopup .Content{
border: ;
}
div.ContextualPopup .Userpic{
padding: 10px;
background-color: #9267B5;
margin: 0px;
border: 1px solid yellow;
}
textarea.textbox {
width: auto !important;
background: #9267B5;
}
/*LINKS*/
a, a:link, a:visited {
color: #FF4DA5;
text-decoration: none;
}
a:hover {
color: #FFEE2C;
text-decoration: none;
}
blockquote {
font: arial 12px;
background: #FF4DA5;
border-left: 7px solid #9267B5;
padding: 10px;
font-color: #FFEE2C;
}
td {background-color: #FF4DA5;}
code, kbd, pre, tt {
font-family: monospace;
}
b, s, i, u {
font-family: arial;
font-color: yellow;
}
/*---------tiny icons--------*/
img[src*="img/userinfo.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !
important;
background: transparent url(
http://i41.tinypic.com/16is8yv.png) no-repeat; padding: 10px 0 0 10px !
important; }
img[src*="img/community.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height:
0 !important;
background: transparent url(
http://i39.tinypic.com/2hi1nbd.png) no-repeat; padding: 10px 0 0 10px !
important; }
img[src*="img/syndicated.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height:
0 !important;
background: transparent url(
http://i42.tinypic.com/2llzzls.png) no-repeat; padding: 16px 0 0 16px !
important; }
img[src*="img/icon_protected.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto;
height: 0 !important;
background: transparent url(
http://i41.tinypic.com/52g85z.png) no-repeat; padding: 16px 0 0 16px !
important; }
img[src*="img/icon_private.gif"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto;
height: 0 !important;
background: transparent url(
http://i39.tinypic.com/2a9qmn9.png) no-repeat; padding: 10px 0 0 10px !
important; }
Features
topbar
check the colour lovers banner at the top to see the colors i used if you want to change them, except i didn't use the yellow in the pallette i just used the actual word yellow
Additional Customization
Try not to write too much in your blurb section, or else it will cover up your subtitle, to avoid this you can add this code, after the header section.
.subtitle{display:none;}
Credits
background image by
anamcr, with editing by me.
Questions
If you have a questions, please make sure you read through all the information provided here, and the FAQ before you ask. I will not answer/help if you don't take the time out to find an answer before coming to me. Questions can be directed to the FAQ entry, please do not PM me.
FAQ |
HOW TO CREDIT like what you see?
watch |
more layouts