you're reading:
Alert/Intro/Notice, Borders, Color changes, Header customization, Html & inline css codes, Images, Themes

Custom header image in Inuit Types

http://wpbtips.wordpress.com/

Inuit Types is the latest addition to wp.com themes. It has no header image, but you can place one in the blog title area by taking advantage of the “Front Page Intro” feature (obviously the image will appear on your front page only).

Option 1 – plain image

Create a 610px wide image (must include blog title and tagline), upload it to your blog via Media > Add New, copy its URL.

Then go to Appearance > Widgets, open the “Front Page Intro” module, drag a Text widget to it, and put this code in the widget:

<img style="margin-top:-116px;" src="IMAGE URL HERE" />

Option 2 – image with a border

In Inuit Types you can select the basic color scheme (there are six of them, selected under Appearance > Theme Settings). The color you select will be the background to sidebar items as well as “Featured Post Entries” (highlighted latest posts – optional). When a “featured” post includes a “featured image”, the image will show up with a 5px colored border around it. You can make the header image look the same as follows:

Create a 600px wide image (must include blog title and tagline), upload it to your blog via Media > Add New, copy its URL.

Then go to Appearance > Widgets, open the “Front Page Intro” module, drag a Text widget to it, and put this code in the widget:

<img style="margin-top:-116px;border:5px solid #HEX;" src="IMAGE URL HERE" />

Where I’ve written HEX, you must write the appropriate hex color code:

Color scheme HEX
“1-default” 000000
“2-white-red” 4c0d0d
“3-white-green” 3d4c06
“4-white-blue” 144566
“5-white-purple” 573359
“6-dark-black” 222222

Of course you can use a different color, if you prefer – especially in the colorless schemes 1 and 6. For colors and respective hex codes, see “Colors” under Links 1 in my sidebar.

Note: if the original blog title is two-lines long, turn the margin-top number to -170.

(Other options)

• You can use an image with no blog title and tagline on it, and create a blog title and tagline in front of it via html; but that’s rather complicated, and the text can be styled in all sorts of ways, so no general recipe can be given.

• You can use an image with no blog title and tagline on it, and place it below the actual blog title area: as in Options 1 or 2, without the margin-top part of the code.

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

26 thoughts on “Custom header image in Inuit Types

  1. This is great! Since Friday I have been trying this and trying that but you, of course, have presented all we need to know in a nutshell. Thanks so much for doing this.

    I have a question for you. Please take a look at the appearance of the colored divider bars I have on my static pages example:my about page and tell me if it’s possible to get rid of those gray boxes around the images. The images are not linked. I have removed the first part of the code to <img I have not placed them as captions but they still have that yucky gray box around them. :(

    I'd appreciate it if you could come up with a way to eliminate them.

    Cheers,
    TiTi

    Posted by timethief | April 20, 2010, 08:31
  2. Well, actually it was you who first posted about that potential use of the Front Page Intro (I hadn’t examined the theme yet) – you just didn’t think of the negative top margin that pushes the image upwards.

    Eliminating the yuck? Easy – just like in MistyLook:

    http://wpbtips.wordpress.com/2009/12/24/unwanted-features-in-mistylook/

    Posted by Panos | April 20, 2010, 09:08
  3. Thanks. I forgot the term “drop shadow effect” so I didn’t twig to the fact this was the same as the Misty Look “fix” for images. My blog now looks the way I want it to.

    I have found that if I make the divider images 610 pixels wide that the one I use in the Introduction box is a bit to wide so I have reduced that to 604 pixels which means that the Introduction box appears to be the same width as the two featured boxes below it.

    I have yet to try removing the Title and Tagline and using an image in the Introduction box with an image displaying the two on it and linked to the URL for the site. I wondered if doing that would “push” The Introduction box up higher into the area for the Title and Tagline box. Have you tried that? If so, what was the result?

    Posted by timethief | April 20, 2010, 18:41
  4. You of all people are contemplating removing the blog title and tagline??? There’s no need to do that: just use the code I’m giving in the post. The negative margin is there to make the top of the image align with the top of the sidebar.

    Posted by Panos | April 20, 2010, 22:05
  5. Inuit Types has several unique behaviors. The litany is posted on my FAQ. (Drumming fingers on desk and wondering if I’m switching themes twice in one week.)

    Posted by Jennifer | April 21, 2010, 08:54
  6. @Jennifer: Thanks for the “litany” – hadn’t noticed the unique behavior of gallery attachment pages.

    I think Inuit is a welcome addition for those who prefer magazine style themes. Very uncomfortable in my test blog, though, as I cannot readily see which post has what. The newest one, Under the Influence, is more versatile, as you can have complete posts on the front page.

    PS In my test blog I switch themes twice an hour…

    Posted by Panos | April 21, 2010, 14:21
  7. Hello Panos,

    do you perhaps have an idea how to add a regular, wide header to this theme with CSS upgrade? This is what I want to have, but so far it’s just a PS-version of it:

    So far, I used this code to have the absolute top position:
    .container {margin-top:150px;}
    #text-3 {position:absolute; top:28px; padding:5px 0; background-color:#0a0a0a; height:150px; width:930px;}
    body.logged-in #text-3 {top:68px;}

    However, if I add the image url, nothing appears.

    Well, once you have had a look into this and are more acquianted with CSS than me, it might be a piece of cake for you, but it certainly seemms complicated to me.. *blush*

    Good tips, btw!

    Eszter

    Posted by Eszter | June 16, 2010, 23:58
  8. Hi Eszter. No I’m not more acquainted with CSS than you: I’m experienced in inline CSS, but I don’t have the CSS upgrade so I’ve only experimented a little with CSS editing (check my left sidebar to see the warning “no CSS-upgrade customization”). So this is no piece of cake for me. It’s probably a piece of cake for at least one true expert we’ve got in the wp.com forum (devblog), so you’d better post your question in the CSS section there:

    http://en.forums.wordpress.com/

    If don’t want to start a thread there, I can bring your question to devblog’s attention.

    Posted by Panos | June 17, 2010, 06:54
  9. Is there a way to add a video into the header?

    Posted by Spencer | March 11, 2011, 23:37
  10. Yes, but I don’t think you’d like the result: embeddable videos would display one frame only, with play, share, volume etc. buttons. If, as I suspect, you’re looking for an animated header, you should create and upload an animated gif, not a video.

    Posted by Panos | March 12, 2011, 00:07
  11. OK, well thanks anyway.

    Posted by Spencer | March 12, 2011, 00:15
  12. I’d like to use that “Custom Image Location” feature to embed a video from youtube, so that you can just watch it on the blog roll, and not have to go to the single post page to watch it. Is that possible? Anyone know how to do this?
    Thanks!

    Posted by Sauer | March 29, 2011, 20:44
  13. @Sauer: Link to your blog please.

    Posted by Panos | March 30, 2011, 05:59
  14. Panos, please take a look when you get a chance:

    http://blog.bushandleavenworth.com/

    Thanks!

    Posted by Sauer | March 31, 2011, 01:12
  15. @Sauer: What for?
    Perhaps you need to check point 1 here:

    http://wpbtips.wordpress.com/comment-guidelines/

    Posted by Panos | March 31, 2011, 13:06
  16. Thank you for this. I am unable to get a header image on my blog though: http://erinmidwife.com

    I have been able to get an image to replace the title, and I have been able to insert an image above the tagline (without title) but I would like to keep both the title and tagline with the image below.

    I *think* you were instructing how to do this with this advice: “You can use an image with no blog title and tagline on it, and place it below the actual blog title area: as in Options 1 or 2, without the margin-top part of the code.”

    I attempted this as well but I don’t think I followed you all the way….I removed the “margin-top:-116px;” from the above code. Is that what you are suggesting?

    Thank you for any clarification!

    Posted by erinmidwife | May 23, 2011, 23:26
  17. Yes that’s what I’m suggesting. Margin-top is the space between the top of an element and the bottom of the element above it. Negative margin means you place the element higher than zero space (in this case, to cover the title). No negative margin-top, and the image sits right below the title and tagline.

    If you can’t get this to work, maybe you’re making some other mistake with the code, so you need to show me the code. Check point 4 here:

    http://wpbtips.wordpress.com/comment-guidelines/

    Posted by Panos | May 24, 2011, 01:53
  18. This was the original code suggested

    And you said to delete the margin portion, which I guessed left this:

    This is the code I entered in my text widget, with the URL of my uploaded 610px image in my media library.

    Posted by erinmidwife | May 24, 2011, 04:53
  19. I tried pasting it into the HTML converter you linked to but I’m clearly not doing it right! I get nothing in the conversion box when I paste in the code I used. Basically I just removed the margin bit within the quotation marks and left everything else.

    Posted by erinmidwife | May 24, 2011, 05:10
  20. Ok, GOT it! Thanks!

    Posted by erinmidwife | May 24, 2011, 05:13
  21. Obviously you got it – you’re welcome!

    Posted by Panos | May 24, 2011, 20:45
  22. My new header image doesn’t seem to carry through to the rest of the site (http://aestheticnyc.wordpress.com/) – is this even a possibility?

    Posted by The NYC Actor | July 25, 2011, 21:27
  23. I’m mentioning this in the first paragraph of the post. Since this trick takes advantage of the Front Page Intro, the image can only show up on the front page.

    The only way to have a header image of sorts on every page is to put it up top in the sidebar.
    It might also be possible to add a header image in the blog title area (that would show up on all pages) if you have the paid Custom Design upgrade.

    Posted by Panos | July 25, 2011, 22:50
  24. Thank you very much for directing me here… it did help!

    Posted by IshitaUnblogged | March 14, 2012, 20:33

Trackbacks/Pingbacks

  1. Pingback: Clarity on Inuit Types Theme « Always Well Within - April 27, 2010

  2. Pingback: Select a WordPress.com theme 2 « onecoolsitebloggingtips - May 21, 2010

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,468,850 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: