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

Header image in Titan…

http://wpbtips.wordpress.com/

…is not possible without the CSS upgrade. But you can display an image below the header. Create a 958px wide image, upload it via Media > Add New, copy its URL. Then go to Appearance > Titan Options, click “Homepage Notice”, paste the following code in the “Custom notice” box, click “Save Changes”:

<img style="margin-top:-19px;margin-bottom:-25px;margin-left:-19px;" src="IMAGE URL HERE" />

Minimum image height: 60px. Suggested maximum height: 120px. Looks better with no top navigation (Appearance > Titan Options: click “Navigation”, tick all three options, click “Save Changes”).

Update Nov. 2011: Workaround no longer needed – Titan now supports a regular header image (960×180 pixels, uploaded in Appearance > Header).

http://wpbtips.wordpress.com/

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

Discussion

25 thoughts on “Header image in Titan…

  1. Thanks for this. You must have been reading my mind. :)

    Posted by timethief | March 10, 2010, 07:28
  2. I created a very nice header but didn’t like the location. I tried changing my site to the theme but didn’t like it at all.

    Posted by timethief | March 10, 2010, 08:07
  3. You’re familiar with that location: same as Vigilance alert box. Not at all ideal, but no better option either…

    The blurb in Appearance>Themes says the theme is “exceptionally handsome”; I don’t see anything exceptionally handsome in this theme.

    Posted by Panos | March 10, 2010, 22:15
  4. Well “hansomeness” in in the eye of the beholder and I do expect every theme introduced will have flattering words said about it. I do like the drop down options but I don’t like the brown header strip and as I can’t replace it – FAIL!

    Posted by timethief | March 11, 2010, 20:11
  5. I don’t like the brown strip either; and blue links don’t fit.

    (But the theme I’d nominate for worst design is Rounded.)

    Posted by Panos | March 12, 2010, 00:23
  6. I like the new theme with its two columns that straddle the page rather than being bunched up in the middle, and this is a clever workaround for the bugbear of not being able to have a proper header. It isn’t perfect, but my homepage does look better for the image. Thanks!

    Posted by deiseach | April 3, 2010, 16:13
  7. You’re welcome! Not at all perfect, as you say, but better than nothing…

    Posted by Panos | April 6, 2010, 12:22
  8. Wondering if you know how to get the email icon in Titan’s header to work on self-hosted blog (yes I’m a new blogger trying to learn the ins and outs). Wondering if I need feedburner to do this, and if so, how does that work with Titan’s default feed rss and email icons. Thanks for help.

    Posted by Grace | April 28, 2010, 23:19
  9. @Grace: You’re welcome, but I’m afraid I can’t help, because I’m only experienced in wp.com blogs, not self-hosted ones (the software is different). In a wp.com blog you’d add a mail link to your sidebar, and yes you’d need feedburner. In a self-hosted blog you can modify the theme or you can probably find an appropriate plugin, but I don’t really know anything concrete about either option. Sorry!

    Posted by Panos | April 29, 2010, 11:20
  10. I see. Thanks so much for the info.

    Posted by Grace | April 29, 2010, 21:48
  11. Top tip! I was look this morning for a way of doing this and ended up figuring it out myself.

    I come up with my own method to replace the default header on Titan with your own image while still retaining the heading tags and title text in the source code. This is a great method for SEO.

    The tutorial is still in draft and will be published on the 12th of August 2010. Please take a look at the following URL on or after that date: http://daily-grind.net/?p=321

    In the mean time you could just check out my blog too :) http://daily-grind.net

    [Comment initially withheld - P.]

    Posted by Ben | August 6, 2010, 08:11
  12. @Ben: In my opinion, advertising a post one week before it’s published isn’t the best of practices. Anyway, thanks, but your method is for self-hosted blogs while my blog is about wp.com ones.

    Posted by Panos | August 15, 2010, 13:49
  13. I was just wondering, is a generous amount of contents (images, text along with HTML formatting) in the “Welcome page” section bad for SEO? I mean, search engines need access to fresh content as soon as possible when they get to a site, no? I don’t know if a “Welcome message” gets in the way of search engines. Hoping you can clarify. Thanks in advance!

    Posted by Netty Gritty | September 3, 2010, 09:17
  14. @NG: Search engines like to find renewed content, so I think the Custom Notice is no problem, since your most recent post shows up on the same page. What’s bad SEO-wise is setting your front to display a static page instead of your latest posts.

    (But a Custom Notice isn’t user friendly if it’s so long that a visitor would have to scroll down to see the latest post.)

    Posted by Panos | September 3, 2010, 14:26
  15. This is really helpful. I’m new to WordPress and curious: is it possible to have the image spanning the entire width of the page, and have it so there is no gap between the brown header bar and the image?

    Posted by Barry Cooper | December 7, 2010, 12:30
  16. By now you’ve figured out the second part of your question: you can move the image upwards by increasing the negative top margin. As for the first part, I’m afraid the answer is no, because “the entire width of the page” isn’t fixed: it depends on each visitor’s screen size and resolution.

    Posted by Panos | December 7, 2010, 21:52
  17. Thanks Panos. Given I can’t do that, do you know of any way I could fix the width of the brown header at the top of my page, so it lines up with the fixed width of my header image?

    Posted by Barry Cooper | December 8, 2010, 02:09
  18. You’re welcome.
    You can’t limit the width of the brown header unless you buy the CSS upgrade – which is not recommended if you’re not experienced in CSS editing. But what you’re thinking of doing goes against the design of the theme (notice the footer area, for instance). Limiting the header alone wouldn’t look good because the rest of the content floats over a continuous background, with no borders or anything to demarcate its limits: you would need extensive redesigning. And of course it doesn’t look good the way you’ve got it now either, as you’ve realized. I would suggest you return to the top margin I’ve specified in my post, or look for another theme.

    Posted by Panos | December 8, 2010, 07:22
  19. I appreciate the advice, Panos.

    I realise this is going a little beyond the remit of your op. Thanks for your patience. But if I were to purchase the CSS upgrade, would it be relatively straightforward to code the site so that the image acted as the background to the header, rather than being a separate entity below the header? If you could give an example of the code required, that would be fantastic.

    Posted by Barry Cooper | December 8, 2010, 10:31
  20. “Relatively straightforward”? I can’t answer that! Check my posts on, say, formatting text – or any other of my posts on HTML: if those seem straightforward to you, then adding a bg image to your header via CSS would also be straightforward.

    Simplest example:

    #header { background:#e7e1de;background-image:url(‘IMAGE URL HERE’); background-position:center top;background-repeat:no-repeat; }

    That’s for a bg image occupying the central part of the brown stripe, without any other changes. You might remove the repeat command, for a repeating image covering the whole brown stripe, or change e7e1de to another color (maybe the light one of the main area), and you might need additional pieces of code for various other operations such as repositioning the blog title or changing the available height or removing the darker RSS & Twitter stripe.

    Posted by Panos | December 8, 2010, 14:56
  21. Have been trying to remove ‘recent posts, categories, and archives from the right hand side of my Titan page. I’m new to word press and I’m finding it almost impossible to do. Can anyone help me out?

    Posted by la modi | May 23, 2011, 16:46
  22. Thanks for the tip. I also want to remove the ‘leave a comment, reply box as well from my homepage. Will the CSS work with that as well?

    Posted by la modi | May 23, 2011, 18:27
  23. You’re welcome. But who said anything about CSS? The post I linked to says that in order to remove the default contents of the sidebar you need to add a blank text widget.

    As for removing the comment form, you need to deactivate commenting. Page editor > Discussion module: uncheck “Allow comments” and “Allow trackbacks and pingbacks on this page”, click Update. Or (faster) Pages > All Pages: hover under page title, click Quick edit, uncheck “Allow Comments”, click Update.

    And please link to the blog in question: the one linked to your username isn’t even a wp.com blog.

    Posted by Panos | May 23, 2011, 22:12

Trackbacks/Pingbacks

  1. Pingback: Custom Header Workaround For The New WP.com Theme Titan « WP Xpert - March 17, 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,413,391 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: