Shop Mobile More Submit  Join Login
Hero Journal Skin by danlev Hero Journal Skin by danlev
This free deviantART Journal Skin allows you to easily add a "cover photo" to any Journal. You can use any deviation as a cover photo, or you can upload your own.

Adding a Cover Photo:


The process is somewhat simple, but takes some very basic HTML knowledge.

1. Add an image to the beginning of a Journal.

For best results, use a higher-resolution horizontal cover image.

Screen Shot 2014-04-22 at 4.49.00 PM by danlev 

2. Click Edit > Switch to HTML Mode

Screen Shot 2014-04-22 at 4.49.17 PM by danlev 

You will now see some code that uses the format . This is deviantART's markup to display deviations.

Screen Shot 2014-04-22 at 4.49.54 PM by danlev 

3. Wrap this code within a <div class="cover"> tag:

Important: The top edge of the image will be aligned with the top of the header of the Journal and the bottom image will be cropped out as the browser resizes. If you'd like to reverse it so that the bottom of the image is aligned with the bottom of the header, use the code <div class="cover_bottom">

Screen Shot 2014-04-22 at 4.50.33 PM by danlev 

4. Your Journal now has a cover image!

Screen Shot 2014-04-22 at 4.54.59 PM by danlev 

UPDATE: Thanks to Ikue for providing code that automatically adds a link the deviation used as the cover. 

Thanks to mathew-s-hanley for letting me use his photos (the first two on the right side of the image) 
Add a Comment:
 

Daily Deviation

Given 2014-08-06
Hero Journal Skin by danlev is a minimalistic, yet very appealing journal skin with the focus on the header, which can be adjusted to your liking with a few steps.

[dA Related / dA Skins & Scripts / Journal & Gallery Skins / Installable Journal Skins] ( Suggested by bradleysays and Featured by ginkgografix )
:icontudalia:
Tudalia Featured By Owner Jun 19, 2015  Student Traditional Artist
Lovely skinnn!!!
Reply
:iconmouselemur:
Mouselemur Featured By Owner Apr 26, 2015  Hobbyist Photographer
Such a lovely idea. I would love to use it for an art feature I'm working on :D :love:
Reply
:icondiphylla:
diphylla Featured By Owner Apr 2, 2015  Professional Digital Artist
This is a fantastic skin! Thank you for creating it!
Reply
:iconfaded2indie:
Faded2Indie Featured By Owner Mar 13, 2015  Student Writer
This is simple and amazing. I love how easy it is to use, and change when the mood strikes.
Reply
:iconserel:
serel Featured By Owner Feb 5, 2015  Hobbyist Photographer
I already love this skin. The easy way to change the cover photo and the clean layout is wonderful. Great work. Thank you so much for sharing it with the rest of us.
Reply
:iconendorell-taelos:
Endorell-Taelos Featured By Owner Aug 19, 2014   General Artist
Dan, this is my new favourite skin. It's so awesomely versatile. Brilliant work. :la: 
Reply
:iconalchemicangel19:
AlchemicAngel19 Featured By Owner Aug 7, 2014  Student General Artist
Congrats on the DD!
Thank you for making this skin; it's refreshingly simple to customize! :D
Reply
:iconcinnamoncandy:
Cinnamoncandy Featured By Owner Aug 6, 2014  Hobbyist Digital Artist
Congratulations on your DD!
Reply
:icondragondud:
Dragondud Featured By Owner Aug 6, 2014
:iconcreepyspongebobplz:
Reply
:iconbeltaneh:
Beltaneh Featured By Owner Aug 6, 2014
Great skin! The design is very neat
Thank you for the work - and making it easier for us to customise it :star:
Reply
:iconsidian07:
Sidian07 Featured By Owner Aug 6, 2014  Student General Artist
How awesome! Thank you so much for sharing~!
Reply
:iconagonizingswordfish:
AgonizingSwordfish Featured By Owner Aug 6, 2014  Hobbyist Photographer
Congratulations on the DD! :happybounce:
Reply
:iconmeiyue:
meiyue Featured By Owner Aug 6, 2014  Student General Artist
Congratulations on the DD! :love: 

Have a nice day :iconlainloveplz:
Reply
:iconaleexdee:
aleexdee Featured By Owner Aug 6, 2014  Hobbyist Photographer
Awesome! 
Reply
:icongillianivy:
GillianIvy Featured By Owner Aug 6, 2014  Hobbyist General Artist
Love this, very gorgeous skin.  Grats on the dd!  ;D
Reply
:iconsil-92:
sil-92 Featured By Owner Aug 6, 2014  Student Traditional Artist
great! but have to be a premium user to use this trick?
Reply
:iconashgutz:
AshGUTZ Featured By Owner Aug 6, 2014   Digital Artist
You must be premium to use journal skins.
Reply
:iconsil-92:
sil-92 Featured By Owner Aug 6, 2014  Student Traditional Artist
Thanks!
Reply
:iconashgutz:
AshGUTZ Featured By Owner Aug 6, 2014   Digital Artist
You're welcome. :clap:
Reply
:iconthegalleryofeve:
TheGalleryOfEve Featured By Owner Aug 6, 2014  Hobbyist Digital Artist
Congratulations on your well-deserved DD!!! :iconflyingheartsplz::iconlainloveplz::iconflyingheartsplz: :clap::clap::clap:
I’m very happy for you!!! :iconloveloveplz: :tighthug:
Reply
:iconsimplysilent:
SimplySilent Featured By Owner Aug 6, 2014
Congrats on the DD! So close to your birthday, too. :giggle:
Reply
:iconastrikos:
Astrikos Featured By Owner Jul 11, 2014   General Artist
Beautiful journal skin! Looks great!
Reply
:iconnichrysalis:
Nichrysalis Featured By Owner Jun 13, 2014  Hobbyist Writer
I'm curious as to why it was limited to only content: 'Artwork'; ? Literature looks great with this journal too. :)
Reply
:icondanlev:
danlev Featured By Owner Jun 13, 2014
What do you mean? How would literature be displayed as a cover photo?
Reply
:iconnichrysalis:
Nichrysalis Featured By Owner Jun 13, 2014  Hobbyist Writer
Because of the images being an iframe it works to show literature in the top of the journal. I had to remove only this code: content: 'Artwork'; under .cover and it displays literature fine: sta.sh/01sh2e7rgll4 :)
Reply
:iconkuschelirmel-stock:
kuschelirmel-stock Featured By Owner Apr 26, 2014  Hobbyist Digital Artist
wow! nicely done! :love:

only "problem" I have is that since you do not restrict the journal width, it can look off on large monitors -- example: mine is > 2000 px wide and when I look at the example Ikue has in his sta.sh, I see no flowers at all, just some greenery... sta.sh/21h4nl4bml3s --> here you can see two screenshots. I know it's cool to have such a wide header (and the text is limited after all), but with the different monitor widths available these days (and the wide ones getting increasingly affordable and popular) it's so hard to choose a proper cover image for all cases. Not sure if limiting the total width would destroy the effect of the skin though :(
Reply
:icondanlev:
danlev Featured By Owner Jun 13, 2014
Yeah, unfortunately, it's a bit of a technical restriction. I wish the CSS was a bit more flexible. Ideally, the height of the cover photo area could adjust, and/or the image could be centered vertically so that it's more likely to have the image's subject matter in view.

If you restrict the width, I think it'd ruin the design look I'm aiming for. Personally, I think I'd rather have the "greenery" look than restricting the width. But you're right, it's not the ideal solution.
Reply
:iconikue:
Ikue Featured By Owner Apr 23, 2014  Hobbyist Digital Artist
Great skin, Dan!  If you wanted you could add in a quick text link that would link back to the deviation itself for the Hero Image with just a few lines of CSS. :)

.cover > a.embedded-deviation.embedded-image-deviation:after {
   content: 'Hero Credit';
   position: absolute;
   top: 0;
   right: 0;
   font-size: 14px;
   font-weight: 100;
   line-height: 20px;
   padding: 4px 6px ;
   color: white;
   background: rgba(0,0,0,0.2);
   z-index: 100;
}


For the "content" property you could also use "attr(href)" which would display the URL to the deviation. You could even do both with a fancy hover effect by also adding:

.cover:hover > a.embedded-deviation.embedded-image-deviation:after {
   content: attr(href);
}


This way it shows the "Hero Credit" text normally then when you hover it shows the URL so folks know to click it. :B  
Here's what I mean: sta.sh/02d07ke6kokd
Reply
:icondanlev:
danlev Featured By Owner Apr 23, 2014
Woa, this is perfect!! Thanks!! Will update the skin!
Reply
:iconikue:
Ikue Featured By Owner Apr 24, 2014  Hobbyist Digital Artist
:aww:
Reply
:icondanlev:
danlev Featured By Owner Apr 24, 2014
Updated and credited you! =p
Reply
:iconikue:
Ikue Featured By Owner Apr 25, 2014  Hobbyist Digital Artist
:hug: not necessary but thanks! :)
Reply
:iconmissmmd:
missmmd Featured By Owner Apr 23, 2014
That is when I realized, I couldn't speak English...I read "Hero" as "Herro?" (Japanese accent)....sigh.

Like the skin.
Reply
Add a Comment:
 
×

:icondanlev: More from danlev





Details

Submitted on
April 22, 2014
File Size
6.1 KB
Link
Thumb
Embed

Stats

Views
4,722 (6 today)
Favourites
270 (who?)
Comments
34
Installs
277
×