Through CSS it is possible to style the different link states - normal, hovered, visited, focused, and active - using what are called pseudo-classes:
a:hover{
color:#f00;
}
Pseudo-classes (:hover, in the above example) are written with a preceeding colon, and are as follows: :link for the normal state, :hover for when the mouse is over the link, :visited applies to links that have been visited (you're probably accustomed to these being a shade of purple), :focus applies to links that currently have focus (you might be familiar with focused links having a dotted line around them), and :active applies to links that you just clicked on and are looking at (the active state is usualy only seen when links are opened in new windows/tabs, or while you wait for the page to load).
Though :link applies to the normal state of links, you can also use plain old a - which will apply properties across all link states unless you specificaly add the other states below to overwrite them, ie:
a{
color: blue;
text-decoration: none;
}
a:visited{
color: purple;
}
a:hover{
color: red;
text-decoration: underline;
}
The order you place the link pseudo-classes is very important, if you want it to act as you'd expect they must be in the following order: a, :link, :visited, :hover, :active, and lastly :focus.
While :link, :visited and :active only work on links - :hover can be used on anything (so long as you're not using Internet Exploder - which is the village idiot when it comes to CSS, and only recognises :hover when it's applied to a link tag).
You can also change more than just the colour on :hover - you'll see what I mean in some of the techniques in the Cool Stuff section.
In CSS, if you have two or more rules that point to the same element and have the same property specified the browser must decide which one it should use. The way it does this is by calculating the specifity (or weight) of the selector.
The more specific your selector is (ie the more you narrow down your selection - for instance writing .journalbox .journaltext .myDiv b{...} will win over b{...}, the more weight it carries, and selectors of heigher weight have their properties applied.
The use of !important is an artificial way you can boost a propertie's weight without writing a longer selector:
.journaltop{
background: transparent !important;
}
They're called Cascading Style Sheets for a reason. If you have an element (parent) with many other elements within it (children of the parent), you can specify the font-color in the parent and all the children will be the same color because the property cascades down.
Another neat example of the cascade is in the border property. If you use shorthand properties (and you should!) without specifying a colour (ie border:1px solid; instead of border:1px solid #f00;),
it will inherit the text colour as per the cascade. This means if you later decide to change the colour of the text, you wont have to change the border colour too.
Simply, if you have two elements next to eachother, and both have 50px margins - the margin between them will be 50px, not 100px. Whether one margin eats the other, or if they both become 25px is one of life's great mysteries.
...note that this section is incomplete.
You might already know HTML and CSS, but on deviantART there are some restrictions on the HTML and CSS you can use, as well as some other quirks you will need to keep in mind when writing your journal skins.
Only div and img tags can have class names applied to them. In the real world of webdesign you can give anything a class name, so experienced web designers will find this restriction most annoying of all (I know I do) - but we can make do.
When giving your elements class names, be aware that if you give an alement a class name that deviantart already uses you might get some unwanted results.
For instance, it'd be a bad idea to name anything nav because deviantart uses this class already, and it applies some rather annoying padding to any links contained within it.
You shouldn't worry too much about it, but if you find strange things going on when you didn't make them happen (like random borders, colours or backgrounds) then keep in mind it might be your class name.
While you can use class names on images and divs, you can't give anything an id. Experienced web designers might find this irritating at first, but in practice it doesn't matter much at all, as you can get by with class names just fine.
Just like everytime you point, you tear a hole in the air and fairies fall out - every time you hit that enter key on your keyboard, deviantART will create a break tag (<br />).
Break tags are what create new lines, in other words what lets you put things under each other and make your journals look like they are made up of paragraphs. Real websites use paragraph tags for this, but to make things easy for you deviantART just converts your newlines into break tags.
They have the potential to cause much annoyance when it comes to your journal and CSS, as they can create unexpected (and unwanted) spacing in your designs.
There are two solutions:
Don't hit enter unless you want a break tag. It's a simple and elegant solution that works most of the time, only becoming a hassle when you're attempting some of the more complicated techniques (when sticking everything on one line makes things hard to follow). For these cases we use solution numero two-o.
Numero two-o involves using CSS to hide all break tags (with br{display:none}, then un-hiding them inside 'safe' elements, for instance, paragraph tags (with p br{display:block}). This makes writing journal more like building real websites, where all paragraphs need to be in paragraph tags... which can be equally annoying. So it's a trade-off really.
This method can also be confined to single elements - perhaps you have a nav menu/list and don't want line breaks in the journal source to create visible breaks in the final skin - just use something like .navMenu br{display:none}.
You can also turn break tags off then on again. I do this for lists, because without it lists become a mess in my journal source as I try to avoid having deviantART insert break tags where they don't belong:
ul br{display: none}
ol br{display: none}
li br{display: block}
In the code above, you turn break tags off inside lists, but turn them back on if they're inside lists items - this lets you write lists without having to squash them all onto one line.
When writing your journal CSS, you're going to need to know the class names of exisiting elements (like the header, journal body and moods list), otherwise you wont be able to write your selectors.
Rather than write half a dozen paragraphs describing each element, I'll just point you to my Journal Structure: a reference (some awesome members of deviantART have also translated it into Turkish, Italian, Spanish and Portuguese).
Mentioned in passing in my journal structure reference, you can create your own divs, give them class names, and style them to your liking.
The HTML would look as follows:
<div class="thumbs"> ... </div>
In this example, you could create a special box for your thumbs. You could for instance, give it a border, special background, or even disable the thumb shadows:
.thumbs .shadow{background-image: none !important}
You don't have to give things box-like appearances though, you can use div tags simply to change font colours/sizes for special text, in my journal for instance I use the following to create section breakers:
.breaker{font-style:italic;border-bottom:1px dotted;padding-bottom:4px}
As I mentioned earlier, you don't need to include a colour value if you just want it the same as the text colour. Because div
tags are block level (more on that later) if you try use them to change the font-color or style of text within a paragraph it will look something like this the solution is to force this div to display inline with display:inline - this will make it flow with the rest of your text, just like bold tags for instance.
You'll find that Firefox listens to your CSS rather nicely, with IE choking on bits a peices. A crafty way to shout at IE and make it listen to you is to use the underscore property hack.
For any property you wish to be applied in IE only, simply add an underscore before it.
Aside from the following restrictions:
id's in your selector, nor can you have grouped selectors)/* this is a comment */)@import isn't allowed...deviantART does a few things to the CSS you write. Firstly, it sticks a lot of extra stuff to the beginning of your selectors, partly to allow you to have different CSS for different journals without causing conflicts, but also so that you can't mess with things outside of your journal. So when writing your selectors, don't bother including anything outside of .journalbox. By viewing your page source you'd see your selectors are changed to something like:
body.deviant div.bubbleview div.journalcontrol#journal-10344003 ... { ... }
Secondly, it re-formats your CSS to be presented as per the 'official' convention, ie:
.journalbox .journaltext a{
font-size: 20px;
background: #FFCC00;
}
This doesn't really matter, as aside from making your code look pretty, it has no real impact on your CSS.
Now, the moment you've been waiting for, the cool stuff.
You might have seen some of these in fellow deviant's journals, I've included links where possible.
A simple trick to hide spoilers from fragile eyes is to turn the text and background the same colour - highlighting the text then reveals the secret message.
Example SPOILER WARNING: Usually, the spoiling information is preceded by a warning ('SPOILER!'), or the spoiler itself has to be highlighted before it can be visibly read on the web page by those keen for details and not fazed at the thought of such potentially plot-revealing information. Occasionally, these warnings are omitted, accidentally or deliberately (see below), and some unwitting readers have had films, books, television programmes and other works that they were looking forward to experiencing spoiled. - from Spoiler on wikipedia
The CSS for this is rediculously simple:
color: #000; background: #000
On deviantART we can't give any inline elements class names, so to use this technique with a div tag you'd also need to include display: inline. Alternatively, you can nest bold and italics tags as <b><i> ... </i></b> (or any other combination you wouldn't normaly use) and then write your selector accordingly (for that example: b i{...}).
As seen in the journals of bleedsopretty, smashmethod, grubin and myself - they're images/sprites in our headers that when hovered over change to something else.
So far they've all been videogame sprites, but you could make your own images quite easily, for instance you might have a header of a night sky filled with twinkling stars - when people hover a particular spot you could make a star spin/brighter or even have a shooting star dash by. Use your imagination.
It's a two part process to make this work, firstly you need to add some HTML to the header (or footer) of your journal, and then you have the CSS to make it work.
The HTML is basicaly just a set of empty div tags that have classes applied to them so that you can reach them with CSS. It'd look something like this if for example we where making a Super Mario Bros. themed journal:
<div class="custom_images"> <div class="mario"></div> <div class="luigi"></div> <div class="goomba"></div> <div class="peach"> <a href="http://www.example.com" title="rescue the princes!"></a> </div> </div>
Now for the CSS:
.custom_images br{display:none}
.custom_images div{position:absolute}
.mario{width:16px;height:32px;top:150px;left;100px;background:url(http//www.example.com/mario.gif) no-repeat}
.mario:hover{background-image:url(http://www.example.com/mario_hover.gif)}
.peach a{display:block;width:16px;height:32px}
The first line hides all the break tags that will be added by deviantART. By absolutely positioning the sprite divs, we're basicaly picking up the sprites and moving them somewhere else, but the break tags get left behind - creating unwanted spacing.
To save us from repeating position:absolute for every sprite, we have the second line, which states that every div inside .custom_images will be absolutely positioned.
I've skipped the CSS for .luigi, .goomba and .peach because it's the same as .mario, only with the dimentions, position and background url changed accordingly. You would need to have it though, I've just dropped it for simplicity here.
The first selector for .mario sets up the size, position, and background sprite we want to use. Because we're using a div, and applying the sprite as a background, we need to specify a width and height, otherwise it'd be invisible (as it has no actual content). top positions it 150 pixels from the top of the journal, and left 100 pixels from the left - you can use bottom and right instead of top and left respectively if you want the sprite positioned from the bottom or from the right.
When you position something absolutely, it's in relation to the next parent up the HTML tree that is positioned relatively (with position:relative) - in most cases this is the body tag - so position: absolute; top: 0; left: 0; would move .mario to the top left corner of the page/window. deviantART sets position relative to the journals - so position: absolute; top: 0; left: 0; will move .mario to the top left corner of the journal. If you where to set .custom_images to be positioned relatively, .mario would be 'trapped' inside it - which could be what you want, but probably not in this case.
Next we have .mario's :hover. All we want to change is the background image, so we just specify the new background-image.
If we had used the shorthand again, we would have needed to include everthing else - in this case it was only a 'no-repeat', but it could have been more.
Now, in the final line you'll see that I gave .peach a
special treatment - this is because it's a link, and links work a bit differently to divs. In HTML, there are two types of elements - block level, and inline. Inline elements are things like links and bold tags - and block level elements are things that span the width of their parent, and examples include divs, heading tags and paragraph tags. We need to make .peach a the same size/shape as .peach (the div, wich like .mario,
has a sprite background etc) - so that the whole sprite is a clickable link - so for this we need to make it act like a block, as you cannot specify width/height on inline elements.
In the real world you wouldn't have peach's link inside a div - you could put the class 'peach' straight onto the link, but because you can't do this on deviantART the extra div is needed.
One problem with this technique is that there will be a delay while the hover image is loaded. On faster connections this delay will be less noticed, but if you want to get around this, what you can do is you can put both states of the sprite in one image, one below the other. Then, instead of specifying a second image in the hover state, you use background-position to move the background up, revealing the hover state. The code to do this would look like the following (keep in mind you'll still need all the other properties mentioned above):
.mario{background:url(http://www.example.com/mario.gif) 0 -100px no-repeat}
.mario:hover{background-position:0 0}
As seen in my button/badge group. Also, CSS-efying maps literally.
CSS has a special property for specifying an image to use as a list bullet instead of the default one: list-style-image: url(bullet.gif); but it doesn't give you any control as to the position of the bullet, so we use a simple trick to workaround this.
Instead of using list-style-image, we apply the custom bullet as a non-repeating background to the list items. The following CSS has been applied to the list below:
ul{list-style:none}
li{background:url(http://i.koopseht.net/f/silk/bullet_red.png) no-repeat 0 1px;padding-left:18px}
As seen in autumnights journal
As seen in mynti's journal, and those she made for other deviants.
As seen in zikes' journal
ie. adding a background image to indicate it has been visited
Basicaly, achieved by using class names on images. Current technique requires that the image have a src to 'set' it.
Create a div with a classname, and put a title in bold tags, and the content in tags ie:
<div class="aboutjournal"> <b>About this journal</b> <sup>Bla bla bla</sup> </div>
Then in your css have:
.aboutjournal sup{display:none}
.aboutjournal:hover sup{display:block}
.journaltop{font-size:0}