Description
Name:
Dark Supernatural
Description:
Dark, professional looking layout with bright green accents.
Choice out of 3 different themes, all centering around the lead-actors in the series Supernatural.
General Information
Layout Style:
Expressive
Tested in:
Mozilla Firefox and Internet Explorer (Looks best in Mozilla Firefox)
Best Resolution:
1024*768 and above
Account Levels:
Layout works with all account levels (Basic, Plus, Paid). [
How to change add orientation]
Works with Navigation Strip:
Kind of: The navigation will overlap the strip. So my choice would be to disable it. [
How to enable/disable]
Credit:
Credit to me is implemented in the footer of the page.
Installation
Go to Manage:
Customize
Select a new Theme:
- Check the box next to 'Only show themes available to me'
- Type 'Expressive' in the Search box
- Click search
- Apply any theme that you get in the search results
Choose a Page Setup
- Plus accounts: Choose an Ad placement (inbetween entries & vertical looks best!)
- Apply the following: '2 Column (sidebar on left)'
- Click 'Customize Selected Theme'
Choose '
Custom CSS' from the menu on the left:
- Use layout's "Base Weblog" stylesheet: No
- Custom external stylesheet URL: Leave empty
- Custom stylesheet: Paste the codes (given bellow) in the box
Hit 'Save Changes'
Images & Code
I have made 3 different versions of this layout.
Replace the words URL OF CHOSEN HEADER and URL OF CHOSEN FOOTER with the proper images of the version you want!
These images are used in every version of the layout!
All images are hosted on my account, but it is recommended that you upload them yourself. Don't forget to change the URL's in the code!
Bellow are the different versions of the layout with their specific images. Make sure you replace the right words with the right images.
To replace something easily, I'd recommend pasting the code in Notepad and use the CTRL H (Replace All) function.
{
Bigger} ~ {
Live Preview}
{
Bigger} ~ {
Live Preview}
{
Bigger} ~ {
Live Preview}
Note:
Feel free to make combinations if you want to!
Code:
/*=================================================================================================================================================*/
/*------------------------------------------------------- LAYOUT 57: DARK SUPERNATURAL ----------------------------------------------------------*/
/*------------------------------------------------------------- S2 STYLE: EXPRESSIVE --------------------------------------------------------------*/
/*------------------------------- AVAILABLE AT GAWARIEL_DESIGN (
http://community.livejournal.com/gawariel_design/) -------------------------------*/
/*--------------------------------------------- CREATED BY GAWARIEL (
http://gawariel.livejournal.com/) --------------------------------------------*/
/*---------------------------------------------------------- IMAGES MADE IN PHOTOSHOP CS ----------------------------------------------------------*/
/*=================================================================================================================================================*/
/*----------------------------------------*/
/*---------- GENERAL FORMATTING ----------*/
/*----------------------------------------*/
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
text-align: center;
background: #000000 url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Container.jpg) repeat-y top center;
font-family: arial;
color: #cccccc;
}
a {
color: #b6cb00;
text-decoration: none;
}
a:hover {
color: #728500;
text-decoration: underline;
}
.lj-entry-securityicon img[src="
http://l-stat.livejournal.com/img/icon_protected.gif"],
dd.viewsubjects img[src="
http://l-stat.livejournal.com/img/icon_protected.gif"]
{
width: 0;
height: 0;
padding: 16px 16px 0px 0px;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Protected.png);
}
.ljuser img[src="
http://l-stat.livejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/LJUser.png);
padding: 0 0 15px 15px!important;
}
.ljuser img[src="
http://l-stat.livejournal.com/img/community.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/LJcomm.png);
padding: 0 0 15px 15px!important;
}
blockquote {
background: #0c0c0c url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Blockquote.jpg) no-repeat bottom right;
height: 172px;
width: 500px;
margin: 8px auto 20px auto;
color: #666666;
letter-spacing: 2px;
font-size: 11px;
border: 1px solid #333333;
padding: 8px;
}
/*------------------------------------*/
/*---------- PAGE STRUCTURE ----------*/
/*------------------------------------*/
#container {
width: 100%;
margin: 0 auto;
background: #000000;
}
#container-inner {
width: 900px;
margin: 0 auto;
background: #000000 url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Container.jpg) repeat-y top center;
}
#alpha, #beta {
display: inline; /* HACK - Win IE float bug workaround */
float: left;
position: relative;
top: 0;
}
#alpha-inner, #beta-inner {
position: static;
overflow: hidden; /* hide content that is larger than the element dimensions */
}
#alpha {
width: 649px;
float: right;
border-top: 1px solid #333333;
margin: 0 1px 0 0;
}
#beta {
width: 250px;
float: left;
border-top: 1px solid #333333;
}
#alpha-inner, #beta-inner {
padding: 0 10px 0 0;
}
/*----------------------------*/
/*---------- HEADER ----------*/
/*----------------------------*/
#header {
background: #000000;
width: 900px;
height: 380px;
padding: 50px 0 0 0;
}
#header-inner {
background: #000000 url(URL OF CHOSEN HEADER) no-repeat;
height: 350px;
}
#header-name, #header-description {
display: none;
}
/*--------------------------------*/
/*---------- NAVIGATION ----------*/
/*--------------------------------*/
ul.nav {
position:absolute;
width: 900px;
margin: 0 auto;
top: 5px;
left: 50%;
margin-left: -450px;
padding: 12px 0;
text-align: left;
}
ul.nav li.item {
display: inline;
font-family: arial;
font-size: 13px;
text-transform:lowercase;
font-variant: small-caps;
}
ul.nav li.item a{
background: #1a1a1a;
color: #cccccc;
border: 1px solid #333333;
margin: 0px 3px 0px 3px;
padding: 4px 8px 4px 8px;
}
ul.nav li.item a:hover, ul.nav li.view{
color: #ffffff;
text-decoration: none;
border-bottom: 2px solid #b6cb00;
}
/*-----------------------------------*/
/*---------- PREVIOUS/NEXT ----------*/
/*-----------------------------------*/
.stream-footer, .stream-header {
display: block;
margin: 10px;
float: left;
}
.prevnext {
font-family: arial;
font-size: 13px;
text-transform:lowercase;
font-variant: small-caps;
color: #1a1a1a;
padding: 12px 0;
}
.prevnext a {
background: #1a1a1a;
color: #cccccc;
border: 1px solid #333333;
padding: 4px 8px 4px 8px;
}
.prevnext a:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 2px solid #b6cb00;
}
/*-----------------------------------*/
/*---------- ENTRY STYLING ----------*/
/*-----------------------------------*/
.asset {
clear:both;
padding: 20px;
}
.asset-header {
clear:both;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/EntryDiv.jpg) no-repeat top center;
}
.asset-body {
font-size: 13px;
line-height: 21px;
text-align: justify;
}
.asset-body ul, .asset-body ol {
margin: 0 0 0 15px;
}
.asset-body ul li {
list-style: none;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/List-item.png) no-repeat center left;
padding: 0px 0px 0px 20px;
}
.asset-body ol li{
list-style: lower-roman;
margin: 0px 0px 0px 25px;
}
/*------ SUBJECT ------*/
h2.asset-name.page-header2 {
text-align: left;
padding-top: 30px;
font-family: arial;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 1px;
color: #dddddd;
}
h2.asset-name.page-header2 a{
color: #dddddd;
border-bottom: 1px solid #728500;
}
h2.asset-name.page-header2 a:hover{
text-decoration: none;
}
/*------ ENTRY DATE ------*/
.datetime {
display: block;
text-align: right;
font-family: arial;
font-size: 10px;
color: #bbbbbb;
letter-spacing: 1px;
margin: -30px 0 20px 0;
}
/*------ USERICON ------*/
.asset .user-icon {
float:right;
position:relative;
margin: 0 0 10px 10px;
background: transparent!important;
}
.user-icon img {
padding: 8px!important;
border: 1px solid #333333!important;
}
.user-icon span{
background:transparent!important;
font-size: 0.9em;
}
span.ljuser a b, .user-icon .ljuser a{
color: #b6cb00;
text-decoration: none;
}
span.ljuser a:hover b{
color: #728500;
text-decoration: underline;
}
span.ljuser img {
border: none!important;
}
/*------ METADATA ------*/
.lj-currents {
text-align: left;
font-size: 10px;
letter-spacing: 1px;
color: #bbbbbb;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Metadata.jpg) no-repeat top left;
margin: 20px 0px 0px 10px;
padding: 12px 0px 0px 25px;
}
.lj-currents .entryMetadata-label {
margin:0px 8px 0px 0px;
color: #AEAEAE;
font-size: 10px;
}
.lj-currents ul{
margin:0px;
padding:0px;
list-style-type:none;
}
/*------ ENTRY TAGS ------*/
.asset-tags-list {
text-align: left;
list-style-type:none;
font-size: 10px;
letter-spacing: 1px;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Tags.jpg) no-repeat top left;
min-height: 40px;
margin: 20px 0px 0px 10px;
padding: 12px 0px 0px 25px;
}
.asset-tags-list li.item {
display:inline;
}
.asset-tags-header {
display:none;
}
/*------ ENTRY COMMENT LINKS ------*/
.asset-meta-list {
margin: 40px 0 0 0;
list-style-type:none;
text-align: right;
}
.asset-meta-comments {
list-style-type:none;
display: inline;
font-size: 13px;
text-transform:lowercase;
font-variant: small-caps;
}
li.asset-meta-comments {
display: inline;
padding: 0px 5px 0px 15px;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Comment.png) no-repeat center left;
}
/*------ DIVIDER ------*/
.asset-footer {
height: 60px;
}
/*-------------------------------------*/
/*---------- SIDEBAR STYLING ----------*/
/*-------------------------------------*/
/*------ GENERAL ------*/
.widget {
clear: both;
margin-bottom: 30px;
text-align: justify;
color: #cccccc;
font-size: 12px;
}
.widget a{
color:#666666;
}
.widget a:hover {
color: #9cb700;
}
h3.widget-header {
margin: 10px 10px 0 10px;
font-size: 10pt;
font-weight: normal;
font-variant: small-caps;
text-decoration: underline;
letter-spacing: 3px;
padding: 13px 3px 0px 3px;
color: #728500;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/SideDiv.jpg) no-repeat top center;
}
h3.widget-header a {
color: #728500;
}
.widget-content {
padding: 20px;
}
.widget-footer {
padding: 6px;
}
.widget-footer a {
float: right;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Website.png) no-repeat center left;
padding:0px 0px 0px 17px;
}
ul.widget-list {
list-style-type:none;
margin: 0;
padding: 0;
}
.widget-list li {
display:block;
padding:6px 5px;
text-decoration:none;
font-weight:normal;
border-bottom:1px dotted #1a1a1a;
color: #666666;
letter-spacing: 2px;
font-size: 11px;
}
/*------ PROFILE WIDGET ------*/
.about-me-widget {
}
.profile-list dd{
margin:0px;
padding:4px;
text-align: center;
}
.user-pic {
text-align: center;
margin: -10px 0 0 0;
padding: 8px;
}
.user-pic img {
padding: 8px;
background: #0d0d0d;
border: 1px solid #333333;
}
.profile-username {
font-variant: small-caps;
font-size: 8pt;
border-bottom:1px dotted #222222;
margin: 0px 5px 0px 0px!important;
padding:4px 0px 4px 0px!important;
}
.profile-name a{
float: right;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/Website.png) no-repeat center left;
padding:0px 10px 0px 15px;
}
/*------ LATEST MONTH WIDGET ------*/
.calendar-widget table {
margin: 0 auto;
font-size:10px;
}
.calendar-widget table td {
padding:2px 4px;
text-align:center;
}
.calendar-widget table th {
display: none;
}
.calendar-widget table td a{
letter-spacing:1px;
background: #1a1a1a;
padding: 5px;
}
/*------ LINKS WIDGET ------*/
/*------ TAGS WIDGET ------*/
.categories-widget .tagcloud {
text-align: center;
margin: 0 0 10px 0;
}
.categories-widget .tagcloud li {
background: none;
display: inline;
padding: 0;
}
/*------- SUMMARY WIDGET ------*/
/*------ CUSTOM TEXT WIDGETS ------*/
/*------ NOT DISPLAYING OTHER WIDGETS ------*/
.syndicate-widget,.powered-widget,.designed-widget {
display: none;
}
/*----------------------------------*/
/*---------- ARCHIVE PAGE ----------*/
/*----------------------------------*/
.yeartable {
clear:both;
}
td.yearmonth {
color: #728500;
font-size: 10pt;
font-weight: normal;
font-variant: small-caps;
text-decoration: underline;
letter-spacing: 3px;
}
.yearday {
background: #0d0d0d;
color: #cccccc;
border: 1px solid #333333;
padding: 4px 8px 4px 8px;
text-align:center;
font-family: arial;
font-size: 13px;
text-transform:lowercase;
font-variant: small-caps;
}
td.yeardate div {
text-align:center;
padding:4px;
}
td.yeardate div{
background: #1a1a1a;
color: #cccccc;
border: 1px solid #333333;
padding: 4px 8px 4px 8px;
text-align:center;
font-family: arial;
font-size: 13px;
}
td.yeardate div a {
font-weight:bold;
font-size: 15px;
}
ul.year {
list-style-type:none;
margin:0px;
padding:0px;
}
ul.year li {
display:block;
float:left;
padding:15px 0px 50px 16px;
}
dt {
display:block;
font-family: arial;
font-size: 13px;
text-transform:lowercase;
font-variant: small-caps;
padding-bottom: 20px;
}
dt a {
background: #1a1a1a;
color: #cccccc;
border: 1px solid #333333;
padding: 4px 8px 4px 8px;
}
dt a:hover {
color: #ffffff;
text-decoration: none;
border-bottom: 2px solid #b6cb00;
}
/*---------------------------------*/
/*---------- PAGE FOOTER ----------*/
/*---------------------------------*/
#footer{
clear:both;
height:244px;
background: url(URL OF CHOSEN FOOTER) no-repeat;
border-bottom: 20px solid #000000;
}
/*-----------------------------------*/
/*---------- COMMENT PAGES ----------*/
/*-----------------------------------*/
/*------ COMMENT BOXES ------*/
#comments .comment{
margin:10px 10px 20px 10px;
padding: 10px;
background: #161616;
}
html*#comments .comment{
width: 85%;
}
.comment-body {
font-size: 13px;
font-family: arial;
color: #cccccc;
line-height: 21px;
text-align: justify;
}
.comment-odd, .comment-even {
border: 1px solid #333333!important;
}
#comments .comment-odd .comment-links, #comments .comment-even .comment-links {
padding: 15px 5px 0px 5px;
font-size: 13px;
text-transform:lowercase;
font-variant: small-caps;
clear:both;
text-align: right;
}
.comment .user-icon{
float: right;
margin: 25px 3px 8px 12px;
}
.comment-date {
display: block;
text-align: right;
padding: 5px 5px 10px 10px;
margin: 10px 0px 10px 0px;
}
.commenter-name {
display: block;
text-align: left;
font-size: 13px;
padding: 0px 3px 5px 3px;
border-bottom: 1px solid #333333;
}
.commenter-name a{
font-variant: small-caps;
color:#666666;
}
.commenter-name a:hover{
color: #9cb700;
}
.comment-subject {
font-size: 14px;
font-family: arial;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 1px;
color: #728500;
text-decoration: underline;
margin: -15px 0px 10px 0px;
}
h2.comments-header {
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/57_SPN%20Dark/EntryDiv.jpg) no-repeat top center;
text-align: center;
font-family: arial;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 1px;
color: #dddddd;
padding: 5px 0px 0px 0px;
}
.comments-nav {
text-align:center;
font-size: 13px;
text-transform:lowercase;
font-variant: small-caps;
}
/*------ REPLY PAGE ------*/
.quickreply {
background: #161616;
border: 1px solid #333333;
}
textarea#commenttext.textbox {
width:90%;
}
form#postform {
width: 90%;
margin: 0 auto;
background: #161616;
border: 1px solid #333333;
padding: 8px;
font-size: 13px;
font-family: arial;
line-height: 21px;
}
textarea, input#subject.textbox, select {
background:#1a1a1a!important;
border:1px solid #333333!important;
margin:0px 0px 8px 0px;
padding:2px;
color:#cccccc;
font-family: arial;
font-size: 13px;
line-height: 21px;
letter-spacing: 1px;
}
input {
border: 1px solid #333333!important;
background: #1a1a1a;
color: #cccccc;
font-family: arial;
}
option {
background: #1a1a1a;
border-bottom:1px solid #333333;
padding:1px;
color: #666666;
letter-spacing: 2px;
font-size: 10px;
}
T R O U B L E S H O O T I N G
Before asking any questions, make sure you read all information above thouroughly and that your question isn't adressed in the
FAQ.
If your problem still isn't solved, you are welcome to ask your question
here
;){kind=link}
;){kind=link}
;){kind=link}