HOME | DD
kuschelirmel-stock β Journal CSS - Part 1
Published: 2006-11-05 20:55:55 +0000 UTC; Views: 75085; Favourites: 1749; Downloads: 373
Redirect to original
Description
EDIT Jan 2014: This way to code, while still valid to a degree, is rather outdated.You can find an updated guide here:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Part 1 of 2 - the corresponding template can be found here www.deviantart.com/deviation/4β¦
This tutorial deals with the process of designing a CSS journal and of how to get the thing coded.
It only covers the basics, custom divs will be dealt with in Part 2 - which can be found here .
If you have no idea what CSS is, I suggest you read up on the basics before tackling this tutorial.
In here, I just assume you know what a div is...
Also try these links:
thespook is compiling a CSS guide (I'll link it here when it's finished), he also has a nifty Journal structur reference in his gallery.
If you speak German (or French), you can try selfHTML.org - it's not only great for learning HTML, CSS, Javascript,... but also offers quick references on the code you can use.
The quote I used from zilla774 is taken from his news article Journal CSS Resources which also has some more links to things you might find useful.
And last but not least, the link to the Lorem Ipsum Generator which also explains where that text comes from.
Related content
Comments: 257
you'll need the code in the journal, it will do you no good to put it in a photoshop document
π: 0 β©: 0
This helps a lot! It can be understood very fast.
π: 0 β©: 0
Thanks!
Anywho, thanks again!
π: 0 β©: 0
Thanks to you I've somehow managed to make my own! [link]
It was easy to follow and had all the info I needed!
thanks again!
π: 0 β©: 1
Thanks to you of course
π: 0 β©: 0
This is my favourite tutorial for reference, I really ought to have it for quick reference, and part 2 as well.
Thanks for making it~
π: 0 β©: 0
I don't understand a thing TAT: I want to upload some of my drawings (with transparent background) into my journal, but don't know how to use the CSS code for it:i dont get a thing
pls pls pls help me~!
π: 0 β©: 0
Thanks for this! I've had a subscription for a few months now but have been totally stymied as to how to put in all that nifty CSS that looks so great in everyone else's. Definitely a help!
π: 0 β©: 0
Thanks so much for this. It helped me as I created my first skin for my newly created dA page/journal.
It was just what I was looking for!
π: 0 β©: 0
thanks for this! Maybe I can actually make my own now! lol
π: 0 β©: 0
hello, your tutorial is quite easy to use and i'm wondering why i can put the journaltop on the header that i create this way : [link] so, there the css code that i use : [link]
ps : did you know that DA added a new feature for to install a journal CSS with one click ? :3
π: 0 β©: 1
I knew that, but I'm not going to go through all my older journals and "revamp" them to fit the new system. I don't have that kind of time.
the reason why it doesnt work is that .header is not dA markup - please read the tutorial to find out which markup to actually use.
π: 0 β©: 1
i see now ^^,
for about my css stuff, i fixed it and now i have an other problem ^^,
there the current CSS journal : [link] still buggy
π: 0 β©: 1
please read my tutorials (all of them) before asking me, I wrote them so I dont have to repeat myself - and if you cant find an answer there (after you've read them, not just glanced at them), then ask specific things and dont just say "its buggy". I cannot read minds and I cannot know which browser you are on either.
π: 0 β©: 1
hum sorry, my bad
well, i already read all your tutorial despite my frenchiness, i noticed a little problem with "devious entry journal" who didn't work like i want and i think it's probably because i sue 2 images : one fixwith no-repeat feature and one with repeat-X. plus the litle bar that separate between the journaltop and journalbox it's all what i got as problem.
π: 0 β©: 1
you can only use one image per div - if you specify two theecond will be read and the first ignored
π: 0 β©: 1
i see, so i think i will throw it away.... because i use 2 div : the "journaltop" and the "journaltop h2" like you specified it.
π: 0 β©: 0
Thanks for the guide! It really helped a lot. ^^ I just have one question though: Since the new DA has the... eh, gruze style (rounded corners and such), does the old style (Using .journaltop, etc.. instead of .g1(?), etc...) still work?
~Toki-chan
π: 0 β©: 1
yes, it still works - dA recognizes which of the two "kinds" you use and will switch accordingly. you cannot mix them though.
π: 0 β©: 1
Ah ok though, thank you.
~Toki-chan
π: 0 β©: 0
Thank you SO very much. I've tried my hand at CSS before, but for some odd reason, I just could not get the hang of these journals. This provided the exact thing I needed to wrap my brain around the structure.
π: 0 β©: 1
glad to hear I could help
π: 0 β©: 0
Thank you so much!
I just got a subscription and this helped me code my journal a lot.
π: 0 β©: 1
glad to hear that!
π: 0 β©: 0
I relied heavily on this to make this journal entry. And am now trying to figure out how to customize the shouts and stuff, because hey, might as well be ambitious! Thanks so much, it was very helpful with figuring out colors and font placement and everything.
π: 0 β©: 0
thankyou so much! i have little experience with html, and i have to say you made css easy! haha, i will be recommending for a DD, and i hope that you are rewarded in the way you deserve!
for the results you can see my journal
π: 0 β©: 0
nur so ne idee, aber kΓΆnntest du dasselbe auch in deutsch posten?
π: 0 β©: 1
nope, ich hab weder die zeit noch den nerv das zu ΓΌbersetzen
π: 0 β©: 1
war auch nicht wirklich ernst gemeint
π: 0 β©: 0
This tutorial is amazing, thank you!
π: 0 β©: 0
This was amazingly helpful, especially to a hopeless non-techie like me. Thanks!
π: 0 β©: 0
I just get myself a subscription and clueless about how to customize my journal.. this tutorial helps a lot! thank you!
π: 0 β©: 0
i tried using the methods out from this it seems to work perfectly but i just need to get the hang of it over time i guess XD
this tutorial was very helpful and i thank you for making it ^o^/)
π: 0 β©: 0
Do you make the different parts (header, background, bottom etc) in photoshop and upload them on f.ex Photobucket to create URLs to place in the CSS-coding?
π: 0 β©: 1
did you actually read the tutorial or just glance over it?
π: 0 β©: 1
I've read it a couple of times now, right after I posted the question, so I kinda figured it out. I just thought it was kind of "going back and fourth" when you first made the entire thing in Photoshop to get the layout for it, and then actually made the header etc and uploaded them to get urls. But then I tried and it worked... somewhat.
I have to struggle a bit more, cause I have a layout that is kinda... not harder for a CSS-pro I guess... But hard enough for a beginner.
π: 0 β©: 0
Amazing... I think I'm gonna give this a go when I get back home. ^_^
π: 0 β©: 0
A great tutorial that I have followed and checked on a generator, but unfortunately no one told me you have to be a senior member or a subscriber to do this
π: 0 β©: 0
one of these days, this will be very useful!
π: 0 β©: 0
Fantastic tutorial! Its so easy to understand 
I'm just having two problems with it though. My header image isn't showing up, and the text color isn't turning out the way I want it to. I followed the coding correctly, but it still isn't apearing.
π: 0 β©: 0
Hat jetzt ein Weilchen gedauert, aber ich habs geschafft
Das Tutorial ist echt klasse, ich hab doch tatsΓ€chlich verstanden, was ich tue
Und so schaut das Ganze dann aus: [link]
Danke fΓΌr dieses super Tutorial. Bei nΓ€chster Gelegenheit mach ich mich an Teil 2
π: 0 β©: 1
ist sΓΌΓ geworden 
π: 0 β©: 1
This tutorial is absolutely amazing! I mean, I knew how to use CSS, but da CSS seems to get on my nerves and I never bothered to learn it. But boy, this tutorial right here changed that! With what a knew and your amazing way of explaining things, Journal CSS seems so EASY! Thank you very much for sharing your talent. 
Also, I made a CSS with this tutorial that can be found in my journal here: [link] I directed to the front page because it looks better, rather than the actual journal page.
Thanks once again!
π: 0 β©: 1
you're most welcome!
and thank you for the wonderful comment
π: 0 β©: 1
| Next =>