HOME | DD

Published: 2006-09-26 10:21:41 +0000 UTC; Views: 135467; 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
Miz-Jynx [2015-12-01 16:17:52 +0000 UTC]
I can't find out how to change the background color of the date. What should I be looking for?
👍: 0 ⏩: 1
foundsoundfunny In reply to Miz-Jynx [2015-12-02 08:58:06 +0000 UTC]
The date is in two parts, the 'Journal Entry:' text is untagged in .journaltop, white the date is within a span tag.
Because the 'Journal Entry:' text is loose in .journaltop you can't give it a background the way you have to the heading; the background for 'Journal Entry:' is applied to .journaltop, which is where you're applying the skull background. The best you can do is put a background behind the date, while hiding the 'Journal Entry:' text.
To do this, make the font size 0 on .journaltop, and then make sure that an actual font-size is set for .journaltop h2 (26px currently) and .journaltop span (22px currently). Depending on how you want the date to look, you'd apply one of the following:
The following CSS will put the date in a box that fits the size of the text inside it:
.journaltop span {
font-size: 22px;
padding: 2px;
background-color: #140704;
margin-top: 3px;
display: inline-block;
}
And this code will put the date in a box that fills the width of the journal:
.journaltop span {
font-size: 22px;
padding: 2px;
background-color: #140704;
margin-top: 3px;
display: block;
}
You might have to fiddle with some of the values, I'm not sure if the margin is right, it might be a pixel too big.
👍: 0 ⏩: 0
Poichanchan [2013-08-07 03:32:44 +0000 UTC]
i want to add an image as the bg to the journal top, behind the tital but cant OTL
👍: 0 ⏩: 1
foundsoundfunny In reply to Poichanchan [2013-08-07 04:59:53 +0000 UTC]
What's the CSS you're trying to use?
👍: 0 ⏩: 0
MelikeBirsenAtes [2011-08-28 11:40:30 +0000 UTC]
Your tutorial helped me a lot creating my very first journal skin: Beauty of the Dead
I credited you linking back to the actual tutorial page and your deviantart profile; both in artist's comments and at journal footer.
Thanks.
👍: 0 ⏩: 0
Kyas-Essex [2011-08-07 02:49:26 +0000 UTC]
Thank you for all the helpful links as well as this tutorial!
👍: 0 ⏩: 0
AzankinoKING [2011-03-25 06:41:56 +0000 UTC]
this is the best explanation i came across here thanks a million.
👍: 0 ⏩: 1
foundsoundfunny In reply to AzankinoKING [2011-03-28 07:58:02 +0000 UTC]
You're welcome. Now you just need to write a journal, huh?
👍: 0 ⏩: 1
AzankinoKING In reply to foundsoundfunny [2011-03-28 08:03:37 +0000 UTC]
oh yes, i got allot more i want to do with it thou
👍: 0 ⏩: 0
scheming-sanity [2011-02-19 02:47:23 +0000 UTC]
You are God. I worship. *Slams head on floor*
👍: 0 ⏩: 1
Phlum [2010-09-11 11:12:00 +0000 UTC]
Is it at all possible to change the journal icon thing?
👍: 0 ⏩: 0
spring-sky [2010-08-03 15:36:57 +0000 UTC]
You've been featured in my Let your journals shine news article
👍: 0 ⏩: 0
shsn [2010-06-23 16:44:57 +0000 UTC]
Hello. I would like to keep the title but hide the date under the title. setting journaltop to display none would get rid of everything. Is there anything else I can do?
thank you in advance
👍: 0 ⏩: 1
foundsoundfunny In reply to shsn [2010-06-23 19:09:46 +0000 UTC]
Set the font-size to zero for .journaltop, then set a positive font-size for .journaltop h2
👍: 0 ⏩: 0
foundsoundfunny In reply to KITTY-Z [2010-01-14 04:29:02 +0000 UTC]
Sorry for the late response... but it's great to see you figured it out yourself, I always like to see that
👍: 0 ⏩: 1
KITTY-Z In reply to foundsoundfunny [2010-01-14 04:33:56 +0000 UTC]
But know I can't figure out how to change the link colour or the journal title colour.
The journal title is changed when I preview my entry, but it's not when I hit submit.
👍: 0 ⏩: 0
KITTY-Z [2010-01-04 21:17:02 +0000 UTC]
How do you change the colour of the text in the list? I can't figure that out...
👍: 0 ⏩: 0
darkhjustice [2009-12-18 04:14:40 +0000 UTC]
Haha, if I was any better at computers I would use this as a reference, it looks pretty good.
However, I used this in a journal entry [link] .. hope that's alright with you
If you want me to delete it, let me know
👍: 0 ⏩: 0
Rogerdatter [2009-10-18 11:16:43 +0000 UTC]
Thanks a lot! Now i will try to make my own journal design
👍: 0 ⏩: 0
XxCindersxX [2009-10-16 18:34:58 +0000 UTC]
many thanks!!
my first CSS with your help: [link]
👍: 0 ⏩: 1
foundsoundfunny In reply to XxCindersxX [2009-10-17 16:41:38 +0000 UTC]
That's really your first? Nice work!
👍: 0 ⏩: 1
BSG75 [2009-09-17 07:14:41 +0000 UTC]
Thanks so much for this. It helped me as I created my first skin for my newly created dA page/journal.
It was just what I was looking for!
👍: 0 ⏩: 0
Thundaboom [2009-09-04 12:30:55 +0000 UTC]
Thank you. I've been wanting to know the id's and classes for the journal for a long time
👍: 0 ⏩: 0
megajosh2 [2009-05-30 18:59:21 +0000 UTC]
There oughta be one of these for the new journal style
👍: 0 ⏩: 1
foundsoundfunny In reply to megajosh2 [2009-05-30 19:09:32 +0000 UTC]
There are! - check my description for two different references by two fellow deviants, they beat me too it
👍: 0 ⏩: 0
SmandyDandy [2009-05-13 01:45:59 +0000 UTC]
This helped a lot but you could make it much easier by making the highlights different colors
👍: 0 ⏩: 0
| Next =>