HOME | DD
kuschelirmel-stock โ Journal CSS - Part 1
Published: 2006-11-05 20:55:55 +0000 UTC; Views: 74644; Favourites: 1752; 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
Thanks for this great tutorial! I'm studying CSS right now and this was very helpful : ))))
๐: 0 โฉ: 1
glad I could help
๐: 0 โฉ: 1
thanks a ton for this! I had made a layout years ago and just edited the css from time to time to change it. But the new skin editor took half the CSS away from it and wont let me edit it correctly. I was all "noooooo" XD I'm not great with css, so this should help me re-build what I had. Thanks again!
๐: 0 โฉ: 0
This is fantastic! You're amazing! and I love Part 2 ([link] ) as well! Brilliant!
๐: 0 โฉ: 0
I can't thank you enough for this tutorial!! I had been trying for the past few days with little success to do a simple image on top and image on bottom journal skin - I figured our the header and body, but didn't understand the footer very well (especially the image alignment with mine) - and this tutorial just made so much sense!!! Again thank you ever so much for sharing!!
๐: 0 โฉ: 0
How come this code does not work? .journalbox {
background-color: #002EB8 !important;
border: 3px #203040 solid !important;
background-image: url([link]);
background-position: top left;
background-repeat: no-repeat;
}
.journalbox .list li {
background-color: transparent !important;
color: #C0C0E0 !important;
}
.journalbox .list li.a {
background-color: transparent !important;
color: #C0C0E0 !important;
}
.journalbox h2 {
color: #C0C0E0 !important;
}
.journalbox .journaltop {
background-color: transparent;
color: #C0C0E0 !important;
background-image: url([link]);
background-position: top left;
background-repeat: no-repeat;
height: 768px;
}
.journalbox a {
color: #50C0FF !important;
}
.journalbox a:hover {
color: #70E0FF !important;
}
.journalbox .journalbottom a.commentslink {
color: #8765FF !important;
}
.journalbox .journalbottom a.prevlink {
color: #8765FF !important;
}
.journalbox .journalbottom a.commentslink:hover {
color: #A785FF !important;
}
.journalbox .journalbottom a.prevlink:hover {
color: #A785FF !important;
}
.journalbox .journalbottom {
background-color: #231234 !important;
padding-top: 6px;
background-image: url([link]);
background-position: top left;
background-repeat: no-repeat;
height: 768px;
}
.journalbox .journaltext {
color: #C0C0E0 !important;
background-image: url([link]);
background-repeat: repeat-y;
background-position: top left;
}
.journalbox .journaltop img {
display: none !important;
}
.journalbox .boxtop {
padding: 0 !important;
}
๐: 0 โฉ: 1
do I look like your personal ask me anything but don't bother being polite person? A little "hello" or "could you help me" or maybe even a "please" go a long way. Oh and a description of what exactly doesn't work. but seeing as you didn't bother with that, I'm not going to try and find out. Ask someone else.
๐: 0 โฉ: 1
.... jezz srry i was just wondering
๐: 0 โฉ: 0
This is something that I have needed to know. Trying to get into the code thing and I've always wanted to make my own journal skin. Guess I shall read up on this tutorial and try it out. Thanks.
๐: 0 โฉ: 0
I don't understand anything...
How would you get the writing to be over a faded part of the picture?
๐: 0 โฉ: 0
I'm so confused....
I'm not very smart with computers any....
I would like to make a journal skin for my boyfriend as a surprise, but I am failing miserably....
He wants this a journal skin [link]
And I can't seem to get it right for him....
Is there anyway you can help me or anything?
Or would mind teaming up with me to help me?
Either way, I really need help...
And looking a this tutorial is making my head spin with so many words and codes....
๐: 0 โฉ: 0
What a helpful tutorial!! I haven't tried CSS before, except for once and it looked like a bomb had exploded, but this was easy to understand, I still don't know what a div actually is haha but I worked out what it does... So um.... what actually is a div, technically I mean? 
๐: 0 โฉ: 1
it's a "container" for whatever you put in it, so it's pretty abstract and not straight-forward as it comes in many different forms (I mean it looks different each time, depending on the css attributes you give it).
I'm so glad I could help
๐: 0 โฉ: 1
Ahh ok, I got the idea of it in a sense, thanks!
๐: 0 โฉ: 0
Featured this tutorial on my most recent journal design, as this was the first tutorial I learned to skin from 
๐: 0 โฉ: 1
๐: 0 โฉ: 0
Thank you so much for this great tutorial!
I was browsing tutorials and I still couldn't get a journal background to show up until I read yours. Thank you so much!
๐: 0 โฉ: 0
wooot, I'm gonna try making a skin asap!
๐: 0 โฉ: 0
How do I make the journal title not just to the far left, but exactly positioned where I want it?
๐: 0 โฉ: 0
Thanks for sharing! This was exceptionally useful.
Here's my attempt at a layout: [link]
๐: 0 โฉ: 1
looks absolutely great! love the colours you used!
๐: 0 โฉ: 0
I suck so bad at CSS coding. This is really helpful!! Once I'm done the layout I think I'll show it to ya :3
๐: 0 โฉ: 0
uh whats the width we need? im kidna confused
๐: 0 โฉ: 0
thats funny how I was looking at this it said 4:16 AM and it's 1:16 PM right now owo
๐: 0 โฉ: 0
Just one question: Can I do a Journal Script with Adobe Dreamweaver? *sorry I haven't read through it now because it is so long I have saved it for holidays XD*
๐: 0 โฉ: 1
scripts don't work on dA.
btw, telling me you didn't read the tutorial yet cos you apparently don't have the time now while expecting me to take the time to answer your question feels kinda rude
๐: 0 โฉ: 1
I am sorry - I didn't know I was offending you with what I have written.
I didn't thought that it would bother you to read over two lines and then say yes or no. As you know I didn't say that I won't take the time to read through that tutorial I just said I would do that later and not right now because as you can see it is really long. I scanned it before to get some knowledge about that and then this was my question. If you don't want to take your time to answer you don't need to answer. I am really not forcing you and of course I didn't want to be rude... O_รด
Anyway thank you for your answer!
๐: 0 โฉ: 0
I featured your journal here - [link] ;D hope u don't mind!
๐: 0 โฉ: 1
Thanks a lot for making this awesome Tutorial!
I used it here , and it wasn't difficult to understand at all~~
๐: 0 โฉ: 1
lovely colours and layout
๐: 0 โฉ: 1
Glad you liked it! ^-^
๐: 0 โฉ: 0
I just wanted to say THANKS. With this (albiet, probably temporary) allowance of nonpaying users to use journal skins, I've been able to do this :[link] with your tutorial and coding. I've a little background with programming, but none of it was with CSS. It worked though.
๐: 0 โฉ: 0
Thank you so much for making this tutorial, I'll try to make one myself, although CSS is like ancient chinese for me
๐: 0 โฉ: 0
Thank you, but I want to swap the h2 image to other one. How can I do it?
The only thing that I can it's making an square of icons with this code:
.journaltop img {
background-image:url(image);
padding: 14.6px;
}
I saw in your tutorial this: It can be swapped for another image using, but I think it's incomplete.
I'll thank you much if you can help me.
๐: 0 โฉ: 1
it's meant to say "using a customn div" I guess, because for the img tag itself you can't just define a different image. It controls the little icon, not the big background image. So, what you want to swap with a different image is the .journaltop {background:...} bit as it is described in the paragraph just above.
I hope this helps.
๐: 0 โฉ: 1
Wait... So, I can't change this image (Link to image) in the journal... or are you saying that to change that image I need to use a custom div?
๐: 0 โฉ: 1
I'm saying you would need to hide it as shown in the tutorial and put your icon into a custom div and position that div to fit with the rest of the layout.
๐: 0 โฉ: 1
Thank you so much! Now it works perfectly.
๐: 0 โฉ: 0
where are you going to add the basic coding of your journal skin, in deviantart or in photoshop?
๐: 0 โฉ: 1
| Next =>