jonarific on DeviantArthttps://www.deviantart.com/jonarific/art/Wrapped-Journal-skin-CSS-328615318jonarific

Deviation Actions

Daily Deviation

Daily Deviation

June 1, 2013
The suggester says 'Wrapped' Journal skin (CSS) by =jonarific is a "very clean, elegant and visually appealing skin."
Featured by bradleysays
Suggested by imnotsana
jonarific's avatar

'Wrapped' Journal skin (CSS)

By
Published:
12.6K Views

Description

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)
© 2012 - 2024 jonarific
Comments72
Join the community to add your comment. Already a deviant? Log In
FenriRez's avatar
I have been looking for a good journal skin for months and finally bumped into yours. Simple and stylish - just what I need right now. Fantastic job and thank you for making one! :)