HOME | DD

foundsoundfunny — Journal Structure: a reference by-nc-sa

Published: 2006-09-26 10:21:41 +0000 UTC; Views: 134811; Favourites: 2186; Downloads: 2606
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
Further references:


Related content
Comments: 419

foundsoundfunny In reply to ??? [2018-08-16 19:39:55 +0000 UTC]

👍: 0 ⏩: 0

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

lauraypablo [2014-04-18 09:32:07 +0000 UTC]

Muchas gracias

👍: 0 ⏩: 1

foundsoundfunny In reply to lauraypablo [2014-04-19 09:30:26 +0000 UTC]

No hay de qué!

👍: 0 ⏩: 0

iAmAneleBiscarra [2013-12-18 11:04:07 +0000 UTC]

so helpful! thanks!

👍: 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

ShiningStella [2013-05-23 12:39:18 +0000 UTC]


thank you for this!

👍: 0 ⏩: 0

serafina-rose [2013-02-28 12:40:43 +0000 UTC]

Thanks for the tut... easy to follow

👍: 0 ⏩: 0

purple-reaper [2011-10-04 18:40:41 +0000 UTC]

holland ?

👍: 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

skytd [2011-06-23 14:03:20 +0000 UTC]

awesome!
this is all i needed!

👍: 0 ⏩: 0

MoonMochi42 [2011-04-07 17:31:08 +0000 UTC]

This is very helpful thanks! :3

👍: 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

foundsoundfunny In reply to scheming-sanity [2011-02-20 09:23:41 +0000 UTC]

NO U!

👍: 0 ⏩: 0

MightyMelleR [2011-02-02 05:03:09 +0000 UTC]

this is EXTREMELY helpful! Thank you so much!

👍: 0 ⏩: 0

flominowa [2010-12-18 07:14:30 +0000 UTC]

Veeery useful. Thank you!

👍: 0 ⏩: 0

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

TANTTA69 [2010-06-18 02:37:17 +0000 UTC]

Thanks helps alot

👍: 0 ⏩: 0

Elena228 [2010-06-07 03:40:54 +0000 UTC]

Helpful! Thank you!

👍: 0 ⏩: 0

jaskij [2010-05-16 14:01:24 +0000 UTC]

Great thing, but the polish link is dead :/

👍: 0 ⏩: 0

TheMangaPit [2010-03-27 17:12:49 +0000 UTC]

Nice, I'll this

👍: 0 ⏩: 0

TehAngelsCry [2010-02-26 12:01:42 +0000 UTC]

I love you for making this. Thank you so much!

👍: 0 ⏩: 0

KITTY-Z [2010-01-04 21:23:47 +0000 UTC]

Er, nevermind. I figured it out.

👍: 0 ⏩: 1

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

crazy3azeb [2009-11-11 05:22:23 +0000 UTC]

Thnx fro sharing

this is so helpfull for me

👍: 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

XxCindersxX In reply to foundsoundfunny [2009-10-20 04:04:02 +0000 UTC]

Thanks to you.

👍: 0 ⏩: 0

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

SaloGuardione [2009-05-12 15:18:34 +0000 UTC]

Excelent !!!

👍: 0 ⏩: 0

xxkudokuokamixx [2009-04-13 04:32:56 +0000 UTC]

Very simple, awesome reference

👍: 0 ⏩: 0

dizzysmile [2009-03-17 16:26:16 +0000 UTC]

This is absolutely perfect! Thank you!

👍: 0 ⏩: 0

AlienShore [2009-02-08 20:08:17 +0000 UTC]

Very nice work, this has clarified a lot for me!

👍: 0 ⏩: 0


| Next =>