HOME | DD
kuschelirmel-stock β Journal CSS - Part 2
Published: 2006-11-10 16:19:51 +0000 UTC; Views: 38298; Favourites: 900; Downloads: 226
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 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.
zilla774 wrote 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.
Related content
Comments: 185
Hi, I have one small question and was hoping you could answer it. I'm a beginner CSS/HTML programmer and I'm just wondering where to insert
Thanks!
π: 0 β©: 1
this is the part that goes in the normal journal. just download the css template that goes with the tutorial and read the read_me.
π: 0 β©: 1
Do I have to make my own code or do i just look at the tutorial and copy and paste and put whatever my journal has like the color? Oh, do I put the code in the journal space so it shows up? Do I write what I want in photoshop or does it let me write on it like a regular journal? One more, do you know how to put scroll bars?
Sorry there are so many questions.
π: 0 β©: 1
if you bother to read the artist's comment and the tutorial's first part it should become clear.
π: 0 β©: 0
Hello again. I used some of the things in this tutorial to make a new Journal CSS. I must say, I love the one I made and I have to thank you for that! If you're interested, you can see it at the front of my deviant page! Thank you once again for sharing.
π: 0 β©: 1
π: 0 β©: 1
Thank you so much!
π: 0 β©: 0
Hello, am having a bit of trouble with my css and was wondering if you would be able to help me out. I am having a problem with the colums, when I view the journal on my front page the layout is right, but when you click on it to comment, because the area is bigger I get a masive gap between the colum to the right and my main journal boxes to the left.
Is there some sort of code that will allow the journal to automatically keep the same gap between the colums?
Sorry if that was hard to understand, it was hard to explain.
π: 0 β©: 1
there are two ways you could fix this:
1) give your journal a maximum width, for example .journalbox {max-width:850px;} - this will keep the journal width small and thus your box will not move that far to the other side. downside is that internet explorer does not recognize the command at all - it will still stretch the journal. Firefox does just fine though.
2) use percent instead of pixels for your width, for example .navi {width:30%;} - this will make the box alway 30% as wide as the whole journal is
π: 0 β©: 1
Thank you so much! That has really helped
π: 0 β©: 1
Um how can I download the example css? I can't see the download button.
π: 0 β©: 1
it's an extra deviation - as it says in the artist's comment [link]
π: 0 β©: 0
Wow, that's really helpful! Just one question: it works with other applications such as LiveJournal?
π: 0 β©: 1
no, only with dA - although the principles of css are valid anywhere.
π: 0 β©: 1
Okay, thanks!
π: 0 β©: 0
Thank you so much! Just what I needed.
π: 0 β©: 1
Hello
I have a slight problem, i was able to have the heading in my journal no problem but for some reason the special feature box does not appear at all, what i have put in it like the title and a thumb appear, but the title is of the same size as the rest of the next and how i tried to make in the special box.
I hope that makes sense!
Thank you.
π: 0 β©: 1
have you tried downloading the example journal template and comparing that with yours? it might help you get to the bottom of this - I can't be sure what is wrong as I don't have that much info, you see.
π: 0 β©: 1
Thank you for replying, but at the end i have used another code and it worked, so its all okay now 
π: 0 β©: 0
thankyuu and sooo much luv to you. I don't have a sub on this account, but i have on my other one so you're just a lifesaver (as I am totally hopeless when it comes to html, css, younameit)
π: 0 β©: 1
thanks for all the faves, too - encourages me to make more tutorials and stuff
π: 0 β©: 0
you're most welcome
π: 0 β©: 0
I don't speak Spanish.
π: 0 β©: 0
I do not speak Spanish
π: 0 β©: 0
Brilliant~! Now I can acctually get a good CSS on my page. *headdesk*
π: 0 β©: 1
good luck with that!
π: 0 β©: 1
Both 1 & 2 helped me quite a bit in making my journal. Thank you.
π: 0 β©: 1
π: 0 β©: 1
Actually, I'm now able to just glance through and find something without scrutinizing everything + a little trial and error and a big part of that was your tutorials.
π: 0 β©: 1
I've loved this so much i'm featuring it in my journal for november
π: 0 β©: 1
thank you muchly
π: 0 β©: 1
I am looking for this tut since 8 oct my friend !
May I add a link to it from my journal please ?
all the best !
π: 0 β©: 1
sure, all promotion is appreciated
π: 0 β©: 1
I have just added both links of part 1,2 in my links and journals page (main) have a go in case links are broken please
π: 0 β©: 1
These were exactly the instructions I needed to customize my journal. Thank you for providing such clear and easy to follow tutorials! It's not very fancy [link] but it definitely serves its purpose.
π: 0 β©: 1
I like the warm yellow!
glad I could help
π: 0 β©: 0
Thanks so much for these tutorials. With these, I was able to make myself some cool journal CSS.
I was wondering, could you take a look at my journal (the newest grey/brown-based CSS) and critique me on how to improve it? It looks good to me right now, but it really could use some improvement.
Y'see, I'm not that experienced with web design.
π: 0 β©: 0
Thx for making this. It realley helped me with my skin.
heres my journal skin [link]
π: 0 β©: 1
| Next =>