[Agency] Resizing and Centering the Logo Image

Community Forums Forums Design Tips and Tricks [Agency] Resizing and Centering the Logo Image

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by  Liz 1 year, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #76895

    Liz
    Participant

    I’ve been trying to change the size of the space for the logo on this site, have seen size changes in the style.css as well as in functions.php. No matter what I do, I either have space that is much taller than I need, or logo is not aligned as a full-width header. I will use the Responsive header plugin to supply smaller sizes for smaller screens as well.

    Can someone please advise which files I need to change and which sections in order to have a banner image of 960×276 centered at top of page? the link below is temp space for development only.

    http://www.passiongoddess.com/test
    #76900

    1. Open functions.php file and look for following code. Change height and width dimensions as per requirements.

    //* Add support for custom header
    add_theme_support( ‘custom-header’, array(
    ‘header_image’ => ”,
    ‘header-selector’ => ‘.site-title a’,
    ‘header-text’ => false,
    ‘height’ => 60,
    ‘width’ => 300,
    ) );

    2. Then open style,css file and change min-height and float to center in following code

    /* Logo, hide text */

    .header-image .site-header .wrap {
    padding: 0;
    }

    .header-image .site-title a {
    float: left;
    min-height: 60px;
    width: 100%;
    }


    #77048

    Liz
    Participant

    Thank you … is this replacing full-width or partial-width header info?

    Below is everything that i have related to header, before making the changes that you recommended.

    #header {
    background: url(images/header.png) repeat-y center center #090909;
    background-position: center top !important;
    background-color: #090909 !important;
    margin: 0 auto;
    min-height: 115px;
    overflow: hidden;
    width: 100%;
    }
    /* Image Header – Full Width
    ———————————————————— */

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 100%;
    }

    /* Image Header – Partial Width
    ———————————————————— */

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    background-position: center !important;
    display: block;
    float: left;
    height: 120px;
    overflow: hidden;
    margin: 0;
    max-width: 330px;
    padding: 0;
    text-indent: -9999px;
    width: 100%;
    }

    .header-image #description {
    display: block;
    overflow: hidden;

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.