CSS Journal Tutorial
Ok, this journal is to teach you how to use CSS in your journals, please note that it is only available to senior members and subscribed members. So, when you're in your journal section, add a new one, go to the bottom and click on the Add CSS. There will be some links to CSS help at the end of this journal.
Now, we will first edit the Journal Box, this is where everything of the journal is in. To do this, we use the below, add it to the CSS Box.
.journalbox{
}
And now you are able to add whatever you want in there, background colour, text information, border stuff, etc. Now for the the top journal, this is where the journal title and and entry date is shown. To edit this section, you use the code below.
.journaltop{
}
Use this bit to edit the background, any borders, entry date font, etc.
.journaltop h2{
}
Edit the journal header text with this.
Now this next one I didn't use, because I used a different way, but journal text is the body area of the journal, it covers the whole part of header, journal entry and footer.
.journaltext{
}
I'm sure you want to be able to change the "Currently" list, such as listening to, mood, reading, etc. To do this, you can use the following
.list {
}
.list a{
}
This will change the background colour, etc.
.list li{
}
The listing of the boxes.
What else do we need? How can you make it like mine, well, i've used my own divs. To do this, we'll use an example for my header section. In the header, add something like, with no spaces:
<d iv cl ass="header">Text here</di v>
Then in the Edit CSS section, add this
.Header {
background-color: #aec3b8;
padding: 1px;
color: #709164;
font-family: tahoma;
font-size: 9px;
text-decoration: none;
border-left: dashed 2px;
border-right: dashed 1px;
border-top: dashed 1px;
border-bottom: dashed 1px;
text-align: center;
}
So what does all this mean?
background-color: #aec3b8;
The colour of the background, the #****** is a hexidecimal colour number, there is a link at the bottom of this journal.
padding: 1px;
The padding of the div, this makes it so that the text isn't right next to the end.
color: #709164;
Colour of the text that you want.
font-family: tahoma;
The family or face or name of the text that you want, such as Verdana, or tahoma, or Arial, etc.
font-size: 9px;
The size of the fone.
text-decoration: none;
We don't want anything on the font, no decorations.
border-left: dashed 2px;
Border on the left, a dashed border 2px wide.
border-right: dashed 1px;
The right border, dashed 1px.
border-top: solid 1px;
The top border, solid line 1 px.
border-bottom: dashed 1px;
Bottom border, dashed 1px.
text-align: center;
Everything will be in centered.
border-color: #709164;
The colour of the borders you want.
I hope this has helped you and if you have ANY questions at all regarding the Journal CSS, then please feel free to ask.
Another journal done by myself can be seen at *
Magicka
Links
Each link will take you to their CSS section.
HTML Help
w3schools
Zengarden
Hex Colour Picker
Devious Comments
-duh?- CSS illiterate.
--
"Love is when your puppy licks your face even after you left him alone all day."
~Mary Ann, Age 4
Thank you
--
Mel
Suppose what we call "evidence' (the things we believe to be true) is only what we see because it is the only thing we know to look for?
I want to put in sub divisions but the code keeps appearing on the journal, rather that the sub div box, eg.
<d iv cl ass="header">Text here</di v>
i'm putting it in the header bit and making sure there are no spaces between the letters ( like it says) but its not working - or am i doing something wrong?
A little help pleez if you could spare a moment
--
Does Commissions for pennies
*~~"I was gifted with wings, and for my impertinence, i was damned"~~*
--
avatar made by angelishi, to deviation: [link] to profile: [link]
--
avatar made by angelishi, to deviation: [link] to profile: [link]
Previous PageNext Page