WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven
[resolved] Would like to overlay header text and picture (9 posts)

  1. gilbert.houtekamer
    Member
    Posted 1 year ago #

    I am new to WordPress and php. I use the twenty eleven template

    I would like to overlay the blog title, subtitle and search bar with the picture. Right now I commented the <h1> and <h2> out in the header.php file, and put the text in the graphics, see houtekamer.com/wordpress.

    I would like the <h1> and <h2> content to come from the header.php code, however.

    Any advice will be appreciated.

    Gilbert

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes. Or use a custom CSS plugin.

  3. gilbert.houtekamer
    Member
    Posted 1 year ago #

    I did create a child theme, and I am experimenting on the child.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Not entirely sure what you mean, but perhaps using "display: none;" in the CSS code for the header elements (h1, h2, etc.) would solve the problem? It hides them from view on the page, but leaves the code intact in header.php.

  5. gilbert.houtekamer
    Member
    Posted 1 year ago #

    thanks, actually I would the text to appear overlayd with the chart. When I keep the H1/H2, they are shown on the top of the page, with the picture below it. I would like the H1/H2 text to overlay the chart, such that I can use a picture without, and custom Site Title and tagline with the wordpress GUI.

  6. gilbert.houtekamer
    Member
    Posted 1 year ago #

    .. sorry, too many words missing ..
    ... such that I can use a picture withou text, and customize the Site Title and tagline with the wordpress GUI.

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Ah, okay, well you can do that in a few ways -- one is to use the image as a background (done in the CSS) or you can do overlay using z-index (if needed) and/or margin settings (negative margins may be relevant).

    I'd suggest using Firebug for working with CSS and looking up CSS on this site:

    http://www.w3schools.com/css/

    Or if you post a link to your site, someone may be able to give you more specific help.

  8. gilbert.houtekamer
    Member
    Posted 1 year ago #

    Thanks, Firebug is helpful.

    This does the trick for me

    #branding hgroup {
    	margin: 0 7.6%;
    	z-index: 1;
    	position:absolute;
    	top: 0px;
    	left: 0px;
    }
  9. bartash
    Member
    Posted 1 year ago #

    thankyou gilbert, i just tried it on my site and it works a dream

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic