Icyworlds.Net - CSS Test

CSS Test

Backgrounds and Borders

Background:

Here you would put the background colour that you want your journal to have in. To do that, just use the #xxxxxx format code for the colours - in case you don't know the code for your colour, go to one of these sites: (Colour Picker 1) (2), chose the colour you want to use, and put the #xxxxxx code found in the middle of the tool into the appropriate fields here. You can use this tool on all the other #xxxxxx codes you need here, too ^-^

(Note: Make sure you enter the colours with the leading # sign. Just entering 183270 (for example) won't work, whereas #183270 will.)

Title Background:

This is the background image - it will be displayed at the top of your journal, where the title is as well. So - how does this work? First of all, you need to upload your image from your computer either to tinypic.com, imageshack.us or photobucket.com. Once you have done that, it'll give you a page with a lot of different links - at the very bottom is a field named "Direct link to image" ("URL Link" for tinypic.com) - copy the content of this field and paste it in the box with the "http://" in it and you're done! (Please note - for this CSS-test thingy, the image has to be on tinypic.com, photobucket.com or imageshack.us for security reasons - no other addresses will work)

Journal Background:

This is the background image of the main journal area (where your journal's text is), if you need one. How does this work? First of all, you need to upload your image from your computer either to imageshack.us, photobucket.com or tinypic.com. Once you have done that, it'll give you a page with a lot of different links - at the very bottom is a field named "Direct link to image" ("URL Link" for tinypic.com) - copy the content of this field and paste it in the box with the "http://" in it and you're done!

Combined Background:

If you - instead of a separate title and journal body background - would like to have one single background behind your journal, use this one - it will simply put the background image you chose behind your journal.

Footer Background:

This image would be put in the bottom (where the number of comments and the "Previous Journal Entries" links are) of your journal. (Please note - for this CSS-test thingy, the image has to be on tinypic.com, photobucket.com or imageshack.us for security reasons - no other addresses will work)

Journal Padding (Top):

If you use a background behind your text, it could happen that you want to move your text just a little down - that's what the "padding" is for: If you write something such as "5px" in there, your whole text gets moved five pixels farther down. If you don't need this, just leave it empty.

Journal Padding (Sides):

If you don't want your text to stick all the way to the sides, you can enter something such as "2px" or similar in here to add some padding between the left and the right border of your journal and the text. Leave this empty for deviantArt's default padding.

Moods:

Even rows:

(Colour Picker 1) (2)

Odd rows:

(Colour Picker 1) (2)

Text Colour:

(Colour Picker 1) (2)

These are the colours of the mood entries (id est, the "Watching: xxxx" ones). If you want to set those, use the #xxxxxx codes - otherwise (especially if you use an image), just leave them at "transparent" - that will make the part with the moods blend in with the background of the journal.

Border:

Width: Colour: (Colour Picker 1) (2)

This would be the colour of the border that surrounds your entire journal. You can also make the border thicker or thinner, by changing the value in the "Width" field (standard is "3px", "4px" would be a little thicker, "2px" would be a little thinner)

Add a border around the Journal Title section, too
Add a border around the main Journal Text section, too

Font Colours and Sizes

Title:

Text-Colour: Background-Colour: (Colour Picker 1) (2)

These are the colours of the text and the background the big journal title is in. (Note that if you put in an image in the "Title Background" section, it will go over the background colour you put in here. The background colour will only be visible on places where you don't have any images)

Subtitle:

Text Colour: Text Size: (Colour Picker 1) (2)

Aaand this is the colour of the subtitle (the "Date: xxxx" thingy below the title). If you don't want anything fancy, just use the same colour that you did for the title already. In the "Text Size" field, you can choose how large the subtitle should be - you can leave it at default (that's "10pt") or type in your own size. For example, "8pt" would be slightly smaller than the default, while "12pt" would be slightly larger.

Text:

Text Colour: Text Size: (Colour Picker 1) (2)

That's where you'd put the colour, which you want the text of your journal to be, in. If you don't want anything fancy, just use the same colour as you did for the subtitle. In the "Text Size" field, you can choose how big the font of your journal text should be - again, you can leave it at default ("10pt") or type in your own size (such as "8pt" or "12pt"). Experiment!

Links Colour:

Normal: Hovered: (Colour Picker 1) (2)

This is the colour the Links are in. "Normal" is the colour that the link usually is in, however, if you want you can give it a different colour if someone moves over it with the mouse. If you make the "hover" field empty, the colour will not change if someone moves over the link with the mouse.

Bottom Links:

Colour: Hovered: Background: (Colour Picker 1) (2)

And finally, you can use a different colour for the "XX Comments | Previous Journal Entries" links at the bottom. If you're feeling lazy and don't want them to have a different colour, just clear these fields. (Again, "Normal" refers the colour that the link usually is in, and "Hovered" the colour that the link changes to, if someone moves over it with the mouse).

Specialities and Submit!

Hide Journal Icon?

Hide the journal icon.

If you like, you can hide the blue journal icon that's displayed left to your title.

Hide the "Moods" section in this preview.