HOME | DD
foundsoundfunny — Journal Structure: a reference
by-nc-sa
Published: 2006-09-26 10:21:41 +0000 UTC; Views: 135477; 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
Thank you! This was a big help
👍: 0 ⏩: 0
I uh...I think I will have to work on it, it's...complicated
👍: 0 ⏩: 0
Thank you! I was ruing having to look through the source code for tags.
👍: 0 ⏩: 0
This will come in so handy and helpful! Thanks so much! I appreciate it.
👍: 0 ⏩: 0
This was extremely helpful in working ont he CSS for my journal. Thanks a ton for making it, out of all the CSS guides, I referenced this one the most!
👍: 0 ⏩: 1
glad you found it helpful
👍: 0 ⏩: 0
I'm sure i'll need this soon, so thanks for taking the time to give us all a clue!
👍: 0 ⏩: 0
Oh cool, I didn't know you could make divs too, I thought it was strictly CSS!
Time to work on a couple designs for duhcoolies' contest aye?
👍: 0 ⏩: 0
hey, I'm a complete beginner on css right now, so this came in quite handy.. how can I create the div's though?
👍: 0 ⏩: 1
just write
replace ... with your content o'course
👍: 0 ⏩: 1
for more than one division I probably change the "mydiv" part? and create a separate section at the css coding part?
👍: 0 ⏩: 0
This came in very handy today, thanks!
👍: 0 ⏩: 1
care to share?
👍: 0 ⏩: 1
Heh heh. I use to view the html source everytime I needed to do some journal css... but your visual guide makes it so much nicer, quicker, and easier. I opened it in one of my browser tabs as I was coding this . And I've also bookmarked it.
👍: 0 ⏩: 0
Thank you for posting this! 
👍: 0 ⏩: 0
woah... this makes me feel 10x dumber T-T EVERYONE elses gets it but me XD
This looks good!
👍: 0 ⏩: 0
Thanks a ton for making this, it's exactly what i was looking for
👍: 0 ⏩: 0
I'd like to know if it's possible, and if it is how to do it, to change the link's color just inside a box, please.
👍: 0 ⏩: 1
well, lets say for example your box is has the class name "justify" (taken from your journal
.journaltext .justify a{color: ...}
In that code there, everything before the { is called the selector. The dots before .journaltext and .justify mean that they are class names, and their order shows the order they're in your code - so the links are inside the element with the class name "justify" which in turn is inside the element with the class name "journaltext" .
👍: 0 ⏩: 1
Ah, ok. Thanks a lot!
👍: 0 ⏩: 0
Ok, did a practice run of a simple journal change & it seems to work...on other people's computers
Any ideas why i can't see my own CSS? I can see some people's but no others. Using firefox & the black skin of yours. Sorry to bother you 
👍: 0 ⏩: 1
if you wanna see you journal css, turn off my skin for now.
This has been a problem ever since staff could use css in their journals, but the cool thing is that $pachunka will be making a change that will let me rewrite parts of my deviantart skin so that it wont fiddle with people's journal css - but untill then there's nothing i can do.
👍: 0 ⏩: 1
aah right, thank you that's really helpful. I just wondered if i was doing soemthing wrong
👍: 0 ⏩: 0
wanna show us sample css code for DA such as one you might be using?
👍: 0 ⏩: 1
Indeed i do
Once I get a few things done that need doing, I'm going to write a tutorial for some of the more 'advanced' things we can do with CSS.
See this journal i'm making for ^smashmethod (try resizing the window, and hovering over Jim - he's the worm in the white space suit), and my metal slug journal (try hovering over the sprites and also the right edge of the header, and check out the buttons in the bottom right of the journal) for examples of what i mean.
Keep an eye on out, I'll probably release it in the next day or so
👍: 0 ⏩: 1
I already got started on some advanced stuff that I am having a bit of visual prob with. I am creating CSS (non-javascripted) menu for journal. I'll show you a sample when I get it working at least on my comp.
👍: 0 ⏩: 1
you might want to check out =Zikes ' journal if you're having problems, he's got a CSS menu happening (hover the top left icon)
👍: 0 ⏩: 1
he only has a single column menu. I am trying to build 4 column, menu that is attached to a banner image. not to the title of journal, but it could help. I'll have to look at what he did. I keep running into trouble with display not correctly fixing to 0px on left of image
👍: 0 ⏩: 0
I just noticed, you forgot the span around the date in there
👍: 0 ⏩: 1
ah. good point.
i'll update it soon
👍: 0 ⏩: 1
cool stuff 
👍: 0 ⏩: 0
This helped me a lot! Along with some of the other tutorials listed. The only thing I can't seem to get to work, is adding images to the journal. I really just want to add one at the very top, but I can't seem to get the right code. I preview my journal, and I don't see an error, but I don't see an image either. Any suggestions as to what I might be doing wrong?
👍: 0 ⏩: 1
try publish it, and link me to it so i can check your css - it's impossible for me to tell you what's going on without being able to see it
👍: 0 ⏩: 1
Lol, sorry about that...
Well, I finally figured out how to get an image on my journal, the trouble is, getting it centered and getting it the right size. I'd like it to stretch across the journal, but I keep getting it either too small or too big. What are the sizes for images?
Below is the html I used to post the image, if that helps.
I used the help menu to look up how to center it, but it doesn't give much help, heh.
Hope I'm making sense, and thanks for trying to help me! I appreciate it!
👍: 0 ⏩: 1
warp the image in a div with a classname (ie -
then in your css write .headimg img{width:100%} - this will stretch the image to be as wide as your journal.
OR, and this might be what you actualy wanted, .headimg{background-color: #...; textalign: center} (change '...' to the hex value of the background colour of your image)
👍: 0 ⏩: 1
Thank you for creating a reference for those of us who are CSS-challenged. 
👍: 0 ⏩: 0
This is wonderful and a lot of help! Thanks for sharing!
Would you mind to explain a bit more about the div.thumbs? I'd really like to have a border around some thumbs, but I just don't understand what you mean by writing class names...
👍: 0 ⏩: 1
what you do is put div tags around your thumbs, with a class of "thumbs" - ie:
....
Then in your CSS you can access it with div.thumbs or just .thumbs
👍: 0 ⏩: 1
Thanks a lot! I think I figured it out!
👍: 0 ⏩: 0
Totally awesome!! I LOVE IT!! thanks for the help
👍: 0 ⏩: 0
how I can put I title of the journal underneath the head image????????????? >o< When I put my jorurnal "preview", I can see that tittle is on the image!!! TT__TT
👍: 0 ⏩: 1
I can't tell what's wrong unless you give me a look - publish a test journal (or edit an old one if you want) and then link me to it.
👍: 0 ⏩: 1
<= Prev | | Next =>