So, I think it's fair to say you know that CSS is now available for subscribers and seniors. When I heard about it, I swore to myself I wouldn't help people out (I know, nasty little thing, aren't I?) but when more people started noticing that CSS was now a big thing, I started getting notes and being poked in dAmn chatrooms.
"Nyssa, how do I do this?"
"Nyssa, I need your help!"
And then I found myself helping people. I can't help myself, so that's why I am doing this. I guess you could say I'm also doing this because it's clear no one wants to see deviantART turn into something from the twilight zone. Let's keep our CSS clean and stylish.
I'm providing a CSS template. It's true people have already started, but this is a little more than just the basic colour changes. This template includes two div classes for extra styling to a journal. It's also true that it's based on my very own CSS you see in my journal, with the exception of images (which I have removed) and some things people probably wouldn't notice.
This is a rundown of my template. It will explain what each section will do to your journal. What will change what.
.journalbox {
background-color: #------ !important;
border-color: #------ !important;
border-width: 1px !important;
color: #------ !important;
}
This is what contains everything in your journal. You can think of it like a wrapper if you like, holding a chocolate bar. If you look at journals, you can see they have a border around them. This can be changed here, as well as the colour changed.
.journalbox .journaltop {
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-size: 10px !important;
color: #------ !important;
background-color: #------ !important;
height: 90px !important;
text-align: center !important;
}
Controls the header area of a journal where you find the date and time it was posted etc. Using background-image: url ('url') !important; would apply an image into the header, but since I've removed these from my template, we won't go over it (yet anyway). This section will, as it is now, change the background colour, height, alignment of the test and change the text itself.
.journalbox .journaltop img {
display: none !important;
}
What is this?! Nothing too important. You can delete it if you want to. All it does is remove the journal icon from the header of the journal, which can look pretty good.
.journalbox .journaltop h2 {
font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif !important;
font-size: 22px !important;
color: #------ !important;
padding-top: 15px !important;
text-align: center !important;
}
This one controls the title of the journal. Say you title your journal "My Wonderful Journal", this will control how it is displayed to yourself, and everyone else.
.journalbox .list {
background-color: #------ !important;
color: #------ !important;
text-align: center !important;
}
.journalbox .list .a {
background-color: #------ !important;
color: #------ !important;
text-align: center !important;
}
These two will control the display of the currently sections you fill in (or not) when you write a new journal. If you want the rows of these to display as different/alternate colours, just a different colour in .list .a from .list.
.journalbox .journaltext {
color: #------ !important;
font-family: Verdana, Arial, Helvetica, sans-serif !important;
font-size: 11px !important;
padding-top: 0px !important;
padding-left: 15px !important;
padding-right: 15px !important;
background: #------ !important;
text-align: justify !important;
}
This controls the content WITHIN the journal. Like before, think of it like a chocolate bar. The first wrapper holds the whole chocolate bar, and the inner wrapper would be like the chocolate around the inner ingredients of the chocolate bar.
.journalbox .journaltext .jcustom {
margin: 0px 5px 0px 5px !important;
background-color: #------ !important;
color: #------ !important;
font-size: 11px !important;
padding: 15px 15px 15px 15px !important;
display: block !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important;
border-color: #------ !important;
width: auto !important;
}
Okay, this is where we start on the custom divs. Divs can add a whole new look to your journal. It can give a different style for each 'section' of your journal, quite like mine, if you've already seen it. Basically, it applies a 1px border around the content, as well as a different background colour from the rest of your journal content. Border styles, widths etc can be changed here too.
.journalbox .journaltext .titles {
font-family: 'Trebuchet MS', Verdana, Arial, Helvetica, sans-serif !important;
font-size: 20px !important;
color: #------ !important;
text-align: center !important;
border-style: solid !important;
border-width: 1px 1px 1px 1px !important;
border-color: #------ !important;
background-color: #------ !important;
width: auto !important;
}
Another custom div, the second one. This has been created to go INSIDE the first one, for the titles of each 'section' of your journal. It's not all that much different from the first div.
.journalbox .journaltext a {
color: #------ !important;
text-decoration: none !important;
}
.journalbox .journaltext a:hover {
color: #------ !important;
text-decoration: underline !important;
}
Controls links within the journal content. a:hover controls the colour and style when your mouse pointer is over the link.
.journalbox .journalbottom {
background-color: #------ !important;
}
Contains the links at the bottom of your journal. You really only need to change the background colour here. In my journal, it has the same background colour as my .journaltop and the .journaltext.
.journalbox .commentslink {
background-color: #------ !important;
color: #------ !important;
font-size: 11px !important;
text-decoration: none !important;
font-weight: bold !important;
}
.journalbox .prevlink {
background-color: #------ !important;
color: #------ !important;
font-size: 11px !important;
text-decoration: none !important;
font-weight: bold !important;
}
These two are pretty straight forward. On the userpage at the bottom of a journal, you will see two links. One leads to the comments of the journal on the userpage. One leads to the previous journal entries. .commentslink obviously controls the link to the comments and .prevlink controls the link to previous journals.
If none of these explainations have helped, ^thespook has a visual aid which might be a little easier to understand, although not everything in my template is shown on it, and just the very basics. You can see it here. An excellent and must have resource, even if you understood this rundown.