Isa (AKA Pocketfish) (pocketfish) wrote in dimanche, @ 2008-06-21 12:35:00 |
|
|||
Entry tags: | tutorial: layout |
RPG Journal customisations - no sidebar
This is a tutorial like the previous one but in this one we make a layout without a sidebar, and with the 'friends', 'user info' etc links just below the header image instead.
See examplelayout2.
Base CSS from HERE at bloody_layouts.
In this tutorial;
1. Journals with no sidebar.
2. Colour customisations.
CSS files
1. White layout, 600px wide.
2. Black layout, 600px wide.
Background images
Please upload them to your own server/webspace.
1. Black.
2. White.
Tutorial; journals with no sidebar
Step 1 - The basics
1. Go to View -> Customise Journal
2. Under "Basics" choose "S2"
3. Save changes
4. Under "Look and Feel", click the first drop down box and choose the layout "Quite Lickable"
5. Save changes
Step 2 - The CSS
1. Under "Custom Options" scroll right down to the bottom
2. For Use layout's stylesheet(s) select "No"
3. Open this CSS file
4. Either copy and paste it into the big box labelled "Custom stylesheet" or save it to your own webspace
5. Save changes. Now, to the editing.
Step 3 - Editing The CSS
I've simplified the CSS for this so there's really nothing complicated to change or alter. Anyways.
1. Make your banner. For the sake of this example we'll say the banner is 600px wide.
2. Change the main background image if you want to;
body {
background: #fff url("http://img172.imageshack.us/img172/6708/bgrl8wd3.jpg ");
margin: 0;
padding: 0;
border: 0;
font-family: verdana, sans-serif;
font-size: 10px;
color: #9a9a9a;
width: 100%;
height: 100%;
}
#title {
color: #fff;
background-color: #000;
background-image: url(http://img138.imageshack.us/img138/8855/exhe2.jpg);
background-repeat: no-repeat;
background-position: top center;
height: 352px;
margin: auto;
}
#shadowhack1 {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 660px;
background-image: url();
background-position: top left;
background-repeat: repeat-y;
}
body {
background: #fff url("http://img172.imageshack.us/img172/6708/bgrl8wd3.jpg");
margin: 0;
padding: 0;
border: 0;
font-family: verdana, sans-serif;
font-size: 10px;
color: #9a9a9a;
width: 100%;
height: 100%;
}
#pagecontainer {
background-color: #fffffe;
color: #787162;
margin-left: 32px;
margin-right: 32px;
border-left: 0px solid #000000;
border-right: 0px solid #000000;
}
.pbox
.pbox a:link, .pbox a:active, .pbox a:visited
.pbox a:hover
.pbox li.current
a:link, a:visited
a: hover