WordPress.org

Ready to get started?Download WordPress

Forums

Iconic One
[resolved] How to adjust padding at the top and bottom of the full banner image (13 posts)

  1. clouder
    Member
    Posted 9 months ago #

    Hi, my website is http://www.yawncentral.com

    I'm trying to decrease the top padding above my full header image (the image int he center with blue buildings and a sunset in the back) and increase the padding below it to balance it out.

    I've trying a couple of things to no success. And I don't want to mess up the theme.

    Thank you for your help.

  2. curtjen
    Member
    Posted 9 months ago #

    Right now there is no class or id attached to the <div> tag that image is inside. That is going to make styling difficult. If you feel comfortable tweaking the theme's files, you could venture making a tweak to that <div> tag the banner image is in.

    Note: BEFORE CHANGING ANYTHING ON YOUR THEME FILES MAKE A COPY OF WHATEVER FILE YOU'RE GOING TO CHANGE.

    That being said, it is likely in your index.php file. Look for the code that says:
    <div id="page"

    Once you're located that code, look for the lonely <div> tag that shows the code:
    <div align="center">

    and change it to something like:
    <div id="top_banner" align="center">

    After doing that, you should be able to add CSS like this to do your padding magic:

    #top_banner {
      margin-bottom:20px;
    }

    That above will take care of the bottom of the banner, but not the top. That style is controlled by the margin-bottom on the .site-header class. To modify that, you would want to do something like this:

    .site-header {
      margin-bottom:15px;
    }

    Adding these to the custom CSS feature of your Jetpack plugin (if you have it installed) should override the defaults and do the trick. Or if you're feeling even more adventurous, you could add those styles to the bottom of your custom.css file that your theme is referencing.

    Hope that helps :)

  3. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    Note: BEFORE CHANGING ANYTHING ON YOUR THEME FILES MAKE A COPY OF WHATEVER FILE YOU'RE GOING TO CHANGE.

    Why are you not suggesting that these kinds of changes be made in a child theme?

  4. curtjen
    Member
    Posted 9 months ago #

    WPyogi is correct: A child theme would be best practice. You can get a start here with child themes: http://codex.wordpress.org/Child_Themes
    And you can find a little more comprehensive of a guide here: http://www.hongkiat.com/blog/wordpress-child-themes-dev/ or here: http://wp.tutsplus.com/tutorials/wp101-training/how-to-customize-your-wordpress-theme-with-a-child-theme/.

    If you're just looking for a quick fix that will be less of a learning curve you can use the fix above (for the editing the php file). But that isn't best practice and if the theme developer updates the theme your changes get wiped out.

    Good luck :)

  5. clouder
    Member
    Posted 9 months ago #

    Thank you for your responses. I am currently using a child theme, and applying your suggested changes. Please stand by for updates.

  6. clouder
    Member
    Posted 9 months ago #

    I was able to adjust the top padding by doing as you suggested and tweaking the .site-header class.

    The bottom padding, however, I was not able to adjust. There was no div id with page in my index.php files.

    I pasted the code of the image somewhere in the header.php files right before this code

    <!-- #masthead --><div id="main" class="wrapper">

    I'm looking at a few with .wrapper in the css file but I'm not quite sure which one to tweak.

  7. curtjen
    Member
    Posted 9 months ago #

    From looking at the page source it looks like it is the div right before where you're seeing <!-- #masthead

  8. clouder
    Member
    Posted 9 months ago #

    Correct. And Im trying to add a padding to the bottom of the image by adjusting the margin top of the element below the image as you suggested, except I can't find where that would be in the css files.

  9. curtjen
    Member
    Posted 9 months ago #

    Would you mind providing several lines of your code before <!-- #masthead ? That would help with narrowing down where the div is that you're needing tweaked.

  10. clouder
    Member
    Posted 9 months ago #

    No problem. This is the one in my child theme's header.php file

    <div id="header-ad"><img src="http://yawncentral.com/wp-content/uploads/2013/09/468by60fullbanner.png"/></div><nav id="site-navigation" class="themonic-nav" role="navigation">
    			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'themonic' ); ?>"><?php _e( 'Skip to content', 'themonic' ); ?></a>
    			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'menu-top', 'menu_class' => 'nav-menu' ) ); ?>
    		</nav><!-- #site-navigation -->
    
    		<?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?><div class="clear"></div></header><div align="center"><img src="http://yawncentral.com/wp-content/uploads/2013/11/728by90leaderboard.png"></img></div><!-- #masthead --><div id="main" class="wrapper">
  11. curtjen
    Member
    Posted 9 months ago #

    Excellent. Right before <!-- #masthead you have the following div tag:

    <div align="center"><img src="http://yawncentral.com/wp-content/uploads/2013/11/728by90leaderboard.png"></img></div>

    If you change that to something like this, then you'll be able to better style that bottom margin:

    <div id="top_banner" align="center"><img src="http://yawncentral.com/wp-content/uploads/2013/11/728by90leaderboard.png"></img></div>

    With that being said, make sure the custom style that you're adding matches that id, like what was written above:

    #top_banner {
      margin-bottom:20px;
    }
  12. clouder
    Member
    Posted 9 months ago #

    O wow that actually worked xD.

    Man, I remember trying to do that exact same thing for 2 straight hours and never worked. Went from using .top banner to .top_banner to #top_banner and still didn't work lol. Must have been the spacing or something :P

    Thank you so much, you are awesome :D

  13. curtjen
    Member
    Posted 9 months ago #

    Glad to hear that worked for you :)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.