HOME | DD
foundsoundfunny — Journal Structure: a reference
by-nc-sa
Published: 2006-09-26 10:21:41 +0000 UTC; Views: 135475; 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
It's actually pretty simple, it only gets complicate when you start doing the more complicated stuff.
Take a look at htmldog.com and try the beginner tutorials, you'll be getting along in no time - drop me a note if you need a hand
👍: 0 ⏩: 1
Thank you very much for the tip ^-^
I'll see how this CSS ends up for me :B
👍: 0 ⏩: 0
This'll be a great help! Thanks for the knowledge! xD
👍: 0 ⏩: 0
i tried uploading and image where the title is everthings good except that its either too big or too small!! what do i do ? i m using tinypic.com... 
👍: 0 ⏩: 1
The easiest way to solve the problem is to apply the following CSS:
.journalbox{max-width:499px;_width:499px;margin:0 auto 20px auto}
It will restrict the journal from growing wider than your background image
👍: 0 ⏩: 1
i "featured" your work in my recent journal.
take a look at it
👍: 0 ⏩: 1
thanks for the plug
didn't realise it ranked so high when you search for 'journal'
👍: 0 ⏩: 1
Hello !
I have not read all, but here is my French translation : Here .
I hope it will be useful to all French spaekers.
👍: 0 ⏩: 0
fav'd for later usage... once I suscribe again.
👍: 0 ⏩: 0
Great thing!!!
Now I can make a fancy jurnal! Yay!!!
Thanks !!!
👍: 0 ⏩: 1
Thanks!
I think I already love my journal result! 
👍: 0 ⏩: 0
Thanks so much, this is very helpful!
👍: 0 ⏩: 0
very useful!
one day or another gonna try it xD
👍: 0 ⏩: 0
woah, dude, where did you vanish to all this time?
👍: 0 ⏩: 0
OH, thank you !! I`ve been looking for something like that
👍: 0 ⏩: 0
just what i needed, thanx
original css doesn't work all the time so thnx
👍: 0 ⏩: 0
i visited you're page "Creative Journal CSS" and even though you havent finished it yet, i found it a BIG help!!!! i spent an hour trying to figure out what i was doing wrong with my HTML link. The image i wanted to display highlighted everything i wrote under it and linked it to the image. geez that was a nightmare.
SO thankyou thankyou thankyou!!! so much!! for the site, it helped me out alot!!!
👍: 0 ⏩: 0
Just reading your tutorial page on [link]
Very valuable! Thank you for sharing that knowledge, great stuff.
👍: 0 ⏩: 1
Glad I could help - just keep in mind that I'm not finished with that tutorial yet, but I guess you've probably noticed that by now
👍: 0 ⏩: 1
Well as it is only a reference... ^^ Its good to remind you on things.
👍: 0 ⏩: 0
that's really helpful. thanks!
now it makes journal source heaps easier to understand
👍: 0 ⏩: 0
Yay, thanks, this will be really useful. I can't wait to dive in and start changing my journal - after spending ridiculously long debating the colour scheme, of course.
👍: 0 ⏩: 0
yay.. thank you for the help I was looking for something like this ... :-D
👍: 0 ⏩: 0
Thanks this is a big help~
But I have a question,
what's Journal Entry called for the css?
I can't move it to place I want it to go;;;;
👍: 0 ⏩: 1
The 'Journal Entry' text is in .journaltop - but it is loose in there, so you cannot target it specifically. This is a problem because the heading is also in .journaltop - so if you try to move 'Journal Entry' by messing around with .journaltop you're going to shift the heading too.
The way you deal with this problem really depends on your journal's design, can you share a screenshot that shows what you're trying to achieve?
👍: 0 ⏩: 1
[link]
red arrow shows where I wanted the Journal Entry date to be~
👍: 0 ⏩: 1
Looks like you're using position: absolute to position the heading there - that'll make moving the 'Journal Entry' line easy. All you need to do is add padding-top:###px to .journaltop and it will push the text down (replace ### with a pixel value, ie 20).
If you've specified the height of .journaltop you will also need to subtract the padding-top amount from the height of .journaltop. This is because the height of any HTML element is the height of the border + height of the padding + height of the content. When you tell something to be 100px tall, you're only telling the content to be 100px - any padding is added on top of that.
👍: 0 ⏩: 1
I got it now!!♥ Thanks so much! > u 👍: 0 ⏩: 0
Thanks for this man! I'm doing a uni paper on website design, and I still couldn't get my head around the specific css lines used on dA. Jolly good job
👍: 0 ⏩: 1
Glad to help - and good luck with your paper!
👍: 0 ⏩: 0
very helpful! i'm faving this for easy future reference.
👍: 0 ⏩: 0
Went out to jack me some CSS... Shoulda known I'd end up here. I'm going to go and read stuff, but first,
Spook, you rock.
👍: 0 ⏩: 0
Awesome, much easier for even an advanced CSS user who really doesn't enjoy or have the time to sift through all the HTML. Thanks a lot!
👍: 0 ⏩: 1
You're most welcome
Eventually you'll memorise them and wont need this - when I first made it I myself didn't remember all the elements, but with use it's all sunk in
👍: 0 ⏩: 0
Woo, very useful for someone who just got a subbie and thought, "This'll be easy!" then realised that she has no idea whatsoever of CSS. Thanks!
👍: 0 ⏩: 1
Hope you found it useful - admittedly it's not too useful in actually learning CSS, as it only serves as a reference to the various elements. I am working on a proper tutorial though, which will cover absolutely everything someone might need to write their own journal skin - check it out if you like , just keep in mind I'm currently working on it and it's not finished.
👍: 0 ⏩: 0
This is GREAT STUFF...
Guess I'll start gifting away CSS for dA Journals...
since I can't get my own-ish little-eth subbie...
=\ I had it once for 1-week [won a random contest of the dA v4 I guess]. Thing is I didn't know a THING.
👍: 0 ⏩: 0
<= Prev | | Next =>