Shop Forum 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 GinkgoWerkstatt )
:iconjassysart:
JassysART Featured By Owner 1 day ago  Professional Interface Designer
congraz
Reply
:iconlauraypablo:
lauraypablo Featured By Owner May 4, 2019  Hobbyist Digital Artist
I love this journal, I'll use it :la:
Reply
:iconastr0fish:
Astr0fish Featured By Owner Aug 31, 2018  Hobbyist Digital Artist
Do you ever think that you'll make the journal title wrap around so you can fit everything in the title that you want?
Reply
:icondanlev:
danlev Featured By Owner Aug 31, 2018
The title is made to fit any length. Do you have an example where it’s not working properly?
Reply
:iconastr0fish:
Astr0fish Featured By Owner Aug 31, 2018  Hobbyist Digital Artist
Oh wait nevermind! It wasn't warping because I was still editing it... sorry about that.
Reply
:iconstavri-symeonidou:
Stavri-Symeonidou Featured By Owner Aug 22, 2018  Professional Digital Artist
Amazing work! Clean and simple! Yet captivating! :)
Reply
:iconpamonk:
PaMonk Featured By Owner Jun 18, 2016  Professional Artist
Thank you and Congratulations on the DD.:D
Reply
:iconvaigh:
Vaigh Featured By Owner Nov 19, 2015
Perhaps I'm doing it wrong, but I can't seem to find the coding after having selected the HTML Mode. T_T
Reply
:iconamarantheans:
Amarantheans Featured By Owner Edited Mar 22, 2016  Hobbyist General Artist
when in html mode just write the following in the text area of the journal < div class ="cover"><da:deviation id="597621495" >< /div > without the spaces before div and /div. Change the number out to what ever deviation you wish to use... for example I used my own photo Reach for the sun the number is the end of the web address. Then just switch back to "rich editing mode" and type whatever you want for your journal... the picture should automaticly be in the box.

Hope you still use it I know it has been a while since you posted.
Reply
:iconcd-stock:
CD-STOCK Featured By Owner Aug 11, 2015  Professional Digital Artist
Thank you so much!
Reply
: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
:iconbreerothman:
breerothman Featured By Owner Apr 2, 2015  Professional Digital Artist
This is a fantastic skin! Thank you for creating it!
Reply
:iconravensquill:
RavensQuill 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
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 General 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
:iconsidian-venblu:
Sidian-VenBlu Featured By Owner Aug 6, 2014
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
:icongillianivyart:
gillianivyart 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  Professional Artisan Crafter
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  Professional Artisan Crafter
You're welcome. :clap:
Reply
:iconthegalleryofeve:
TheGalleryOfEve Featured By Owner Aug 6, 2014  Professional 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  Hobbyist 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

Eclipse Change Log: January 30, 2019In this week's change log, we have a small handful of bug fixes and improvements as we continue with the larger features that are in development. Stay tuned for more, and keep the bug reports and feature requests coming!Change LogThe "add to favorites" panel on deviation pages now allows you to select multiple collections. (Popular request, suggested by @kage-niji, @sa6044, @tanyasimpson, and many others)Bios are now editable!Literature thumbnails now include four lines of preview text. (Suggested by @wynbird, @battlefairies, and many others)On the Daily Deviations page, literature now includes preview text. Various other smaller bug fixes and stability improvementsThe new "add to favorites" panel lets you easily add a deviation to many Collections. (Artwork: hidden view by @umbatman)Literature thumbs — including on the Daily Deviations page — now include preview text.Using the New Bio EditorTry the new Eclipse bio editor! When adding a bio to your Eclipse profile, we'll start you off with your bio from the old site. Please keep in mind that some elements, such as thumbnails, were not able to be transitioned to the new editor, however you can still add them to your bio. We recommend trying the new image and gallery features to share your favorite artwork in your bio.Also note that due to migration issues, bios of deviants who are not on Eclipse are static, meaning if they update them on the old site, the changes will not be reflected on Eclipse until that deviant switches to Eclipse and edits their bio using the new editor. Keep Sharing Your Feedback!Submit a bug or feature requestSubmit your overall feedback about DeviantArt Eclipse
Eclipse Change Log: February 20, 2019In this week's change log, we've updated literature pages — a popular request from the community — as well as a handful of bug fixes and improvements. Stay tuned for more, and keep the bug reports and feature requests coming!Improved Literature Deviation Page DesignAnother popular request from the community was to improve the design of literature deviation pages and put the actual writing front and center. Thanks to @battlefairies, @jcoolarts, @thebigeasy66, @queen-kitty, and the many others who shared their feedback on literature!Try it out: Memories, Light the Corners of our Minds by @srsmithChange LogAbility to submit a Journal to a Group has been added! Click the “New Journal” button on a Group’s Journal tab to submit directly to that Group.You can now edit older literature deviations in Eclipse. (Thanks for pointing out, @dc-26 and @littlekhajiit!)The Daily Deviation page now includes three days by default (instead of two), with a "show more" button at the bottom.While using browse or search, your previously selected sort mode will be preserved when you switch back and forth between Status Updates, Polls, and Commissions.After clicking a deviation from browse or search then clicking the back button, you'll now return to the correct position in the results rather than the beginning.When a deviant gives you Points, the notifications dropdown would display "[deviant] gave you..." without including the amount of Points given.Eclipse journals would be cut off on smaller screens on the old site.Clicking “View Log” on a Group admin notification would link to an error page.On Feedback, the timestamp on comments and replies now links to the comment’s permalink page so you can see the full context of a conversation. When italicizing, bolding, or underlining a heading, the headline would break onto multiple linesTimestamps on Feedback notifications are now clearer. (A notification from 3 months ago now displays as the actual date rather than “3m” which could also be confused as 3 minutes ago.)Daily Deviations page now includes a “Back to Top” button.The account reactivation page (restoring your account after deactivating it) has been moved to Settings rather than your profile page. This fixes an issue were deviants would need to switch back to the old site to reactivate if they deactivated while in Eclipse. This change is now live on the old site as well.Deviation descriptions that were made from the old site now properly preserve formatting on Eclipse.Fixed issue where mature content would be visible in Polls, Status Updates, Drafts and a few other places, even if your mature content filter was on.Fixed issues where font sizes would sometimes be smaller in some comments.Keep Sharing Your Feedback!Submit a bug or feature requestSubmit your overall feedback about DeviantArt Eclipse
Eclipse Change Log: January 9, 2019

Happy New Year, and welcome to 2019, deviants! We hope everyone had a relaxing and fun holiday, and we can’t wait to dive into this year’s updates and fixes!

Before we get into this week’s change log, we’d like to inform you of some major upcoming Eclipse-related updates, which will be highlighted and discussed in separate journals outside of the regular change logs. Some of these major updates include:

Custom boxes / customizationFeedback & WatchLiteratureAdditional Profile personalization

These are fairly significant updates to DeviantArt Eclipse that we look forward to communicating and sharing with you all in the upcoming weeks, so keep your eyes open! Without further delay, here are this week’s changes and bug fixes:

Change Log

Embedding deviations and pasting thumb codes are back! Try pasting a deviation URL in a comment or a journal! (Popular request!)You can now include a deviant’s avatar using the “Insert Emote” button. (Popular request!)The top navigation bar now has a light theme!You can now search for a specific artist’s deviations and other content by searching for “ @username ”When adding a deviations to a comment or journal using gallery mode, the editor now shows the limit and number of deviations chosen.Fixed issue where Feedback would not be sorted correctly after you reach the end of each “page” of results.Deleting deviations, status updates, journals now properly reloads the page.Artist hover cards now appear when on usernames, not just avatars.When rolling over your own avatar, the hover card no longer says “Message” and “Watch”Adjusted size of the artist hover card to be more compactOn donation pools, the number 0 would overlay on the word “Goal” when you initially add the section.When hovering over default donation pool bar, it shows “NaN%”.The donation pool’s meter displayed as full when they were empty (0/0).

Keep Sharing Your Feedback!

Submit a bug or feature requestSubmit your overall feedback about DeviantArt Eclipse






Details

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

Stats

Views
9,405
Favourites
351 (who?)
Comments
44
Installs
497