Isa (AKA Pocketfish) (pocketfish) wrote in dimanche, @ 2008-06-20 17:11:00 |
|
|||
Entry tags: | tutorial: layout |
RPG Journal customisations - with sidebar
(Moved from my personal journal)
See examplelayout.
Base CSS from HERE at bloody_layouts.
Also note; by attribute I mean the items that go within the curly brackets {}.
In this tutorial;
1. Making a pretty journal.
2. Further customisations on your journal CSS.
3. Adding your default icon to your sidebar.
4. Customising colours. (coming soon)
Feel free to take and use these as you will, using the tutorials below to make any edits you want to. :)
CSS files
1. White layout; 600px wide
2. Black layout; 660px wide
Background images
Please upload them to your own server/webspace.
1. Black.
2. White.
Tutorial 1; making a pretty journal
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 you can edit it about. ;D
Step 3 - Editing The CSS
1. Obviously you want your own banner, so make or find a banner that is 600 pixels wide. (You'll find out about changing/different widths later. ;D)
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: bottom center;
height: 352px;
width: 600px;
margin: auto;
}
#title {
color: #fff;
background-color: #000;
background-image: url(http://img138.imageshack.us/img138/8855/exhe2.jpg);
background-repeat: no-repeat;
background-position: bottom center;
height: 352px;
width: 600px;
margin: auto;
}
#shadowhack1 {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
width: 664px;
background-image: url();
background-position: top left;
background-repeat: repeat-y;
}
#paraphernalia {
float: left;
width: 150px;
font-family: "Tahoma", "Georgia", "Helvetica", "Arial", sans-serif;
padding-bottom: 15px;
padding-top: 10px;
margin-top: 10px;
}
#main {
margin: 0;
min-height: 100%;
padding: 0 0px 0 0;
width: 450px;
float: left;
margin-top:10px;
}
#paraphernalia {
float: left;
width: 149px;
font-family: "Tahoma", "Georgia", "Helvetica", "Arial", sans-serif;
border-right: 1px solid #AFAFAF;
padding-bottom: 15px;
padding-top: 10px;
margin-top: 10px;
}
#journalinfo {
display: none;
}
.journallinkbar {
display: none;
}
#journalinfouserpic {
margin-bottom: 10px;
}
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;
}
a:link, a:visited
a: hover
.pbox a:link, .pbox a:active, .pbox a:visited
{
line-height: 16px;
border-bottom: 1px dotted #D8D8D8;
display: block;
padding-right: 5px;
padding-top: 2px;
margin: 0px 0px 0px 0px;
text-transform: uppercase;
font-family: "Tahoma";
font-size: 9px;
color: #6A6A6A;
text-align: right;
text-decoration: none;
}
.pbox a:hover
{
color: #fff;
line-height: 16px;
display: block;
padding-right: 5px;
background-color: #C0C0C0;
text-decoration: none;
}
.pbox {
line-height: 16px;
display: block;
text-transform: uppercase;
font-family: "Tahoma";
font-size: 9px;
color: #6A6A6A;
text-align: right;
}