pica-ae on DeviantArthttps://www.deviantart.com/pica-ae/art/Simple-Moleskine-Skin-123215049pica-ae

Deviation Actions

pica-ae's avatar

Simple Moleskine Skin

By
Published:
28.7K Views

Description

Simple Moleskine Skin
based on Moleskine Wallpaper & Virtual Moleskine Project
:megaphone: temporary Live Preview

for version with Sidebar check out Advancd Moleskine Skin


html Codes for this Skin
to make a Headline, write:
<p>Your Headline </p>

to make a Feature, write:
<div class="feat"><i>:thumb###::thumb###::thumb###:</i></div>
[please don't put more than 3 deviations in one div-tag!]

and that's all the html you need for this Skin
as said, it is a simple one


Hope you enjoy the Skin :w00t:

Please let me know when you use it!

any questions? just ask me :)


:iconjournalskins: & :iconcss-babes: have my allowance to submit this to their gallery




Follow me on 
Twitter Twitter  Heart Dribbble  Camera Instagram  St. Patricks Day! Creative Market  Horns  Society6  Bomb Threadless
© 2009 - 2024 pica-ae
Comments572
Join the community to add your comment. Already a deviant? Log In
journalskins's avatar
:star::star::star::star-half::star-empty: Overall
:star::star::star::star-half::star-empty: Vision
:star::star::star::star::star-half: Originality
:star::star::star::star::star-empty: Technique
:star::star::star::star-empty::star-empty: Impact

First impressions
<img src="e.deviantart.net/emoticons/b/b…" width="10" height="10" alt=":bulletyellow:" title="Bullet; Yellow" /> Simple and elegant design
<img src="e.deviantart.net/emoticons/b/b…" width="10" height="10" alt=":bulletyellow:" title="Bullet; Yellow" /> Seems to have the common features

Visual aspects
Your journal has a simple concept that has been done very well.
There's a clear structure to the documents as well.
I'm not really sure about the purple for links and hovering thumbs.
It stands out a lot from the brown and grey. I think a more subtle colour could have been used.

User experience
The skin works out of the box. Copy pasted some lipsum without any html tags whatsoever being a user that didn't read the (...) manual first and it works just fine.
So next up I want to find out about some features it has. &#60<img src="e.deviantart.net/emoticons/w/w…" width="15" height="15" alt=";p" title="Wink/Razz" />> tag works easily for a header, although the p stands for paragraph and a header is not what you would logically expect from something called &#039<img src="e.deviantart.net/emoticons/w/w…" width="15" height="15" alt=";p" title="Wink/Razz" />aragraph'.
<strong> is my personal preferance for an easy header tag. Having the same functionality as <b> it doesn't block any html options.
The .feat class is not hard to use either. But it could get a few optimisations. For instance, silly old me just added 6 thumbs on a low resolution.
It doesn't break to a new line, but it overflows and disappears. Instead of using the .feat class as a table, perhaps work from the fact that thumbs cannot exeed 150px * 150px and make fitting shapes around the thumb with that.
This would then enable line breaking again so the overflowing thumbs hop onto the next line.
OR you could mention that you need to use <i> for lines in the artist comments <img src="e.deviantart.net/emoticons/let…" width="15" height="15" alt=":P" title=":P (Lick)" />

Technical aspects
Although not the most ledgable css I've ever seen, it's all correctly done and has innovative and tidy solutions.
The .feat class does not work correctly in IE, but that seems to be the only thing.
Most of the time some underscore trickery works best for that die hard pain in the ass browser.

Conclusion
Its works as simple as it is designed.
Generally tidy coded and with good document structuring.
Keep up the great work!

Liked this critique?
<img src="e.deviantart.net/emoticons/p/p…" width="11" height="10" alt=":pointr:" title="Point Right" /> Click here to find more or request your own