LifesDestiny on DeviantArthttps://www.deviantart.com/lifesdestiny/art/Keep-Dreaming-124166007LifesDestiny

Deviation Actions

LifesDestiny's avatar

Keep Dreaming

By
Published:
29.3K Views

Description

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
© 2009 - 2024 LifesDestiny
Comments147
Join the community to add your comment. Already a deviant? Log In
journalskins's avatar
:star::star::star::star-empty: Overall
:star::star::star::star-half::star-empty: Vision
:star::star::star::star-empty::star-empty: Originality
:star::star::star-empty::star-empty::star-empty: Technique
:star::star::star::star::star-empty: Impact

First impressions
<img src="e.deviantart.com/emoticons/b/b…" width="10" height="10" alt=":bulletyellow:" title="Bullet; Yellow" /> Loving the header image!
<img src="e.deviantart.com/emoticons/b/b…" width="10" height="10" alt=":bulletyellow:" title="Bullet; Yellow" /> 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?
<img src="e.deviantart.com/emoticons/p/p…" width="11" height="10" alt=":pointr:" title="Point Right" /> Click here to find more or request your own