WordPress.org

Support

Support » Themes and Templates » [Resolved] Massive headers

[Resolved] Massive headers

  • Dot

    @dianetingleyhotmailcom

    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?

Viewing 15 replies - 1 through 15 (of 23 total)
  • esmi

    @esmi

    Forum Moderator

    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.

    Dot

    @dianetingleyhotmailcom

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

    Diane

    esmi

    @esmi

    Forum Moderator

    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.

    Dot

    @dianetingleyhotmailcom

    Wow! Thanks for that Esmi!

    Um – and where is the “functions php file” please?

    esmi

    @esmi

    Forum Moderator

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

    Dot

    @dianetingleyhotmailcom

    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?

    esmi

    @esmi

    Forum Moderator

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

    Dot

    @dianetingleyhotmailcom

    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”?

    esmi

    @esmi

    Forum Moderator

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

    No.

    Dot

    @dianetingleyhotmailcom

    Oh – what would that be please?

    esmi

    @esmi

    Forum Moderator

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

    Dot

    @dianetingleyhotmailcom

    Ok – here goes nothing…

    Dot

    @dianetingleyhotmailcom

    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!

    esmi

    @esmi

    Forum Moderator

    The code I gave above worked fine for me.

    Dot

    @dianetingleyhotmailcom

    Thankyou

Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘[Resolved] Massive headers’ is closed to new replies.