Headline on top of feature photo

I have been looking to achieve this look for a long time!

premium.wpmudev.org/blog/wordpress-themes-with-demo-content/

How is this possible? Probably a dumb question. I am glad I bought your themes.

Thanks

  • Vaughan
    • Support/SLS MockingJay

    Hi Carlton,

    Hope you're well?

    It would be a matter of editing your templates and repositioning the featured image thumbnail on the page as a background image (if you wish to use the featured image for that) there are numerous ways of doing it in the templates, you could also use a static image that would display on all your pages, then just reposition the title object so that it overlays the image in the template or by using CSS.

    This would depend on the theme though as to exactly what changes you'd make.

    For instance, on an actual page, most themes will have a standard page template, usually called page.php

    You would then edit that template.

    For instance, the twentyfourteen page.php template is content-page.php and looks like;

    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    	<?php
    		// Page thumbnail and title.
    		twentyfourteen_post_thumbnail();
    		the_title( '<header class="entry-header"><h1 class="entry-title">', '</h1></header><!-- .entry-header -->' );
    	?>
    
    	<div class="entry-content">
    		<?php
    			the_content();
    			wp_link_pages( array(
    				'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
    				'after'       => '</div>',
    				'link_before' => '<span>',
    				'link_after'  => '</span>',
    			) );
    
    			edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
    		?>
    	</div><!-- .entry-content -->
    </article><!-- #post-## -->

    So the 2 parts for the featured image & title are near the top of the page.

    twentyfourteen_post_thumbnail();
    		the_title( '<header class="entry-header"><h1 class="entry-title">', '</h1></header><!-- .entry-header -->' );

    So now they're roughly in the position you want them, you can now tweak the position of the title.

    you can see the CSS class for entry-header & entry-title.

    So you can now tweak the position using CSS similar to below

    .entry-header {
        position: relative;
        top: 50px;
        left: 50px;
    }

    A good tool to use is an extension for Firefox called Firebug, this will allow you to view the page & CSS used, you can then make edits to the CSS and view the results in real-time, once you have it looking how you want, you can then copy the CSS changes to your theme style.css.

    http://www.studiopress.com/tips/using-firebug.htm

    http://www.w3resource.com/web-development-tools/firebug-tutorials.php

    You might also find the following useful;

    http://www.presscoders.com/wordpress-theme-customization-guide

    http://codex.wordpress.org/Theme_Customization_API

    http://codex.wordpress.org/Theme_Development

    Hope this helps

  • carlton smith
    • Flash Drive

    Vaughan,
    I don't understand what the twentyfourteen theme has to do with it ... is that just an example?
    Maybe my question was poorly worded.
    Is there not a way to get this effect in one of the wpmudev themes (like in Upfront)?
    I personally have no interest in hard-coding, but suppose I could hire a developer to do it. I like to buy themes where most things can be accomplished without having to do things like this.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.