Deviant Login Shop  Join deviantART for FREE Take the Tour
×



Details

Submitted on
September 22, 2012
File Size
6.4 KB
Link
Thumb
Embed

Stats

Views
5,545
Favourites
238 (who?)
Comments
69
Installs
672
×
'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



Instructions


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:
<ul>
    <li> —List item— </li>
    <li> —List item— </li>
    <li> —List item— </li>
</ul>


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>
</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— " />
</div>


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 )
:iconsir-herp:
Sir-Herp 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. ;)
Reply
:iconnature50:
Nature50 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:
Reply
:iconjonarific:
jonarific Oct 7, 2013   Interface Designer
Thanks a lot, glad you like it! :hug:
Reply
:iconzokart1:
ZokArt1 Jun 12, 2013   Photographer
GREAT WORK, USED, THANK YOU VERY MUCH!
Reply
:iconjonarific:
jonarific Jun 12, 2013   Interface Designer
You're totally welcome! :meow:
Reply
:iconryanisnasty:
Congratulations on the well deserved DD!
I hope you have a fantastic day!
:huggle:
Reply
:iconjonarific:
jonarific Jun 2, 2013   Interface Designer
Thanks a lot, I certainly had! :hug:
Reply
:iconryanisnasty:
You're welcome :D
I'm glad you've had a great day ^^
Reply
:iconblanket86:
blanket86 Jun 1, 2013  Professional Traditional Artist
This is so amazing! Very good style, composition, concept and all. Congratulations!
Reply
:iconjonarific:
jonarific Jun 2, 2013   Interface Designer
Thanks so much for the kind words! :aww:
Reply
Add a Comment: