HOME | DD
fkinghost — Journal Structure: a reference
by-nc-sa
Published: 2006-09-26 10:21:41 +0000 UTC; Views: 138682; Favourites: 2179; 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
Excellent idea! Will come in handy 'til I get 'em all memorized
👍: 0 ⏩: 0
Ooo, you trouble saver you. I look foreward to inflicting my own rosy red eyesore of a journal on everyone who happens by my page. It could only be worse if it had an animated gif background.
👍: 0 ⏩: 0
This was a great, great help 
.journalbox .journalbottom {
padding-top:20px!important;
background-color:#7a6a5b!important;
}
.journalbox .commentslink {
background-color:#7a6a5b!important;
color:#f2639a!important;
font-size:14px!important;
position: relative!important;
left: 20%!important;
}
.journalbox .prevlink {
background-color:#7a6a5b!important;
color:#f2639a!important;
font-size:14px!important;
position: relative!important;
left: 20%!important;
}
which unfortunately the seperator doesn't obey and we end up with
| 4 Comments Previous Journal Entries
Is there any way to hide the seperator or force it off to the side as well?
👍: 0 ⏩: 1
if you're just wanting them near the left side I think you could use something like this:
.journalbox .journalbottom{
text-align:left !important;
padding-left:NNpx !important;
}
Pretty sure that'll do it, but I haven't tested it. If it doesn't then feel free to send me a note and I'll be happy to help you hash it out
👍: 0 ⏩: 1
Turns out it was the crazy dropshadow code messing with everything, but now everything works and I think I'll leave them in the middle anyway. Thanks though
👍: 0 ⏩: 0
This should be "required" reading for anyone who wants to try using css as to avoid people using colours that hurt the eyes!
👍: 0 ⏩: 0
hey this is gold... but how do you use the div.thumbs thingy?
👍: 0 ⏩: 1
when writing your journal, add a div like so:
....
place your thumbs between the div tags, and then in your stylesheet you can style the div by using the selector div.thumbs or just .thumbs
👍: 0 ⏩: 1
I wish I had this when I first started taking dA apart... Nice job explaining. This is something that every subscriber/senior should have.
👍: 0 ⏩: 0
Thanks you. Thank you very, very much.
👍: 0 ⏩: 0
Wish I had scene this earlier. Ended up finding out things for myself. But, this is a great thing to have up.
👍: 0 ⏩: 1
Your journal is great, a very good reference I'll start linking to if you don't mind. I was going to include a sample stylesheet in the description here, but ran out of time and decided others could step in - I can't do everything
Personaly I find your journal easier to understand than my graphical explination here, but people like their eyecandy eh?
👍: 0 ⏩: 1
Go for it man. Feel free to link away. It is an easier way to understand things in the long run. Also to answer your other reply to my comment, :hover doesn't work, tried it and wouldn't be recognized even though the parser notices it, it just won't proccess it.
👍: 0 ⏩: 1
Misread a couple things. I couldn't get :hover to work, but it seems others have, so I'll have to play around with it.
And yes, of course People love their eye-candy
👍: 0 ⏩: 0
Very helpful... 
I just used this to pimp my page.
👍: 0 ⏩: 0
my my...look who's the popular bitch now
👍: 0 ⏩: 1
um... paris hilton for showing up to octoberfest in that dress?
👍: 0 ⏩: 1
I just page source someone's theme, take the code and edit from there, so I save myself the horrible trouble of doing it from complete scratch. XD
I cheat, I know. ): But my layout ends up turning way different than the original. <3
👍: 0 ⏩: 0
thanks alot just what i need. you dont happen to know how to change your shoutbox etc?
👍: 0 ⏩: 1
you can't - only your journal can be styled.
👍: 0 ⏩: 1
Just what i was looking for
Now off to expand my knoledge of HTML from just creating href links
Thanks mate.
👍: 0 ⏩: 1
I just checked your userpage - nice to see you got it all figured out, lookin' good
👍: 0 ⏩: 1
Thanks
Yup after about half an hour of head scratching it all fell into place. Now to spend the next few weeks repeating it over and over in #h3lp
👍: 0 ⏩: 0
weeeeelll... i'm good at doing things out of the blue, but promises sometimes take a while to get around to
👍: 0 ⏩: 0
thanks a lot for this!
helped me create this: [link]
👍: 0 ⏩: 0
someone made it obsolete within an hour or two when they changed the journal icon to an img though
thanks for your efforts dude, much respect - as always
👍: 0 ⏩: 0
Thanks 
👍: 0 ⏩: 1
ooh, nice journal - simple and elegant - I can't wait for 
👍: 0 ⏩: 1
Thanks
👍: 0 ⏩: 0
this confuses the hell out of me ima wait till you throw up a template! cuse i dont know anything and im sad that i cant test this out right Away
👍: 0 ⏩: 2
cool to see you figured it out - nice journal you've got happening there
👍: 0 ⏩: 1
its like freakin HTML on crack!
👍: 0 ⏩: 1
well, that's the point - HTML for your information, CSS to make it look purdy
👍: 0 ⏩: 1
your journals puurdyy
👍: 0 ⏩: 0
You might wanna check this out [link] though the whole thing still confuses me
👍: 0 ⏩: 1
thanks i figured it out why not go check it
👍: 0 ⏩: 0
Excellent stuff, too bad I have no sub to do it!
👍: 0 ⏩: 1
hmmm. are you sure?
👍: 0 ⏩: 2
<= Prev | | Next =>