As you can see, I've done a bit of CSS tinkering to some small measure of success. And being the benevolent guy I am, I wanna share the secerets I learned!

First things first, you gotta be a deviantArt subscriber in order to throw some CSS into your journal, so don't waste 'yer life reading my following rambling tutorial if you're not. The pretty journals around you are just such teases I know But who needs to pay for online decorations right?


Next thing, this is a simple tutorial based off a template and more detailed tut by the most talented `Lilyas. I plan on tackling her more advanced tuts next, and again passing on what tidbits I learn. But if you wanna get the original or find s'more knowledge from her, have at it! But now for me to start off this fantastic voyage towards your own hot new journal

Alrighty, as far as code is concerned, we'll start with this:

Before you freak and say "WTH is that?!?"... chill. Copy that chunk of code directly into the CSS box at the bottom of your "Edit Journal" page. You gotta click "Add CSS". I'm gonna cover the values you need to know/substitute in an easy to understand manner, painless.
1***** is a 6 digit number used to represent a specific color, known as a hex code.
In this instance, this value controls the default color of the text for the whole journal.
For this tutorial, plug in C8C8C8. (note, just to replace the 6 characters I had before, they should be between the # and the ; )
2***** is yet another hex code. This time it's controlling the color of the entire background of your journal (mine's the solid dark grey).
Put 000038 in there for now just like you did the first one.
3** is a URL to an image. This is suprisingly going to be the footer at the very bottom of the page.
Put in i8.photobucket.com/albums/a10/SuprBlahman/footer_db.jpg (but with http:// in front of it of course) now.
4***** controls the color of the border for your entire journal. Replace with C8C8C8.

You're done with the first bit of code (otherwise known as a "rule")! Time for the next piece 'o code. It's bigger, but don't worry, only 3 things you need to change:

1** is another image link, this time for the header. For now, throw in i8.photobucket.com/albums/a10/SuprBlahman/header_db.jpg (again, don't forget http:// before it. Last time I'm reminding you).
2***** is the color of the font for your Journal Title. Set it as 000038.
3***** is the color of the font for the date and time of the journal submission. Set it as 6CB6FE.

Okay, time for the next set of rules. See, this is easy:

1***** is the color of the font for links within your journal that haven't been clicked yet. Replace with 3A81FE.
2*****... I'm not exactly sure what state of a link this actually controls... set it as C8C8C8 though...
3***** is the color of the font of a link after it's already been clicked once before that session. Replace with 3A81FE.
4***** is the color of the font of a link when you place your cursor over it but don't click yet. This helps them stand out more when a person moves their mouse across the screen. Replace with 90C7FE.

On to the next set of rules:

1***** is the color of the text used in your Mood/Listening/Watching/Playing/Eating/Drinking box. Replace with C5E7FC.

That one was short, time for the next:

1***** controls the color of the font for the link to view Comments at the bottom of your journal. Set it as 77A2EE.
2***** controls the color of the font for the link to view Previous Journal Entries at the bottom of your journal. Set it also to 77A2EE.
3***** controls the color of the font for both the links at the bottom of your journal when hovered over. Set it to C5E7FC.

Done there, onward to the last set of rules:

1** will be the image that is tiled behind your journal entry. Put i8.photobucket.com/albums/a10/SuprBlahman/tbtiledb.jpg (I lied before, might as well remind you one last time to put http:// before that...) in there.
2***** is the color of the border surrounding the box with the tiled image. Make it C8C8C8.
3***** is the color of the font for the title text. This is the words "-THE ARTIST'S PERSONAL NEWS-" and "-THE FEATURE PRESENTATION-" in my journal. Make it C5E7FC.
4***** is the color of the border surrounding the banner that the title is on. Make it 60BAFF.
5***** is the color of the banner. Make it 2188C7.
6***** is the color of the font used in the main body of the journal entry. Make it C8C8C8.
7***** is the color of the background of the main body of the journal entry. Make it 000C52.
8***** is the color of the border seperating the main body of text from the outer tiled square. Make it C8C8C8.

Okay, now you have this blue dragon journal layout. Do note, this is a free journal template by `Lilyas, so you can keep it as is. Although the joy of a custom CSS journal is, of course, customizing it yourself!

As you can see, you can already change the colors for text and backgrounds by plugging in different hex codes. Here's a site to get the appropriate codes for different colors. Also, as you can see there are really only 3 images involved in this whole thing. You can use those 3 as templates to come up with a header, footer, and repeating tile background of your own!
I'll be posting a part 2 for this with some further customization options later with this code. And in the future to come, I plan to be explaining some even more advanced CSS features.
But for now, I hope you can enjoy this journal!

If you need any specific help, be it with the code itself or perhaps even putting together your images, don't hesitate to ask me