Shop Forum More Submit  Join Login
Journal CSS codes 'Rnbw-data' by daPhyre Journal CSS codes 'Rnbw-data' by daPhyre
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
    • i.gr1
      • i
    • i.gr2
      • i
    • i.gr3
      • i
      • i.tri
        • h2
          • img
      • span.timestamp
        • 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

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: [] .

Happy coding.

You can also see this color borders in their original format at []
Add a Comment:
RainbowPowerDash251 Featured By Owner Jun 8, 2014  Hobbyist Filmographer
I love this but I don't understand the code...^^;
daPhyre Featured By Owner Jun 11, 2014  Hobbyist Writer
If you try and have some questions, I can help you with whatever challenge you have on your path :)
TopHat-Queen Featured By Owner May 25, 2014   Digital Artist
You are a saint.
daPhyre Featured By Owner May 26, 2014  Hobbyist Writer
I'm glad you found this useful =)
Faithful-Imagination Featured By Owner Mar 8, 2013  Professional Traditional Artist
This is cool! But where do I go to customize a skin?
daPhyre Featured By Owner May 1, 2013  Hobbyist Writer
On new Journal, right bar, on Style, there is a little link that says "Edit skin".
Faithful-Imagination Featured By Owner May 1, 2013  Professional Traditional Artist
Okay! Thank you.
xReiichiru Featured By Owner Dec 7, 2011  Student 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 Featured By Owner Dec 7, 2011  Hobbyist Writer
I'm glad it was really helpful for you! ;)
LittleSardines Featured By Owner Oct 7, 2011  Professional Filmographer
Holy crap you saved my life today! =D I'd been having the hardest time figuring out what each section was called.
daPhyre Featured By Owner Oct 8, 2011  Hobbyist Writer
Glad it helped you! ;)
namenotrequired Featured By Owner Sep 6, 2011  Professional Interface Designer
Thank you! I'll sure keep this in mind since I'm learning CSS now :thumbsup:
daPhyre Featured By Owner Sep 6, 2011  Hobbyist Writer
I'm glad it is useful for people. Thanks! ;)
Add a Comment:

:icondaphyre: More from daPhyre

Featured in Collections

CSS HTML by Cani-bal


Submitted on
August 15, 2011
Image Size
69.8 KB
Submitted with


92 (who?)


Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution 3.0 License.