WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Fourteen
[resolved] Can Twenty Fourteen Support a Graphic Logo? (23 posts)

  1. Shaunrafuse
    Member
    Posted 2 months ago #

    I want to insert my graphic logo where the site title and tagline are originally placed, is there a way to implement my logo in that space?

  2. esmi
    Forum Moderator
    Posted 2 months ago #

    Assuming you are comfortable using HTML & CSS, yes but do not edit the Twenty Fourteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes.

  3. Shaunrafuse
    Member
    Posted 2 months ago #

    Yup I'm using a child theme esmi, would you be so kind to enlighten me with an approach?

  4. esmi
    Forum Moderator
    Posted 2 months ago #

    Site url?

  5. Shaunrafuse
    Member
    Posted 2 months ago #

    http://homehealthyfitness.com/

    But I have it currently set with the Expound theme until I have it all configured properly with the Twenty Fourteen.

    Do you want me to change it back for this instance??

  6. esmi
    Forum Moderator
    Posted 2 months ago #

    It would be helpful to see your child theme, yes.

  7. Shaunrafuse
    Member
    Posted 2 months ago #

    Ok done, bit of a mess and the logo is huge atm because its set as the header...

  8. Shaunrafuse
    Member
    Posted 2 months ago #

    A friend has helped me resize the logo appropriately here and this is what I'm trying to go for with and option to fill the space to the right with content (i.e. text, banner or whatever)...

    http://www.muslimahwebdesign.co.uk/wordpresstutorials/wp-content/uploads/2014/05/health_fitness_screenshot1.png

  9. esmi
    Forum Moderator
    Posted 2 months ago #

    What dimensions do you want to for that header/logo image?

  10. Shaunrafuse
    Member
    Posted 2 months ago #

    540x160 I believe is what the image was resized to in that screenshot. That look is what I'm going for...

  11. Shaunrafuse
    Member
    Posted 2 months ago #

    closer to 500X155 I believe actually... My browser was sized a little off..

  12. Shaunrafuse
    Member
    Posted 2 months ago #

    Ok, so I found out that the size of the header is set in a file called custom-header.php. I copied this file and made a duplicate within my child theme, changed the values to maybe constrain the image, and set it to the left as well, but achieved nothing lol... What am I missing here!?

  13. esmi
    Forum Moderator
    Posted 2 months ago #

    Try adding:

    function my_custom_header_setup() {
    	add_theme_support( 'custom-header', apply_filters( 'my_custom_header_args', array(
    		'default-text-color'     => 'fff',
    		'width'                  => 540,
    		'height'                 => 160,
    		'flex-height'            => true,
    		'wp-head-callback'       => 'twentyfourteen_header_style',
    		'admin-head-callback'    => 'twentyfourteen_admin_header_style',
    		'admin-preview-callback' => 'twentyfourteen_admin_header_image',
    	) ) );
    }
    add_action( 'after_setup_theme', 'myn_custom_header_setup' );
    
    function twentyfourteen_admin_header_style() {
    ?>
    	<style type="text/css" id="twentyfourteen-admin-header-css">
    	.appearance_page_custom-header #headimg {
    		background-color: #000;
    		border: none;
    		max-width: 540px;
    		min-height: 160px;
    	}
    	#headimg h1 {
    		font-family: Lato, sans-serif;
    		font-size: 18px;
    		line-height: 48px;
    		margin: 0 0 0 30px;
    	}
    	#headimg h1 a {
    		color: #fff;
    		text-decoration: none;
    	}
    	#headimg img {
    		vertical-align: middle;
    	}
    	</style>
    <?php
    }
    endif;

    to your child theme's functions.php file.,

  14. Shaunrafuse
    Member
    Posted 2 months ago #

    Tried but still nothing...

  15. Shaunrafuse
    Member
    Posted 2 months ago #

    does it need to be styled with CSS maybe??

  16. esmi
    Forum Moderator
    Posted 2 months ago #

    The image you are uploading is 1260 x 394 pixels!

  17. Shaunrafuse
    Member
    Posted 2 months ago #

    lol true yes, I will resize it.. But the size limits are constrained now shouldn't it show just up to those limits??

  18. esmi
    Forum Moderator
    Posted 2 months ago #

    No. The limits are applied when the image is uploaded, so you need to upload a fresh image - preferably one that is roundabout the right size.

  19. Shaunrafuse
    Member
    Posted 2 months ago #

    Ok done but still nothing! On the site its the same, huge! But within the Appearance>Header Preview, it looks the correct size!

  20. esmi
    Forum Moderator
    Posted 2 months ago #

    I think we're still missing something. In your child's header.php template file, try changing:

    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">

    to:

    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    <img src="<?php header_image(); ?>" width="540" height="160" alt="Home Healthy Fitness: Bringing good and fitness to your home">
    </a>
  21. Shaunrafuse
    Member
    Posted 2 months ago #

    Worked like a charm!! Thank you esmi! Now I've got to figure a way to fill that space to the right lol.. Thank you so much!

  22. esmi
    Forum Moderator
    Posted 2 months ago #

    No problem. I wish there was a more elegant way to achieve this but 2014 isn't (in my personal opinion) the most child friendly theme out there in this regard.

  23. Shaunrafuse
    Member
    Posted 2 months ago #

    Ya I've been battling with it, but it sure does give me a chance to learn a few things..

Reply

You must log in to post.

About this Theme

About this Topic