Deviation Actions

kuschelirmel-stock's avatar

Journal CSS - Part 1

270 Comments
72K 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 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.
Image details
Image size
800x4000px 1.31 MB
Published:
© 2006 - 2021 kuschelirmel-stock
Comments257
Join the community to add your comment. Already a deviant? Log In
DragonOfAkasha's avatar
Wow...it seems like... I will have very much to do this weekend xD
Very helpful tutorial, thank you! :D
vLine-Designs's avatar
Thanks for this great tutorial! I'm studying CSS right now and this was very helpful : )))) :hug:
kuschelirmel-stock's avatar
Batnamz's avatar
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!
OwlsOnFoot's avatar
This is fantastic! You're amazing! and I love Part 2 ([link]) as well! Brilliant!
Fleur-dRae's avatar
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!!
RiekachuThePony's avatar
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;
}
kuschelirmel-stock's avatar
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.
RiekachuThePony's avatar
.... jezz srry i was just wondering
blueani's avatar
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.
Asqard's avatar
I don't understand anything...
How would you get the writing to be over a faded part of the picture?
ChiefBonBonBandetto's avatar
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....^^;
RevanREK's avatar
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? :blushes: anyway here's the result. [link]
kuschelirmel-stock's avatar
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 :heart:
RevanREK's avatar
Ahh ok, I got the idea of it in a sense, thanks! :)
Lilo1990's avatar
Thank you! this is very helpfull!
Kalina1176's avatar
I LOVE YOU FOR POSTING THISS!
gillianivyart's avatar
Featured this tutorial on my most recent journal design, as this was the first tutorial I learned to skin from :heart: : [link]
enko97's avatar
excellent, thanks! :)
MissLunaRose's avatar
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! :tighthug:
Pumpkin-Queen-Ildi's avatar
wooot, I'm gonna try making a skin asap! :D
Join the community to add your comment. Already a deviant? Log In