Deviation Actions

kuschelirmel-stock's avatar

Journal CSS - Part 2

Published:
185 Comments
36K Views
EDIT Jan 2014: This way to code, while still valid to a degree, is rather outdated.
You can find an updated guide here:
Journal Css Gruze Style Part 2 by kuschelirmel-stock Journal Css Gruze Style Part 1 by kuschelirmel-stock

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Part 2 of 2 - the corresponding template can be found here www.deviantart.com/deviation/4…

This tutorial deals with custom divs: how to set them up, what can be used, what code is needed in the journal etc.

You might want to read Journal CSS Part 1 first:
it deals with the process of designing a CSS journal and of how to get the basics coded.

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...

EDIT: To make the right colum work properly in IE as well, add position:relative; to the div called .right - I'll update the file to reflect this asap!

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.
zilla774wrote a news article Journal CSS Resources which 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.
Image details
Image size
800x4250px 1.07 MB
© 2006 - 2021 kuschelirmel-stock
Comments185
Join the community to add your comment. Already a deviant? Log In
skelliepods's avatar
Thank you very much for this great tutorial!
Here is what I made: [link]
OwlsOnFoot's avatar
Omg, your tutorial is amazing. Thank you so much for uploading it! I used your code to help me create [link] which is my journal for my page. =) You're the best!
kuschelirmel-stock's avatar
:blowkiss: I'm glad I could help!
Oxdarock's avatar
This tutorial was great. It really helped me understand a lot about the custom div classes. I was able to get some good practice in and also make an nice little journal skin.

Hopefully, I'll be able to make more advanced skins in the future, but for now I'm happy with this.

Thanks a bunch!!
izUmI-o5's avatar
How do you add a sidebar to the left?
MightyMelleR's avatar
another great easy to understand tutorial! Thank you so much!
KneelingGlory's avatar
I used your awesome tutorial (part 1 and part 2) to make the CSS for my new group: [link] thanks!! :heart:
kuschelirmel-stock's avatar
it looks great! I'm glad I could help! :hug:
Kellalizard's avatar
Hmm I'm stuck on one thing. Links don't seem to work in my journal, why is that?
benihme-chan's avatar
thanks so much for this and part 1 :)
Krooked-Glasses's avatar
Oh, by the way, can you give text borders? D:
Krooked-Glasses's avatar
YOU ARE A WONDERFUL PERSON FOR MAKING THIS!!!!
If I was ever even a tiny bit interested in having a child, I would name them after you. :iconwthplz:

I will post my outcome later. : D
jese-mx's avatar
thanks for this tutorial.
It has helped me a lot.

I translate into Spanish
Do you agree?
(I will put the respective Copyright)
kuschelirmel-stock's avatar
I do not want my tutorials translated into languages I do not understand because I cannot garantuee they've been translated correctly. So the answer is no, sorry.
jese-mx's avatar
good
as you want.
eizu's avatar
nice tutorial! ^__^
can we also use javascript? o.o
kuschelirmel-stock's avatar
no, only css and html
SybexMed's avatar
Wow your a wiz kid!
Koto-wari's avatar
Thank you very much for creating this tutorial (both part 1 and 2). It was very helpful.
Very easy to understand as well. :3
Madrica's avatar
You have to be a member to use CSS right?
That's too bad XD Ah well, it's an awesome tutorial and I'm sure I'll use it someday when I got a membership :3
Thank u
SanoShiroGaara's avatar
When you look at the full view for mine, the header and footer get cut off.
How do I fix it = (
[link]
kuschelirmel-stock's avatar
it's pretty simple: your image isn't wide enough. when the tutorial was written, people had smaller monitors ;)
SanoShiroGaara's avatar
Really? = O It looks too wide to me, being cut off from the journal haha
What px size should the image be? And how can I fix it :/ Or is there anyway to adjust the journal size? xD
Join the community to add your comment. Already a deviant? Log In