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
Just a quick question:
What is the suitable resolution/size of a background image/headerto be suitable for the Journal without stretching or altering the layout?
Thanks! This reference is immensly helpful!
👍: 0 ⏩: 1
Well, the problem is that unless you hide your journal from your userpage, then even on the same computer the journal will be two different widths (one for userpage, another when full-viewed), and there's no way to code two different layouts for the same journal.
So you're going to have to design your journal with the fact that it might be many different sizes. You can stop it from growing too wide on bigger screens, but that's about it. The lowest screen resolution you should worry about is 1024x768 when viewing it in full, so as long as all the important stuff fits inside that, you should be okay.
You know you need a subscription to use CSS in your journal though, right?
👍: 0 ⏩: 1
Oh~ thank you so much
I suppose I should download some free CSSes and use the graphics as a guide.
Yes haha, but a friend agreed to test out my CSSes for me (it's like having a guinea pig 8D )
👍: 0 ⏩: 0
yeah I'm stupid ;o
would anyone link me to were I add the css to my journal? ;/
👍: 0 ⏩: 1
You need to be subscribed to use CSS in your journals.
👍: 0 ⏩: 0
Question: When we are adding all of these codes, does it matter if we put it in the "Header" box above our journal or the "Footer" box? Is there a specific place to place the CSS code?
I am totally new to all of this and would like to have better understanding and have go at making a couple mistaking.
Thank you very Much!
-a CSS n00b
👍: 0 ⏩: 1
There's a special box for your CSS, it should be below the footer (you might have to click a link to activate it.) If you put your CSS in any other box it will just display in your journal like regular text.
👍: 0 ⏩: 1
Oh okay!
Thanks for the clarification and for this awesome representation of what all that coding actually is in the journal.
👍: 0 ⏩: 0
Thank you very much. I used the link for the Dog's guide. Brilliant
👍: 0 ⏩: 0
Thanks. This saves a lot of time of searching through the css. I'm too lazy to do that, haha.
👍: 0 ⏩: 0
This saved my life. I feel like I can actually customize my journal now. 
👍: 0 ⏩: 1
That's exactly the kind of response I hope for when I make these things
👍: 0 ⏩: 1
It's well-deserved. This has really helped bridge the gap between "super-smart CSS coders" and "average deviantART subscriber who likes an interesting journal."
👍: 0 ⏩: 0
Thank you so much for doing this! I've been trying to learn how to use CSS and have ben studying what others have done, but it's like trying to learn another language without having any visual assistance or reference - impossible! I've been repeating what they've said without knowing what it means!!
At least now I can tweak the basics and get started from there!!
Thanks again!!
👍: 0 ⏩: 0
hey there, thanks for this reference sheet and, a lot more, for the cool links
it really helped me to create my own journal css
👍: 0 ⏩: 0
This is so cool! Thanks for making this!
I've been wanting to add CSS to my journal for some time now.
👍: 0 ⏩: 0
i think it's really great, i was searching for sth like this
here's the german translation from me
👍: 0 ⏩: 0
THANK YOUUU
I was trying to figure out how do I get rid of that journal image in my title Dx
👍: 0 ⏩: 0
*Worships* Thank you!!! It's my first time with a subscription (not my first time using CSS mind you) but I couldn't figure out the div system.
👍: 0 ⏩: 0
Thank you very much for this reference, and the links in the artist's comments. I've been looking for a good guide to sorting out my journal : ) 
👍: 0 ⏩: 0
Thank you so much! it helped a lot.
just one thing... How do you make div's?
👍: 0 ⏩: 0
Hi there! Thanks for making this available. It has been a great help for me. I do have one question though, if you have the time to answer I would be hugely appreciative.
I have a header idea that requires three image parts: a left cap, a right cap, and a middle tile to allow the whole header to stretch to the window width via the middle part. Everything I have tried has failed. Do you have any suggestions to achieve this? Thanks so much!
👍: 0 ⏩: 1
You can position the side caps using absolute positioning, the setup would be something like:
.journalbox{position: relative}
.top_right{position: absolute; top: 0; right: 0}
.top_left{position: absolute; top: 0; left: 0}
The code for .journalbox is there to make sure the elements are bound to the box of the journal (handy when you've changed the width of the journal - incidentally, if you wish to have it centered on full-view, add margin:0 auto 20px auto to .journalbox 
It's also assumed that you'll be able to figure out how to get the middle part happening - in your current CSS you could just stick it in the .journaltop
If you need any more specific help, let me know when you've got a journal you can link me to
👍: 0 ⏩: 1
Thank you so much for taking the time to respond. Your advice worked perfectly, and I was able to figure out the rest. I'm very grateful. Here is my journal efforts so far: [link]
The only thing that is puzzling me now is the big space that appears between the journal title and the content. I have checked all my padding and nothing seems to responsible. If you have any ideas, I'd be even more grateful. In any case, thanks so much for the help!
👍: 0 ⏩: 0
Thank you SO much for this. It's helped so very much! <3
👍: 0 ⏩: 1
Glad it helped out, and cool to see you used `xork 's editor. Isn't it the bee's knees?
👍: 0 ⏩: 0
Thank you for putting this up, it was really helpful ^^
👍: 0 ⏩: 0
This is absolutely wonderful! Thanks for such a great reference!!
👍: 0 ⏩: 0
Thanks for making this. It really helped me out a lot.
👍: 0 ⏩: 0
Thank you SO much for this!! It helped A LOT!
👍: 0 ⏩: 0
i referred to this A LOT while making my journal css from your simple css. i sent you a link in a comment to that particular journal entry.
thanks so much
👍: 0 ⏩: 0
this was very helpful for me! i used some of the links u had as well. Thank you so much for posting this! 
👍: 0 ⏩: 0
demnit... i used to be soo good at this css html crap.
now i cant even remember how to make a webbie...
*sigh* life...
👍: 0 ⏩: 1
It's like riding a bike!
👍: 0 ⏩: 0
| Next =>