Introduction This is my first publicly available Journal Skin! It's based on ubuntu.com, and uses their font and colours. You can view a live preview here. Please read this description, as it contains a lot of important information on the skin.
Update 1: Added hover effects on the links and menu bar buttons. Made the whitespace around the comments counter smaller. Update 2: Centered the containers (please note that the preview image is not currently updated to reflect this change). Update 3: Fixed a problem with mood background colours.
Installing and Customising Install the skin by clicking the green "Install to Journal" button below the preview image.
The next thing you'll want to do is customise your avatar and links in the bar at the top of the Journal. If you don't do this, your Journal will be published with my avatar and the blank example links (exactly as you see it in the preview image). Do this by clicking the "Edit skin" button. In the first input box that comes up, "Skin Header", change my avatar to yours, and modify the links. Here is the code for a link: <a href="URL">Link Text</a> Remove, add, and modify the links as you please. Don't muck around with the rest of the code unless you know what you're doing, otherwise you'll get an ugly result.
If you understand how to use CSS, you'll be able to change the colours for the entire skin if you don't like the Ubuntu colours.
Writing Your Journal When you go to write your Journal, don't just start typing as you would with a normal Journal, otherwise your text will be on the dotted background and won't be styled. Instead, you're going to have to work with this code: <div class="container">Your text here</div> This will create a nice little box for you to type in like you can see in the preview image. You can create multiple boxes for various reasons (different topics, sections, paragraphs etc.) by simply repeating the code. You can see how multiple boxes will look in the live preview.
Other Codes There are other codes which you can use to add style to your Journal.
You can create a link to any webpage or image with this code: <a href="URL">Link Text</a>
You can use headers of different sizes with the following codes: <h1>Your Text Here</h1> <h2>Your Text Here</h2> <h3>Your Text Here</h3> The codes are ranked in order from largest to smallest (e.g. 1 is the largest header and 3 is the smallest one).
You can create a fancy looking quote with this code: <blockquote>Your Quote Here</blockquote>
You can add a horizontal ruler to separate things with this code: <hr>
You can create an unordered list with this code: <ul> </ul> Place inside the following code each time you want to create a new list item: <li>List Item Here</li>
If you'd like information on other HTML tags available, you can learn at w3schools.com. I've only included here the tags I styled especially for the skin.
Enjoy! Enjoy the skin! I hope you like it. If you have any questions, comments, or suggestions, please leave a comment!
thanks man, but it only looks so good cause you made it look good for such a great work, linkin back is the least i can do even more thanks back to you for makin this one!!!
Lovely formatting. Very stylish!
Looks good in your journal
for such a great work, linkin back is the least i can do
even more thanks back to you for makin this one!!!
I'm sure you'll be a premium again sooner or later