1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Changing header size on WordPress theme

Discussion in 'Web Design' started by Barrage, Dec 7, 2013.

  1. Barrage

    Barrage Junior Member

    Joined:
    Oct 22, 2013
    Messages:
    140
    Likes Received:
    38
    Hey guys, I am in the making of my first website, and worked a bit on the layout now. But with my theme, the header has a fixed size, which I believe is way too small.

    Therefore I would like to change the header size. I am not sure how to this, I checked out header.php file, but I am not sure what to change, since there are no numbers that I just easy can adjust, like if it would of been HTML. I know a lil' bit HTML but nearly nothing PHP.

    The team I am running: http://www.elegantthemes.com/demo/?theme=SimplePress
    Current header size: http://gyazo.com/a64be0908ea89203c36598ffc1211b8d
    Wanted header size: http://gyazo.com/e54afa4ad182e7a88ee6a7c41473dfc1

    When I am at WordPress and go to Appearance - Editor - Header.php file, I get this code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title><?php elegant_titles(); ?></title>
    <?php elegant_description(); ?>
    <?php elegant_keywords(); ?>
    <?php elegant_canonical(); ?>
    
    
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
    <script type="text/javascript">
        document.documentElement.className = 'js';
    </script>
    <?php wp_head(); ?>
    <!--[if lt IE 7]>
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie6style.css" />
        <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/DD_belatedPNG_0.0.8a-min.js"></script>
        <script type="text/javascript">DD_belatedPNG.fix('img#logo, .slider_image img, .banner, .banner .readmore, .wrap .image img, .thumb div .image img, div.avatar span.overlay');</script>
    <![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/ie7style.css" />
    <![endif]-->
    </head>
    <body <?php body_class(); ?>>
    <div class="wrapper">
      <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php $logo = (get_option('simplepress_logo') <> '') ? get_option('simplepress_logo') : get_template_directory_uri().'/images/logo.png'; ?>
        <img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr(get_bloginfo('name')); ?>" id="logo"/></a>
        <div id="navwrap">
            <span class="nav_top"></span>
            <?php $menuClass = 'nav superfish';
            $primaryNav = '';
            if (function_exists('wp_nav_menu')) {
                $primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false ) );
            };
            if ($primaryNav == '') { ?>
                <ul class="<?php echo esc_attr( $menuClass ); ?>">
                    <?php if (get_option('simplepress_home_link') == 'on') { ?>
                        <li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e('Home','SimplePress') ?></a></li>
                    <?php }; ?>
    
    
                    <?php show_page_menu($menuClass,false,false); ?>
                    <?php show_categories_menu($menuClass,false); ?>
                </ul> <!-- end ul.nav -->
            <?php }
            else echo($primaryNav); ?>
    
    
            <?php do_action('et_header_menu'); ?>
    
    
            <?php global $default_colorscheme, $shortname; $colorSchemePath = '';
            $colorScheme = get_option($shortname . '_color_scheme');
            if ($colorScheme <> $default_colorscheme) $colorSchemePath = strtolower($colorScheme) . '/'; ?>
            <br class="clear" />
            <span class="nav_bottom"></span>
        </div><!-- #navwrap -->
    Thankful for all help or tips!
     
  2. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,148
    Add this to your css file.

    Code:
    body .wrapper:first-child > a:first-child {
        display: block;
        width: 100% !important;
    }
    body .wrapper:first-child > a:first-child > img {
        width: 100% !important;
        height: 150px !important;
        margin: 0 !important;
    }
    
     
  3. Barrage

    Barrage Junior Member

    Joined:
    Oct 22, 2013
    Messages:
    140
    Likes Received:
    38
    Thanks for the tips, it did indeed work and made my header bigger. The downside however was that it also made my header very fuzzy. It seems like when I upload header, it first goes to the old header size, and with this CSS code just zooms it up, which I believe is making it fuzzy. Any way to get around that?

    If not, thanks for the tips!
     
  4. jazzc

    jazzc Moderator Staff Member Moderator Jr. VIP

    Joined:
    Jan 27, 2009
    Messages:
    2,468
    Likes Received:
    10,148
    I assume the theme has its own panel and you upload the header though that? In that case, give a few $ to a freelancer to locate the resizing function in the code and remove it for the header 's case. See the "Hire a Freelancer" section for that.
     
  5. SkyrocketSEO

    SkyrocketSEO Jr. VIP Jr. VIP Premium Member

    Joined:
    Nov 5, 2012
    Messages:
    4,345
    Likes Received:
    11,253
    Occupation:
    travəlɪŋ
    Location:
    Aibres
    Home Page:
    Try to add this at the bottom of the style.css

    #logo {
    height: 157px;
    margin-left: -179px;
    width: 1300px;
    }
     
  6. Barrage

    Barrage Junior Member

    Joined:
    Oct 22, 2013
    Messages:
    140
    Likes Received:
    38
    Okey I will go to the freelance section!


    Thanks for the tips, didnt take away the fuzziness tho :/
     
  7. SkyrocketSEO

    SkyrocketSEO Jr. VIP Jr. VIP Premium Member

    Joined:
    Nov 5, 2012
    Messages:
    4,345
    Likes Received:
    11,253
    Occupation:
    travəlɪŋ
    Location:
    Aibres
    Home Page:
    Create a logo that will fit the size of your new header space. That's the problem
     
    • Thanks Thanks x 1
  8. Austin56101

    Austin56101 Newbie

    Joined:
    Dec 15, 2013
    Messages:
    43
    Likes Received:
    2
    Occupation:
    Youfit Health Clubs
    Location:
    California
    Dang that's some nice code bro!