HOME | DD
kuschelirmel-stock — Journal CSS - Part 1
Published: 2006-11-05 20:55:55 +0000 UTC; Views: 75083; 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
No problem. Work such as this deserves the praise.
👍: 0 ⏩: 1
*blushes tomatoe-red*
👍: 0 ⏩: 1
Aww, you are adorable.
👍: 0 ⏩: 0
I'll be getting a subscription soon and am thinking ahead in programming the look of my journal. This two part tutorial will be very helpful. Thank you
👍: 0 ⏩: 0
This is a lifesaver. Thanks so much.
👍: 0 ⏩: 0
I used your tutorial to fine-tune my journal, and I am in love with it! Thankyouthankyouthankyou!!! Here it is! [link]
Many thanks again!
👍: 0 ⏩: 0
I am so confused...
I understood the Latin in your journal better than the css stuff... T.T
please help me and my stupidity--- what are "divs" and how do i work with those?
👍: 0 ⏩: 1
pretty strange that you'd understand this "latin" because it's not really latin at all
I'm afraid this tutorial is the simplest I can put it - if you don't know what a tag is or what a div is, try to get your hands on some html basics tutorials, those should do the trick.
👍: 0 ⏩: 0
can you help me again i've just made a journal entry link:[link] it was going great but for some reason the picture at the top has shrunk and it won't fill to the top...
How do i make it fit...i've tried resizing it but it doesn't work besides i'd used exactly the same size before and it had fitted...
thanx
P.S. your tutorials mentioned in it..
👍: 0 ⏩: 1
if you uploaded it bigger then it's probably photobucket that is scaling it down when uploading. it's definitely the picture's fault (it says it's 400px wide and 193px high) and not the code's. try uploading a header that is 800px wide - maybe that won't get scaled down? I'm afraid I don't really know though where photobucket starts scaling down, so you'll have to experiment.
👍: 0 ⏩: 1
thankyou so much...i am so looking at your second journal css entry thing...
👍: 0 ⏩: 0
i look at all the comments on here and i feel like an idiot...i'm sorry i'm not getting the footer and header thing....
I want to make my own so what do i just make the header in paint shop pro say if so how do i make it appear on my journal...
I'm sorry i have not found yet a single tutorial that i've understood this is the closest and looks like the best but i still need help...
so can you tell me exactly in detail what you did to get a header and footer....
👍: 0 ⏩: 1
you just need to save the individual parts as jpg files and upload them onto a server or a free host such as photobucket so you can use the url (http:// ...) to make the images show in the journal.
👍: 0 ⏩: 1
Holy crap! I created my own CSS Journal with the help of your tutorial! Thank you! Go check out my journal
👍: 0 ⏩: 1
I'm a newby to CSS, I think it will be reaaaally useful; thanks!
👍: 0 ⏩: 0
Hello! I want to thank you for this; it's helped me more than anything else. But I have one question for you; whenever I try to put in my "footer" image, it sticks it at the top, directly under the "header" image. Any suggestions on what I could do to fix that? Thank you!
👍: 0 ⏩: 2
you need to put your moods at the bottom - theres a checkbox for that
👍: 0 ⏩: 1
Hehe, yea, I figured that out eventually. 
👍: 0 ⏩: 0
Oh wait, haha, I just figured it out. XD Well, thanks again anyway!
👍: 0 ⏩: 0
hi, this is a great tutorial and Part II too, it really helped me out making my journal, so i featured u there... here it is anything wrong, just tell me! great work!
👍: 0 ⏩: 1
what a wonderful tool this is Thank you !!
👍: 0 ⏩: 0
I have a question. =ITSTORRASQUE4U has a problem with CSS (click his name to see the problem XD) and I was wondering if you could help... the colors are all disjointed.
👍: 0 ⏩: 1
first off: why cant he ask for himself?
second: even if he had asked for himself my answer would be the same: I cant help cos he isnt using my template and even if he were he should be able to find an answer in this tutorial. so please read it instead of trying to get someone to do the work for you.
👍: 0 ⏩: 1
First off: Because he's as shy as a horse, and has no backbone. So I did him a favor.
Second: I did read it and I didn't find the answer to my question. Which is why I asked in the first place. Don't assume everyone's a lazy ass. The comment was rather uncalled for.
👍: 0 ⏩: 1
I can assure you, its in there though
👍: 0 ⏩: 0
Thanks for the tutorial - I know CSS, but the whole CSS+dA was kinda blowing my mind and this really helped a lot. Hope you don't mind a 
👍: 0 ⏩: 1
sure, why would anyone object to a fave?
glad I could help
👍: 0 ⏩: 0
I used your Tutorial here:
[link]
[link]
[link]
Thank you so much!
Hugs!
Bobbie
👍: 0 ⏩: 1
Thanks for this! Check out my CSS journal that I made thanks to your tutorial: [link]
👍: 0 ⏩: 0
Thanks for this, it's really helpfull. C: I'm completely hopeless when it comes to coding, so this was a lifesaver~
But... I'm still having trouble. If you don't mind me asking, how to you position the title and date? I've tried messing with the padding, but it doesn't seem to do much. I want it in the top right corner of the header image, but it just won't go there. @.@
👍: 0 ⏩: 1
you need to adjust the padding of .journaltop h2 then it will work
👍: 0 ⏩: 1
I have a template but all I want to do is change the header image and whatever I try gives me an error message. Am I doing something wrong? I'm using the basic CSS template by =ghostlove .
👍: 0 ⏩: 1
please ask =ghostlove for help as it is their css code, not mine.
👍: 0 ⏩: 0
This helped me so much with my journal
👍: 0 ⏩: 1
glad I could help
👍: 0 ⏩: 0
Thankes, this tutorial makes CSS much easier on me. I was using some site, and it was making my eyes hurt real bad because I didn't get it. *laugh*
👍: 0 ⏩: 1
glad I could help
👍: 0 ⏩: 0
Thank you for the tutorial! I'm a bit confused, though; I directly copied two of the CSS documents and put them at the beginning of my journal (at sepearate intervals), but they don't work! Is there something I'm doing wrong?
👍: 0 ⏩: 1
I'm afraid you need a subscription to use the css - the "add css" box will only appear with sub.
👍: 0 ⏩: 1
Ohh, I see. Thank you. (:
👍: 0 ⏩: 0
<= Prev | | Next =>