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.
https://wpbtips.wordpress.com/
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
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:
https://wpbtips.wordpress.com/2009/12/24/unwanted-features-in-mistylook/
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.
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.)
@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…
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
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.
Is there a way to add a video into the header?
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.
OK, well thanks anyway.
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!
@Sauer: Link to your blog please.
Panos, please take a look when you get a chance:
http://blog.bushandleavenworth.com/
Thanks!
@Sauer: What for?
Perhaps you need to check point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
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!
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:
https://wpbtips.wordpress.com/comment-guidelines/
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.
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.
Ok, GOT it! Thanks!
Obviously you got it – you’re welcome!
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?
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.
Thank you very much for directing me here… it did help!