Deviant Login Shop  Join deviantART for FREE Take the Tour
×

:icondanlev: More from danlev




Details

Submitted on
April 22
File Size
6.1 KB
Link
Thumb
Embed

Stats

Views
923 (2 today)
Favourites
63 (who?)
Comments
12
Installs
53
×
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:
 
:iconastrikos:
Astrikos Featured By Owner Jul 11, 2014   General Artist
Beautiful journal skin! Looks great!
Reply
:iconnichrysalis:
Nichrysalis Featured By Owner Jun 13, 2014  Student 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  Student 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
Add a Comment: