Custom header image in Inuit Types

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).

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:

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.

Rate this:

Share this:

Like this:

Related

Discussion

26 thoughts on “Custom header image in Inuit Types”

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. :(

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.

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?

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.

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.

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*

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.

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.

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!

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?

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.

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.

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.

Author

Recent Posts

Subject Index

Subject Index

Search for:

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

3,258,409 views

Views per month:

Note: if you see ads on this site, they are placed by WordPress, not me.

Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.