Dark beast layout
!Update - I add a few nice effects.
+ remove ads
+ animated menu
Basic informations:Name of Style Sheet:Dark beastLayout:Smooth SailingStyle:S2 Sidebar: withTested on:Firefox 3.6, Opera 9.61, IE 7 in other browser it also looks good, but I can't tested it. (Safari and Chrome)Header:withHow to install?01.Choose a (style) layout. (here)02.
Set Ad Placement to: Horizontal or Between Entries.
Choose a Page Setup: 2 Column (sidebar on left)
03.Go to Customize Journal Theme. (here)04.In Display -> Presentation -> Basic Options select:
Userinfo Position in Entries: right side05.In Display -> Presentation -> Additional Options select:
Wrap Entry text under userinfo: Yes
MetaData Arrangement: Each on separate line
Linkbar Alignment in Entries: Align center
Linkbar Alignment in Comments: Align center06.In Entry text ->Page type:
Format for Date and Time (Recent/Friends/Entry/Reply page): Posted on %%dd%%/%%mm%%/%%yyyy%%07.In Menu ->Page select:
Show Website link from Userinfo page on Menubar: No
Show Memories link on Menubar: No08.In sidebar select:
Profile Position: hide
Summary Position: hide
Latest Month Position: hide
Links Visibility: 1
Tags Sidebox Position: hide
Multisearch Position: hide
Free Text Position: 2
Free Text Sidebox Title: leave empty
Free Text Sidebox Text: Your header (sized 450px x 270px) put in tag
09.In Tags Page -> Page select:
Layout for the Tags Page: Simple list of tags with overall usage
Text to show how many times a tag has been used: leave empty10.In Custom CSS -> Page select:
Use layout's stylesheet(s): Yes
Use layout's stylesheet(s) when including custom external stylesheet: No
Custom External Stylesheet: leave empty.
Paste the CSS that I give you in the "Custom Stylesheet" box.11.Remember to save changes!Used fonts: Trebuchet MS Lucida Sans Verdana Georgia Garamond
Used images: Download from here
Used colors:
Used tiny icons set: Download from hereRules:01.Credit niewiadoma if you use.02.Comment. =)03.If you want to change something, it's ok, but don't change too much. But do it if you know how to do it. Seriously.04.Better upload all images to your own account.
Live Preview | Image Preview /* S2 Smooth Sailing - Dark beast by niewiadoma.livejournal.com */ /* ---------------------------------------------- General ----------------------------------------------- */ body {background: #000 url(http://pics.livejournal.com/niewiadoma008/pic/00003rgx) repeat scroll 0 0;} .pageblock {width:800px; margin: 0 auto;} a {text-decoration:none; border-bottom:#323232 dotted 1px; color: #9fd202;} a:hover {text-decoration:none; border-bottom: #9fd202 solid 1px; color:#efefef;} blockquote { width: 513px; margin: 10px 0px 10px 0px; padding: 20px 30px 20px 30px; border-right:3px solid #efefef; border-left:3px solid #efefef; color: #E3EDAF; font-style: italic; font-family:Georgia, "Times New Roman", Times, serif; text-align:center; line-height: 20px; display:blockline-height: 18px; background-color: #222;} ol {list-style-type: upper-roman;} ul {list-style-type:circle;} u {text-decoration:none; border-bottom: dashed 2px #9fd202;} .bodynavblock { background-image: url(http://pics.livejournal.com/niewiadoma008/pic/0000x1xg); background-repeat:no-repeat; background-position:bottom center; background-color:#fff; color:#000; margin:10px 0 4px; padding:8px; } /* ---------------------------------------------- Headline ----------------------------------------------- */ .pageheaderblock { margin-top:103px; } .header-title { color:#9fd202; font-size:90px; padding:0 20px; font-family:garamond; font-style:italic; background:transparent; position:absolute; top:70px; float:left; } .header-subtitle { color:#efefef; font-size:24px; padding:0 24px; font-family:georgia; background:transparent; float:right; position:absolute; top:50px; left:500px; text-transform:uppercase; } /* ---------------------------------------------- Entry ----------------------------------------------- */ .entryHeader { background: transparent; } .entryHeaderSubject {color:#fff; font:bold 25px Georgia;} .entryHeaderSubject a, .entryHeaderSubject a:hover { color:#333333; text-decoration:none; font:bold 25px Georgia; letter-spacing:-0.05em; padding:5px 0; border:medium none; position:relative; top:-50px; } .entryHeaderSubject img {position:relative; top:-50px;} .entryHeaderDate {display:block; text-align:right; font-size:10px; color:#999999; background:#efefef; border-top: 1px solid #999999; border-left: 1px solid #999999; padding:3px; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px border-bottom-left-radius: 10px; margin-top:50px;} .entryHolder { background: #fff; line-height:16px; color:#414449; font-size:12px; margin:4px 0; font-family:Verdana,Arial,Helvetica,sans-serif; border-top:medium none; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; border-top-left-radius: 20px border-top-right-radius: 20px;} .entryText { padding:6px; text-align:justify; min-height:130px; } .entryMetadata {background:none repeat scroll 0 0 #E3EDAF; -webkit-border-top-right-radius: 7px; -webkit-border-bottom-right-radius: 7px; -moz-border-radius-topright: 7px; -moz-border-radius-bottomright: 7px; border-top-right-radius: 7px border-bottom-right-radius: 7px; margin-right:10px; border-bottom:#9fd202 1px solid; border-right:#9fd202 1px solid;} .entryMetadata-label { font-weight:normal; font-style:italic; text-transform:lowercase; padding-right:4px; } .entryUserinfo { padding:8px 8px 5px 8px; text-align:center; margin:5px; background: url(http://pics.livejournal.com/niewiadoma008/pic/0000wsk7) top right; } .entryUserinfo-usericon img { border:1px #E3EDAF solid; padding:5px; } .entryUserinfo-usericon a:hover {border:1px #000;} .entryLinkbar { color:#444444; font-size:11px; padding:5px 0 10px; text-align:center; background-image: url(http://pics.livejournal.com/niewiadoma008/pic/0000x1xg); background-repeat:no-repeat; background-position:bottom center; } .entryLinkbar a, .entryLinkbar a:visited { border-right:#efefef dotted 2px; border-left:#efefef dotted 2px; padding:7px 5px 4px 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom:medium none;} .entryLinkbar a:hover {background:#efefef; color: #9fd202; border-bottom: #9fd202 solid 1px;} /* ---------------------------------------------- Sidebar ----------------------------------------------- */ .sidebox #systemlinks { width:280px; text-align:left; overflow:auto; height:270px; } .listitem {background:#1a1a1a; border-bottom: 1px solid #323232; background:#1a1a1a; padding: 6px 10px;} .listitem:hover {border-bottom: 1px solid #9fd202; text-decoration:none; background:#1a1a1a url(http://pics.livejournal.com/niewiadoma008/pic/0000zh9f) no-repeat center right; font-weight: bold;} .listitem a, .listitem a:link, .listitem a:visited {color: #646464; text-decoration:none; padding:6px 90px 6px 45px; border:medium none;} .listitem a:hover {color: #fff;} .sidebar {position:fixed; bottom:2px; width:760px; height:290px; background:#000 url(http://pics.livejournal.com/niewiadoma008/pic/0000t2dk) top left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .sidebox #freetext {margin-left:292px; position:relative; top:-275px; padding:5px; border:1px solid; width:450px; border-color:#9fd202 #9fd202 #E3EDAF #E3EDAF;} .sidebox { background:transparent; } /* ---------------------------------------------- Deleted ----------------------------------------------- */ #footer-menu, .entryUserinfo-username, .sideboxTitle, .bodyheaderblock {display:none;} .pagefooterblock {visibility:hidden; height:290px;} /* ---------------------------------------------- Archive ----------------------------------------------- */ .entryHeader a { color:#333333; text-decoration:none; font:bold 25px Georgia; letter-spacing:-0.05em; padding:5px 0; border:medium none; } .daytitles { background:none repeat scroll 0 0 #FFFFFF; color:#999999; font-size:0.6em; padding:8px 0; text-align:center; width:30px; border:none; font-weight:bold; } .month { border:none; margin:0 auto; width:250px; } .day { border-bottom:#fff solid 1px; border-top:#ECF4DF; border-left:#ECF4DF; border-right:#ECF4DF; background:none repeat scroll 0 0 #ECF4DF; color:#000000; font-weight:normal; font-size:15px; padding:8px 0; text-align:center; width:30px; } .day-blank { border:none; } .day-date { border:none; color:#3E8416; text-align:center; width:100%; } .day-count a { border:medium none; text-decoration:none; background:none repeat scroll 0 0 #B5DC10; text-align:center; font-size:10px; color:#FFFFFF; } .day-count a:hover {background:#000; padding:2px; } /* ---------------------------------------------- Menu navigation ----------------------------------------------- */ .header-menu { background-color:#262626; display:block; height:84px; width:1025px; border:medium none; margin:0 auto; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px border-bottom-left-radius: 20px; } .header-menu ul{ display:block; list-style-type:none; padding:0; position:relative; width:1000px; } .header-menu li { display:inline; line-height:82px; margin-left:1px;} .header-menu a, .header-menu a:visited { border-left:1px solid #202020; border-right:1px solid #2D2D2D; color:#616161; font-family:Lucida Sans; font-size:13px; padding:34px 30px 32px; text-decoration:none; text-shadow:1px 0 1px #3E3E3E; text-transform:uppercase; } .header-menu a:hover { background:none repeat scroll 0 0 #9FD202; border-left:1px solid #6BB224; border-right:1px solid #A6D17C; color:#E5E5E5; text-shadow:1px 0 1px #008394; } /* ----------------------------------------------- Tags page ----------------------------------------------- */ .taglist { list-style:none outside none; margin:-15px 0 0; padding:0; width:420px; display:inline; } .taglist li { border-bottom:1px solid #161616; border-left:3px solid #555555; border-top:1px solid #222222; font-size:0.9em; line-height:1.7em; margin:0; padding-left:15px; width:420px; } .taglist li:first-child { border-top:0 none; } .taglist li:last-child { border-bottom:0 none; } .taglist li a { font-size:1em; margin:0; color:#C5E86A; display:block; text-decoration:none; height:27px; padding:5px 5px 0 5px; border-bottom:medium none; } .taglist li a:hover { color:#98B843; } .taglist li:hover { background:none repeat scroll 0 0 #161616; border-left:3px solid #C5E86A; } .entryHolder:first-child { background: #202020; font:400 0.9em Verdana,Geneva,sans-serif; color:#202020; } /* ---------------------------------------------- Comment page ----------------------------------------------- */ .replyform { background-image: url(http://pics.livejournal.com/niewiadoma008/pic/0000x1xg); background-repeat:no-repeat; background-position:bottom center; color:#444444; padding-left:10px; background-color:#fff; } textarea#commenttext { background-image: url(http://pics.livejournal.com/niewiadoma008/pic/00010bxp); background-position: bottom right; background-repeat: no-repeat; height:120px; border: 3px solid #cccccc; width:600px; padding: 5px; font-family:tahoma; } input#subject {border: 3px solid #cccccc;} .commentText { width:425px; padding:1em 0; margin-left:55px; } .commentHolder { color:#444444; font-size:12px; margin:4px 0; width:650px; background: #fff url(http://pics.livejournal.com/niewiadoma008/pic/00011s9e) no-repeat top right; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .commentHeader { background-color:transparent; color:#665D34; font-size:9px; padding:4px 0 4px 8px; margin-left:220px; } .commentHeader a { color:#9fd202; } .commentHeaderScreened { background-color:#665D34; font-size:15px; } .commentHeaderSubject { font-weight:bold; font-size:15px; color:#9fd202; } .commentUserinfo { background-color:#fff; margin:8px 10px; text-align:center; font-family: Trebuchet MS,Arial,Helvetica,Sans-Serif; font-size:11px; } .commentUserinfo-usericon img { border:1px solid #E3EDAF; padding:5px; } .commentUserinfo-usericon img a { border-bottom:medium none; } .commentLinkbar ul { margin:0; padding:0; width:460px; } .commentLinkbar li { display:inline; margin:0; padding:0 5px; } .commentLinkbar { color:#444444; font-size:11px; padding:0 0 8px; margin: 0 0 0 170px; text-align:center; } .commentLinkbar a { border-right:#efefef dotted 2px; border-left:#efefef dotted 2px; padding:7px 5px 4px 5px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom:medium none;} .commentLinkbar a:hover {background:#efefef; color: #9fd202; border-bottom: #9fd202 solid 1px;} /* ---------------------------------------------- Additions ----------------------------------------------- */ div.ContextualPopup .Userpic { padding:10px; background:#efefef; margin:4px; border:1px solid #cccccc; } div.ContextualPopup div.Inner { color: #828282 !important; border: 1px dashed #9fd202; padding: 10px; } div.ContextualPopup div.Inner a:link, div.ContextualPopup div.Inner a:visited { border-bottom:0 none; color:#E3EDAF !important; font-weight:400; text-decoration:underline !important; } img[src*="img/userinfo.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://pics.livejournal.com/niewiadoma008/pic/000124gp) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/userinfo.gif"]:hover {width: 0 !important; height: 0 !important; background: transparent url(http://pics.livejournal.com/niewiadoma008/pic/000149ha) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/community.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://pics.livejournal.com/niewiadoma008/pic/00013e5s) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/icon_protected.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://pics.livejournal.com/niewiadoma008/pic/00015yga) no-repeat !important; padding: 16px 0 0 16px !important; } img[src*="img/icon_private.gif"] {width: 0 !important; height: 0 !important; background: transparent url(http://pics.livejournal.com/niewiadoma008/pic/00016x1g) no-repeat !important; padding: 16px 0 0 16px !important; }/* update 08.07.2011 */ .entryHolder { margin-bottom: 30px; margin-left: -25px; } .box-vertical1, .box-vertical2 { display: none; } .header-menu a, .header-menu a:visited { -webkit-transition: all 500ms ease-out 0s; -moz-transition: all 500ms ease-out 0s; -o-transition: all 500ms ease-out 0s; transition: all 500ms ease-out 0s; } .sidebar {z-index:10;}
