CODEWITHSUNDEEP
phphtmlcsswordpressheader
Laurens van Oorschot
Laurens van Oorschot

Reputation: 105

change size of header twenty eleven

I would like to make the header(yellow background) smaller. As I've been told there is too much space on the header, so users have to keep scrolling to get to the content. Does that make sense? Without having to change the height of the image. As it looks strange at the moment (http://cultsotters.org.uk). Is this possible? I searched everywhere and it seems this may not be possible.

Apologies for the long post.

Css Code

#branding {border:none;}
#branding {background: #ffff88; /* Old browsers */
background: -moz-linear-gradient(top, #ffff88 0%, #ffff88 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffff88), color-stop(100%,#ffff88)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffff88 0%,#ffff88 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffff88 0%,#ffff88 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffff88 0%,#ffff88 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffff88 0%,#ffff88 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 */
margin:none;   
}
/* logo above site title */
<!-- #site-title a {
    background: url('http://www.cultsotters.org.uk/images/CultsOttersORIG.svg');
 background-size: 105px 115px;
       width: auto;

    background-repeat: no-repeat;
    background-position:top center;
    display: block;
  text-align: center;
    padding: 2.306em 0 0;
line-height:30px;
font-size:30px;
}
-->
#branding hgroup {
text-align: center; display: inline; margin:0; align:center;}
#site-title, #site-description {
    margin: ; text-align: center; 

    }
#site-title > span > a {
    line-height: 100px;

}

#site-title {
    padding: 2.306em 0 0;
}

HTML code:

<body <?php body_class(); ?>>
<div id="page" class="hfeed">
    <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
            </hgroup>

            <?php
                // Check to see if the header image has been removed
                $header_image = get_header_image();
                if ( $header_image ) :
                    // Compatibility with versions of WordPress prior to 3.4.
                    if ( function_exists( 'get_custom_header' ) ) {
                        /*
                         * We need to figure out what the minimum width should be for our featured image.
                         * This result would be the suggested width if the theme were to implement flexible widths.
                         */
                        $header_image_width = get_theme_support( 'custom-header', 'width' );
                    } else {
                        $header_image_width = HEADER_IMAGE_WIDTH;
                    }
                    ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    /*
                     * The header image.
                     * Check if this is a post or page, if it has a thumbnail, and if it's a big one
                     */
                    if ( is_singular() && has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
                            $image[1] >= $header_image_width ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else :
                        // Compatibility with versions of WordPress prior to 3.4.
                        if ( function_exists( 'get_custom_header' ) ) {
                            $header_image_width  = get_custom_header()->width;
                            $header_image_height = get_custom_header()->height;
                        } else {
                            $header_image_width  = HEADER_IMAGE_WIDTH;
                            $header_image_height = HEADER_IMAGE_HEIGHT;
                        }
                        ?>
                    <img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>
            </a>
            <?php endif; // end check for removed header image ?>

Upvotes: 0

Views: 394

Answers (3)

Billy
Billy

Reputation: 2448

take out

#site-title > span > a { 
line-height: 100px;
}

Upvotes: 0

Nisha
Nisha

Reputation: 1

Just remove the padding of #site-title from line no - 483 of custom-style.css

Upvotes: 0

Abhi Kasera
Abhi Kasera

Reputation: 96

you can change height of header by using css:

.branding {
    height: 300px;
}

Upvotes: 1

Related Questions