Spiderman - The greatest battle lies within
I made a new layout. This time I wanted to please my bf, who is a great fan of Spiderman, so I made a layout featuring the new Spiderman movie. And I guess some guys who use Livejournal would like a more "manly" layout, right? Well, you know how things work... look, take, credit.
Style: S2 Flexible Squares
Title: Spiderman - The greatest battle lies within
Website: Not needed
Default Icon: No needed
Best view: 800x600 and higher.
Browser(s) Compatible: Firefox, Internet Explorer, Netscape, Opera.
Maker: amavel_bel (Mabel). Credit me in your user info page.
Resources: Images from the web sites Cinema em Cena and Google Images. Other resources are credited at my LJ Info Page.
Notes: For basic (free) and paid accounts and it works with Nav bar strip and Sponsored Plus Account (just with vertical ads).
Obs: There is an ANIMATED SPIDER in the layout.
Preview:
Working preview: bel_movie008
| IMAGES |
Obs.: The images are provided in the code for convenience. They are hosted and I don't intend to take them down (hopefully I won't have exceeding bandwidth problem). If you want, I'm providing the links below, so you can take the images and upload them in your own server. Just the FRIENDS ONLY BANNER and the ICONS are optional.
Header:
http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_header.jpg
Friends Only Banner:
Icons:
Extra images:
- animated spider
- divider between entries
- decoration of the sidebar titles
| CUSTOM COLORS |
Leave all the color fields blank. Actually, it's better to leave all the color fields blank.
| CSS CODE |
/* BACKGROUND, ENTRIES TEXT, COLORS */ body { background-color: #020b1c; color: #030418; font-family: "Verdana", sans-serif; font-size: 10px; text-align: center; margin: 0px 0px 0px 0px; } a, a:link, a:visited { color: #030418; font-weight:bold; text-decoration: none; } a:hover { color:#FE112F; font-weight:bold; text-decoration: none; } p, td, blockquote { font-size: 11px; } code, kbd, pre, tt { font-family: monospace; } /* HEADER */ #header { position: relative; width: auto !important; width: 760px; height: 330px; padding: 0; margin: 0px 0px 0px 0px; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #030418; background: transparent url(http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_header.jpg) no-repeat top center; border: 0; } /* NAVIGATION BAR */ ul.navheader { position: relative; width: auto !important; width: 760px; height: 22px; top: 330px; left: 0px; margin: 0px; padding: 0px; padding-top: 6px; background-color: #082149; text-align: center; text-transform: uppercase; font-family: georgia, times new roman; font-size: 8pt; font-weight: bold; color: #FFFFFF; border: 0; } ul.navheader li { padding: 0 10px 0 10px; margin: 0px; display: inline; list-style-type: none; } /* NAVIGATION BAR LINKS */ div#header a:active, div#header a:link, div#header a:visited { color: #FFFFFF; padding: 0 10px 0 10px; } div#header a:hover { color: #FE112F; background-color: transparent; text-decoration: none; } /* TITLE OF JOURNAL */ .title{ display: none; } /* SUBTITLE OF JOURNAL */ .subtitle{ display: none; } /* SIDEBAR */ #sidebar { margin-top: 50px; margin-left: 3px !important; margin-left: 0px; width: 205px; padding-top: 0; color: #020B1C; font-size: 10px; font-family: "Verdana", sans-serif; text-align: left; float: left; z-index: 15; background-color: transparent; border: 0; } /* SIDEBAR - LINKS */ div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ color: #082149; font-weight:bold; } div#sidebar a:hover { color: #FE112F; font-weight:bold; text-decoration: none; background-color: #082149; } /* SIDEBAR - FRAMES */ .sbarheader { padding: 0px 5px 0px 20px; } .sbarbody { padding: 0px 5px 0px 0px; } .sbarbody2 { padding: 0px 5px 10px 30px; } /* SIDEBAR - DEFAULT USERPIC */ .defaultuserpic { text-align: center; margin-top: 15px; margin-left: 6px; } .defaultuserpic img { border: 1px solid #020B1C; background-color: #FFFFFF; padding: 2px; } /* SIDEBAR - ITEMS */ ul.sbarlist { padding-left: 0px; margin-left: 10px; list-style: none; } /* SIDEBAR - ITEMS LINKS */ ul.sbarlist a, ul.sbarlist a:link, ul.sbarlist a:visited { font-weight:none; display:block; padding-left:3px; padding-bottom:3px; line-height: 16px; } ul.sbarlist a:hover { text-decoration: none; padding-left:3px; padding-bottom:3px; } li.sbaritem { padding-left: 0px; list-style: none; } /* SIDEBAR - TITLES */ li.sbartitle { font-family: "Verdana", arial; padding-left: 22px; padding-top: 15px; padding-bottom: 3px; list-style: none; border: 0; border-bottom: 0px solid #030418; margin-bottom: 5px; margin-top: 5px; height: 35px; color:#000000; font-size: 12px; font-weight: bold; letter-spacing: 2px; background: transparent url(http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_decoration.jpg) no-repeat top left; } /* SIDEBAR - CALENDAR */ table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { border-width: 1px; border-style: solid; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; color: #030418; background-color:#E6E6E6; border-color: #F3F3F3; padding: 3px; } .sbarcalendarposts { border: 0; background-color: #CCCCCC; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; padding: 3px; } div#sidebar .sbarcalendarposts a:link, div#sidebar .sbarcalendarposts a:visited { background-color: transparent; font-weight: normal; } div#sidebar .sbarcalendarposts a:hover { background-color: transparent; font-weight: normal; } div .sbarcalendar a:link, div .sbarcalendar a:visited { color: #020B1C; background-color: transparent; font-weight: normal; } div .sbarcalendar a:hover { color: #FE112F; font-weight: normal; } /* MAINCONTENT */ #maincontent { margin-top: 65px; margin-left: 220px; margin-right: 5px; font-family: "Verdana", sans-serif; font-size: 10px; color: #030418; border: none; text-align: left; border:0; background-color: transparent; } #content { width: 760px; margin-left: auto; margin-right: auto; border: 1px solid #020B1C; padding: 0; z-index:1; background: #FFFFFF url(http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_spider.gif) no-repeat 13.4em 35.8em; } div.subcontent { background-color: transparent; } .subcontent div.subcontent { background-color: transparent; border:0; } /* ENTRIES */ .entry { margin: 0px 0px 0px 10px; padding: 10px; font-family: "Verdana", "Arial"; font-size: 7.5pt; text-align: justify; line-height: 16px; background-color: transparent; color: #020B1C; border: 0; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } /* SEPARATOR BETWEEN ENTRIES */ .separator{ height: 60px; background: transparent url(http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_divider.gif) no-repeat bottom center; } /* ENTRY ICON */ .userpic { position: relative; float: right; background-color: #FFFFFF; padding: 2px; margin: 10px 0px 0px 5px; border: 1px solid #75736E; z-index: 15; } /* FRIENDS ICON */ .userpicfriends { position: relative; float: right; background-color: #FFFFFF; padding: 2px; margin: 10px 0px 0px 5px; border: 1px solid #75736E; text-align: center; z-index: 15; } /* ENTRY DATE */ .date { line-height: 200%; top: 5px; color: #000000; font-family: "sans serif", sans-serif; font-size: 12px; font-weight: bold; background-color: transparent; text-align: left; padding: 1px; margin-left: 10px; border: 0; } /* ENTRY SUBJECT */ .subject { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; text-align: left; padding: 5px; margin-left: 10px; background-color: #F7F5F4; color: #FE112F; border-top: 1px solid #75736E; border-left: 1px solid #75736E; border-bottom: 1px solid #E1DED9; border-right: 1px solid #F2F0EE; } .subject a, .subject a:link, .subject a:visited { color: #020B1C; } .subject a:hover { color: #000000; } .datesubject { background-color: transparent; padding:0; } /* TAGS */ .ljtags { font-weight: bold; margin-top: 20px; } /* MOOD AND MUSIC */ .currents, .currentmood, .currentmusic { font-family: "Verdana", sans-serif; font-size: 11px; } .currents { margin-top: 10px; } /* COMMENTS LINK BAR */ .comments { position: relative; font-family: "Verdana", sans-serif; font-size: 11px; text-align: center; background-color: #F3F3F3; padding: 5px 0px 5px 0px; top: 15px; width: auto !important; width: 472px; } div.comments a, div.comments a:link, div.comments a:visited { color: #626B71; } div.comments a:hover { color: #FE112F; text-decoration: none; } /* COMMENTS PAGE */ .datesubjectcomment { background-color: transparent; padding: 5px; margin-top: 20px; background-color: #F3F3F3; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #626B71; } .datesubjectcomment a:hover { color: #FE112F; } .userpiccomment { position: relative; float: right; background-color: #FFFFFF; padding: 2px; margin: 10px 0px 0px 5px; margin: 16px -5px 0px 8px; border: 1px solid #75736E; text-align: center; top: -30px; right: 0px; z-index: 15; } .box { padding: 10px; clear: right; } input, textarea { background-color: transparent; color: #030418; } 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-color: #FFFFFF; color: #030418; } .replytoposter { line-height: 120%; top: 5px; color: #000000; font-family: "sans serif", sans-serif; font-size: 12px; font-weight: bold; background-color: transparent; text-align: left; padding-top: 5px; padding-left: 5px; margin-left: 10px; } .replytosubject { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; text-align: left; padding: 3px; margin-left: 10px; background-color: #F7F5F4; color: #020B1C; border-top: 1px solid #75736E; border-left: 1px solid #75736E; border-bottom: 1px solid #E1DED9; border-right: 1px solid #F2F0EE; } .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: "Verdana", sans-serif; color: #030418; } .commentbox { background-color: transparent; border: 1px solid #020B1C; padding: 10px; margin: 10px; text-align: center; } .commentbox a:link, .commentbox a:visited { color: #626B71; font-size: 10px; } .commentbox a:hover { color: #FE112F; } .commentboxpartial { background-color: #CCCCCC; border: 3px double #030418; padding: 10px; margin: 10px; } .commentinfo { background-color: #FFFFFF; margin-top: 10px; width: 100%; } /* YEAR AND ARCHIVE PAGES */ ul.year { text-align: center; padding-bottom: 40px; } ul.year li { display: inline; } table.yeartable { margin-left: auto; margin-right: auto; border: 1px solid #030418; } td.yeardate { border-style: none; border: 1px solid #CCCCCC; } td.yearday{ background-color: #030418; color: #FFFFFF; border: 1px solid #FFFFFF; text-align: center; } td.yearmonth { border-style: none; } /* FOOTER */ #footer { text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #030418; border: none; z-index: 100; clear: both; width: 760px; left:50%; margin-left:-220px; height: 50px; background-color: transparent; } div#footer a, div#footer a:link, div#footer a:visited { color: #030418; } div#footer a:hover { color: #030418; text-decoration: underline; } ul.navfooter{ padding: 0px; margin: 0 0 0 0; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot { clear: both; } .skiplinks { text-align: center; }
| SPECIAL INSTRUCTIONS |
Preparing the code:
- Copy the CSS code and paste it in the Notepad.
- If you decided to host the images in your own server, replace every i38.photobucket.com/albums/e107/bel_layouts/movie008 by the server address where you uploaded the images.
Configuring the layout:
- In the LJ page, go to Journal >> Change Journal Theme.
- If you're using S1 style do the following. If not, skip this step: Click in the link Switch to S2 in the blue box on the right side of the page. Then, click in the button "Yes, I want to upgrade to S2".
- In the 2. Select a New Theme section, type Flexible Squares in the search box. Then select one of the themes listed and click in Apply Theme.
- In the 3. Choose a Page Setup section at the bottom of the page, choose "2 Column (sidebar on left)" and click in the button "Apply Layout".
- Then click in the button Customise your theme, in the bottom on the right side.
- Click in the option Custom CSS and under Use layout's stylesheet(s) choose No (THIS IS VERY IMPORTANT!). Then copy the CSS from the Notepad and paste it in the field Custom stylesheet.
- Then you can navigate through the links in the Customize Your Theme and personalize other things as you wish, like going to the Sidebar option and putting personalized labels or entering a personalized text inside the free text box/blurb, for example.
- Click in the button Save Changes and it's done.
Cross-posted to layouts_for_fun, freelayouts and freelayouts_s2.
Style: S2 Flexible Squares
Title: Spiderman - The greatest battle lies within
Website: Not needed
Default Icon: No needed
Best view: 800x600 and higher.
Browser(s) Compatible: Firefox, Internet Explorer, Netscape, Opera.
Maker: amavel_bel (Mabel). Credit me in your user info page.
Resources: Images from the web sites Cinema em Cena and Google Images. Other resources are credited at my LJ Info Page.
Notes: For basic (free) and paid accounts and it works with Nav bar strip and Sponsored Plus Account (just with vertical ads).
Obs: There is an ANIMATED SPIDER in the layout.
Preview:
Working preview: bel_movie008
| IMAGES |
Obs.: The images are provided in the code for convenience. They are hosted and I don't intend to take them down (hopefully I won't have exceeding bandwidth problem). If you want, I'm providing the links below, so you can take the images and upload them in your own server. Just the FRIENDS ONLY BANNER and the ICONS are optional.
Header:
http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_header.jpg
Friends Only Banner:
Icons:
Extra images:
- animated spider
- divider between entries
- decoration of the sidebar titles
| CUSTOM COLORS |
Leave all the color fields blank. Actually, it's better to leave all the color fields blank.
| CSS CODE |
/* BACKGROUND, ENTRIES TEXT, COLORS */ body { background-color: #020b1c; color: #030418; font-family: "Verdana", sans-serif; font-size: 10px; text-align: center; margin: 0px 0px 0px 0px; } a, a:link, a:visited { color: #030418; font-weight:bold; text-decoration: none; } a:hover { color:#FE112F; font-weight:bold; text-decoration: none; } p, td, blockquote { font-size: 11px; } code, kbd, pre, tt { font-family: monospace; } /* HEADER */ #header { position: relative; width: auto !important; width: 760px; height: 330px; padding: 0; margin: 0px 0px 0px 0px; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #030418; background: transparent url(http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_header.jpg) no-repeat top center; border: 0; } /* NAVIGATION BAR */ ul.navheader { position: relative; width: auto !important; width: 760px; height: 22px; top: 330px; left: 0px; margin: 0px; padding: 0px; padding-top: 6px; background-color: #082149; text-align: center; text-transform: uppercase; font-family: georgia, times new roman; font-size: 8pt; font-weight: bold; color: #FFFFFF; border: 0; } ul.navheader li { padding: 0 10px 0 10px; margin: 0px; display: inline; list-style-type: none; } /* NAVIGATION BAR LINKS */ div#header a:active, div#header a:link, div#header a:visited { color: #FFFFFF; padding: 0 10px 0 10px; } div#header a:hover { color: #FE112F; background-color: transparent; text-decoration: none; } /* TITLE OF JOURNAL */ .title{ display: none; } /* SUBTITLE OF JOURNAL */ .subtitle{ display: none; } /* SIDEBAR */ #sidebar { margin-top: 50px; margin-left: 3px !important; margin-left: 0px; width: 205px; padding-top: 0; color: #020B1C; font-size: 10px; font-family: "Verdana", sans-serif; text-align: left; float: left; z-index: 15; background-color: transparent; border: 0; } /* SIDEBAR - LINKS */ div#sidebar a, div#sidebar a:link, div#sidebar a:visited{ color: #082149; font-weight:bold; } div#sidebar a:hover { color: #FE112F; font-weight:bold; text-decoration: none; background-color: #082149; } /* SIDEBAR - FRAMES */ .sbarheader { padding: 0px 5px 0px 20px; } .sbarbody { padding: 0px 5px 0px 0px; } .sbarbody2 { padding: 0px 5px 10px 30px; } /* SIDEBAR - DEFAULT USERPIC */ .defaultuserpic { text-align: center; margin-top: 15px; margin-left: 6px; } .defaultuserpic img { border: 1px solid #020B1C; background-color: #FFFFFF; padding: 2px; } /* SIDEBAR - ITEMS */ ul.sbarlist { padding-left: 0px; margin-left: 10px; list-style: none; } /* SIDEBAR - ITEMS LINKS */ ul.sbarlist a, ul.sbarlist a:link, ul.sbarlist a:visited { font-weight:none; display:block; padding-left:3px; padding-bottom:3px; line-height: 16px; } ul.sbarlist a:hover { text-decoration: none; padding-left:3px; padding-bottom:3px; } li.sbaritem { padding-left: 0px; list-style: none; } /* SIDEBAR - TITLES */ li.sbartitle { font-family: "Verdana", arial; padding-left: 22px; padding-top: 15px; padding-bottom: 3px; list-style: none; border: 0; border-bottom: 0px solid #030418; margin-bottom: 5px; margin-top: 5px; height: 35px; color:#000000; font-size: 12px; font-weight: bold; letter-spacing: 2px; background: transparent url(http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_decoration.jpg) no-repeat top left; } /* SIDEBAR - CALENDAR */ table.calendar { margin-right: auto; margin-left: auto; } .sbarcalendar { border-width: 1px; border-style: solid; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; color: #030418; background-color:#E6E6E6; border-color: #F3F3F3; padding: 3px; } .sbarcalendarposts { border: 0; background-color: #CCCCCC; text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: normal; padding: 3px; } div#sidebar .sbarcalendarposts a:link, div#sidebar .sbarcalendarposts a:visited { background-color: transparent; font-weight: normal; } div#sidebar .sbarcalendarposts a:hover { background-color: transparent; font-weight: normal; } div .sbarcalendar a:link, div .sbarcalendar a:visited { color: #020B1C; background-color: transparent; font-weight: normal; } div .sbarcalendar a:hover { color: #FE112F; font-weight: normal; } /* MAINCONTENT */ #maincontent { margin-top: 65px; margin-left: 220px; margin-right: 5px; font-family: "Verdana", sans-serif; font-size: 10px; color: #030418; border: none; text-align: left; border:0; background-color: transparent; } #content { width: 760px; margin-left: auto; margin-right: auto; border: 1px solid #020B1C; padding: 0; z-index:1; background: #FFFFFF url(http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_spider.gif) no-repeat 13.4em 35.8em; } div.subcontent { background-color: transparent; } .subcontent div.subcontent { background-color: transparent; border:0; } /* ENTRIES */ .entry { margin: 0px 0px 0px 10px; padding: 10px; font-family: "Verdana", "Arial"; font-size: 7.5pt; text-align: justify; line-height: 16px; background-color: transparent; color: #020B1C; border: 0; } .entry ul li { padding-left: 5px; margin-left: 15px; } .entry ol li { padding-left: 5px; margin-left: 15px; } /* SEPARATOR BETWEEN ENTRIES */ .separator{ height: 60px; background: transparent url(http://i38.photobucket.com/albums/e107/bel_layouts/movie008/spiderman_battlelies_divider.gif) no-repeat bottom center; } /* ENTRY ICON */ .userpic { position: relative; float: right; background-color: #FFFFFF; padding: 2px; margin: 10px 0px 0px 5px; border: 1px solid #75736E; z-index: 15; } /* FRIENDS ICON */ .userpicfriends { position: relative; float: right; background-color: #FFFFFF; padding: 2px; margin: 10px 0px 0px 5px; border: 1px solid #75736E; text-align: center; z-index: 15; } /* ENTRY DATE */ .date { line-height: 200%; top: 5px; color: #000000; font-family: "sans serif", sans-serif; font-size: 12px; font-weight: bold; background-color: transparent; text-align: left; padding: 1px; margin-left: 10px; border: 0; } /* ENTRY SUBJECT */ .subject { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; text-align: left; padding: 5px; margin-left: 10px; background-color: #F7F5F4; color: #FE112F; border-top: 1px solid #75736E; border-left: 1px solid #75736E; border-bottom: 1px solid #E1DED9; border-right: 1px solid #F2F0EE; } .subject a, .subject a:link, .subject a:visited { color: #020B1C; } .subject a:hover { color: #000000; } .datesubject { background-color: transparent; padding:0; } /* TAGS */ .ljtags { font-weight: bold; margin-top: 20px; } /* MOOD AND MUSIC */ .currents, .currentmood, .currentmusic { font-family: "Verdana", sans-serif; font-size: 11px; } .currents { margin-top: 10px; } /* COMMENTS LINK BAR */ .comments { position: relative; font-family: "Verdana", sans-serif; font-size: 11px; text-align: center; background-color: #F3F3F3; padding: 5px 0px 5px 0px; top: 15px; width: auto !important; width: 472px; } div.comments a, div.comments a:link, div.comments a:visited { color: #626B71; } div.comments a:hover { color: #FE112F; text-decoration: none; } /* COMMENTS PAGE */ .datesubjectcomment { background-color: transparent; padding: 5px; margin-top: 20px; background-color: #F3F3F3; } .datesubjectcomment a:link, .datesubjectcomment a:visited { color: #626B71; } .datesubjectcomment a:hover { color: #FE112F; } .userpiccomment { position: relative; float: right; background-color: #FFFFFF; padding: 2px; margin: 10px 0px 0px 5px; margin: 16px -5px 0px 8px; border: 1px solid #75736E; text-align: center; top: -30px; right: 0px; z-index: 15; } .box { padding: 10px; clear: right; } input, textarea { background-color: transparent; color: #030418; } 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-color: #FFFFFF; color: #030418; } .replytoposter { line-height: 120%; top: 5px; color: #000000; font-family: "sans serif", sans-serif; font-size: 12px; font-weight: bold; background-color: transparent; text-align: left; padding-top: 5px; padding-left: 5px; margin-left: 10px; } .replytosubject { font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; text-align: left; padding: 3px; margin-left: 10px; background-color: #F7F5F4; color: #020B1C; border-top: 1px solid #75736E; border-left: 1px solid #75736E; border-bottom: 1px solid #E1DED9; border-right: 1px solid #F2F0EE; } .commentreply { position: relative; margin: 10px; font-size: 11px; font-family: "Verdana", sans-serif; color: #030418; } .commentbox { background-color: transparent; border: 1px solid #020B1C; padding: 10px; margin: 10px; text-align: center; } .commentbox a:link, .commentbox a:visited { color: #626B71; font-size: 10px; } .commentbox a:hover { color: #FE112F; } .commentboxpartial { background-color: #CCCCCC; border: 3px double #030418; padding: 10px; margin: 10px; } .commentinfo { background-color: #FFFFFF; margin-top: 10px; width: 100%; } /* YEAR AND ARCHIVE PAGES */ ul.year { text-align: center; padding-bottom: 40px; } ul.year li { display: inline; } table.yeartable { margin-left: auto; margin-right: auto; border: 1px solid #030418; } td.yeardate { border-style: none; border: 1px solid #CCCCCC; } td.yearday{ background-color: #030418; color: #FFFFFF; border: 1px solid #FFFFFF; text-align: center; } td.yearmonth { border-style: none; } /* FOOTER */ #footer { text-align: center; font-family: "Verdana", sans-serif; font-size: 11px; font-weight: bold; letter-spacing: 1px; color: #030418; border: none; z-index: 100; clear: both; width: 760px; left:50%; margin-left:-220px; height: 50px; background-color: transparent; } div#footer a, div#footer a:link, div#footer a:visited { color: #030418; } div#footer a:hover { color: #030418; text-decoration: underline; } ul.navfooter{ padding: 0px; margin: 0 0 0 0; } ul.navfooter li { display: inline; margin: 0 5px 0 5px; } .clearfoot { clear: both; } .skiplinks { text-align: center; }
| SPECIAL INSTRUCTIONS |
Preparing the code:
- Copy the CSS code and paste it in the Notepad.
- If you decided to host the images in your own server, replace every i38.photobucket.com/albums/e107/bel_layouts/movie008 by the server address where you uploaded the images.
Configuring the layout:
- In the LJ page, go to Journal >> Change Journal Theme.
- If you're using S1 style do the following. If not, skip this step: Click in the link Switch to S2 in the blue box on the right side of the page. Then, click in the button "Yes, I want to upgrade to S2".
- In the 2. Select a New Theme section, type Flexible Squares in the search box. Then select one of the themes listed and click in Apply Theme.
- In the 3. Choose a Page Setup section at the bottom of the page, choose "2 Column (sidebar on left)" and click in the button "Apply Layout".
- Then click in the button Customise your theme, in the bottom on the right side.
- Click in the option Custom CSS and under Use layout's stylesheet(s) choose No (THIS IS VERY IMPORTANT!). Then copy the CSS from the Notepad and paste it in the field Custom stylesheet.
- Then you can navigate through the links in the Customize Your Theme and personalize other things as you wish, like going to the Sidebar option and putting personalized labels or entering a personalized text inside the free text box/blurb, for example.
- Click in the button Save Changes and it's done.
Cross-posted to layouts_for_fun, freelayouts and freelayouts_s2.