Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Superimpose blog title on header image--can it be done?

  1. tsusanchang
    Member

    I know several themes come with the title superimposed on the header image (and that, in those, you can hide the title), but my theme (Tarski) is not one of them. Is it possible to make this happen on the CSS stylesheet?

    For now I'm working around it with a photoshopped header image which includes the text, with title and tagline set to display:none. But it's clumsy, and I can't get the text to look right--so I would much rather do it with the actual title layered over the header image.

    Any suggestions?

    Thanks so much.

    The blog I need help with is tsusanchang.wordpress.com.

  2. timethief
    Member

    I do not help with CSS editing. Only 2 Volunteers do but I recalled that the Tarski theme header was odd so I located this thread for you. I apologize in advance if it's not helpful. http://en.forums.wordpress.com/topic/tried-to-customize-header-but-will-not-appear?replies=15#post-357461

  3. simplyguidelines
    Member

    Hello.. It can be done more or less depending on the theme..

    I discovered that you can use a text widget as a "container" to float a css div containing a bit of text or image etc.(this came as a big shock to me as i'm no programmer)

    Obviously this requires a bit of understanding of the structure and semantics of css. If you have a look at http://simplyguidelines.wordpress.com/ (one of mine) the red strIpe is done in this way... I've not used your theme but the basic idea works on everything...

    Sorry I cant be more help

    Rick

  4. tsusanchang
    Member

    Hi Rick, thanks for the suggestion. I'm extremely new to css myself (started 3 days ago) and have only the barest grasp of html even, so please forgive a few very simple clarifying questions:

    Does your text widget contain just one element (the .png file), or is it separate text and image? Or does your png file contain both the text and the image? Is the text truly separate? (I'm trying to avoid having to use integrated text and image) Can you share the relevant snippet of the css code?

    Appreciatively,
    Susie.

  5. thesacredpath
    Member

    The header image, title and tagline all have #header as a parent, so it isn't difficult at all to overlay the title and tagline on the image. The first part would put the title and tagline centered over the image. The second bit ads a border to the top of the navigation so it looks similar to the original (the borderline was on the bottom of the title/tagline.

    #title {
border-bottom: medium none;
position: relative;
text-align: center;
top: -140px;
}

#navigation {
border-top: 1px solid #CCCCCC;
}

  6. simplyguidelines
    Member

    Ah I think mr. Sacredpath may have found a much simpler way of doing it... My excuse is that I'm on my ipad not a proper browser :-)

  7. thesacredpath
    Member

    The repositioning of a text widget will work as well, but since the existing title is in the same parent, it is easy to move it over the image.

  8. tsusanchang
    Member

    Thank you so much sacredpath. It's working almost just as I hoped now! As you'll see, all I wanted was a small image to the left of the title, so I thought the best way was just to superimpose over the custom header.

    I've got quite a lot of space, though, now, between the title/tagline and navigation. I tried resizing the custom header according to a suggestion you gave someone
    else:
    #topbanner {
    background: url("URL of image here") no-repeat scroll 0 0 transparent !important;
    height: 80px;
    }

    Nothing happened, though. Is there something very basic that I'm missing, I wonder?

  9. thesacredpath
    Member

    The following is a little bit "backyard" as far as CSS goes, and it would be better to do things differently, but it would involve a good bit of rework, so I'll offer this workaround. Add the following to #navigation and see what you think.

    position: relative;
top: -20px;

  10. tsusanchang
    Member

    Perfect! I'll take it, "backyard" or not. Now the site looks just the way I want it to. sacredpath, you are the proverbial Man.

  11. thesacredpath
    Member

    Great! Glad you are happy with the outcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.