I've been meaning to convert my more popular S1 designs to an S2 style, as LJ will eventually stop supporting S1 styles and I do not want my layouts to go to waste.
I never really got around to it, but now I have finally made a start with the conversion of the Eden layout from S1 generator to S2 expressive!
Description
Name:
Eden revised
Description:
Elegant grey sidebar layout with red accents.
The original layout can be found
here. The original was converted from S1 generator to S2 expressive.
General Information
Layout Style:
Expressive
Tested in:
Mozilla Firefox and Internet Explorer
Also checked the layout in
browsershots and it looked okay in Safari and Opera as well.
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:
No, because the header overlaps the navigation strip [
How to enable/disable]
Credit:
Credit to me is implemented in the footer of the page.
{
Bigger}
{
Live Preview}
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. 'Vertical' and 'Inbetween Entries' works best.
- Apply the following: '2 Column (sidebar on right)'
- 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
Images:
The 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!
Codes:
/*=================================================================================================================================================*/
/*------------------------------------------------------- LAYOUT 26: EDEN - REVISED TO S2 ---------------------------------------------------------*/
/*------------------------------------------------------------- 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: 0px; padding: 0px; }
html {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background-color: #F4F1F0;
background-repeat: repeat-y;
background-image: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/BG.jpg);
background-position: top center;
background-attachment:fixed;
overflow-x: hidden;
overflow:-moz-scrollbars-vertical;
font-family: Verdana, serif;
color: #333333;
}
a {
color: #BF7B90;
text-decoration: none;
}
a:hover {
color: #9F1A45;
text-decoration: underline;
}
/*--------------------------*/
/*----- PAGE STRUCTURE -----*/
/*--------------------------*/
#container {
margin: 0 auto;
padding: 0;
width: 1020px;
}
#container-inner {
margin: 0 auto;
padding: 10px;
}
#alpha {
float: left;
width: 680px;
margin: 741px 0 0 0;
}
#alpha-inner {
padding: 10px;
}
#beta {
float: right;
width: 236px;
margin: 781px 25px 0 0px;
}
/*----------------------------*/
/*---------- HEADER ----------*/
/*----------------------------*/
#header {
position:absolute;
visibility: visible;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/header.jpg) no-repeat top center;
height: 741px;
width: 1650px;
top: 0px;
width: 1650px;
left:50%;
margin-left:-825px;
}
#header-name, #header-description {
display: none;
}
/*--------------------------------*/
/*---------- NAVIGATION ----------*/
/*--------------------------------*/
.nav {
position: absolute;
top: 520px;
left: 50%;
margin-left: 229px;
width: 246px;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/navigation.jpg) no-repeat top center;
height: 260px;
}
ul.nav {
padding: 60px 0 0 0;
list-style-type: none;
text-align: center;
font-family: times new roman, serif;
font-variant: small-caps;
font-size: 16pt;
letter-spacing: 10px;
}
ul.nav li.item {
line-height: 20pt;
}
ul.nav li.item a {
color: #555555;
}
ul.nav li.item a:hover {
color: #782221;
}
/*-----------------------------------*/
/*---------- PREVIOUS/NEXT ----------*/
/*-----------------------------------*/
.stream-header {
display: block;
margin: 0 0 70px 10px;
}
.stream-footer {
display: block;
margin: 50px 0 0 10px;
}
a.prev {
font-size:0px;
display:block;
width:89px;
height:48px;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/previous.jpg) no-repeat top left;
visibility:visible;
float:left;
line-height:0px;
}
a:hover.prev{
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/previous.jpg) no-repeat top right;
}
a.next {
font-size:0px;
display:block;
width:89px;
height:48px;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/next.jpg) no-repeat top left;
visibility:visible;
float:left;
line-height:0px;
}
a:hover.next{
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/next.jpg) no-repeat top right;
}
.prevnext {
font-size:0px;
line-height:0px;
clear:both;
}
.prevnext a {
line-height:0px;
font-size:0px;
color:#F3F3F3;
}
/*-----------------------------------*/
/*---------- ENTRY STYLING ----------*/
/*-----------------------------------*/
.asset {
clear:both;
}
.asset-inner {
padding: 10px;
}
.asset-body {
text-align: justify;
font-size: 8pt;
line-height: 1.3em;
padding: 5px;
margin: 0 0 30px 0;
}
.asset-body ul, .asset-body ol {
margin: 10px 0 10px 50px;
}
blockquote {
margin: 10px;
padding: 5px;
border-top: 6px groove #FF9CD9;
border-bottom: 6px ridge #FF9CD9;
color: #8D5678;
}
.asset-body textarea {
color: #8D5678;
font-family: verdana, serif;
font-size: 7pt;
background-color: #F4F1F0;
}
.asset-header {
margin: 0 0 40px 0;
}
/*------ SUBJECT ------*/
h2.asset-name.page-header2 {
font-family: georgia, serif;
font-variant: small-caps;
font-size: 11pt;
color:#A54A69;
text-align: left;
font-weight:bold;
text-decoration: underline;
}
h2.asset-name.page-header2 a{
color:#A54A69;
}
/*------ ENTRY DATE ------*/
.asset-header .asset-meta-list {
background:transparent;
float: left;
margin: 0;
padding: 0 0 0 45px;
}
.asset-header .datetime {
font-size: 8pt;
font-family: Georgia;
color: #B4B4B4;
line-height: 14px;
letter-spacing: 1px;
font-weight:bold;
}
/*------ USERICON ------*/
.asset .user-icon {
float:right;
background: #D1B9C2;
position:relative;
margin: 0 0 10px 10px;
padding: 8px;
}
.asset .user-icon img {
border: 1px solid #DAD1D4;
}
.user-icon span{
background:transparent!important;
text-align: center;
}
span.ljuser a b, .user-icon .ljuser a{
padding: 0;
color: #BF7B90;
font-family: georgia;
font-weight: normal;
font-size: 9pt;
}
span.ljuser a:hover b{
color: #9F1A45;
text-decoration: none;
}
.ljuser img {
width: 0;
height: 0;
background-repeat: no-repeat;
background-color:transparent;
background-image: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/user.png);
margin: 0 0 0 5px;
padding: 16px 0px 0 14px;
}
.ljuser img[src="
http://p-stat.livejournal.com/img/userinfo.gif"] {
background-color:transparent;
background-image: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/user.png);
margin: 0 0 0 5px;
padding: 16px 0px 0 14px;
}
.ljuser img[src="
http://p-stat.livejournal.com/img/community.gif"] {
background-color:transparent;
background-image: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/community.png);
margin: 0 0 0 5px;
padding: 16px 0px 0px 16px;
}
/*------ METADATA ------*/
.lj-currents {
margin: 15px 0 0 10px;
padding: 35px 0 0 95px;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/metadata.jpg) no-repeat top left;
font-size: 7pt;
color: #444444;
}
.lj-currents .entryMetadata-label {
margin:0px 8px 0px 0px;
color: #782221;
font-family: georgia, serif;
font-weight: bold;
}
.lj-currents ul{
margin:0px;
padding:0px;
list-style-type:none;
}
/*------ ENTRY TAGS ------*/
.asset-tags-list {
margin: 15px 0 0 10px;
padding: 35px 0 0 65px;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/tags.jpg) no-repeat top left;
font-size: 7pt;
color: #444444;
}
.asset-tags-header {
display: none;
}
.asset-tags-list li.item {
display:inline;
}
.asset-tags-list li.item a {
color: #444444;
font-weight: normal;
border-top: 1px solid #BF7B90;
border-bottom: 1px solid #BF7B90;
padding: 0 0 2px 0;
}
.asset-tags-list li.item a:hover {
border-top: 1px solid #9F1A45;
border-bottom: 1px solid #9F1A45;
text-decoration: none;
}
/*------ COMMENT LINKS ------*/
.asset-meta-list{
margin: 50px 0 0 0;
}
ul.asset-meta-list {
list-style-type:none;
text-align: center;
}
li.asset-meta-comments{
display: inline;
margin: 0 10px;
font-variant: small-caps;
font-size: 9pt;
line-height: 3.0em;
letter-spacing: 0.2em;
}
li.asset-meta-comments a {
font-weight: normal;
color: #555555;
}
li.asset-meta-comments a:hover {
color: #782221;
}
/*------ DIVIDER ------*/
.asset-footer {
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/divider.jpg) no-repeat bottom center;
height: 100px;
}
/*-------------------------------------*/
/*---------- SIDEBAR STYLING ----------*/
/*-------------------------------------*/
/*------ GENERAL ------*/
.widget {
clear: both;
margin-bottom: 20px;
text-align: justify;
font-size: 8pt;
line-height: 1.3em;
}
h3.widget-header {
display: none;
}
.widget-content {
padding: 10px;
}
.widget-footer {
padding: 6px 0 30px 0;
}
.widget-footer a{
float: right;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/user.png) no-repeat bottom left;
padding: 12px 8px 0px 14px;
}
ul.widget-list {
list-style-type:none;
margin:0;
padding: 0;
text-align: center;
}
.widget-list li {
line-height: 1.8em;
letter-spacing: 0.2em;
}
/*------ PROFILE WIDGET ------*/
.about-me-widget {
text-align: center;
}
.about-me-widget .widget-content {
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/sbProfile.jpg) no-repeat top left;
}
.user-pic {
text-align: center;
padding: 28px 0 0 0;
}
.user-pic img{
padding: 8px;
background: #D1B9C2;
}
.profile-list {
text-align: left;
}
.profile-name a{
float: right;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/user.png) no-repeat bottom left;
padding: 12px 0px 0px 14px;
}
/*------ LATEST MONTH WIDGET ------*/
.calendar-widget .widget-content {
margin: 0;
padding: 43px 0 0 0;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/sbMonth.jpg) no-repeat top left;
}
.calendar-widget table {
text-align: center;
margin: 0 auto;
background: #E2D7DB;
border: 1px solid #FFFFFF;
}
.calendar-widget table td {
text-align:center;
padding: 2px;
}
.calendar-widget table td a{
font-weight: bold;
}
.calendar-widget table th {
text-align: center;
padding:1px 0px 1px 0px;
}
/*------ LINKS WIDGET ------*/
.typelist-widget .widget-content {
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/sbLinks.jpg) no-repeat top left;
}
.typelist-widget .widget-list {
padding: 33px 0 0 0;
}
/*------ TAGS WIDGET ------*/
.categories-widget .widget-content {
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/sbTags.jpg) no-repeat top left;
}
.categories-widget .widget-list {
padding: 33px 0 0 0;
}
/*------- SUMMARY WIDGET ------*/
.archive-widget .widget-content {
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/sbSummary.jpg) no-repeat top left;
}
.archive-widget .widget-list {
padding: 33px 0 0 0;
}
/*------ CUSTOM TEXT WIDGETS ------*/
.customtext-widget .widget-content {
margin: 0;
background:url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/sbBlurb.jpg) no-repeat top left;
padding: 43px 15px 0 5px;
}
/*------ NOT DISPLAYING OTHER WIDGETS ------*/
.syndicate-widget,.powered-widget,.designed-widget {
display: none;
}
/*-----------------------*/
/*----- PAGE FOOTER -----*/
/*-----------------------*/
#footer {
clear: both;
background: url(
http://i19.photobucket.com/albums/b153/gawariel_design/26_Eden%20-%20LLS2/S2/footer.jpg) no-repeat bottom left;
margin: 0 0 0 16px;
height: 80px;
}
/*----------------------------------*/
/*---------- ARCHIVE PAGE ----------*/
/*----------------------------------*/
.yeartable {
width: 90%;
margin: 0 auto;
clear:both;
}
td.yearmonth {
padding: 10px 0;
font-family: georgia, serif;
font-variant: small-caps;
font-size: 11pt;
color:#A54A69;
font-weight:bold;
}
td.yearmonth a {
font-weight: normal;
font-size: 10pt;
font-family: Verdana, serif;
}
.yearday {
text-align: center;
font-family: georgia, serif;
font-variant: small-caps;
font-size: 11pt;
font-weight:bold;
background: #D1B9C2;
border: 1px solid #DAD1D4;
padding: 4px;
color: #666666;
}
td.yeardate div {
text-align:center;
padding:2px;
border: 1px solid #DAD1D4;
}
td.yeardate div a {
font-weight:bold;
}
ul.year {
margin: 0 0 0 20px;
list-style-type:none;
font-size: 11pt;
}
ul.year li {
display: inline;
margin: 0 5px;
}
ul.year li a {
font-size: 11pt;
color: #BF7B90;
text-decoration: none;
}
ul.year li a:hover {
color: #9F1A45;
text-decoration: underline;
}
/*-----------------------------------*/
/*---------- COMMENT PAGES ----------*/
/*-----------------------------------*/
/*------ COMMENT BOXES ------*/
h2.comments-header {
text-align: center;
font-family: georgia, serif;
font-variant: small-caps;
font-size: 11pt;
color:#A54A69;
font-weight:bold;
text-decoration: underline;
}
#comments .comment{
margin: 15px;
padding: 5px;
font-size: 8pt;
border: 1px solid #DAD1D4;
}
html*#comments .comment{
width: 90%;
}
#comments .comment-odd .comment-links, #comments .comment-even .comment-links {
clear: both;
text-align: right;
font-variant: small-caps;
font-size: 8pt;
padding: 10px;
}
.comment .user-icon {
float:right;
background: #D1B9C2;
position:relative;
margin: 0 0 10px 10px;
padding: 8px;
border: 1px solid #DAD1D4;
}
.commenter-name {
background: #D1B9C2;
border: 1px solid #DAD1D4;
padding: 5px 10px;
}
.comment-body {
padding: 5px;
text-align: justify;
line-height: 1.3em;
}
.comment-subject {
margin: 5px 0 0 0;
padding: 0 0 0 10px;;
font-family: georgia, serif;
font-variant: small-caps;
font-size: 9pt;
color:#A54A69;
text-align: left;
font-weight:bold;
border-bottom: 1px solid #DAD1D4;
}
.comment-date {
display: block;
text-align: right;
padding: 5px 5px 10px 10px;
font-size: 7pt;
font-family: Georgia;
color: #B4B4B4;
line-height: 14px;
letter-spacing: 1px;
font-weight:bold;
}
.comments-nav {
text-align:center;
font-variant: small-caps;
font-size: 9pt;
line-height: 3.0em;
letter-spacing: 0.2em;
}
/*------ REPLY PAGE ------*/
.quickreply {
border: 1px solid #DAD1D4;
font-size: 8pt;
}
textarea#commenttext.textbox {
width:90%;
}
form#postform {
margin: 15px;
padding: 5px;
font-size: 8pt;
}
textarea, input#subject.textbox, select {
margin:0px 0px 8px 0px;
padding:2px;
border: 1px solid #DAD1D4;
font-family: verdana, sans-serif;
font-size: 8pt;
color: #333333;
}
hr {
width: 0;
}
Extra
Icon:
FO banner:
Troubleshooting
Before asking any questions, make sure you read all information above thoroughly 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.