Shop Mobile More Submit  Join Login


Submitted on
September 22, 2012
File Size
6.4 KB


262 (who?)
'Wrapped' Journal skin (CSS) by jonarific 'Wrapped' Journal skin (CSS) by jonarific
Live preview »

Here's my second Journal skin attempt for =CypherVisor's Modern Elite CSS Contest. This time, I went for a darker, more gloomy style, making use of some subtle background patterns, minimal and semi-transculent borders for many elements, an elegant ultra-condensed font for the headings, and sections at the top and bottom which look like they're wrapped around the content (hence the name "Wrapped").

In contrast to my other entry, this design is already fully coded and therefore installable, so I'd appreciate if you'd give it a shot! For information regarding the usage of all the included elements, check the instructions below. Enjoy! :D


General note:
Because of the fact that writing a line break in the Journal editor leads to a real HTML line break (<br />), you might have to remove empty line breaks between certain items in your text (between a heading and the following text, for instance) to achieve the right spacing between the elements.

How to use headings:
<h1> —Heading title— </h1>

How to use lists:
    <li> —List item— </li>
    <li> —List item— </li>
    <li> —List item— </li>

How to use quote boxes:
<blockquote> —Quote content— </blockquote>

How to use code boxes:
<code> —Code snippet— </code>
Note: If you want to prevent HTML code from being rendered, replace each front parenthesis (<) with &lt;

How to use two columns:
<div class="columns">
    <div class="left"> —Left column content— </div>
    <div class="right"> —Right column content— </div>

How to use images:
<img src=" —Image URL— " />

How to suppress the background around an image:
<img alt="" src=" —Image URL— " />

How to remove all image backgrounds in an area:
<div class="plain"> —Content with images— </div>

How to center images:
<div class="center">
    <img src=" —Image URL— " />
    <img src=" —Image URL— " />
    <img src=" —Image URL— " />

If you've got any further questions, feel free to ask! :)

You are free to use this work without prior permission.

The wallpaper thumbnails used in the preview are by =winnichip (permission granted)
The small icons used in the preview are by ~bogo-d (CC Attribution license)
Add a Comment:

Daily Deviation

Given 2013-06-01
The suggester says 'Wrapped' Journal skin (CSS) by =jonarific is a "very clean, elegant and visually appealing skin." ( Suggested by im-not-sana and Featured by bradleysays )
Sir-Herp Featured By Owner Apr 17, 2014  Student General Artist
Wow, what a cool journal skin! And the description is fantastically helpful, too. I still don't remember many codes, so I'm just gonna save a screenshot of that. :'D Thanks for the awesome, clean skin! I'll be sure to put this all to use sometime.

And on a random note, I'm almost upset that I broke the 666 number of Installs - but a number's just a number, and I really would like to use this eventually. ;)
Nature50 Featured By Owner Oct 6, 2013  Student Digital Artist
This is an amazing journal skin! Thank you for sharing it :)
Congratulations on the Daily Deviation as well c:
jonarific Featured By Owner Oct 7, 2013   Interface Designer
Thanks a lot, glad you like it! :hug:
ZokArt1 Featured By Owner Jun 12, 2013   Photographer
jonarific Featured By Owner Jun 12, 2013   Interface Designer
You're totally welcome! :meow:
ryanisnasty Featured By Owner Jun 2, 2013
Congratulations on the well deserved DD!
I hope you have a fantastic day!
jonarific Featured By Owner Jun 2, 2013   Interface Designer
Thanks a lot, I certainly had! :hug:
ryanisnasty Featured By Owner Jun 2, 2013
You're welcome :D
I'm glad you've had a great day ^^
blanket86 Featured By Owner Jun 1, 2013  Professional Traditional Artist
This is so amazing! Very good style, composition, concept and all. Congratulations!
jonarific Featured By Owner Jun 2, 2013   Interface Designer
Thanks so much for the kind words! :aww:
Add a Comment: