HOME | DD
foundsoundfunny — Journal Structure: a reference
by-nc-sa
Published: 2006-09-26 10:21:41 +0000 UTC; Views: 135476; Favourites: 2183; Downloads: 2607
Redirect to original
Description
A quick reference sheet I drew up for the old journal style so people didn't have to fuss through dA's source code to make their journal CSS.The new default journal style (with round edges) has a different and more complicated structure. I think the old version is easier to work with, so thankfully we can still use it - just use the old classes found in the reference above and it will trigger dA to use the old layout.
Guides for the new structure have been created by `xork : [link] - and `ginkgografix has made one that compares the old with the new: [link]
Note that you must be a premium member (have a subscription) to use CSS in your journal.
If you're new to CSS, you should aslo check out html dog's beginner's guide to css , which is a great place to start. If anyone pointed you to w3schools, give them a smack
Translations
- Turkish: 'Journal' Yapisi - Baslangic by ~umutsirin
- Italiano: Struttura del diario - fonte by ~MissingHorcrux
- Español: Estructura del Diario: Ref by ~LFerro
- Portuguese: Estructura do jornal by =xcubic
- Polish: Struktura dziennika Wartosci by `LiAiL
- French: contient tout le journal by *PhoenixII54
- Russian: Структура журнала - связь элементов by ~Kittenboy
- German: Tagebuchstruktur by !akaneia
- Hungarian: A journal CSS-e magyarul by ~BajuszGG
- ...add yours - send me a note/comment with a link to your translation
Further references:
- html dog's beginner's guide to css
- `xork 's Journal CSS editor - lets you edit your journal's HTML and CSS in realtime! Go +fav his deviation here !
- `tobyf 's journal css generator (great for total beginners looking fo something basic to start with - fill out the fields and it gives you the CSS)
- `nyssi 's CSS Rundown + Template - top stuff, takes you on a guided tour of her stylesheet.
- Not-So-Basic Journal Template by =ghostlove
- For even more resources be sure to check out the sticky thread in the programming forum too - [link]
- .this saved search - for CSS tutorials in the Resources gallery
- ...and lastly, you can check my /journal/ sidebar for code snippets/tutorials for doing things like sidebars, thumb tables and other neat tricks.
Related content
Comments: 419
Oh my god! This is exactly what I was looking for! If your were here, I'd totally kiss you.
THANK YOU!
^.^
👍: 0 ⏩: 0
Thanks for the nice explanation!
👍: 0 ⏩: 0
I would love to use this.
Too bad I'm dead broke now.
👍: 0 ⏩: 0
thankyou for the very useful linkies there! i think i may muster up the courage to code my own today
👍: 0 ⏩: 1
Well, if you're learning CSS through college I'm sure you'll be able to sort yourself out
👍: 0 ⏩: 0
Brilliant. :]
Thanks for sharing.
-Alicia-
👍: 0 ⏩: 0
This has helped me a lot! Thank!
👍: 0 ⏩: 0
you'll need to be a subscriber first!
👍: 0 ⏩: 1
Wh00t! 
👍: 0 ⏩: 0
what about "span"? thats important too... the only thing is that it only affects the date and not the "Journal Entry:"
👍: 0 ⏩: 0
i am using a premade journal template ([link] ) that linked back to this for reference on how the journal is actually structured. i was wondering, where exactly do you put the code for inserting a background image in the .journaltext area, as well as putting an image header in the .journaltop area?
thanks so much, this is really helpful!
👍: 0 ⏩: 1
looks like you've changed to one of :demynti:'s templates since writing me that comment, but to answer your question -
.journalbox wraps everything in your journal - the heading (.journaltop) the conent (.journaltext) and the comment/previous journals link area (.journalbottom) and the moods list (ul.list) - so if you give it a background, it will be behind everything. If you only want it to appear behind your journals content, then apply the background on .journaltext. This can make things look a bit ugly though - as your heading will be a solid colour still - so what I recommend you do is apply the background to .journalbox and then use .journaltop{background:transparent!important} to hide the background of .journaltop and let the background you applied to .journalbox show through
if you need anything explained or if you're having problems, drop me a note and I'll give you a hand
👍: 0 ⏩: 2
aha this is months later
what code would i actually put in the for a repeated image background, and where (in the .journaltext area)? once i get that woking, i can see how it looks and if i'll do that thing you suggested, so it shows through .journalbox
thanks much! hehe sorry to be a bother
👍: 0 ⏩: 0
thanks! yeah, i was just using a premade template for that one, but i was interested in creating one of my own for my next one.
i'll give it try, see how it goes. I'm pretty sure i understand. 
👍: 0 ⏩: 0
thank u...thank u...this thing is really a bless 
👍: 0 ⏩: 0
Great reference for starting out! It helped me out for sure.
👍: 0 ⏩: 0
Seriously helpful. x3 I'm just starting with CSS and really want to learn it thoroughly. Great job on this ^--^
👍: 0 ⏩: 0
That's helpfull for the start indeed.Thank you very much
👍: 0 ⏩: 0
thanks a lot to add my deviation link and let me use ur deviation
👍: 0 ⏩: 0
TY SO MUCH !
This is a significant deviation xD !
👍: 0 ⏩: 0
Is there any way to fix a certain height to the body of the journal? Thanks.
👍: 0 ⏩: 1
i just checked your page to see if you where trying to achieve something in particular - and what you could do, instead of fixing the height of your journal to 491 pixels is to create two extra divs that wrap the content of your journal. Then what you do is place the blue gradient (as an alpha-transparent png) as the background of the firstp, and make the transparent to black gradient a background for the second div. The tiled background you have there (of the diagonal lines) can be the background of .journaltext or even .journalbox
That way, your journal can be as long or as short as you like
(let me know if you need more detailed help
👍: 0 ⏩: 1
Unfortunately, my grasp of divs is limited at best. What you are saying is: create two divs (on top of each other?). I should place the plain background as the journal background, and then add the gradients to the divs, letting them fade from (for the first one) blue to transparent and (for the second gradient) transparent to black.
...How would I go about adding the actual divs?
👍: 0 ⏩: 1
ah - okie
divs are just empty block level containers. they can flow with your document, or you can make them float ontop of things - by themselves though, they are little more than 'brackets'.
in your journaltext (the main content of your journal) start your journal with two extra divs -
So what we're doing here, is wrapping the entire content of your journal in two extra divs (.outer, and .inner) and your journal content is already wrapped in .journaltext (deviantart does this). You'll be applying the blue background to .outer and the black to .inner - and the plain one on .journaltext
it doesn't matter if you put the blue bg on .outer or .inner - it makes no difference
👍: 0 ⏩: 1
The div class can be assigned using the CSS like:
".div outer" or something to that effect? I'm reading up on div class' now.
👍: 0 ⏩: 1
once you give a div a class name - ie 👍: 0 ⏩: 0 very nice, I was wondering what the css tags where 👍: 0 ⏩: 0 THANK YOU 👍: 0 ⏩: 1 invaluably useful mate, thank you, lotsa lotsa 👍: 0 ⏩: 0 Very helpful!! Thank you so much for sharing! 👍: 0 ⏩: 0 this is sooooo helpful!! Thank you for showing me how to do this ^^ 👍: 0 ⏩: 0 Oh, boy! When I get a sub this will make it soo much easier for me! Now I won't have to rummage threw source to find the class names. Maybe I should beg for a sub. 👍: 0 ⏩: 0 I'm being stupid here...or blind...not sure which it might be. But I've done CSS since they first began to appear online (done it professionally since the very beginning), but I can't for the life of me figure out how to add a CSS to my journal. 👍: 0 ⏩: 1 just above the preview and submit buttons there's a little link that reads something like 'add CSS' 👍: 0 ⏩: 1 Thank you 👍: 0 ⏩: 0
.outer{
background: url(...) top repeat-y;
}
or div.outer{...} (but you're fine just using .outer)
The dot at the front means that it's a class name, without a dot means it's a tag name.
Finally someone who gives a visual guide to this madness
This is just what I've been needing
Thanks for all the links too 
Do I have to add it to every journal I write? Do I link it? And if so, where do I save the CSS file?
I would appreciate a bit of help, coz in spite of reading tutorials I'm still clueless. Most of them are focused on how to make a CSS and that's not really my problem.
C.
Still working on how to get a header image and a footer image to show in the journal though.
<= Prev | | Next =>
