How to remove the grey banner in the header Backgrounds

  • Resolved franckcqfd

    (@franckcqfd)


    11 years, 8 months ago

    Hi Anthony,

    1. How to insert the category menu in the gray bar under the header or, if it is not possible, to remove this section and replace it with a border?

    2. How to add a background only in the header (around logo and categories), and in the titles of widgets ?

Viewing 15 replies - 1 through 15 (of 18 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    1. If you’d like to use a menu within the grey banner area, the easiest way to do this is to use the Custom Menu widget. You can add this widget to one of the Front Page Banner Widget areas.

    After you do this, you will need to style it appropriately though.

    Alternatively, if you wish to move the existing menu from the header container to the banner, then you’ll need to do this by moving the menu code within header.php

    2. You can add a background to the header area like so…

    #headercontainer {
   background: #fff url('insert-background-image-url-here') repeat scroll top left;
}

    You may also wish to remove the site background and the banner background using the APPEARANCE > BACKGROUND and APPEARANCE > THEME OPTIONS menu options, respectively.

    If you wish to add a background image to the widget titles, then you’d do something like…

    .widget h3 {
   background: #fff url('insert-background-image-url-here') repeat scroll top left;
}

    Hope this helps.

    Thread Starter franckcqfd

    (@franckcqfd)

    Thanks you for this response.
    How to purpose the Front Page Banner Widget on the home page, but remove the banner on the single posts and pages ? I would to purpose only the header on single posts, but my widget for visitors on the home page.

    Theme Author Anthony Hortin

    (@ahortin)

    It does this already. The Front Page widgets only appear on the Front Page (ie. the homepage).

    If you want to remove the banner altogether, then simply add the opening and closing div’s for the banner inside of the if ( is_front_page() ) statement. ie. these divs…

    <div id="bannercontainer">
   <div class="banner row">
   ...
   </div> <!-- /.banner.row -->
</div> <!-- /#bannercontainer -->
    Thread Starter franckcqfd

    (@franckcqfd)

    Thanks you. But how delete the fields ? I’ve an error on my pages. Did you have the complete code for this section ?

    Theme Author Anthony Hortin

    (@ahortin)

    If you only want the banner to appear on the homepage and not on the other pages, then you will need to change the code, at the bottom of header.php, to this…

    <?php if ( is_front_page() ) {
   <div id="bannercontainer">
      <div class="banner row clearfix">
         // Count how many banner sidebars are active so we can work out how many containers we need
         $bannerSidebars = 0;
         for ( $x=1; $x<=2; $x++ ) {
            if ( is_active_sidebar( 'frontpage-banner' . $x ) ) {
              $bannerSidebars++;
            }
         }

         // If there's one or more one active sidebars, create a row and add them
         if ( $bannerSidebars > 0 ) { ?>
         <?php
            // Work out the container class name based on the number of active banner sidebars
            $containerClass = "grid_" . 12 / $bannerSidebars . "_of_12";

            // Display the active banner sidebars
            for ( $x=1; $x<=2; $x++ ) {
               if ( is_active_sidebar( 'frontpage-banner'. $x ) ) { ?>
                  <div class="col <?php echo $containerClass?>">
                  <div class="widget-area" role="complementary">
                     <?php dynamic_sidebar( 'frontpage-banner'. $x ); ?>
                  </div> <!-- /.widget-area -->
                  </div> <!-- /.col.<?php echo $containerClass?> -->
               <?php }
            } ?>
         } ?>
      </div> <!-- /.banner.row -->
   </div> <!-- /#bannercontainer -->
<?php }

    This is basically what I said in my previous reply. You simply move the opening and closing div’s (that I mentioned), inside of the “if” statement.

    I’m not sure what “fields” you’re talking about, that you want removed.

    Thread Starter franckcqfd

    (@franckcqfd)

    Thanks you ! But it’s doesn’t work : I have a syntax error in the code. My stylesheet is :

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="maincontentcontainer">
 *
 * @package Quark
 * @since Quark 1.0
 */
?><!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" <?php language_attributes(); ?>> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>" />
	<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<meta http-equiv="cleartype" content="on">

	<!-- Responsive and mobile friendly stuff -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

	<link rel="profile" href="https://gmpg.org/xfn/11" />
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

<div class="visuallyhidden"><a href="#primary" title="<?php esc_attr_e( 'Skip to main content', 'quark' ); ?>"><?php _e( 'Skip to main content', 'quark' ); ?></a></div>

<div id="wrapper" class="hfeed site">

	<div id="headercontainer">

		<header id="masthead" class="site-header row clearfix" role="banner">
			<div class="col grid_5_of_12 site-title">
				<h1>
					<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" rel="home">
						<?php
						$headerImg = get_header_image();
						if( !empty( $headerImg ) ) { ?>
							<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
						<?php }
						else {
							echo get_bloginfo( 'name' );
						} ?>
					</a>
				</h1>
			</div> <!-- /.col.grid_5_of_12 -->

			<div class="col grid_7_of_12">
				<div class="social-media-icons">
					<?php echo quark_get_social_media(); ?>
				</div>
				<nav id="site-navigation" class="main-navigation" role="navigation">
					<h3 class="menu-toggle assistive-text"><?php _e( 'Menu', 'quark' ); ?></h3>
					<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'quark' ); ?>"><?php _e( 'Skip to content', 'quark' ); ?></a></div>
					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
				</nav> <!-- /.site-navigation.main-navigation -->
			</div> <!-- /.col.grid_7_of_12 -->
		</header> <!-- /#masthead.site-header.row -->

	</div> <!-- /#headercontainer -->
<?php if ( is_front_page() ) {
   <div id="bannercontainer">
      <div class="banner row clearfix">
         // Count how many banner sidebars are active so we can work out how many containers we need
         $bannerSidebars = 0;
         for ( $x=1; $x<=2; $x++ ) {
            if ( is_active_sidebar( 'frontpage-banner' . $x ) ) {
              $bannerSidebars++;
            }
         }

         // If there's one or more one active sidebars, create a row and add them
         if ( $bannerSidebars > 0 ) { ?>
         <?php
            // Work out the container class name based on the number of active banner sidebars
            $containerClass = "grid_" . 12 / $bannerSidebars . "_of_12";

            // Display the active banner sidebars
            for ( $x=1; $x<=2; $x++ ) {
               if ( is_active_sidebar( 'frontpage-banner'. $x ) ) { ?>
                  <div class="col <?php echo $containerClass?>">
                  <div class="widget-area" role="complementary">
                     <?php dynamic_sidebar( 'frontpage-banner'. $x ); ?>
                  </div> <!-- /.widget-area -->
                  </div> <!-- /.col.<?php echo $containerClass?> -->
               <?php }
            } ?>
         } ?>
      </div> <!-- /.banner.row -->
   </div> <!-- /#bannercontainer -->
<?php }

	<div id="maincontentcontainer">

    What is the problem ?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What is the syntax error?

    Thread Starter franckcqfd

    (@franckcqfd)

    I can’t find this… I would to retire the banner on the pages, except to the home page, with this code : 

    </div> <!-- /#headercontainer -->
				<div id="bannercontainer">
		<div class="banner row clearfix">
			<?php if ( is_front_page() ) {
   <div id="bannercontainer">
      <div class="banner row clearfix">
         // Count how many banner sidebars are active so we can work out how many containers we need
         $bannerSidebars = 0;
         for ( $x=1; $x<=2; $x++ ) {
            if ( is_active_sidebar( 'frontpage-banner' . $x ) ) {
              $bannerSidebars++;
            }
         }

         // If there's one or more one active sidebars, create a row and add them
         if ( $bannerSidebars > 0 ) { ?>
         <?php
            // Work out the container class name based on the number of active banner sidebars
            $containerClass = "grid_" . 12 / $bannerSidebars . "_of_12";

            // Display the active banner sidebars
            for ( $x=1; $x<=2; $x++ ) {
               if ( is_active_sidebar( 'frontpage-banner'. $x ) ) { ?>
                  <div class="col <?php echo $containerClass?>">
                  <div class="widget-area" role="complementary">
                     <?php dynamic_sidebar( 'frontpage-banner'. $x ); ?>
                  </div> <!-- /.widget-area -->
                  </div> <!-- /.col.<?php echo $containerClass?> -->
               <?php }
            } ?>
         } ?>
      </div> <!-- /.banner.row -->
   </div> <!-- /#bannercontainer -->
<?php }

	<div id="maincontentcontainer">
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How do you know it’s a syntax error?

    Thread Starter franckcqfd

    (@franckcqfd)

    With the result on the website ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    We can’t see that so can you specify what you see, i.e say the syntax error you’re receiving?

    Theme Author Anthony Hortin

    (@ahortin)

    Change that last bit of code to the following. It was just missing some opening and closing php tags.

    <?php if ( is_front_page() ) { ?>
   <div id="bannercontainer">
      <div class="banner row clearfix">
         <?php
         // Count how many banner sidebars are active so we can work out how many containers we need
         $bannerSidebars = 0;
         for ( $x=1; $x<=2; $x++ ) {
            if ( is_active_sidebar( 'frontpage-banner' . $x ) ) {
              $bannerSidebars++;
            }
         }

         // If there's one or more one active sidebars, create a row and add them
         if ( $bannerSidebars > 0 ) {
            // Work out the container class name based on the number of active banner sidebars
            $containerClass = "grid_" . 12 / $bannerSidebars . "_of_12";

            // Display the active banner sidebars
            for ( $x=1; $x<=2; $x++ ) {
               if ( is_active_sidebar( 'frontpage-banner'. $x ) ) { ?>
                  <div class="col <?php echo $containerClass; ?>">
                  <div class="widget-area" role="complementary">
                     <?php dynamic_sidebar( 'frontpage-banner'. $x ); ?>
                  </div> <!-- /.widget-area -->
                  </div> <!-- /.col.<?php echo $containerClass; ?> -->
               <?php }
            }
         } ?>
      </div> <!-- /.banner.row -->
   </div> <!-- /#bannercontainer -->
<?php } ?>

    If you still have issues after this, can you please make sure you post the url to your website as it will make things considerably easier to debug. Thanks.

    Thread Starter franckcqfd

    (@franckcqfd)

    Thanks for your response ??

    Theme Author Anthony Hortin

    (@ahortin)

    You’re very welcome ??

    Hi Anthony,
    I had the same syntax error with your first code snippet, and only now saw your amended code with those php tags added.

    When I tried your new code, the dark grey banner seems to have stretched all the way to the bottom of my page, making the light grey type almost illegible and some text (e.g. Category Archive) huge. I took screen shots but don’t know how to upload them here. I cannot leave my website like that since people won’t be able to read anything.

    How do I show what the problem is? My website is https://batesvision.com. But I changed the code back to the original for now, so you cannot see it. If you can let me know when you are available I can switch it back. I am in PST (California). Thanks so much for your help.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘How to remove the grey banner in the header Backgrounds’ is closed to new replies.