• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How do I customize the dimensions of my header image?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How do I customize the dimensions of my header image?

This topic is: not resolved

Tagged: css, Custom header, customize, header dimensions, header image, header support code

  • This topic has 3 replies, 2 voices, and was last updated 7 years, 7 months ago by Brad Dalton.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 19, 2015 at 1:31 pm #156825
    jillian
    Member

    I need help customizing my header support code so that I can enlarge my header image dimensions without cutting off other parts of the page, like my main navigation menu. I'm new to WordPress and CSS, so simple step-by-step instructions would be super helpful.

    Thanks!

    http://www.compassionatewomen.org
    June 19, 2015 at 1:38 pm #156834
    Brad Dalton
    Participant

    There's 2 files you need to edit.

    The functions file for the custom header function

    And under the Site Header section in your style sheet there's 1 or 2 instances of the header width and height you need to modify.

    All dimensions should match your image size exactly.


    Get Help – Book Consultation.

    June 21, 2015 at 11:06 am #157000
    jillian
    Member

    Where do I find the functions file?

    This is what I see in my style sheet:

    /* ## Title Area
    --------------------------------------------- */

    .title-area {
    float: left;
    padding: 10px 0;
    width: 360px;
    }

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

    .site-title {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    }

    .site-title a,
    .site-title a:hover {
    color: #333;
    }

    .header-image .site-title > a {
    background: url(http://compassionatewomen.org/wp-content/uploads/2015/03/logoandtitle.png) no-repeat left;
    float: left;
    min-height: 60px;
    width: 100%;
    }

    .site-description {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    }

    .site-description,
    .site-title {
    margin-bottom: 0;
    }

    .header-image .site-description,
    .header-image .site-title {
    display: block;
    text-indent: -9999px;
    }

    Is this where I'll be making edits, and if so, what changes do I make? This is my child theme, btw. Thanks!

    June 21, 2015 at 12:36 pm #157013
    Brad Dalton
    Participant
    .title-area {
    float: left;
    padding: 10px 0;
        width: 360px;
    }
    

    Change the width and also find your functions file in your child theme.

    Here's a video


    Get Help – Book Consultation.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble