Shop More Submit  Join Login
×




Details

Submitted on
May 29, 2009
File Size
3.6 KB
Thumb

Stats

Views
26,337 (3 today)
Favourites
581 (who?)
Comments
140
Installs
5,234
×
Keep Dreaming by LifesDestiny Keep Dreaming by LifesDestiny
Please Read Instructions to get full advantage of this skin.

About the Skin Design
I wanted to try more with vectors and a journal skin gave me the push and idea of what I wanted. Everything in the design was draw using the pen tool in fireworks except from the tree itself. I used a stock image to use as a guide. I am pretty proud of the design, considering how much work I put into it and since it's the first time I drew all the vectors myself.

Stock Image: [link] by ~Its-Only-Stock


----------

Live Version : [link]

How to use the skin
I tried to make this as customizable as possible to there are a lot of extras that you can add or change.



:bulletblack: Main Content
This wraps your content. Use this if you want to add the side bar.
code:
< div class="maincontent">Your Content Here</div >
Remember to keep that < /div> at the end of all your content..


:bulletblack: thead
This is the header above the text.
Blue header code:
< div class="thead">Your Title Here</div >
Black header code:
< div class="thead2">Your Title Here</div >

:bulletblack: textbox
This is where you put all your text
code:
< div class="textbox">Your Text Here</div >

:bulletblack: textb
This is the bar below the text. *
Blue bottom bar code:
< div class="textb2"></div >
Black bottom bar code:
< div class="textb"></div >

:bulletblack: Side Bar
This adds that black side bar.**
code:
< div class="sidemenu">Your Text Here</div >
Side Bar Title code:
< div class="shead">Your Title Here</div >

:bulletblack: Line Divider
This adds the line divider that's visible in the side bar.***
code:
< div class="line"></div >

:bulletblack: Scroll Box
This adds within your text boxes. Preview in the image above.
code:
< div class="textscroll"></div >

Just remember to take the spaces out the <div= and the </div

* Don't add any text to the textb. It wasn't coded for text and it will mess up the skin.
** If your going to use the side bar please remember to add the main content div class.
*** Again don't add any text to the line. It wasn't coded for text either.


---------

I realize that the instructions might be hard to follow so if you have any questions about how to add the sections then please don't hesitate to note me, I'd be more than happy to help.

When I originally designed and coded the CSS the side bar fitted perfectly but now the copyright has been added to it, the bottom of the side bar slightly covers the button at the bottom. I have already deleted the first version and re submitted it. It's better than it was but it's not perfect. I'm not re doing it all over again, I'll just be more careful with the side bars in future.

Well I hope you like it, and please leave comments, they will help in me improving my future journal skins.

:iconjournalskins: has my permission to upload this to their gallery
Add a Comment:
 
:iconjournalskins:
First impressions
:bulletyellow: Loving the header image!
:bulletyellow: Looks clean and is easy to read

Visual aspects
Visually this Journal Skins is a really pleasure to look at.
With a consistent style and colour scheme it doesn't have any elements that look misplaced or draw unwanted attention.
Using window like blocks of text the reader will know just where to read.

User experience
The guide as show in the artist comments look very confusing at first.
But after some copy pasting and shifting some HTML around it was not that hard to figure out.
It took me just a minute or two to set up a testing journal using all features.
To improve here I would suggest to make use of some more markup in the artist comments to make the code explenation a bit more comprehensive.

One other thing is that you're not making use of the skin header or footer options.
A perfect thing to put in there would be the .maincontent class.
This is required to be around all of your content.
So why not put it in the header and footer to let it be done automatically on install?

Technical aspects
There are a few technical flaws to this Journal Skin.
In my opinion a quite important one is its compatibility with other browsers. Making use of the border radius options in CSS this Journal Skin will look very different in for instance Internet Explorer.
Try to test your journals at least in FireFox and Internet Explorer to cover for the majority of the viewers.

Another issue is the small size of the scrolling box.
With the tiny size of 100px it will not fit a vertical thumb (Thumb size limits are 150px width or height whichever is reached first).
For that I would suggest optional sizes.
Something like:
.scrollsmall ~ 200px
.scrollmedium ~ 400px
.scrolllarge ~ 600px

Conclusion
If you're not afraid of HTML.
Don't mind that your IE visitors will see a different skin.
And don't intend to use the scrolling boxes for thumbs...
This skin is a very good looking choice!

Liked this critique?
:pointr: Click here to find more or request your own
What do you think?
The Artist thought this was FAIR
51 out of 61 deviants thought this was fair.

The Artist has requested Critique on this Artwork

Please sign up or login to post a critique.

:iconradiolanguage:
radiolanguage Featured By Owner Aug 7, 2012  Hobbyist Traditional Artist
Oh I love this! So pretty, thanks for making this!
Reply
:iconatros17:
ATROS17 Featured By Owner Oct 19, 2011  Hobbyist General Artist
Im kind of new here and I would like to use this amazing skin.. but when I try to edited I dont know where I should put all that codes... maybe in Skin header..skin CSS or skin footer... Sorry if I butters you
Reply
:iconazeeratheninja:
AzeeraTheNinja Featured By Owner Aug 16, 2011  Student Interface Designer
I absolutely adore your coding!!!

I'm totally going to use this! And thanks so much for making it so easy to customize! :love::huggle:
Reply
:iconthetvamtturi:
ThetVamtturi Featured By Owner Jul 11, 2011
Love this! Thanks for sharing
Reply
:iconkiatography:
Kiatography Featured By Owner Jun 29, 2011
<3 I love this!
Reply
:icongunrave71:
GunRave71 Featured By Owner Mar 25, 2011  Student Traditional Artist
thanks
Reply
:iconcarcar1994:
carcar1994 Featured By Owner Nov 22, 2010  Student General Artist
I really love this journal skin. I'm thinking of using it on my journal =D Just thought I'd let ya know before I did so =P
Reply
:iconchaman:
chaman Featured By Owner Jul 21, 2010
Wow I did not know we could make our own journal skins, how does that work?
Reply
:iconluhi:
Luhi Featured By Owner Jul 15, 2010
I love it :D
Reply
:icontifachan13:
TifaChan13 Featured By Owner Jun 27, 2010
thanks 4 the Skin ^^
Reply
Add a Comment: