Shop Mobile More Submit  Join Login
Journal Structure: a reference by thespook Journal Structure: a reference by thespook
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 ;p

Translations
Further references:


:thumbsup:
Add a Comment:
 
:iconmiz-jynx:
Miz-Jynx Featured By Owner Edited Dec 1, 2015  Hobbyist Digital Artist
I can't find out how to change the background color of the date.  What should I be looking for?
Reply
:iconthespook:
thespook Featured By Owner Dec 2, 2015
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.

:peace:
Reply
:iconlauraypablo:
lauraypablo Featured By Owner Apr 18, 2014  Hobbyist Digital Artist
Muchas gracias :)
Reply
:iconthespook:
thespook Featured By Owner Apr 19, 2014
No hay de qué!

:ninja:
Reply
:iconiamanelebiscarra:
iAmAneleBiscarra Featured By Owner Dec 18, 2013  Hobbyist General Artist
so helpful! thanks!
Reply
:iconpoichanchan:
Poichanchan Featured By Owner Aug 6, 2013  Student Digital Artist
i want to add an image as the bg to the journal top, behind the tital but cant OTL
Reply
:iconthespook:
thespook Featured By Owner Aug 6, 2013
What's the CSS you're trying to use?
Reply
:iconshiningstella:
ShiningStella Featured By Owner May 23, 2013  Hobbyist Digital Artist
:iconredsparklesplz::iconredroseplz::iconredsparklesplz:
thank you for this!
:iconredsparklesplz::iconredroseplz::iconredsparklesplz:
Reply
:iconserafina-rose:
serafina-rose Featured By Owner Feb 28, 2013  Hobbyist Digital Artist
Thanks for the tut... easy to follow
:iconredsparklesplz::iconredroseplz::iconredsparklesplz:
Reply
:iconpurple-reaper:
purple-reaper Featured By Owner Oct 4, 2011  Hobbyist
holland ?
Reply
:iconmelikebirsenates:
MelikeBirsenAtes Featured By Owner Aug 28, 2011
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. :huggle:
Reply
:iconkyas-essex:
Kyas-Essex Featured By Owner Aug 6, 2011  Hobbyist Digital Artist
Thank you for all the helpful links as well as this tutorial! :worship:
Reply
:iconskytd:
skytd Featured By Owner Jun 23, 2011  Professional General Artist
awesome!
this is all i needed!
Reply
:iconmoonmochi02:
MoonMochi02 Featured By Owner Apr 7, 2011  Hobbyist Traditional Artist
This is very helpful thanks! :3
Reply
:iconazankinoking:
AzankinoKING Featured By Owner Mar 24, 2011  Hobbyist Photographer
this is the best explanation i came across here thanks a million.
Reply
:iconthespook:
thespook Featured By Owner Mar 28, 2011
You're welcome. Now you just need to write a journal, huh? :)
Reply
:iconazankinoking:
AzankinoKING Featured By Owner Mar 28, 2011  Hobbyist Photographer
oh yes, i got allot more i want to do with it thou :D
Reply
:iconscheming-sanity:
scheming-sanity Featured By Owner Feb 18, 2011
You are God. I worship. *Slams head on floor*
Reply
:iconthespook:
thespook Featured By Owner Feb 20, 2011
NO U!

;p
Reply
:iconmightymeller:
MightyMelleR Featured By Owner Feb 1, 2011
this is EXTREMELY helpful! Thank you so much!
Reply
:iconflominowa:
flominowa Featured By Owner Dec 17, 2010  Professional Digital Artist
Veeery useful. Thank you!
Reply
:iconphlum:
Phlum Featured By Owner Sep 11, 2010  Student Digital Artist
Is it at all possible to change the journal icon thing?
Reply
:iconspring-sky:
spring-sky Featured By Owner Aug 3, 2010  Hobbyist General Artist
You've been featured in my Let your journals shine news article :aww:
Reply
:iconshsn:
shsn Featured By Owner Jun 23, 2010
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
Reply
:iconthespook:
thespook Featured By Owner Jun 23, 2010
Set the font-size to zero for .journaltop, then set a positive font-size for .journaltop h2 :)
Reply
:icontantta69:
TANTTA69 Featured By Owner Jun 17, 2010  Student Photographer
Thanks helps alot
Reply
:iconelena228:
Elena228 Featured By Owner Jun 6, 2010  Hobbyist General Artist
Helpful! Thank you! :)
Reply
:iconjaskij:
jaskij Featured By Owner May 16, 2010
Great thing, but the polish link is dead :/
Reply
:iconthemangapit:
TheMangaPit Featured By Owner Mar 27, 2010  Hobbyist General Artist
Nice, I'll :+fav: this :thumbsup:
Reply
:icontehangelscry:
TehAngelsCry Featured By Owner Feb 26, 2010  Professional Interface Designer
I love you for making this. Thank you so much!
Reply
:iconkitty-z:
KITTY-Z Featured By Owner Jan 4, 2010
Er, nevermind. I figured it out.
Reply
:iconthespook:
thespook Featured By Owner Jan 13, 2010
Sorry for the late response... but it's great to see you figured it out yourself, I always like to see that :)

:peace:
Reply
:iconkitty-z:
KITTY-Z Featured By Owner Jan 13, 2010
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.
Reply
:iconkitty-z:
KITTY-Z Featured By Owner Jan 4, 2010
How do you change the colour of the text in the list? I can't figure that out...
Reply
:icondarkhjustice:
darkhjustice Featured By Owner Dec 17, 2009  Hobbyist General Artist
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 :D
Reply
:iconcrazy3azeb:
crazy3azeb Featured By Owner Nov 10, 2009
Thnx fro sharing :)

this is so helpfull for me :)
Reply
:iconrogerdatter:
Rogerdatter Featured By Owner Oct 18, 2009  Student Digital Artist
Thanks a lot! Now i will try to make my own journal design
Reply
:iconxxcindersxx:
XxCindersxX Featured By Owner Oct 16, 2009
many thanks!!

my first CSS with your help: [link]
Reply
:iconthespook:
thespook Featured By Owner Oct 17, 2009
That's really your first? Nice work! :nod:
Reply
:iconxxcindersxx:
XxCindersxX Featured By Owner Oct 19, 2009
Thanks to you. :)
Reply
:iconbsg75:
BSG75 Featured By Owner Sep 17, 2009
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!
Reply
Add a Comment:
 
×

:iconthespook: More from thespook





Details

Submitted on
September 26, 2006
Image Size
76.2 KB
Resolution
964×745
Link
Thumb
Embed

Stats

Views
130,818 (1 today)
Favourites
2,296 (who?)
Comments
430
Downloads
2,565

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
×