HOME | DD
danlev —
Hero Journal Skin
Published: 2014-04-23 00:03:41 +0000 UTC; Views: 12219; Favourites: 343; Downloads: 525
Redirect to original
Description
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.
2. Click Edit > Switch to HTML Mode
You will now see some code that uses the format . This is deviantART's markup to display deviations.
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">
4. Your Journal now has a cover image!
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)
Related content
Comments: 46
👍: 0 ⏩: 0
Thank you very much for sharing it with us!! 
👍: 0 ⏩: 0
Thank you for this and thank you for the directions... I need those. I am terrible with these things.
👍: 0 ⏩: 0
Do you ever think that you'll make the journal title wrap around so you can fit everything in the title that you want?
👍: 0 ⏩: 1
The title is made to fit any length. Do you have an example where it’s not working properly?
👍: 0 ⏩: 1
Oh wait nevermind! It wasn't warping because I was still editing it... sorry about that.
👍: 0 ⏩: 0
Amazing work! Clean and simple! Yet captivating!
👍: 0 ⏩: 0
Perhaps I'm doing it wrong, but I can't seem to find the coding after having selected the HTML Mode. T_T
👍: 0 ⏩: 1
when in html mode just write the following in the text area of the journal < div class ="cover"> 👍: 0 ⏩: 0
Hope you still use it I know it has been a while since you posted.
Such a lovely idea. I would love to use it for an art feature I'm working on 
👍: 0 ⏩: 0
This is a fantastic skin! Thank you for creating it!
👍: 0 ⏩: 0
This is simple and amazing. I love how easy it is to use, and change when the mood strikes.
👍: 0 ⏩: 0
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.
👍: 0 ⏩: 0
Dan, this is my new favourite skin. It's so awesomely versatile. Brilliant work.
👍: 0 ⏩: 0
Congrats on the DD!
Thank you for making this skin; it's refreshingly simple to customize!
👍: 0 ⏩: 0
Great skin! The design is very neat
Thank you for the work - and making it easier for us to customise it
👍: 0 ⏩: 0
Love this, very gorgeous skin. Grats on the dd! ;D
👍: 0 ⏩: 0
great! but have to be a premium user to use this trick?
👍: 0 ⏩: 1
You must be premium to use journal skins.
👍: 0 ⏩: 1
Congratulations on your well-deserved DD!!!
👍: 0 ⏩: 0
Congrats on the DD! So close to your birthday, too.
👍: 0 ⏩: 0
I'm curious as to why it was limited to only content: 'Artwork'; ? Literature looks great with this journal too.
👍: 0 ⏩: 1
What do you mean? How would literature be displayed as a cover photo?
👍: 0 ⏩: 1
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
👍: 0 ⏩: 0
wow! nicely done!
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
👍: 0 ⏩: 1
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.
👍: 0 ⏩: 0
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. 
Here's what I mean: sta.sh/02d07ke6kokd
👍: 0 ⏩: 1
Woa, this is perfect!! Thanks!! Will update the skin!
👍: 0 ⏩: 1
That is when I realized, I couldn't speak English...I read "Hero" as "Herro?" (Japanese accent)....sigh.
Like the skin.
👍: 0 ⏩: 0