• 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

Enlarge Image Header in Going Green v. 1.0.1

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 › Enlarge Image Header in Going Green v. 1.0.1

This topic is: not resolved

Tagged: Going Green Header Image Resizing v. 1.0.1

  • This topic has 6 replies, 2 voices, and was last updated 11 years, 3 months ago by candacegodwin.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 9, 2014 at 8:18 pm #99416
    candacegodwin
    Participant

    I am trying to enlarge the image header in Going Green version 1.0.1 (older version of Going Green theme) on http://thecoeurdalenecoop.com. Somehow, previously, I managed to change the image size to 960 x 100 and want to increase that to 960x250. I've tried to change the values in the css under Header and Header Image. What I get is the "area" of the header resizes, but unfortunately, the image size for uploading a new header is remaining at 960x100. The function.php files for this theme don't appear to have header info (at least not that I can find).

    Any ideas on where to make the changes? I contacted support, unfortunately, they said it was "custom" coding and they could not help. I know it's there...I just need some direction in finding where the code lives. Any help is appreciated. Thanks -- Candace

    http://thecoeurdalenecoop.com
    April 9, 2014 at 10:18 pm #99432
    nutsandbolts
    Member

    Can you paste in the contents of your functions.php? Without a header function, you shouldn't have Appearance > Header, so I'm thinking it's in there somewhere.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    April 10, 2014 at 8:27 am #99495
    candacegodwin
    Participant

    Hi Andrea, Here is the functions.php. file content. It's only 45 lines of code - seems odd to me, but that's all that is there. Below this is the "home.php" file content-- again only 25 lines of copy. Below that is CSS content for the header and header image sections. This is what I changed (but have since changed back). Changing to 250 made the area larger. I added "height 250" to the header image section -- but it didn't do anything. I can't find anything with 960 x100 in the header section that might refer to the current size. Any suggestions you can give me would be greatly appreciated. Thanks. Candace

    FUNCTION.PHP
    <?php
    // Start the engine
    require_once(TEMPLATEPATH.'/lib/init.php');

    // Add new image sizes
    add_image_size('Featured Image', 590, 330, TRUE);
    add_image_size('Featured Thumb', 200, 115, TRUE);

    // Add rounded header
    add_action('genesis_after_header', 'goinggreen_round_header_graphic');
    function goinggreen_round_header_graphic() {
    require(CHILD_DIR.'/after-header.php');
    }

    // Add widgeted footer section
    add_action('genesis_before_footer', 'goinggreen_include_footer_widgets');
    function goinggreen_include_footer_widgets() {
    require(CHILD_DIR.'/footer-widgeted.php');
    }

    // Register widget areas
    genesis_register_sidebar(array(
    'name'=>'Homepage',
    'id' => 'homepage',
    'description' => 'This is the featured column of the homepage.',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
    ));
    genesis_register_sidebar(array(
    'name'=>'Footer #1',
    'id' => 'footer-1',
    'description' => 'This is the first column of the footer section.',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
    ));
    genesis_register_sidebar(array(
    'name'=>'Footer #2',
    'id' => 'footer-2',
    'description' => 'This is the second column of the footer section.',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
    ));
    genesis_register_sidebar(array(
    'name'=>'Footer #3',
    'id' => 'footer-3',
    'description' => 'This is the third column of the footer section.',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
    ));

    HOME.PHP.

    <?php get_header(); ?>

    <?php genesis_before_content_sidebar_wrap(); ?>
    <div id="content-sidebar-wrap">

    <?php genesis_before_content(); ?>
    <div id="content" class="hfeed">
    <div id="featured-home">
    <?php if (!dynamic_sidebar('Homepage')) : ?>
    <div class="widget">
    <h4><?php _e("Homepage", 'genesis'); ?></h4>
    <div class="wrap">
    <p><?php _e("This is a widgeted area which is called Homepage. It is using the Genesis - Featured Posts widget to display what you see on the Going Green child theme demo site. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Posts widget into the Homepage widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit page screen and publish your page. The Featured Posts widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
    </div><!-- end .wrap -->
    </div><!-- end .widget -->
    <?php endif; ?>
    </div><!-- end #featured-home -->

    </div><!-- end #content -->
    <?php genesis_after_content(); ?>

    </div><!-- end #content-sidebar-wrap -->
    <?php genesis_after_content_sidebar_wrap(); ?>

    CSS

    /***** Header ********************/

    #header {
    width: 960px;
    height: 110px;
    margin: 0;
    padding: 0;
    float: left;
    }

    Image Header
    /***** Image Header - Full Width ********************/

    .header-full-width #title-area, .header-full-width #title-area #title, .header-full-width #title-area #title a {
    width: 960px;

    }

    April 10, 2014 at 9:35 am #99511
    candacegodwin
    Participant

    Hi Andrea, Thanks for your response. Below is the content from the function.php file, home.php file and two areas of the css for header and full header image. The php files associated with this theme are very short (45 and 29 lines of code). I've tried changing the values in the css header, it only made the area larger. I tried added height to the full image header css, but that didn't do anything either. If you have any other suggestions, please let me know. I've only been in the theme php files (child theme), not the genesis files. Thanks.

    Function.php
    <?php
    // Start the engine
    require_once(TEMPLATEPATH.'/lib/init.php');

    // Add new image sizes
    add_image_size('Featured Image', 590, 330, TRUE);
    add_image_size('Featured Thumb', 200, 115, TRUE);

    // Add rounded header
    add_action('genesis_after_header', 'goinggreen_round_header_graphic');
    function goinggreen_round_header_graphic() {
    require(CHILD_DIR.'/after-header.php');
    }

    // Add widgeted footer section
    add_action('genesis_before_footer', 'goinggreen_include_footer_widgets');
    function goinggreen_include_footer_widgets() {
    require(CHILD_DIR.'/footer-widgeted.php');
    }

    // Register widget areas
    genesis_register_sidebar(array(
    'name'=>'Homepage',
    'id' => 'homepage',
    'description' => 'This is the featured column of the homepage.',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
    ));
    genesis_register_sidebar(array(
    'name'=>'Footer #1',
    'id' => 'footer-1',
    'description' => 'This is the first column of the footer section.',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
    ));
    genesis_register_sidebar(array(
    'name'=>'Footer #2',
    'id' => 'footer-2',
    'description' => 'This is the second column of the footer section.',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
    ));
    genesis_register_sidebar(array(
    'name'=>'Footer #3',
    'id' => 'footer-3',
    'description' => 'This is the third column of the footer section.',
    'before_title'=>'<h4 class="widgettitle">','after_title'=>'</h4>'
    ));

    Home.php
    <?php get_header(); ?>

    <?php genesis_before_content_sidebar_wrap(); ?>
    <div id="content-sidebar-wrap">

    <?php genesis_before_content(); ?>
    <div id="content" class="hfeed">
    <div id="featured-home">
    <?php if (!dynamic_sidebar('Homepage')) : ?>
    <div class="widget">
    <h4><?php _e("Homepage", 'genesis'); ?></h4>
    <div class="wrap">
    <p><?php _e("This is a widgeted area which is called Homepage. It is using the Genesis - Featured Posts widget to display what you see on the Going Green child theme demo site. To get started, log into your WordPress dashboard, and then go to the Appearance > Widgets screen. There you can drag the Genesis - Featured Posts widget into the Homepage widget area on the right hand side. To get the image to display, simply upload an image through the media uploader on the edit page screen and publish your page. The Featured Posts widget will know to display the post image as long as you select that option in the widget interface.", 'genesis'); ?></p>
    </div><!-- end .wrap -->
    </div><!-- end .widget -->
    <?php endif; ?>
    </div><!-- end #featured-home -->

    </div><!-- end #content -->
    <?php genesis_after_content(); ?>

    </div><!-- end #content-sidebar-wrap -->
    <?php genesis_after_content_sidebar_wrap(); ?>

    April 10, 2014 at 9:37 am #99513
    candacegodwin
    Participant

    Here are the CSS lines of code for header section:
    /***** Header ********************/

    #header {
    width: 960px;
    height: 110px;
    margin: 0;
    padding: 0;
    float: left;
    }

    #header .wrap {
    }

    #title-area {
    width: 435px;
    float: left;
    margin: 0;
    padding: 10px 0 0 0;
    overflow: hidden;
    }

    #title-area #title {
    font-size: 30px;
    font-weight: bold;
    line-height: 30px;
    margin: 6px 0 0 20px;
    padding: 0;
    }

    #title-area #title a {
    color: #333333;
    margin: 0;
    padding: 0;
    text-decoration: none;
    }

    #title-area #title a:hover {
    color: #333333;
    text-decoration: none;
    }

    #title-area #description {
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    margin: 0 0 0 20px;
    padding: 0;
    }

    #header .widget-area {
    width: 520px;
    float: right;
    margin: 0;
    padding: 0;
    }

    #header .widget-area p {
    margin: 0;
    padding: 0 0 5px 0;
    }

    #header .widget-area h4 {
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    margin: 10px 0 0 0;
    padding: 0;
    text-decoration: none;
    }

    #header .widget-area ul {
    margin: 0;
    padding: 0;
    }

    #header .widget-area ul li {
    list-style-type: square;
    margin: 0 0 0 20px;
    padding: 0;
    }

    /***** Image Header - Partial Width ********************/

    .header-image #header #title-area {
    background: url(images/logo.png) left top no-repeat;
    margin-top: 10px;
    }

    .header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
    display: block;
    float: left;
    width: 435px;
    height: 100px;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    overflow: hidden;
    }

    .header-image #title-area #description {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    }

    /***** Image Header - Full Width ********************/

    .header-full-width #title-area, .header-full-width #title-area #title, .header-full-width #title-area #title a {
    width: 960px;

    }

    April 10, 2014 at 10:10 am #99520
    nutsandbolts
    Member

    I see this in your functions.php:

    // Add rounded header
    add_action(‘genesis_after_header’, ‘goinggreen_round_header_graphic’);
    function goinggreen_round_header_graphic() {
    require(CHILD_DIR.’/after-header.php’);
    }

    That seems to be calling a separate file related to the header - what's in that one?


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    April 10, 2014 at 11:35 am #99533
    candacegodwin
    Participant

    Hi, Well, not much is in the afterheader.php file (below). I also included after header css, but I don't see any clues in there either. I really appreciate your attempt to help with this! 🙂

    <div id="after-header">
    /images/after-header.png" />
    </div><!-- end #after-header -->

    Here is the After Header CSS:

    /***** After Header ********************/

    #after-header {
    float: left;
    width: 960px;
    height: 31px;
    position: relative;
    z-index: 0;
    }

    /***** Inner ********************/

    #inner {
    background:url(images/bg-inner.png) repeat-y;
    width: 900px;
    margin: 0;
    padding: 5px 30px 0 30px;
    overflow: hidden;
    float: left;
    }

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 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

© 2025 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