WordPress.org

Forums

Duster
[resolved] Overlay blog title and description over header image (5 posts)

  1. binaryanomaly
    Member
    Posted 1 year ago #

    How can I achieve in an elegant way that the blog title and description are layed over the header image?

    In html/css I would use css for the div background but not sure what the right way to do this is for the header with wordpress and php?

    Any ideas? thx

  2. Hi there,

    You can use CSS to style and position the site title and tagline as you like.

    Just a heads-up that the best way to make changes to a theme is to use a child theme, so your tweaks won't be overwritten when updating the theme. Here are some guides in case you haven't made one before:

    http://codex.wordpress.org/Child_Themes
    http://op111.net/53/
    http://vimeo.com/49770088

    If you provide a link to your site I can help you more directly if you need it. Thanks!

  3. binaryanomaly
    Member
    Posted 1 year ago #

    Hi Kathryn

    Thanks for your answer, I'm already working with a child theme and I managed to achieve partially what I wanted by adding the following to style.css - I broke responsiveness though which I'll have to fix yet.

    #branding {
    	position: relative;
    	border: 0px; /* solid #c0c0c0;*/
    	padding-bottom: 0px;
    }
    
    #branding hgroup {
    	position: absolute;
    	bottom: -20px;
    	text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
    	z-index:1;
    	padding-bottom: 0px;
    
    }
    
    #branding hgroup h1 {
    	font-size: 400%;
    	font-weight: 500;
    	color: #ffffff;
    }
    
    #branding hgroup h2 {
    	font-size: 150%;
    	color: #ffffff;
    }

    You can find my site here: http://dyi.li/3SP

    Thanks for your help ;)

  4. Your tweak looks good! The text shadow overtop the image of the sky looks particularly nice.

    Is there anything further you need help with?

    If you wanted to apply those changes only to larger screens, you could wrap the entire block of CSS in this media query:

    /* Desktops and laptops ----------- */
    @media only screen
    and (min-width : 1224px) {
    
       /* Your styles here */
    
    }

    More media queries.

  5. binaryanomaly
    Member
    Posted 1 year ago #

    Nope, all fine. Thanks Kathryn.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags