200 members! & .011
*opens champagne*
I prepared a little surprise for the occasion! :D
S2 Flexible Squares, topbar.
headers: Tokio Hotel [x20] and SHINee [x16]
wallpapers: Bill Kaulitz [x4]
~! Please notice that this was a bit rushed, so I apologize beforehand in case something isn't working properly. But I double-checked everything, so it should be fine !~
IMG previews
CODE
/*---------------------------------------------------
layout by http://honey-x-flavor.livejournal.com
please visit http://community.livejournal.com/paper_crunch
-----------------------------------------------------*/
body {
background-color: #EBEBEB;
background-image: url();
background-repeat: repeat;
text-align: center;
color: #333333;
font-family: Arial, Helvetica;
font-size: 13px;
margin: 20px 0 20px 0;
}
a, a:link, a:visited {
color: #ADADAD;
text-decoration: none;
}
a:hover {
color: #7A7A7A;
text-decoration: none;
}
p, td {
font-size: 11px;
}
blockquote {
border: 1px solid #eeeeee;
padding: 15px;
margin: 10px 25px 10px 25px;
background: url(http://i46.tinypic.com/9g91xz.jpg);
;){kind=link}
background-repeat: repeat;
color: #aaaaaa;
}
code, kbd, pre, tt {
font-family: monospace;
}
/*---------------------------------------------------------------------
General page alignment and width
------------------------------------------------------------------------*/
#content
{
width: 650px;
background-color: #FFFEFF;
border-style: none;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
border-width: 0px;
padding: 0px;
}
#maincontent {
margin-top: 10px;
font-family: Arial, Helvetica;
font-size: 13px;
color: #1a1a1a;
border-style: none;
border-color: #999999;
border-width: 1px;
margin-left: 0px;
text-align: justify;
background-color: #ffffff;
}
.subcontent {
min-height: 120px;
background-color: #eeeeee;
background-image: url(http://i46.tinypic.com/2rw3qs6.jpg);
;){kind=link}
background-repeat: scroll;
margin-left: auto;
margin-right: auto;
border: 1px;
border-top: 10px;
border-style: solid;
border-color: #ececec;
}
#sidebar_summary, #sidebar_tags, #sidebar_calendar {
display: none;
}
#sidebar {
background-color: #ffffff;
width: 650px;
float: center;
text-align: justify;
color: #9C9C9C;
font-family: Arial, Helvetica;
font-size: 11px;
}
/*-----------------------------------------------------------------------------
Header - you can add a header image with either #header or .headerimage
--------------------------------------------------------------------------------*/
#header {
width: 100%;
text-align: center;
font-family: Arial, Geneva, sans-serif;
font-size: 10px;
letter-spacing: 1px;
background-color: #3B3B3B;
color: #ffffff;
text-transform: uppercase;
padding-top: 15px;
}
.headerimage {
position: relative;
width: 650px;
height: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url();
background-repeat: no-repeat;
}
/*look and color of links (also partly for footer)*/
div#header a, div#header a:link, div#header a:visited, div#footer a, div#footer a:link, div#footer a:visited {
color: #ADADAD;
}
div#header a:hover, div#footer a:hover {
color: #7A7A7A;
text-decoration: none;
}
/*title and subtitle*/
.title {
display: none;
}
.subtitle{
display: none;
}
/*-----------------------------------------------------------------------------
Header - top navigation
--------------------------------------------------------------------------------*/
/* header -- links to views; title of journal; subtitle of journal */
ul.navheader
{
padding: 0px;
margin: 0px;
}
ul.navheader li {
display: inline;
padding: 0 3px 0 3px;
}
/*-----------------------------------------------------------------------------
Entry stuff
------------------------------------------------------------------------*/
.entry {
margin-left: 15px;
margin-right: 80px;
padding: 10px 20px 0px 20px;
background-color: #FFFEFF !important;
color: #3C3C3C;
font-family: Arial, Helvetica;
font-size: 12px;
text-align: justify;
border-style: none;
line-height: 1.75;
}
.userpic {
position: relative;
float: left;
background: url(http://i46.tinypic.com/9g91xz.jpg) !important;
padding: 7px;
border: 1px;
border-style: solid;
border-color: #eeeeee;
text-align: left;
margin-left: -125px;
margin-right: 10px;
margin-top: 15px;
z-index: 15;
}
.date {
color: #d8d6d6;
margin-top: 0px;
font-family: Arial, Helvetica;
font-size: 9px;
text-align: left;
background-color: #FFFFFF;
text-transform: uppercase;
}
.subject {
font-weight: none;
color: #a5a5a5;
font-family: Arial, Helvetica;
text-align: left;
font-size: 12px;
letter-spacing: 1px;
padding-left: 10px;
padding-top: 2px;
}
.subject a, .subject a:link, .subject a:visited {
color: #7A7A7A;
}
.subject a:hover {
color: #ADADAD;
}
.datesubject {
padding: 10px 10px 10px 10px;
margin-left: 15px;
margin-right: 80px;
background-color: #ffffff;
}
.entry ul li
{
padding-left: 5px;
margin-left: 15px;
}
.entry ol li
{
padding-left: 5px;
margin-left: 15px;
}
.ljtags {
margin-top: 30px;
padding-left: 10px;
padding-bottom: 5px;
text-align: left;
text-transform: lowercase;
font-size: 10px;
color: #7A7A7A;
border-left: 4px solid #cccccc;
}
.skiplinks {
text-align: center;
font-size: 9px;
color: #cccccc;
text-transform: lowercase;
margin: 0px 0px 10px;
padding: 10px 0px;
}
/*---------------------------------------------------------------------
Entry Stuff - Current Mood, Music and Location
------------------------------------------------------------------------*/
.currents {
background-color: transparent;
}
.currents strong{
font-weight: normal;
font-size: 10px;
color: #7A7A7A;
}
.currentlocation, .currentmood, .currentmusic, .currentgroup {
font-family: Arial, Helvetica;
text-align: left;
padding-left: 5px;
padding-bottom: 5px;
font-size: 10px;
color: #7A7A7A;
}
/*---------------------------------------------------------------------
Entry Stuff - Comments
------------------------------------------------------------------------*/
.comments {
font-family: Arial, Helvetica;
font-size: 10px;
text-align: right;
position: relative;
padding-bottom: 15px;
padding-top: 15px;
text-transform: uppercase;
background-color: transparent;
color: #ADADAD;
}
div.comments a, div.comments a:link, div.comments a:visited{
color: #ADADAD;
}
div.comments a:hover {
color: #cccccc;
text-decoration: none;
}
/*---------------------------------------------------------------------
Entry Stuff - Separator
------------------------------------------------------------------------*/
.separator {
/* for formatting separators between entries */
height: 35px;
background-color: #EBEBEB;
}
/*------------------------------------------------------------
Special friends page customization
-------------------------------------------------------------------------------*/
.userpicfriends {
position: relative;
float: left;
background: url(http://i46.tinypic.com/9g91xz.jpg) !important;
padding: 7px;
border: 1px;
border-style: solid;
border-color: #eeeeee;
text-align: left;
margin-left: -125px;
margin-right: 10px;
margin-top: 15px;
z-index: 15;
text-align: center;
color: #AEA6A4 !important;
}
.userpicfriends font {
font-family: Arial, Helvetica;
font-weight: normal;
font-size: 7.5pt;
width: 100px;
background-color: transparent !important;
padding: 2px;
color: #B3B3B3;
}
.userpicfriends font:hover {
color: #808080;
}
/*------------------------------------------------------------
Sidebar
-------------------------------------------------------------------------------*/
.defaultuserpic {
display: none;
}
.sbarheader {
padding: 0px 5px 0px 5px;
background-color: #ffffff;
}
.sbarbody {
padding: 0px 5px 0px 5px;
}
.sbarbody2 {
padding: 10px 5px 10px 15px;
}
div#sidebar a, div#sidebar a:link, div#sidebar a:visited{
font-family: Trebuchet MS, Arial, Sans-Serif;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;
color: #bbbbbb;
}
div#sidebar a:hover {
font-family: Trebuchet MS, Arial, Sans-Serif;
font-size: 9px;
letter-spacing: 1px;
text-transform: uppercase;
color: #bbbbbb;
text-decoration: none;
}
/*------------------------------------------------------------
Sidebar - Calendar
-------------------------------------------------------------------------------*/
table.calendar {
display: none;
}
.sbarcalendar {
display: none;
}
.sbarcalendarposts {
display: none;
}
/*------------------------------------------------------------
Sidebar - link box contents and sidebar box titles
-------------------------------------------------------------------------------*/
ul.sbarlist {
margin: 0px;
padding: 0px;
list-style: none;
}
li.sbaritem {
display: inline;
padding: 3px 8px;
margin-right: 2px;
margin-left: 2px;
border-width: 0px 1px 1px 0px;
border-style: solid;
border-color: #ececec;
background-image: url(http://i46.tinypic.com/9g91xz.jpg);
}
li.sbaritem:hover {
border-color: #ececec;
border-width: 1px 0px 0px 1px;
border-style: solid;
color: #ADADAD;
background-color: #F7F7F7;
}
li.sbartitle{
display: none;
}
#sidebar_linklist {
text-align: right;
text-transform: lowercase;
padding:0 3px 8px 0;
}
/*----------------------------------------------------
footer
----------------------------------------------------------------*/
#footer {
width: 100%;
text-align: center;
font-family: Arial, Geneva, sans-serif;
font-size: 10px;
letter-spacing: 1px;
background-color: #3B3B3B;
color: #ffffff;
text-transform: uppercase;
padding-top: 10px;
clear: both;
margin: auto;
}
ul.navfooter{
padding: 0px;
margin: 0px 0px ;
}
ul.navfooter li {
list-style: none;
margin: 0px 5px 0px 5px;
}
.clearfoot {
clear: both;
background-color: #3B3B3B;
}
/*----------------------------------------------------
Archive Pages
----------------------------------------------------------------*/
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: #999999;
}
table.yeartable td.yearday {
background-color: #EBEBEB;
text-align: center;
}
td.yearmonth {
border-style: none;
}
/*----------------------------------------------------
Comments pages
----------------------------------------------------------------*/
.datesubjectcomment {
background-color: transparent;
color: #414141;
padding: 7px;
}
.userpiccomment {
position: relative;
float: left;
background: url(http://i46.tinypic.com/9g91xz.jpg) !important;
padding: 7px;
border: 1px;
border-style: solid;
border-color: #eeeeee;
text-align: left;
margin-left: -145px;
margin-right: 10px;
margin-top: 8px;
z-index: 15;
text-align: center;
color: #AEA6A4 !important;
}
.box {
background-color: #EBEBEB;
padding: 15px;
clear: none !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
margin-top: 15px;
}
.commentbox {
border: 1px;
border-color: #E0E0E0;
border-style: solid;
background-color: #ffffff;
padding-bottom: 30px;
padding-top: 10px;
padding-left: 10px;
padding-right: 5px;
margin-top: 10px;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
}
input, textarea {
background-color: #F5F5F5;
color: #3C3C3C;
font-size: 11px;
}
textarea.textbox {
width: 95% !important;
}
.reply {
position: relative;
margin: 20px 30px 10px 30px;
padding: 25px 10px 10px 10px;
text-align: left;
font-family: Arial, Helvetica;
font-size: 11px;
line-height: 125%;
background-color: #ffffff;
color: #3C3C3C;
}
.replytosubject {
font-weight: bold;
}
.commentreply {
position: relative;
margin: 10px;
font-size: 11px;
font-family: Arial, Helvetica;
color: #3C3C3C;
}
.datesubjectcomment a:link, .datesubjectcomment a:visited {
color: #484848;
}
.datesubjectcomment a:hover {
color: #919191;
}
.commentboxpartial {
border-color: #E0E0E0;
border-width: 1px;
border-style: solid;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
.commentinfo {
background-color: #ffffff;
margin-top: 10px;
width: 100%;
}
.skiplinks {
text-align: center;
padding: 5px;
}
.button, select, option {
background-color: #EBEBEB;
color: #5E5E5E;
font-family: Arial, Helvetica;
border: 1px;
border-style: solid;
border-color: #E0E0E0;
}
/*--------------------------------------------
Misc
-----------------------------------------*/
.clear {
display: none;
height: 15px;
}
/*--------------------------------------------
Tiny Icons
-----------------------------------------*/
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"] {height: 0px; width: 0px;background: transparent none no-repeat scroll 0 0; }
.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{ background-image:url(http://i45.tinypic.com/2d7gdxy.jpg);
;){kind=link}
padding:0 0 11px 12px !important;}
img[src*="icon_private.gif"]{ background-image:url(http://i45.tinypic.com/2d7gdxy.jpg); padding:0 0 11px 12px !important;}
img[src*="icon_groups.gif"]{ background-image:url(http://i45.tinypic.com/2d7gdxy.jpg); padding:0 0 11px 12px !important; }
.ljuser img { width: 0; height: 0; background: transparent url(http://i45.tinypic.com/ruzof5.jpg) no-repeat 0 0; padding: 10px 10px 0 2px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i45.tinypic.com/ruzof5.jpg) no-repeat center left !important; padding: 10px 10px 0 2px !important; }
.ljuser img[src*="community.gif"] { background: transparent url(http://i46.tinypic.com/2gtrpkx.jpg) no-repeat scroll 0 0 !important; padding: 10px 10px 0 2px !important; }
img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
background:transparent url(http://i37.tinypic.com/zyf21w.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
background:transparent url(http://i36.tinypic.com/2v959jl.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
background:transparent url(http://i33.tinypic.com/2qd4rk2.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
background:transparent url(http://i36.tinypic.com/64nuzb.jpg) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }
How to install the layout:
1. Go to Customize Journal Style and choose a Flexible Squares layout.
2. While still there, at 3. Choose a Page Setup, choose Ad Placement: Horizontal (if you don't have a paid account) and also a 2-column style.
3. Click Customize Your Theme (next to the tiny layout preview you chose) and go to Custom CSS. Make sure all the dropdown boxes are set to "NO". Copy the code in the custom stylesheet box.
4. If you want to add a header image:
FIND THE .headerimage part in the code. It looks like this:
.headerimage {
position: relative;
width: 650px;
height: 320px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
background-image: url(INSERT URL HERE);
background-repeat: no-repeat;
}
Replace the "INSERT URL HERE" part with the url of the header that you'll upload to YOUR OWN SERVER of choice, like photobucket or tinypic. DON'T HOTLINK MY IMAGES or else Bill will turn into a pink frog. With feathers.
Make sure the height is the right one for the header you're about to use!
If you don't want a header make sure the height is set to 0px.
5. If you want a button for your tags in your topbar you simply need to add the url to your links list like this: CLICK
6. If you want your topbar to be divided in three, go to your sidebar options and put this code in your Blurb box.
one. You can write whatever you want here. two. You can write whatever you want here. three. You can write whatever you want here. |
Tokio Hotel headers
SHINee headers
Bill Kaulitz Wallpapers
why yes, I adore that Comet pic
♫ Comment :D
♫ Credit paper_crunch and/or honey_x_flavor .
♫ No hotlinking or altering of the graphics.
♫ You can edit the code if you know CSS so that it fits to your taste :D
♫ JOIN/FRIEND the community for future updates.