WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Massive headers (23 posts)

  1. Dot
    Member
    Posted 10 months ago #

    Hello

    I've update to twenty thirteen, but would like to scale back the massive headers (my site's at deardot.com)
    Any one know the best way to control my header sizes please?

  2. esmi
    Forum Moderator
    Posted 10 months ago #

    Do not edit the Twenty Thirteen 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. Dot
    Member
    Posted 10 months ago #

    Hello Esmi,
    I have created a child theme!
    Do you know what code I need to change the headers?

    Diane

  4. esmi
    Forum Moderator
    Posted 10 months ago #

    In your child theme's functions.php file, try adding:

    remove_theme_support( 'custom-header' );
    
    function my_custom_header_setup() {
    	$args = array(
    		'default-text-color'     => '220e10',
    		'default-image'          => '%s/images/headers/circle.png',
    
    		'height'                 => 130,
    		'width'                  => 1600,
    
    		'wp-head-callback'       => 'my_header_style',
    		'admin-head-callback'    => 'my_admin_header_style',
    		'admin-preview-callback' => 'twentythirteen_admin_header_image',
    	);
    	add_theme_support( 'custom-header', $args );
    }
    add_action( 'after_setup_theme', 'my_custom_header_setup' );
    
    function my_header_style() {
    	$header_image = get_header_image();
    	$text_color   = get_header_textcolor();
    
    	if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) )
    		return;
    	?>
    	<style type="text/css" id="twentythirteen-header-css">
    	<?php
    		if ( ! empty( $header_image ) ) :
    	?>
    		.site-header {
    			background: url(<?php header_image(); ?>) no-repeat scroll top;
    			background-size: 1600px auto;
    		}
    	<?php
    		endif;
    
    		if ( ! display_header_text() ) :
    	?>
    		.site-title,
    		.site-description {
    			position: absolute;
    			clip: rect(1px 1px 1px 1px); /* IE7 */
    			clip: rect(1px, 1px, 1px, 1px);
    		}
    	<?php
    			if ( empty( $header_image ) ) :
    	?>
    		.site-header .home-link {
    			min-height: 0;
    		}
    	<?php
    			endif;
    
    		elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
    	?>
    		.site-title,
    		.site-description {
    			color: #<?php echo esc_attr( $text_color ); ?>;
    		}
    	<?php endif; ?>
    	</style>
    	<?php
    }
    
    function my_admin_header_style() {
    	$header_image = get_header_image();
    ?>
    	<style type="text/css" id="twentythirteen-admin-header-css">
    	.appearance_page_custom-header #headimg {
    		border: none;
    		-webkit-box-sizing: border-box;
    		-moz-box-sizing:    border-box;
    		box-sizing:         border-box;
    		<?php
    		if ( ! empty( $header_image ) ) {
    			echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;';
    		} ?>
    		padding: 0 20px;
    	}
    	#headimg .home-link {
    		-webkit-box-sizing: border-box;
    		-moz-box-sizing:    border-box;
    		box-sizing:         border-box;
    		margin: 0 auto;
    		max-width: 1040px;
    		<?php
    		if ( ! empty( $header_image ) || display_header_text() ) {
    			echo 'min-height: 130px;';
    		} ?>
    		width: 100%;
    	}
    	<?php if ( ! display_header_text() ) : ?>
    	#headimg h1,
    	#headimg h2 {
    		position: absolute !important;
    		clip: rect(1px 1px 1px 1px); /* IE7 */
    		clip: rect(1px, 1px, 1px, 1px);
    	}
    	<?php endif; ?>
    	#headimg h1 {
    		font: bold 60px/1 Bitter, Georgia, serif;
    		margin: 0;
    		padding: 58px 0 10px;
    	}
    	#headimg h1 a {
    		text-decoration: none;
    	}
    	#headimg h1 a:hover {
    		text-decoration: underline;
    	}
    	#headimg h2 {
    		font: 200 italic 24px "Source Sans Pro", Helvetica, sans-serif;
    		margin: 0;
    		text-shadow: none;
    	}
    	.default-header img {
    		max-width: 230px;
    		width: auto;
    	}
    	</style>
    <?php
    }

    Then add:

    .site-header .home-link {
         min-height: 130px;
        padding: 0 20px;
        text-decoration: none;
        width: 100%;
    }

    to your child's style.css file. This should reduce the header height from 230px to 130px.

  5. Dot
    Member
    Posted 10 months ago #

    Wow! Thanks for that Esmi!

    Um - and where is the "functions php file" please?

  6. esmi
    Forum Moderator
    Posted 10 months ago #

    It should be an empty file with just an opening <?php statement in your child theme's folder.

  7. Dot
    Member
    Posted 10 months ago #

    So,

    I open word pad,
    Paste the code you gave me,
    save it as functions.php
    and in my child theme directory.

    Did I miss anything out?

  8. esmi
    Forum Moderator
    Posted 10 months ago #

    Do not use WordPad! You must use a plain text editor such as Notepad.

  9. Dot
    Member
    Posted 10 months ago #

    Ok,

    but apart from that this is all I need to do; in other words, does the code you gave me include the "opening <?php statement"?

  10. esmi
    Forum Moderator
    Posted 10 months ago #

    does the code you gave me include the "opening <?php statement"?

    No.

  11. Dot
    Member
    Posted 10 months ago #

    Oh - what would that be please?

  12. esmi
    Forum Moderator
    Posted 10 months ago #

    Just add <?php to the very top of the file.

  13. Dot
    Member
    Posted 10 months ago #

    Ok - here goes nothing...

  14. Dot
    Member
    Posted 10 months ago #

    Ah no crashes! Thanks Esmi! The cropper tool is still awol though - do you think it might be because I'm managing a few sites from the same dashboad? It's not giving me horizontal widening; just a narrow strip of picture!

  15. esmi
    Forum Moderator
    Posted 10 months ago #

    The code I gave above worked fine for me.

  16. Dot
    Member
    Posted 10 months ago #

    Thankyou

  17. cclambie
    Member
    Posted 8 months ago #

    Just want to add another method to this post, and others if looking:

    1.
    In Appearance>Header
    Select "Remove Header"
    2.
    In Appearance>Editor
    Select template Header (header.php)
    3.
    Add something like this:
    <div class="site-add-header"><img class="header-img" src="wp-content/uploads/2013/10/Logo_header1.png" alt="muesli 101 logo"></div>
    Click "Update File"
    4.
    Now select to Edit Stylesheet (style.css)
    Do a CTRL-F (Find) "site-header"
    5.
    Remove

    .site-header {
    	background-image: .....;
    }

    Add

    .site-add-header {
    text-align:center;
    }
    .header-img {
    width:80%;
    }

    You now have a scalable image based site-header for the theme Twenty Thirteen.

  18. Dot
    Member
    Posted 8 months ago #

    Great!

  19. justincarlson
    Member
    Posted 8 months ago #

    cclambie could you explain what exactly that code does? Does it basically allow you to set the header image width using a percentage rather than pixel count through esmi's solution?

  20. justincarlson
    Member
    Posted 8 months ago #

    I completed all of esmi's steps successfully, now I'm trying to upload a 2000x784 image as the header to see how it would look, but I'm finding when I upload it through the Header page it seems to be overriding the min-height setting of 784 px that I entered on style.css of the child theme.

  21. justincarlson
    Member
    Posted 8 months ago #

    Do I need to bypass the Header interface and insert the image directly through the non-child style.css?

  22. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    @justincarlson - you need to start your own thread per http://codex.wordpress.org/Forum_Welcome#Where_To_Post - you can include a link to this one if relevant.

  23. justincarlson
    Member
    Posted 8 months ago #

    Ok, thanks.

Reply

You must log in to post.

About this Topic