WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] How to remove the grey banner in the header + Backgrounds (19 posts)

  1. franckcqfd
    Member
    Posted 1 year 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 ?

  2. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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.

  3. franckcqfd
    Member
    Posted 1 year ago #

    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.

  4. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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 -->
  5. franckcqfd
    Member
    Posted 1 year ago #

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

  6. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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.

  7. franckcqfd
    Member
    Posted 1 year ago #

    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="http://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 ?

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    What is the syntax error?

  9. franckcqfd
    Member
    Posted 1 year ago #

    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">
  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    How do you know it's a syntax error?

  11. franckcqfd
    Member
    Posted 1 year ago #

    With the result on the website ;)

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  13. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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.

  14. franckcqfd
    Member
    Posted 1 year ago #

    Thanks for your response ;)

  15. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    You're very welcome :-)

  16. Muehlenweg
    Member
    Posted 1 year ago #

    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 http://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.

  17. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    You might want to just double check the code that you changed to make sure all the opening div tags have a matching closing tag. (eg. <div class="someclass">...</div>).

    Also, check all the php tags have matching close tags as well (eg. <?php .... ?>)

    There's no set time that I answer support questions so unfortunately I can't let you know when I'll be online here.

  18. Muehlenweg
    Member
    Posted 1 year ago #

    Thanks, I got it. Your code was perfect, I had just pasted it two lines too low.

  19. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    Glad you sorted it out :-)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic