Featured in collections
Recommended for you
daPhyre's avatar
Journal CSS codes 'Rnbw-data'
97 13 4K (1 Today)
By daPhyre   |   Watch
Published: August 15, 2011
Traducción al español en [link]

It's hard to believe I couldn't find this data anywhere. Well, here it goes, hoping it helps more than one deviant around when they make their Journal skins.

In the picture, you can see every box that compounds a Journal, as well as the code I used to generate it, in case you want to try it yourself. Each son of each box has the next color in the rainbow chromatic scale, so you can easily identify who is son of who.

Next, I'll put the list of the full names of every box that compounds the Journals, you can relate it with the picture so you can identify them (Names are set as Attribute.Class1.Class2.Class3 etc):

Journal Data Tree
  • div.gr-box.gr-genericbox
    • i.gr1
      • i
    • i.gr2
      • i
    • i.gr3
      • i
    • div.gr-top
      • i.tri
      • div.gr
        • h2
          • img
      • span.timestamp
    • div.gr-body
      • div.gr
        • div.grf-indent
          • div.text
            • keeper
            • smoothie
          • div.c.ppb.alink.bottom
            • a.a.commentslink
            • span.hsep
            • a.a.prevlink
          • ul.f.list
            • li.f.a
            • li.f
            • li.f.a
            • li.f
            • li.f.a
            • li.f
            • li.f.a
      • i.gr3.gb
      • i.gr2.gb
      • i.gr1.gb.gb1


So, lets start recognizing them:

.gr-box (shown in red) Is the container of all the journal. It is also accessible as .gr-genericbox, I'm unaware why it has two names.

.gr1, .gr2, .gr3 are small boxes that you can see both in top and bottom. They are the ones that make our journals to look roundy. .gr1 is gray since it works as the bottom and top border.

.gr-top is the upper area, where the title and date is shown.

.tri is the down pointing triangle that makes the box look nice. You can simply hide it, ignore it, or use it for your evil purposes.

.gr is contained in both .gr-top and .gr-body (shown in green).

h2 is the title of the journal.

h2 img is the journal-looking icon. As well as with the triangle, you can simply hide it or use it for your evil purposes.

.timestamp is the date when you published your journal.

.gr-body is the content of your journal. It includes your text, links, mood and what you are up to (shown as the biggest yellow frame).

.grf-indent (shown in skyblue) is an indent for the body content.

.text (shown in blue) is the text of the journal. The header and the footer are included in this area as well. It contains the Keeper and Smoothie tags (shown in pink), whose behavior is unknown to me.

.ppb also accessible as .alink and many other classes. I have no idea why it has so many. It contains the journal links (comments and previous).

.commentslink is the comments link...

.hsep is the horizontal separator between the comments and the previous journal entries.

.prevlink is the previous journal entries link.

.list contains the mood and what you are up to list.

.f (shown in pink) are each one of the list entries. .f.a are the ones in gray color. You can access to the names in bold by using the command .f strong.

Now you know all the parts that compound your journal. If you know CSS, now you know what you gotta do. If you don't, I'll be posting soon another entry where I'll teach the basics to make your own journal you can follow this tutorial: [fav.me/d46q2rg] .

Happy coding.

You can also see this color borders in their original format at [fav.me/d46kyfz]
Image size
960x740px 69.76 KB
Featured in collections
Recommended for you
Comments13
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
RainbowPowerDash251's avatar
RainbowPowerDash251Hobbyist Filmographer
I love this but I don't understand the code...^^;
daPhyre's avatar
daPhyreHobbyist Writer
If you try and have some questions, I can help you with whatever challenge you have on your path :)
TopHat-Queen's avatar
TopHat-Queen Digital Artist
You are a saint.
daPhyre's avatar
daPhyreHobbyist Writer
I'm glad you found this useful =)
Faithful-Imagination's avatar
Faithful-ImaginationProfessional Traditional Artist
This is cool! But where do I go to customize a skin?
daPhyre's avatar
daPhyreHobbyist Writer
On new Journal, right bar, on Style, there is a little link that says "Edit skin".
Faithful-Imagination's avatar
Faithful-ImaginationProfessional Traditional Artist
Okay! Thank you.
xReiichiru's avatar
xReiichiruStudent General Artist
Thank-you so much for making this!!! I've been seeing these kinds of names before but have had no idea where they came from!

Really well made and so very helpful!
Thank-you!! :heart:
daPhyre's avatar
daPhyreHobbyist Writer
I'm glad it was really helpful for you! ;)
LittleSardines's avatar
LittleSardinesProfessional Filmographer
Holy crap you saved my life today! =D I'd been having the hardest time figuring out what each section was called.
daPhyre's avatar
daPhyreHobbyist Writer
Glad it helped you! ;)
namenotrequired's avatar
namenotrequiredProfessional Interface Designer
Thank you! I'll sure keep this in mind since I'm learning CSS now :thumbsup:
daPhyre's avatar
daPhyreHobbyist Writer
I'm glad it is useful for people. Thanks! ;)
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
©2019 DeviantArt
All Rights reserved