Shop Mobile More Submit  Join Login
'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 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. ;)
Reply
:iconnature50:
Nature50 Featured By Owner Oct 6, 2013  Hobbyist Digital Artist
This is an amazing journal skin! Thank you for sharing it :)
Congratulations on the Daily Deviation as well c:
Reply
:iconjonarific:
jonarific Featured By Owner Oct 7, 2013   Interface Designer
Thanks a lot, glad you like it! :hug:
Reply
:iconzokart1:
ZokArt1 Featured By Owner Jun 12, 2013   Photographer
GREAT WORK, USED, THANK YOU VERY MUCH!
Reply
:iconjonarific:
jonarific Featured By Owner Jun 12, 2013   Interface Designer
You're totally welcome! :meow:
Reply
:iconryanisnasty:
ryanisnasty Featured By Owner Jun 2, 2013
Congratulations on the well deserved DD!
I hope you have a fantastic day!
:huggle:
Reply
:iconjonarific:
jonarific Featured By Owner Jun 2, 2013   Interface Designer
Thanks a lot, I certainly had! :hug:
Reply
:iconryanisnasty:
ryanisnasty Featured By Owner Jun 2, 2013
You're welcome :D
I'm glad you've had a great day ^^
Reply
:iconblanket86:
blanket86 Featured By Owner Jun 1, 2013  Professional Traditional Artist
This is so amazing! Very good style, composition, concept and all. Congratulations!
Reply
:iconjonarific:
jonarific Featured By Owner Jun 2, 2013   Interface Designer
Thanks so much for the kind words! :aww:
Reply
:iconimaginary--thoughts:
Imaginary--Thoughts Featured By Owner Jun 1, 2013  Student Writer
Ooh, the subtle use of texture is quite nice <3
Reply
:iconjonarific:
jonarific Featured By Owner Jun 2, 2013   Interface Designer
Glad to hear, thanks! :meow:
Reply
:iconthegalleryofeve:
TheGalleryOfEve Featured By Owner Jun 1, 2013  Hobbyist Digital Artist
Congratulations on your well-deserved DD!!! :iconflyingheartsplz::iconlainloveplz::iconflyingheartsplz: :clap::clap::clap:
Reply
:iconjonarific:
jonarific Featured By Owner Jun 2, 2013   Interface Designer
Thanks a lot! :hug:
Reply
:iconthegalleryofeve:
TheGalleryOfEve Featured By Owner Jun 4, 2013  Hobbyist Digital Artist
:iconflyingheartsplz::blowkiss::iconflyingheartsplz:
Reply
:iconjoeyv7:
joeyv7 Featured By Owner Jun 1, 2013
Nice work - congrats!
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Thanks! :meow:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Jun 1, 2013
Lovely journal! :heart: Congrats on the DD! :clap:
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Thanks a lot! :hug:
Reply
:iconcyphervisor:
CypherVisor Featured By Owner Jun 1, 2013
Congrats on the DD! :D
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Thanks! :meow:
Reply
:iconr3aperwolf:
R3aperWolf Featured By Owner Jun 1, 2013  Hobbyist General Artist
Like it a lot. Will be using it from now on.
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Glad to hear, thanks! :)
Reply
:iconalkraas:
Alkraas Featured By Owner Jun 1, 2013  Hobbyist Digital Artist
Congratulations on the Daily Deviation! :la:
Much deserved! :squee:
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Thanks a lot! :happybounce:
Reply
:iconchristianpamotillo:
ChristianPamotillo Featured By Owner Jun 1, 2013  Student General Artist
just wanted to ask how can you put an picture and actually preview it with an image in the journal .cuz I tried to put the code "How to suppress the background around an image:
<img alt="" src=" —Image URL— " />" and used my own picture but when I preview it .the picture doesn't appear only a box with an icon of a device or something I really need reply asap thanks so much in advance
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Hmm, there's nothing wrong with the code… Actually that sounds like the image you inserted can't be loaded for some reason. I'd double-check if the image is really available online and if it can properly be reached through the URL you pasted in. ;)
Reply
:iconchristianpamotillo:
ChristianPamotillo Featured By Owner Jun 1, 2013  Student General Artist
thanks for the reply ..the image that I want to insert is one of my artwork here in deviantart ..any solution? super thanks in advance
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Check the code listed as Thumb on the right side of the deviation page and simply insert that into the Journal editor. If you want your image to display larger, use :bigthumb*********: (with the same digits) instead.
Reply
:iconchristianpamotillo:
ChristianPamotillo Featured By Owner Jun 1, 2013  Student General Artist
thanks but how can I exactly check the code im really sorry for the trouble .its really new to me ..
Reply
:iconjonarific:
jonarific Featured By Owner Jun 2, 2013   Interface Designer
Here's an image for reference: [link] The highlighted text box can be found on the right side of every deviation page.
Reply
:iconkirschenwasser:
Kirschenwasser Featured By Owner Jun 1, 2013  Professional Digital Artist
Congratulations to the well deserved DD! :love: :lol:
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Besten Dank! :meow:
Reply
:iconlintu47:
lintu47 Featured By Owner Jun 1, 2013  Hobbyist General Artist
    Congrats on the DD! :dalove:
    Have a nice day! :heart:
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Thanks! :hug:
Reply
:iconlintu47:
lintu47 Featured By Owner Jun 2, 2013  Hobbyist General Artist
    My pleasure :happybounce:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner May 31, 2013  Hobbyist General Artist
Very nice! My kinda skin :thumbsup:
Reply
:iconjonarific:
jonarific Featured By Owner Jun 1, 2013   Interface Designer
Oh my goodness, thank you so much for the DD suggestion! Couldn't be more glad this met your taste! :happybounce:
Reply
:iconim-not-sana:
im-not-sana Featured By Owner Jun 1, 2013  Hobbyist General Artist
Yay Congrats! Looking forward to seeing more designs from you :eager:
Reply
:icondannyanthony:
DannyAnthony Featured By Owner Mar 17, 2013  Hobbyist General Artist
Great skin, and helpful advice!! :D
Reply
:iconjonarific:
jonarific Featured By Owner Mar 24, 2013   Interface Designer
Thanks! :meow:
Reply
:icondannyanthony:
DannyAnthony Featured By Owner Mar 17, 2013  Hobbyist General Artist
Do you have the coding available for super group journal skins?
Reply
:iconjonarific:
jonarific Featured By Owner Mar 24, 2013   Interface Designer
I don't have any experience with that, so no, sorry.
Reply
:icondannyanthony:
DannyAnthony Featured By Owner Mar 24, 2013  Hobbyist General Artist
It's ok. I found out how to get the CSS code. :)
Reply
:iconnaariel:
Naariel Featured By Owner Dec 22, 2012  Hobbyist Digital Artist
Nevermind to the comment below, I found it out!
Reply
:iconjonarific:
jonarific Featured By Owner Dec 23, 2012   Interface Designer
Glad to hear! I wasn't aware that you could use :bigthumb: in Journals, otherwise I wouldn't have used a fixed height there ^^;
Reply
:iconnaariel:
Naariel Featured By Owner Dec 23, 2012  Hobbyist Digital Artist
Haha, well apparently you do! :P An understandable misunderstanding. XD
Reply
:iconnaariel:
Naariel Featured By Owner Dec 22, 2012  Hobbyist Digital Artist
So, I've installed this skin now in my journal, but I use :bigthumbdeviationcode: not just :thumbdeviationcode:, but when I do this, it get's only wider, not higher. :P Tips on how I can fix this?
Reply
:iconangelica-lily:
ANGELICA-LILY Featured By Owner Dec 1, 2012
:iconthankyoujump::iconthankyoujump1::iconthankyoujump2:

:rose: peace :rose:
Reply
:iconjonarific:
jonarific Featured By Owner Dec 1, 2012   Interface Designer
You're welcome! :meow:
Reply
Add a Comment:
 
×




Details

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

Stats

Views
6,751
Favourites
279 (who?)
Comments
69
Installs
906
×