This is a collaborative project between myself and =iareruss. The design is fully his, the CSS formatting was done by me. There are quite a few things I've learned along the way thanks to the following deviants.



Thier knowledge and resources have taught me greatly. I've also learned quite a bit from w3schools and other randomly searched CSS places.

Live version [link]

This journal has also been formatted to work in IE as well, with a few exceptions: slight issue with gradient image may occur, highlight effect on mouseover of thumbs does not work, and custom cursor does not show up. Any other issues? Please notify me.

Now, on to the features! Let's start with the top. Social buttons. This is in your header, which may appear somewhat complicated. Each link is given its own class, Facebook, Twitter, etc... It is possible to change which box appears for each link, but it may be a bit tricky to edit. You can even omit or make duplicate ones to different links. It's an image sprite, if you do not know how those work, you may want to keep to just editing your link URLs.
-------------------------------------------
<div class="social">
< a class="twitter" href="URL" ></a>< a class="facebook" href="URL" ></a>< a class="myspace" href="URL" ></a>< a class="mailto" href=" [link] you@yourmail.com?subject=RE:%20DeviantART%20Journal" ></a>< a class="link" href="URL" ></a>
</div>
-------------------------------------------
The date is set to display:none; . If you wish for the date to appear, simply remove that line. However, it was requested that it be removed for this design. It is already formatted to fit in, so no worries if you'd like to have it. Same with the moods and previous link and comments link.
-------------------------------------------
.journaltop span{display:none}
.li {display:none;}
.journalbottom {display:none;}
-------------------------------------------
There is a separator line which you may add at any point in your journal text area. This is included in the footer of the skin.
-------------------------------------------
<div class="sep"></div>
-------------------------------------------

As shown in the preview image, you have the choice of mini-thumbs 50x50 or standard. By removing the term "DISABLED" from this CSS below. That will make your thumbs mini, if you leave it, they will be the regular size. @dxd has a nice little mini gallery that expands and all, where I got the idea for the mini's. To make your thumbs centered, add the "thumb" tags around your thumb. (you may use to center anything you like, really)
-------------------------------------------
.shadow-holder imgDISABLED
<div class="thumb"></div>
-------------------------------------------
Finally, the "featured image" box. This was modeled after =LeMex's large thumbs. Which aren't thumbs at all, but img links. This is in the footer. You will need to edit the link and the img location to your preference. Or you may omit completely, however, that would make the bottom of the layout look rather empty.
-------------------------------------------
< div class="feature" >< div class="ft" >< span >< a href="URL" ></a>< img src="IMGURL" alt="" ></span></div></div>
-------------------------------------------

Please leave the credits in the footer as this was a lot of hard work put into this journal's creation. Thank you.

Any critiques on this deviation, keep in mind that the design is not my creation, I want critique on the actual CSS. If any CSS masters wish to have a look at my formatting and give me pointers and a review, I would be entirely grateful. Don't worry, criticism is appreciated and desired. Any critique on design, have a look at =iareruss's original layout and share your opinion and give a fave if you like. Please do fave there if you fave here! It's his design and he deserves the appreciation. ;D