WordPress.org

Forums

Virtue
[resolved] Issues adding custom sprite header to theme pages (3 posts)

  1. alexm87
    Member
    Posted 8 months ago #

    I posted this previously however it might be in the wrong section. : Here

    Hi, sorry to bother you at this hour. I have inserted a custom made sprite header into my theme which I am very happy with, the downside being that it only shows up on the index and is somewhat invisible on all other pages. Please could anybody help me in the lamest terms you can manage to resolve this as I am definately sure I have deleted or misplaced something.

    Theme: Virtue with woo commerce
    Website : http://www.pdmantiques.com

    Header.php

    <header class="banner headerclass" role="banner">
    <?php if (kadence_display_topbar()) : ?>
      <section id="topbar" class="topclass">
        <div class="container">
          <div class="row">
            <div class="col-md-6 col-sm-6 kad-topbar-left">
              <div class="topbarmenu clearfix">
              <?php if (has_nav_menu('topbar_navigation')) :
                  wp_nav_menu(array('theme_location' => 'topbar_navigation', 'menu_class' => 'sf-menu'));
                endif;?>
                <?php if(kadence_display_topbar_icons()) : ?>
                <div class="topbar_social">
                  <ul>
                    <?php global $virtue; $top_icons = $virtue['topbar_icon_menu'];
                    foreach ($top_icons as $top_icon) {
                      if(!empty($top_icon['target']) && $top_icon['target'] == 1) {$target = '_blank';} else {$target = '_self';}
                      echo '<li><a href="'.$top_icon['link'].'" target="'.$target.'" title="'.esc_attr($top_icon['title']).'" data-toggle="tooltip" data-placement="bottom" data-original-title="'.esc_attr($top_icon['title']).'">';
                      if($top_icon['url'] != '') echo '<img src="'.$top_icon['url'].'"/>' ; else echo '<i class="'.$top_icon['icon_o'].'"></i>';
                      echo '</a></li>';
                    } ?>
                  </ul>
                </div>
              <?php endif; ?>
                <?php global $virtue; if(isset($virtue['show_cartcount'])) {
                   if($virtue['show_cartcount'] == '1') {
                    if (class_exists('woocommerce')) {
                      global $woocommerce; ?>
                        <ul class="kad-cart-total">
                          <li>
                          <a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php esc_attr_e('View your shopping cart', 'woocommerce'); ?>">
                              <i class="icon-shopping-cart" style="padding-right:5px;"></i> <?php _e('Your Cart', 'virtue');?> <span class="kad-cart-dash">-</span> <?php echo $woocommerce->cart->get_cart_total(); ?>
                          </a>
                        </li>
                      </ul>
                    <?php } } }?>
              </div>
            </div><!-- close col-md-6 -->
            <div class="col-md-6 col-sm-6 kad-topbar-right">
              <div id="topbar-search" class="topbar-widget">
                <?php if(kadence_display_topbar_widget()) { if(is_active_sidebar('topbarright')) { dynamic_sidebar(__('Topbar Widget', 'virtue')); }
                  } else { if(kadence_display_top_search()) {get_search_form();}
              } ?>
            </div>
            </div> <!-- close col-md-6-->
          </div> <!-- Close Row -->
        </div> <!-- Close Container -->
      </section>
    <?php endif; ?>
    <?php global $virtue; if(isset($virtue['logo_layout'])) {
      if($virtue['logo_layout'] == 'logocenter') {$logocclass = 'col-md-12'; $menulclass = 'col-md-12';}
      else if($virtue['logo_layout'] == 'logohalf') {$logocclass = 'col-md-6'; $menulclass = 'col-md-6';}
      else {$logocclass = 'col-md-4'; $menulclass = 'col-md-8';}
    } else {$logocclass = 'col-md-4'; $menulclass = 'col-md-8'; }?>
      <div class="container">
        <div class="row">
              <div class="<?php echo $logocclass; ?>  clearfix kad-header-left">
                <div id="logo" class="logocase">
                  <a class="brand logofont" href="<?php echo home_url(); ?>/">
                          <?php global $virtue; if (!empty($virtue['x1_virtue_logo_upload']['url'])) { ?> <div id="thelogo"><img src="<?php echo $virtue['x1_virtue_logo_upload']['url']; ?>" alt="<?php  bloginfo('name');?>" class="kad-standard-logo" />
                             <?php if(!empty($virtue['x2_virtue_logo_upload']['url'])) {?> <img src="<?php echo $virtue['x2_virtue_logo_upload']['url'];?>" class="kad-retina-logo" style="max-height:<?php echo $virtue['x1_virtue_logo_upload']['height'];?>px" /> <?php } ?>
                            </div> <?php } else { bloginfo('name'); } ?>
                            </a>
                  <?php if (isset($virtue['logo_below_text'])) { ?> <p class="kad_tagline belowlogo-text"><?php echo $virtue['logo_below_text']; ?></p> <?php }?>
               </div> <!-- Close #logo -->
           </div><!-- close logo span -->
    
           <div class="<?php echo $menulclass; ?> kad-header-right">
             <nav id="nav-main" class="clearfix" role="navigation">
    <ul id="nav">
      <li><a href="#" id="a">HOME</a></li>
      <li><a href="/about" id="b">ABOUT</a></li>
      <li><a href="/events" id="c">SERVICES</a></li>
      <li><a href="/shop" id="d">CATALOGUE</a></li>
      <li><a href="/contact" id="e">CONTACT</a></li>
    </ul>
    
             </nav>
            </div> <!-- Close span7 -->
        </div> <!-- Close Row -->
        <?php if (has_nav_menu('mobile_navigation')) : ?>
               <div id="mobile-nav-trigger" class="nav-trigger">
                  <a class="nav-trigger-case mobileclass collapsed" rel="nofollow" data-toggle="collapse" data-target=".kad-nav-collapse">
                    <div class="kad-navbtn"><i class="icon-reorder"></i></div>
                    <div class="kad-menu-name"><?php echo __('Menu', 'virtue'); ?></div>
                  </a>
                </div>
                <div id="kad-mobile-nav" class="kad-mobile-nav">
                  <div class="kad-nav-inner mobileclass">
                    <div class="kad-nav-collapse">
                     <?php wp_nav_menu( array('theme_location' => 'mobile_navigation','items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'menu_class' => 'kad-mnav')); ?>
                   </div>
                </div>
              </div>
              <?php  endif; ?>
      </div> <!-- Close Container -->
      <?php
                if (has_nav_menu('secondary_navigation')) : ?>
      <section id="cat_nav" class="navclass">
        <div class="container">
         <nav id="nav-second" class="clearfix" role="navigation">
         <?php wp_nav_menu(array('theme_location' => 'secondary_navigation', 'menu_class' => 'sf-menu')); ?>
       </nav>
        </div><!--close container-->
        </section>
        <?php endif; ?>
         <?php global $virtue; if (!empty($virtue['virtue_banner_upload']['url'])) { ?> <div class="container"><div class="virtue_banner"><img src="<?php echo $virtue['virtue_banner_upload']['url']; ?>" /></div></div> <?php } ?>
    </header>

    Related CSS:

    * {
    margin:0;
    padding:0;
    }
    body {
    background:#fff;
    }
    #nav {
    list-style:none;
    width:611px;;
    height:55px;
    margin-top: 20px;
    margin-left: 18%;
    overflow:hidden;
    background:url(wp-content/themes/virtue/images/menu-sprite.png); /* IE6 Flicker Fix */
    }
    #nav li {
    float:left;
    }
    #nav a {
    float:left;
    width:150px;
    padding-top:50px;
    outline:0;
    background:url(wp-content/themes/virtue/images/menu-sprite.png);
    }
    /* Default State */
    #nav #a{background-position: 0px -56px;
    width: 101px;
    height: 59px;}
    #nav #b{background-position: -95px 0px;
    width: 115px;
    height: 55px;}
    #nav #c{background-position: -205px 0px;
    width: 119px;
    height: 55px;}
    #nav #d{background-position: -327px 0px;
    width: 156px;
    height: 55px;}
    #nav #e{background-position: -480px 0px;
    width: 120px;
    height: 55px;}
    /* Hover/Focus State */
    #nav #a:hover,#nav #a:focus{background-position: 0px -56px;
    width: 101px;
    height: 59px;}
    #nav #b:hover,#nav #b:focus{background-position: -95px -56px;
    width: 115px;
    height: 59px;}
    #nav #c:hover,#nav #c:focus{background-position: -205px -56px;
    width: 119px;
    height: 59px;}
    #nav #d:hover,#nav #d:focus{background-position: -327px -56px;
    width: 156px;
    height: 59px;}
    #nav #e:hover,#nav #e:focus{background-position: -480px -56px;
    width: 120px;
    height: 59px;}
    
    ul, ol {
        padding: 0px 0px 0px 0px;
    }

    Page.php etc is default for theme.

    Page.php anyway

    <div id="pageheader" class="titleclass">
    		<div class="container">
    			<?php get_template_part('templates/page', 'header'); ?>
    		</div><!--container-->
    	</div><!--titleclass-->
    
        <div id="content" class="container">
       		<div class="row">
          <div class="main <?php echo kadence_main_class(); ?>" role="main">
    
    <?php get_template_part('templates/content', 'page'); ?>
    </div><!-- /.main -->

    Look forward to hearing your responses and I will keep you bookmarked so I can reply promptly when needed.

    Thankyou,
    Alex

  2. Kadence Themes
    Member
    Theme Author

    Posted 8 months ago #

    Hey,
    You don't need to call the image twice, just for the #nav a tag. and the image must be called with the full url else it won't show on other pages.

    The #nav #a default position should be:

    #nav #a {
    background-position: 0px 0px;
    }

    And your #nav a css should be:

    #nav a {
    float:left;
    width:150px;
    padding-top:50px;
    outline:0;
    overflow: hidden;
    text-indent: -999px;
    background:url(http://www.pdmantiques.com/wp-content/themes/virtue/images/menu-sprite.png);
    }

    Kadence Themes

  3. alexm87
    Member
    Posted 8 months ago #

    Thank-you so much, that fixed it :)

Reply

You must log in to post.

About this Theme

About this Topic