WordPress.org

Support

Support » Themes and Templates » Twenty Eleven » [Resolved] Would like to overlay header text and picture

[Resolved] Would like to overlay header text and picture

  • gilbert.houtekamer

    @gilberthoutekamer

    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

Viewing 8 replies - 1 through 8 (of 8 total)
  • esmi

    @esmi

    Forum Moderator

    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.

    gilbert.houtekamer

    @gilberthoutekamer

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

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    gilbert.houtekamer

    @gilberthoutekamer

    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.

    gilbert.houtekamer

    @gilberthoutekamer

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

    WPyogi

    @wpyogi

    Forum Moderator

    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.

    gilbert.houtekamer

    @gilberthoutekamer

    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;
    }

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘[Resolved] Would like to overlay header text and picture’ is closed to new replies.
Skip to toolbar