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,820
    Likes Received:
    12,483
    Occupation:
    Potentate
    Location:
    Asuncion
    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,820
    Likes Received:
    12,483
    Occupation:
    Potentate
    Location:
    Asuncion
    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,570
    Likes Received:
    11,983
    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,570
    Likes Received:
    11,983
    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!