Shop Mobile More Submit  Join Login
CSS for subscribers is finally here!! Your local neighbourhood zilla is here to give a few pointers to the novice CSSers who want to give their journals a make over with a few pointers and a list of handy resources.

As a general rule it is better to keep things simple, not just if you are a beginner. Remember the following points when you design your page:

1. Mock it up Try your design in Photoshop first (or which ever app you have) that way you can play with colours and styles without needing to refresh your journal too much.

2. Just because you can, doesn't mean that you should... try to avoid making things like the text size too small. The current journal style works well, so just start simply by changing colours.

3. Contrast is good. Making the colours of your text and links the same, or very close is bad m'kay. Make it easy for people to differentiate between things. Also, making your journal text too dark on a black background or too light on a bright background can be tiring on the eyes of the reader, resulting in them just not reading your journal!

4. Complexity-schmexity Complex backgrounds are all very well, but if they interfere with the journal text then again like point 3, you have lost your reader. Plain colours or simple gradients are fine. Remember that the text is the most important part!

5. K.I.S.S - Keep it simply sexy! You are not reinventing the wheel here, there is no point in trying to be too clever at first. The journal CSS is limited anyway so likely as not you will find you cannot do the complex overlays you are trying for.

6. It's not a competition. The initial flurry of activity over this will generate some friendly competition as people try to push boundaries. This is all well and good, but leave this to the 1337 h4x0r5 and try and do a journal which reflects your personality and style more. The journal is about you and a good journal design will help to enhance that. (unless you are me and have wierd freaky fingers and stuff and everyone thinks you are a wierdo)


For those of you who want to have a crack at it, I've collated a list of some of the more usefull articles and features floating around so you don't have to go searching.

journal stylesheet generator - by tobyf
This is the ultimate one stop shop for your journal. A great template generator for anyone that needs something simple and doesn't really want to learn the complexities of CSS.

Basic Journal Template by quinnypin
Not-So-Basic Journal Template by quinnypin
Both do what they say on the tin ;)

dA v4 template by zacthetoad - A neat little template to make your journal look like Version 4 of dA. How very retro...

Journal Structure: a reference by thespook - A great visual reference of what the different classes represent on the page. Essential if you are new to CSS.

The BasiCSS by zikes - A good starting point for those that want simplicity.

CSS Rundown + Template by NyssaCreative - contains a tutorial to help you through the basics and on to more complex stuff.


For those that don't want to have to struggle, why not try entering the following competition:

Get Yourself a CSS Journal - Contest
being run by duhcoolies - head over to his journal to see more info.

Add a Comment:
 
:iconpaups:
Paups Featured By Owner Nov 30, 2008  Student Traditional Artist
Oh, man... I just don't understand how this thing works! :noes:
Reply
:iconretromissile:
Retromissile Featured By Owner Oct 20, 2008  Hobbyist Digital Artist
Useful =D
Reply
:iconariichan:
ariichan Featured By Owner Sep 25, 2008
What size it need to be?
Reply
:iconoonamoo:
oonamoo Featured By Owner Sep 21, 2008
this is really good thank you xoo
Reply
:iconmindfucking:
Mindfucking Featured By Owner Aug 10, 2008
I used almost every piece of information on thyis page (thank you very much :hug:) but I didn't found a solution for a problem: when I feature thumbnails on my Journal, they have a grey border, and even if I tried to add more css instructions to remove it, it still remain (but I noticed that, unlike my own, many journals have the thumbnails without border).
What should I do? Is there a reference about this problem?
Reply
:iconrackle23:
rackle23 Featured By Owner Aug 9, 2008  Student
I found this very helpful. Thanks :)
Reply
:iconcaptain-chase:
Captain-Chase Featured By Owner Jul 28, 2008
Not a new member, but I still don't get this, can anyone answer this question?
I just want to change my font color but I can't seem to get it to work; so I'm wondering, can I not even do that without a subscription??
Reply
:iconemra-art:
emra-art Featured By Owner Aug 1, 2008  Hobbyist General Artist
I'm not sure, but I think you need to be a suscriber if you want to change your font color ^^ Maybe you'll be able to find a better answer in the FAQ :)
Reply
:iconduskspark:
DuskSpark Featured By Owner Sep 18, 2008
How do I get the code to add CSS?
Reply
:iconemra-art:
emra-art Featured By Owner Sep 18, 2008  Hobbyist General Artist
I don't know anything about CSS (and I'm not a suscriber) but I hope this will help you ^^:

FAQ #747: How do I change the style of my Journal?

Good luck :)
Reply
:iconduskspark:
DuskSpark Featured By Owner Sep 19, 2008
thx you, i know now!
Reply
:iconkynky1:
kynky1 Featured By Owner Jun 9, 2008  Hobbyist General Artist
Before i get accused of noob-dom i just cant seem to get my journal on the left hand side of the page, i'm thinking this could be to do with my CSS! Also my Poll doesnt seem to show, been fiddling for hours and the FAQ is no help, any ideas or am i just an idiot???
Reply
:icondarknessarts:
DarknessArts Featured By Owner May 4, 2008
:D
Reply
:iconteine-tor:
Teine-tor Featured By Owner May 2, 2008  Student General Artist
WOOOOHOOOO!!!! That's awesome. Danke.
Reply
:iconcarbon-a:
Carbon-A Featured By Owner Apr 29, 2008
:dance: Yay! ;)
Reply
:iconmarianapalova:
MarianaPalova Featured By Owner Apr 19, 2008  Professional Digital Artist
how can i do a transparent journal?
Reply
:iconnixity:
Nixity Featured By Owner Apr 14, 2008  Student Digital Artist
How can I add an image to the journal (not a link to an artwork)?
Reply
:iconnixity:
Nixity Featured By Owner Apr 14, 2008  Student Digital Artist
Oh nvm! I found it. Sorry about that '^^
Reply
:iconmeditation1234:
Meditation1234 Featured By Owner Feb 15, 2008  Student
I am confuse.....
Reply
:iconfrozenpandaman:
frozenpandaman Featured By Owner Apr 8, 2008  Student General Artist
Reply
:iconjablesi:
jablesi Featured By Owner Dec 2, 2007
Thanks sooo much it really helped meh out ^_^-
Reply
:iconlioar:
Lioar Featured By Owner Nov 27, 2007
How do you center a picture in your journal? I tried < c e n t e r > < / c e n t e r > but it didnt work presumably because it is CSS, can you help me?
Reply
:iconladyjinx:
LadyJinx Featured By Owner Mar 29, 2008
To center images in your journal you use this:

<div align="center">IMAGE URL HERE</div>

:D
Hope that helps out, if not note me.
Reply
:iconezgadi:
ezgadi Featured By Owner Nov 16, 2007
This was very helpful. Thank you.
Reply
:iconraayeed:
RaaYeeD Featured By Owner Nov 14, 2007  Hobbyist Photographer
Great News :blushes:
Reply
:iconishtaryu:
Ishtaryu Featured By Owner Nov 7, 2007
Hey, this will be useful when I subscribe! :D
Reply
:iconmiusaionjigirl:
Miusaionjigirl Featured By Owner Nov 7, 2007
eekkk I can't add image in my journal....
Reply
:icontraconian:
Traconian Featured By Owner Oct 21, 2007  Hobbyist General Artist
I have CSS but I just want to figure out how to get a text box...like to seperate everything
I just want to know that...I've tried to figure it out but everytime I try to I fail ><
a little help plz?
Reply
:icongreyioutcast:
GreyIOutcast Featured By Owner Nov 8, 2007
Are you talking about block display type?

If you mean to have it so it would be like:

_______
| border |
| | Text ||
| |Text_||
|______|

Like that?

That is done by the "display" property. Value can either be Inline, or Block. Block is the thing shown above. Inline is just part of the text.
Reply
:icondrachenmagier:
drachenmagier Featured By Owner Jan 5, 2008  Hobbyist Traditional Artist
Uhm... I have the same question as Traconian but I don't think I understood that explenation. Could you repeat it for me please? I was looking for a posibility to create a lighter textfield in the middle of the journal with the "normal" bg all around it. Like :icondamntorren: did it with hers (just as example. I don't want to copy hers)
Reply
:icongreyioutcast:
GreyIOutcast Featured By Owner Jan 7, 2008
Okay, so to make like a separate text box, like one with its own border and padding and everything, have a <div> tag around the text and make sure to set the display property to block. So it should look like...


.textbox {
display: block;
}


And any other properties, positioning, and whatever, you can include as you wish. OH, and if you are going to use positioning, be prepared to realize that absolute will put it in the upper-left portion of the ENTIRE page, so use relative instead.
Reply
:icondrachenmagier:
drachenmagier Featured By Owner Jan 7, 2008  Hobbyist Traditional Artist
Tnx. Hm... I just tried around a bit more... Everything works fine except that there is no border around the part I wanted a border around... I toyed around with my first journal ever. No one's going to see that ever again anyway. ;) I tried to putt the third paragraph into a box that is clearly visible on the bg but the only thing I get is that this part of the text is slightly farther on the inside and there is a broader part with no text on the upper and lower part (darn, it's hard to write such things in a foreign language! °A° Buuuut, I think it works. ^^ )

I'll leave it like that for a moment so maybe you can take a look to show you what I ment in the stuff I just wrote... Not pretty clear, what I typed here... Sry. Sorry to bother you so much with it. I hope it's not too much trouble.

Here's the journal: [link]
Reply
:icongreyioutcast:
GreyIOutcast Featured By Owner Jan 8, 2008
Well, there are 3 forms of borders, really. Theres the padding, the border, and the margin. And if you put a border around an INLINE thing, then it should go around only the text within the <div> tag, I'm pretty sure. I must experiment with that sometime tomorrow in Web Design. Well, good luck!
Reply
:icondrachenmagier:
drachenmagier Featured By Owner Jan 8, 2008  Hobbyist Traditional Artist
Nope, not working. The only thing I get that way is that it's like the third paragraph in the journal, just a bit farther on the inside and with that absolutely not what I was trying to do... :/
Reply
:icongreyioutcast:
GreyIOutcast Featured By Owner Jan 8, 2008
Well, sometimes stuff can be figured out by playing around. But if you're still stumped, I recommened [link]

Well, once again, good luck mate!
Reply
(1 Reply)
:icontraconian:
Traconian Featured By Owner Nov 8, 2007  Hobbyist General Artist
little late reply ^^; already figured it out, but thanks ^^;
Reply
:icongreyioutcast:
GreyIOutcast Featured By Owner Nov 9, 2007
Haha, yeah, I don't read the news on here too often. Every once and awhile I'll check up, but not often. xD
Reply
:icontraconian:
Traconian Featured By Owner Nov 9, 2007  Hobbyist General Artist
XD
well it's understandable lol
Reply
:iconsunabora:
sunabora Featured By Owner Oct 4, 2007   Photographer
Hello,

I would like to get some help about journal CSS.
My problem is that I used [link] to make my journals, and now I want to hide, make transparent the title "Devious Journal Entry". I tried to write into "transparent", but title is still seeable.
What can I do?
Reply
:iconeagleeye666666:
EagleEye666666 Featured By Owner Oct 14, 2007  Hobbyist Photographer
set in the h2 of the journaltop display: none;

just watch my journal, there is not the title shown.

But there are serveral problem to adjust the Date looking and position. :(

GReetings!
Reply
:iconsunabora:
sunabora Featured By Owner Oct 15, 2007   Photographer
Thanks , this works :)
...and yes, date is still there, but now my journal looks better :hug:

Thank you!
Reply
:iconeagleeye666666:
EagleEye666666 Featured By Owner Oct 15, 2007  Hobbyist Photographer
hehe no prob, glad that i could help :)
in mine you can see cuz of this display: none; you are loosing ability to move and put the time in the place you want, I wasn't able to move it, without destroying the header. I would like to have it in my journal down under the header text. left side.. impossible.. :(
Reply
:iconcutiepuhtootie:
cutiepuhtootie Featured By Owner Sep 29, 2007
BUT I STILL CAN'T DO IT.....:tears:
Reply
:iconphilho:
philho Featured By Owner Oct 4, 2007  Hobbyist Traditional Artist
Why?
Reply
:iconcrowmanic:
CrowManIC Featured By Owner Sep 23, 2007  Hobbyist Photographer
Anyone can clarify :? What is the standard/acceptable size/dimensions for a "header" image in the Journal?
and what goes in "header" and "footer" sections? are they permanent entries, once entered?
I'm a "noob" so pls excuse my ignorance :O_o:
Reply
:iconphilho:
philho Featured By Owner Oct 4, 2007  Hobbyist Traditional Artist
No standard, but you can look in some journal to get an idea... A 1MB image file is probably a bad idea. ;P
And yes, it seems that what you put in header and footer sections is automatically repeated in new journal entries. But of course you can change them. It appears to be the only special property of these sections...
Reply
:iconkai-ken:
Kai-Ken Featured By Owner Sep 21, 2007
That helps me a lot! Thank you very much =)
Reply
:iconxdeadxalivex:
xDeadxAlivex Featured By Owner Sep 19, 2007
Man, this is so useful =] But is there nowhere to find out how to do it on Adobe or anything? I'd really love to know how to do it there. But at the moment I'm going to see if I can figure out anything myself ^ ^' But this stuff is still uber useful!
Reply
:iconpopbrazil:
popbrazil Featured By Owner Sep 12, 2007  Professional Interface Designer
Great tips!
:clap:
Reply
:iconomenrider:
OmenRider Featured By Owner Sep 4, 2007
arigatou!!!
Reply
Add a Comment:
 
×

:iconzilla774: More from zilla774


Featured in Collections

Journals and News Articles by MouseMakesMess

Journals by Anomalies13


More from DeviantArt



Details

Submitted on
September 28, 2006
Link
Thumb

Stats

Views
4,800 (6 today)
Favourites
2,008 (who?)
Comments
168
×