Sheffield Blue Template Support Thread

18 Jul 2013, 18:18

#241

feznizzle

Totally Zenned

Join Date:: Apr 2010
Posts:: 900
Plugin Contributions:: 0

Sheffield Blue Template Support Thread

Hi Anne,

I love your template!

I have made some adjustments to your megamenu, but I'm stuck on two issues. This is absolutely not the fault of your lovely template, it is just a result of my desire to customize. But I am hoping you can offer some advice, nonetheless! :)

Here is a link to where I am staging my site (ZC151):
http://2staging.apswittcosales.com/

Customization:
I decided that I wanted to have a "HOME" button on the top left of the megamenu. I managed to do that, but the applied style becomes a bit awkward.

#1 (not super important)
When you hover over "Home", there is a slight movement on the menu items (doesn't occur when you hover over other top menu items; but if you hover over "Home", the others shift left a hair). That's not a huge deal, but the perfectionist in me would love to resolve it.

#2 (more important)
When you hover over home, a box appears. The box has rounded corners on top, but the not at bottom. This is because the css assumes there will be a box below with more stuff. I'd like to round off the bottom, but I can't figure out the css.

I think the solution would be to create a new class in the stylesheet_mega_menu.css file and then apply it in the tpl_mega_menu.php. Home is currently referencing "quicklinks-li". (<li class="quicklinks-li"><a href="/">Home</a></li>)

Any help would be greatly appreciated!

Thanks,
Mike

19 Jul 2013, 13:49

#242

picaflor_azul

Totally Zenned

Join Date:: Jul 2009
Location:: picaflor-azul.com
Posts:: 6,940
Plugin Contributions:: 28

Re: Sheffield Blue Template Support Thread

Feznizzle:

Hi Anne,

I love your template!

I have made some adjustments to your megamenu, but I'm stuck on two issues. This is absolutely not the fault of your lovely template, it is just a result of my desire to customize. But I am hoping you can offer some advice, nonetheless! :)

Here is a link to where I am staging my site (ZC151):
http://2staging.apswittcosales.com/

Customization:
I decided that I wanted to have a "HOME" button on the top left of the megamenu. I managed to do that, but the applied style becomes a bit awkward.

#1 (not super important)
When you hover over "Home", there is a slight movement on the menu items (doesn't occur when you hover over other top menu items; but if you hover over "Home", the others shift left a hair). That's not a huge deal, but the perfectionist in me would love to resolve it.

#2 (more important)
When you hover over home, a box appears. The box has rounded corners on top, but the not at bottom. This is because the css assumes there will be a box below with more stuff. I'd like to round off the bottom, but I can't figure out the css.

I think the solution would be to create a new class in the stylesheet_mega_menu.css file and then apply it in the tpl_mega_menu.php. Home is currently referencing "quicklinks-li". (<li class="quicklinks-li"><a href="/">Home</a></li>)

Any help would be greatly appreciated!

Thanks,
Mike

I am happy that you are using the template for your site ;)

You can add the class=drop to the anchor tag for the home link to stop the jumping.

Thanks,

Anne

19 Jul 2013, 15:02

#243

feznizzle

Totally Zenned

Join Date:: Apr 2010
Posts:: 900
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

Thanks for the advice. Unfortunately, I can't seem to do much with it. I'm a beginner with CSS, sorry!

Can you take a look?

Here is my tpl_mega_menu.php:

<?php
//
// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright (c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright (c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: tpl_drop_menu.php  2005/06/15 15:39:05 DrByte Exp $
//

?>


<div id="mega-wrapper"><!-- bof mega-wrapper -->

    <ul class="mega-menu menu_red"><!-- bof mega-menu -->

       [B]<li class="quicklinks-li"><a href="/">Home</a></li>[/B]

       

        

        
	<li class="aboutus-li"><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>" class="drop"><?php echo HEADER_TITLE_ABOUT_US; ?></a><!-- bof about us -->
                
            <div class="dropdown_aboutus">
                    
                <div class="col_aboutus">
                    <h2><?php echo TITLE_ABOUT_US;?></h2>
                </div>
 
		<div class="col_cs">
                     <p class="mega-about"><?php echo TEXT_ABOUT_US;?></p>             
                     	<img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.ABOUT_US_IMAGE ?>"   class="imgshadow_light aboutus-image" alt="about us"  />    
             	</div>
                <div class="col_aboutus">
                      <h2><?php echo TITLE_CONFIDENCE;?></h2>
		</div>

		<div class="col_cs">
                      <img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.PAYMENT_ICON ?>"   alt="payments we accept" /> 
		      <p class="mega-confidence"><?php echo TEXT_CONFIDENCE;?></p>             
                </div>



            </div>

        </li><!-- eof about us -->

        

          <li class="information-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop">Information</a><!-- bof information -->
 
	    <div class="dropdown_info">
        
		<div class="col_1">
            	    <h3><?php echo TITLE_GENERAL; ?></h3>
                    <ul>
			<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo BOX_INFORMATION_ABOUT_US; ?></a></li>
                	<?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?>
                	<li><a href="/Privacy_Policy">Privacy Policy</a></li>
                	<?php } ?>
              		<?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'false') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_GV; ?></a></li>
                	<?php } ?>
                	<?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'false') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_DISCOUNT_COUPONS; ?></a></li>
                	<?php } ?>
               		<?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'false') { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_UNSUBSCRIBE; ?></a></li>
                	<?php } ?>
                     </ul>   
                 </div>
    
		<div class="col_1">
                     <h3><?php echo TITLE_CUSTOMERS; ?></h3>
                     <ul>
			<?php if ($_SESSION['customer_id']) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo TITLE_NEWSLETTERS; ?></a></li>
                	<?php } else { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
                	<li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
                	<?php } ?>
                    	<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li>
                        <?php if (DEFINE_SHIPPINGINFO_STATUS <= 1) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo BOX_INFORMATION_SHIPPING; ?></a></li>
                        <?php } ?>
                        <?php if (DEFINE_PRIVACY_STATUS <= 1)  { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo BOX_INFORMATION_PRIVACY; ?></a></li>
                        <?php } ?>
                        <?php if (DEFINE_CONDITIONS_STATUS <= 1) { ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo BOX_INFORMATION_CONDITIONS; ?></a></li>
                        <?php } ?>
                     </ul>   
                 </div>

            	 <div class="col_1">
                      <h3><?php echo TITLE_EZ_PAGES; ?></h3>
		      <ul> 
		      <?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
		      </ul>
            	 </div>
           </div>

  	</li><!-- eof information -->
 
    
     

    


		      <li class="contactus-li"><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>" class="drop"><?php echo HEADER_TITLE_CONTACT_US;?></a><!-- bof contact form -->
                       
            <div class="dropdown_2columns">
                
                <div class="col_2 firstcolumn">
   
		   <h2><?php echo TITLE_CONTACT_US;?></h2>

		   <p><?php echo TEXT_CONTACT_US;?></p>
    
                    <div id="contact_form">
                    
                        <div class="message">
                            <div id="alert"></div>
                        </div>
				  <?php echo zen_draw_form('contact_us', zen_href_link(FILENAME_CONTACT_US, 'action=send')); ?>
                        
                        <label for="contactname">Name<span class="required"> *</span></label>
                        <input name="contactname" type="text" id="contactname" size="30" value=""/>

			<br class="clearBoth" />
                        <label for="email">Email<span class="required"> *</span></label>
                        <input name="email" type="text" id="email" size="30" value="" />

			<br class="clearBoth" />
                        <label for="enquiry">Message<span class="required"> *</span></label>
                        <textarea name="enquiry" cols="40" rows="3"  id="enquiry"></textarea>
                        
                        

                           <div class="form_buttons">
                            <input type="submit" class="button" id="submit" value="Submit" />
                            </div>

                        </form>
                    
                    </div>

                </div>
            
            </div>
</li><!-- eof contact form -->


    </ul><!-- eof mega-menu -->

</div><!-- eof mega-wrapper -->

Here is my stylesheet_mega_menu.css:

#mega-wrapper {width: 1034px;margin:0 auto;display:block;position: relative;z-index:7999;top:-90px;left:-27px;}

#mega-wrapper .mega-menu {background:url(../images/menu-bk.png) no-repeat;list-style:none;width:1034px;margin:30px auto 0px auto;height:65px;padding:0px 20px 0px 20px;}

.mega-menu li {float:left;text-align:center;position:relative;margin-right:20px;margin-top:6px;border:none;}

.mega-menu li.fullwidth {position: static !important;}

.mega-menu li:hover {background: #184b7b;border:1px solid #184b7a;margin-right:18px;-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;-khtml-border-radius: 5px 5px 0px 0px;border-radius: 5px 5px 0px 0px; }

.mega-menu li a {color: #fff;outline:0;padding: 5px 12px 3px 12px;text-decoration:none;display:block;font-weight:normal;}

.mega-menu li:hover a {color:#fffffe;position:relative;z-index:11;padding: 4px 11px 3px 11px;}

.mega-menu li:hover div a {display:inline;}

.mega-menu li .drop {padding-right:18px;}

.mega-menu li:hover .drop {padding-right:19px;}



/* bof right aligned menu item */

.mega-menu .right {float:right;right:0;margin-right:5px;}

.mega-menu li.right:hover {margin-right:5px;}



/* bof drop down styles */

.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service, .mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {margin:4px auto;left:-999em;position:absolute;border:0px solid #494949;background:#3b403a;padding:10px;text-align:left;-moz-border-radius: 0px 5px 5px 5px;-webkit-border-radius: 0px 5px 5px 5px;-khtml-border-radius: 0px 5px 5px 5px;border-radius: 0px 5px 5px 5px;background: #184b7a; /*-moz-linear-gradient(top, #2c2b2a, #191816);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2c2b2a), to(#191816));background: -o-linear-gradient(top, #2c2b2a, #191816);*/}



.mega-menu .dropdown_1column {width: 145px;}

.mega-menu .dropdown_2columns {width: 300px;}

.mega-menu .dropdown_customer_service {width: 605px;}

.mega-menu .dropdown_aboutus {width: 585px;}

.mega-menu .dropdown_info {width: 470px;}



/* bof drop down on mouse hover left aligned */

.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}



/* bof drop down on mouse hover right aligned */

.mega-menu li .align_right {-moz-border-radius: 5px 0px 5px 5px;-webkit-border-radius: 5px 0px 5px 5px;border-radius: 5px 0px 5px 5px;}

.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}



/* bof column sizes */

.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}

.mega-menu .col_1 {width:145px;}

.mega-menu .col_2 {width:300px;}

.mega-menu .col_cs {width:605px;}

.mega-menu .col_aboutus {width:585px;}

.mega-menu .col_3 {width:455px;}

.mega-menu .col_4 {width:610px;}

.mega-menu .col_5 {width:765px;}

.mega-menu .col_6 {width:920px;}



/* Use the firstcolumn class for the items that stick to the left edge of the dropdown */

.mega-menu .firstcolumn {margin-left: 0; /* Clearing margin & left */clear: left;}



/*bof content*/

.mega-menu p, .mega-menu ul, .mega-menu li, .mega-menu h2, .mega-menu h3 {font-size:14px;font-family:Arial, Helvetica, sans-serif;line-height:21px;text-align:left;color:#c04524;}

.mega-menu p {font-size:12px;line-height:18px;margin:0;	margin-bottom:10px;color:#fffffd;}

.mega-menu h2, .mega-menu h3 {border-bottom:1px solid #000;margin-top:7px;color:#fffffd;}

.mega-menu h2 {font-size:21px;margin-bottom:10px;padding-bottom:11px;font-weight:normal;}

.mega-menu h3 {font-size:14px;margin-bottom:14px;padding-bottom:7px;font-weight:normal;}

.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;}



/* bof images */

.mega-menu .imgshadow_light {padding:4px;border:0px solid #000;margin-top:1px;margin-left:2px;}



/* bof standard lists styles */

.mega-menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}

.mega-menu li ul li {font-size:12px;line-height:24px;position:relative;padding:0;margin:0;float:left;text-align:left;width:145px;}

.mega-menu li ul li a {padding:0;font-weight:normal;}

.mega-menu li ul li:hover {background:none;border:none;padding:0;margin:0;}



/* bof 2 levels drop down */

.mega-menu .levels, .mega-menu .levels ul {/* all lists */padding: 0;margin: 0;list-style: none;}

.mega-menu li:hover .levels a {display:block;}

.mega-menu .levels a {display: block;width: 10em;font-weight:normal;}

.mega-menu .levels a.parent, .mega-menu .levels a.parent:hover {}

.mega-menu .levels li {float: left;width:150px;}

.mega-menu .levels li ul {/* second-level lists*/ position: absolute;border:0px solid #fff;background:#184b7a;/*background: -moz-linear-gradient(top, #2c2b2a, #191816);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2c2b2a), to(#191816));background: -o-linear-gradient(top, #2c2b2a, #191816);*/top:-23px;margin:15px 0px 0px 4px;padding:6px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;left: -999em;}

.mega-menu .levels li ul ul {top:-23px;}

.mega-menu .levels li:hover ul ul, .mega-menu .levels li:hover ul ul ul {left: -999em;}

.mega-menu .levels li:hover ul, .mega-menu .levels li li:hover ul, .mega-menu .levels li li li:hover ul {left: 142px;}



/*bof contact form*/

#contact_form label, #contact_form legend {font-size: 12px;font-family:Arial, Helvetica, sans-serif;color:#fffffc;}

#contact_form legend {margin-bottom:10px;}

#contact_form {display: block;margin-bottom:10px;}

#contact_form label {display: inline-block;float: left;height: 36px;line-height: 36px;width:80px;font-size:12px;}

#contact_form input, #contact_form textarea, #contact_form select {color:#232323;width:190px;padding: 5px;border:0px solid #58a0af;font-size:12px;}   

#contact_form textarea {resize:none;}   

#contact_form input:focus, textarea:focus, select:focus {border:0px solid #fff;background-color:#efe8ec;}

#contact_form .required {color:#c00;}

#contact_form .form_buttons {margin:4px 0 0 80px;}

#contact_form .special {display:none;}

#contact_form .error, #contact_form .sent {font-size:11px;padding:2px 5px 2px 5px;text-shadow:none;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius: 3px;}

#contact_form .error {background:#fbe5e2;border:1px solid #f2a197;color:#992213;}

#contact_form .sent {background:#e1f8cc;border:1px solid #c6d880;color:#37620d;}

#contact_form input.button {width: 80px;margin-right:10px;cursor: pointer;background-color:#3a88d5;border:0px solid #0a0a0a;color:#fff;padding: 4px 7px 4px 7px;float:right;}

#contact_form input.button:hover {color:#fffffc;background-color:#000;border:0px solid #000;}



/*bof menu colors*/

.menu_red {background: #fff;/*(url(../images/menu-bk.png) repeat-x;*/height:45px;}

.menu_red li:hover div a {color:#fffffd;}

.menu_red li:hover div a:hover {color:#3a89d6;text-decoration:underline;}

.menu_red li ul li a:hover {color:#7ec3d4;text-decoration:underline;}



/*bof customer service*/

.mega-payments{float:left;}

.mega-confidence{float:right;width:60%;}

.mega-about{float:left;width:60%;}

.mega-right{float:right;position: relative;margin-left: 10px;width:145px;}

19 Jul 2013, 15:29

#244

picaflor_azul

Totally Zenned

Join Date:: Jul 2009
Location:: picaflor-azul.com
Posts:: 6,940
Plugin Contributions:: 28

Re: Sheffield Blue Template Support Thread

Feznizzle:

Thanks for the advice. Unfortunately, I can't seem to do much with it. I'm a beginner with CSS, sorry!

Can you take a look?

Here is my tpl_mega_menu.php:

<?php // // +----------------------------------------------------------------------+ // |zen-cart Open Source E-commerce | // +----------------------------------------------------------------------+ // | Copyright (c) 2003 The zen-cart developers | // | | // | http://www.zen-cart.com/index.php | // | | // | Portions Copyright (c) 2003 osCommerce | // +----------------------------------------------------------------------+ // | This source file is subject to version 2.0 of the GPL license, | // | that is bundled with this package in the file LICENSE, and is | // | available through the world-wide-web at the following url: | // | http://www.zen-cart.com/license/2_0.txt. | // | If you did not receive a copy of the zen-cart license and are unable | // | to obtain it through the world-wide-web, please send a note to | // | [email protected] so we can mail you a copy immediately. | // +----------------------------------------------------------------------+ // $Id: tpl_drop_menu.php 2005/06/15 15:39:05 DrByte Exp $ // ?> <div id="mega-wrapper">

<ul class="mega-menu menu_red"><!-- bof mega-menu -->

   [B]<li class="quicklinks-li"><a href="/">Home</a></li>[/B]

   

    

    
<li class="aboutus-li"><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>" class="drop"><?php echo HEADER_TITLE_ABOUT_US; ?></a><!-- bof about us -->
            
        <div class="dropdown_aboutus">
                
            <div class="col_aboutus">
                <h2><?php echo TITLE_ABOUT_US;?></h2>
            </div>

	<div class="col_cs">
                 <p class="mega-about"><?php echo TEXT_ABOUT_US;?></p>             
                 	<img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.ABOUT_US_IMAGE ?>"   class="imgshadow_light aboutus-image" alt="about us"  />    
         	</div>
            <div class="col_aboutus">
                  <h2><?php echo TITLE_CONFIDENCE;?></h2>
	</div>

	<div class="col_cs">
                  <img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.PAYMENT_ICON ?>"   alt="payments we accept" /> 
	      <p class="mega-confidence"><?php echo TEXT_CONFIDENCE;?></p>             
            </div>



        </div>

    </li><!-- eof about us -->

    

      <li class="information-li"><a href="<?php echo zen_href_link(FILENAME_DEFAULT); ?>" class="drop">Information</a><!-- bof information -->

    <div class="dropdown_info">
    
	<div class="col_1">
        	    <h3><?php echo TITLE_GENERAL; ?></h3>
                <ul>
		<li><a href="<?php echo zen_href_link(FILENAME_ABOUT_US); ?>"><?php echo BOX_INFORMATION_ABOUT_US; ?></a></li>
            	<?php if (DEFINE_SITE_MAP_STATUS <= 1) { ?>
            	<li><a href="/Privacy_Policy">Privacy Policy</a></li>
            	<?php } ?>
          		<?php if (MODULE_ORDER_TOTAL_GV_STATUS == 'false') { ?>
            	<li><a href="<?php echo zen_href_link(FILENAME_GV_FAQ, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_GV; ?></a></li>
            	<?php } ?>
            	<?php if (MODULE_ORDER_TOTAL_COUPON_STATUS == 'false') { ?>
            	<li><a href="<?php echo zen_href_link(FILENAME_DISCOUNT_COUPON, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_DISCOUNT_COUPONS; ?></a></li>
            	<?php } ?>
           		<?php if (SHOW_NEWSLETTER_UNSUBSCRIBE_LINK == 'false') { ?>
            	<li><a href="<?php echo zen_href_link(FILENAME_UNSUBSCRIBE, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_UNSUBSCRIBE; ?></a></li>
            	<?php } ?>
                 </ul>   
             </div>

	<div class="col_1">
                 <h3><?php echo TITLE_CUSTOMERS; ?></h3>
                 <ul>
		<?php if ($_SESSION['customer_id']) { ?>
            	<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
            	<li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
            	<li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT_NEWSLETTERS, '', 'SSL'); ?>"><?php echo TITLE_NEWSLETTERS; ?></a></li>
            	<?php } else { ?>
            	<li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
            	<li><a href="<?php echo zen_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CREATE_ACCOUNT; ?></a></li>
            	<?php } ?>
                	<li><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>"><?php echo BOX_INFORMATION_CONTACT; ?></a></li>
                    <?php if (DEFINE_SHIPPINGINFO_STATUS <= 1) { ?>
            	<li><a href="<?php echo zen_href_link(FILENAME_SHIPPING); ?>"><?php echo BOX_INFORMATION_SHIPPING; ?></a></li>
                    <?php } ?>
                    <?php if (DEFINE_PRIVACY_STATUS <= 1)  { ?>
            	<li><a href="<?php echo zen_href_link(FILENAME_PRIVACY); ?>"><?php echo BOX_INFORMATION_PRIVACY; ?></a></li>
                    <?php } ?>
                    <?php if (DEFINE_CONDITIONS_STATUS <= 1) { ?>
            	<li><a href="<?php echo zen_href_link(FILENAME_CONDITIONS); ?>"><?php echo BOX_INFORMATION_CONDITIONS; ?></a></li>
                    <?php } ?>
                 </ul>   
             </div>

        	 <div class="col_1">
                  <h3><?php echo TITLE_EZ_PAGES; ?></h3>
	      <ul> 
	      <?php require(DIR_WS_MODULES . 'sideboxes/' . $template_dir . '/' . 'ezpages_drop_menu.php'); ?>
	      </ul>
        	 </div>
       </div>

</li><!-- eof information -->


 




	      <li class="contactus-li"><a href="<?php echo zen_href_link(FILENAME_CONTACT_US, '', 'NONSSL'); ?>" class="drop"><?php echo HEADER_TITLE_CONTACT_US;?></a><!-- bof contact form -->
                   
        <div class="dropdown_2columns">
            
            <div class="col_2 firstcolumn">

	   <h2><?php echo TITLE_CONTACT_US;?></h2>

	   <p><?php echo TEXT_CONTACT_US;?></p>

                <div id="contact_form">
                
                    <div class="message">
                        <div id="alert"></div>
                    </div>
			  <?php echo zen_draw_form('contact_us', zen_href_link(FILENAME_CONTACT_US, 'action=send')); ?>
                    
                    <label for="contactname">Name<span class="required"> *</span></label>
                    <input name="contactname" type="text" id="contactname" size="30" value=""/>

		<br class="clearBoth" />
                    <label for="email">Email<span class="required"> *</span></label>
                    <input name="email" type="text" id="email" size="30" value="" />

		<br class="clearBoth" />
                    <label for="enquiry">Message<span class="required"> *</span></label>
                    <textarea name="enquiry" cols="40" rows="3"  id="enquiry"></textarea>
                    
                    

                       <div class="form_buttons">
                        <input type="submit" class="button" id="submit" value="Submit" />
                        </div>

                    </form>
                
                </div>

            </div>
        
        </div>

</li>

</ul><!-- eof mega-menu -->

</div> ``` > > > Here is my stylesheet_mega_menu.css: > ``` #mega-wrapper {width: 1034px;margin:0 auto;display:block;position: relative;z-index:7999;top:-90px;left:-27px;}

#mega-wrapper .mega-menu {background:url(../images/menu-bk.png) no-repeat;list-style:none;width:1034px;margin:30px auto 0px auto;height:65px;padding:0px 20px 0px 20px;}

.mega-menu li {float:left;text-align:center;position:relative;margin-right:20px;margin-top:6px;border:none;}

.mega-menu li.fullwidth {position: static !important;}

.mega-menu li:hover {background: #184b7b;border:1px solid #184b7a;margin-right:18px;-moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px;-khtml-border-radius: 5px 5px 0px 0px;border-radius: 5px 5px 0px 0px; }

.mega-menu li a {color: #fff;outline:0;padding: 5px 12px 3px 12px;text-decoration:none;display:block;font-weight:normal;}

.mega-menu li:hover a {color:#fffffe;position:relative;z-index:11;padding: 4px 11px 3px 11px;}

.mega-menu li:hover div a {display:inline;}

.mega-menu li .drop {padding-right:18px;}

.mega-menu li:hover .drop {padding-right:19px;}

/* bof right aligned menu item */

.mega-menu .right {float:right;right:0;margin-right:5px;}

.mega-menu li.right:hover {margin-right:5px;}

/* bof drop down styles */

.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service, .mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {margin:4px auto;left:-999em;position:absolute;border:0px solid #494949;background:#3b403a;padding:10px;text-align:left;-moz-border-radius: 0px 5px 5px 5px;-webkit-border-radius: 0px 5px 5px 5px;-khtml-border-radius: 0px 5px 5px 5px;border-radius: 0px 5px 5px 5px;background: #184b7a; /-moz-linear-gradient(top, #2c2b2a, #191816);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2c2b2a), to(#191816));background: -o-linear-gradient(top, #2c2b2a, #191816);/}

.mega-menu .dropdown_1column {width: 145px;}

.mega-menu .dropdown_2columns {width: 300px;}

.mega-menu .dropdown_customer_service {width: 605px;}

.mega-menu .dropdown_aboutus {width: 585px;}

.mega-menu .dropdown_info {width: 470px;}

/* bof drop down on mouse hover left aligned */

.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}

/* bof drop down on mouse hover right aligned */

.mega-menu li .align_right {-moz-border-radius: 5px 0px 5px 5px;-webkit-border-radius: 5px 0px 5px 5px;border-radius: 5px 0px 5px 5px;}

.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}

/* bof column sizes */

.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}

.mega-menu .col_1 {width:145px;}

.mega-menu .col_2 {width:300px;}

.mega-menu .col_cs {width:605px;}

.mega-menu .col_aboutus {width:585px;}

.mega-menu .col_3 {width:455px;}

.mega-menu .col_4 {width:610px;}

.mega-menu .col_5 {width:765px;}

.mega-menu .col_6 {width:920px;}

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown */

.mega-menu .firstcolumn {margin-left: 0; /* Clearing margin & left */clear: left;}

/bof content/

.mega-menu p, .mega-menu ul, .mega-menu li, .mega-menu h2, .mega-menu h3 {font-size:14px;font-family:Arial, Helvetica, sans-serif;line-height:21px;text-align:left;color:#c04524;}

.mega-menu p {font-size:12px;line-height:18px;margin:0; margin-bottom:10px;color:#fffffd;}

.mega-menu h2, .mega-menu h3 {border-bottom:1px solid #000;margin-top:7px;color:#fffffd;}

.mega-menu h2 {font-size:21px;margin-bottom:10px;padding-bottom:11px;font-weight:normal;}

.mega-menu h3 {font-size:14px;margin-bottom:14px;padding-bottom:7px;font-weight:normal;}

.mega-menu li:hover div a {text-decoration:none;border:none;padding:0;}

/* bof images */

.mega-menu .imgshadow_light {padding:4px;border:0px solid #000;margin-top:1px;margin-left:2px;}

/* bof standard lists styles */

.mega-menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}

.mega-menu li ul li {font-size:12px;line-height:24px;position:relative;padding:0;margin:0;float:left;text-align:left;width:145px;}

.mega-menu li ul li a {padding:0;font-weight:normal;}

.mega-menu li ul li:hover {background:none;border:none;padding:0;margin:0;}

/* bof 2 levels drop down */

.mega-menu .levels, .mega-menu .levels ul {/* all lists */padding: 0;margin: 0;list-style: none;}

.mega-menu li:hover .levels a {display:block;}

.mega-menu .levels a {display: block;width: 10em;font-weight:normal;}

.mega-menu .levels a.parent, .mega-menu .levels a.parent:hover {}

.mega-menu .levels li {float: left;width:150px;}

.mega-menu .levels li ul {/* second-level lists*/ position: absolute;border:0px solid #fff;background:#184b7a;/background: -moz-linear-gradient(top, #2c2b2a, #191816);background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2c2b2a), to(#191816));background: -o-linear-gradient(top, #2c2b2a, #191816);/top:-23px;margin:15px 0px 0px 4px;padding:6px;-moz-border-radius: 5px;-webkit-border-radius: 5px;-khtml-border-radius: 5px;border-radius: 5px;left: -999em;}

.mega-menu .levels li ul ul {top:-23px;}

.mega-menu .levels li:hover ul ul, .mega-menu .levels li:hover ul ul ul {left: -999em;}

.mega-menu .levels li:hover ul, .mega-menu .levels li li:hover ul, .mega-menu .levels li li li:hover ul {left: 142px;}

/bof contact form/

#contact_form label, #contact_form legend {font-size: 12px;font-family:Arial, Helvetica, sans-serif;color:#fffffc;}

#contact_form legend {margin-bottom:10px;}

#contact_form {display: block;margin-bottom:10px;}

#contact_form label {display: inline-block;float: left;height: 36px;line-height: 36px;width:80px;font-size:12px;}

#contact_form input, #contact_form textarea, #contact_form select {color:#232323;width:190px;padding: 5px;border:0px solid #58a0af;font-size:12px;}

#contact_form textarea {resize:none;}

#contact_form input:focus, textarea:focus, select:focus {border:0px solid #fff;background-color:#efe8ec;}

#contact_form .required {color:#c00;}

#contact_form .form_buttons {margin:4px 0 0 80px;}

#contact_form .special {display:none;}

#contact_form .error, #contact_form .sent {font-size:11px;padding:2px 5px 2px 5px;text-shadow:none;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius: 3px;}

#contact_form .error {background:#fbe5e2;border:1px solid #f2a197;color:#992213;}

#contact_form .sent {background:#e1f8cc;border:1px solid #c6d880;color:#37620d;}

#contact_form input.button {width: 80px;margin-right:10px;cursor: pointer;background-color:#3a88d5;border:0px solid #0a0a0a;color:#fff;padding: 4px 7px 4px 7px;float:right;}

#contact_form input.button:hover {color:#fffffc;background-color:#000;border:0px solid #000;}

/bof menu colors/

.menu_red {background: #fff;/(url(../images/menu-bk.png) repeat-x;/height:45px;}

.menu_red li:hover div a {color:#fffffd;}

.menu_red li:hover div a:hover {color:#3a89d6;text-decoration:underline;}

.menu_red li ul li a:hover {color:#7ec3d4;text-decoration:underline;}

/bof customer service/

.mega-payments{float:left;}

.mega-confidence{float:right;width:60%;}

.mega-about{float:left;width:60%;}

.mega-right{float:right;position: relative;margin-left: 10px;width:145px;}


Try changing the xhtml to this:

<li class="quicklinks-li"><a class="drop" href="/">Home</a></li> ```

Thanks,

Anne

19 Jul 2013, 15:47

#245

feznizzle

Totally Zenned

Join Date:: Apr 2010
Posts:: 900
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

lol! I was trying to replace the first class with the second, instead of just adding it. I can be so thick sometimes. :)

That fixes my minor problem (thanks!!!), but I'm still lost about the second (how to round out the bottom corners). What I've done in the past is:

Duplicate the base style in css, then rename.
Rename my calling tag to match the duplicated style.
Then make changes to the new style, knowing it will not effect anything else.

Problem is that this style (set of styles) is a lot more complicated and harder for me to follow than those I've done before.

Thank you so much for the help! Must be tough to support templates, everybody has such different visions and skill levels!

19 Jul 2013, 16:49

#246

picaflor_azul

Totally Zenned

Join Date:: Jul 2009
Location:: picaflor-azul.com
Posts:: 6,940
Plugin Contributions:: 28

Re: Sheffield Blue Template Support Thread

Feznizzle:

lol! I was trying to replace the first class with the second, instead of just adding it. I can be so thick sometimes. :)

That fixes my minor problem (thanks!!!), but I'm still lost about the second (how to round out the bottom corners). What I've done in the past is:

Duplicate the base style in css, then rename.

Rename my calling tag to match the duplicated style.

Then make changes to the new style, knowing it will not effect anything else.

Problem is that this style (set of styles) is a lot more complicated and harder for me to follow than those I've done before.

Thank you so much for the help! Must be tough to support templates, everybody has such different visions and skill levels!

Try adding this:

.mega-menu .quicklinks-li:hover{-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

Thanks,

Anne

19 Jul 2013, 16:56

#247

feznizzle

Totally Zenned

Join Date:: Apr 2010
Posts:: 900
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

Thank you, thank you, thank you!

:hug:

20 Jul 2013, 15:20

#248

picaflor_azul

Totally Zenned

Join Date:: Jul 2009
Location:: picaflor-azul.com
Posts:: 6,940
Plugin Contributions:: 28

Re: Sheffield Blue Template Support Thread

Feznizzle:

Thank you, thank you, thank you!

:hug:

No problem ;)

Thanks,

Anne

27 Jul 2013, 16:17

#249

rocknet

New Zenner

Join Date:: Jul 2013
Location:: uk
Posts:: 8
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

Hello,

This looks like a great template to work with.
I have uploaded it but there seems to be a couple of problems with my layout.

1: The shopping cart is not displaying th correct information
2: The text is out of alignment
3: The images in the right hand colmn are out of alignment.

Any help from anyone would be appreciated.
I am assuming that I have maybe missed a step in the install.

Cheers

27 Jul 2013, 17:46

#250

uswebworx

Zen Follower

Join Date:: Sep 2006
Location:: USA
Posts:: 297
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

reinstall it

27 Jul 2013, 19:14

#251

rocknet

New Zenner

Join Date:: Jul 2013
Location:: uk
Posts:: 8
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

Thanks Anne. I feel so dumb.

It is working now.

But just one thing is now working. It's the cart in the header. What have I missed there?

Steve

27 Jul 2013, 20:34

#252

picaflor_azul

Totally Zenned

Join Date:: Jul 2009
Location:: picaflor-azul.com
Posts:: 6,940
Plugin Contributions:: 28

Re: Sheffield Blue Template Support Thread

rocknet:

Hello,

This looks like a great template to work with.
I have uploaded it but there seems to be a couple of problems with my layout.

1: The shopping cart is not displaying th correct information
2: The text is out of alignment
3: The images in the right hand colmn are out of alignment.

Any help from anyone would be appreciated.
I am assuming that I have maybe missed a step in the install.

Cheers

If you post a link to your site I can take a look.

Thanks,

Anne

28 Jul 2013, 16:42

#253

fjej1970

New Zenner

Join Date:: Aug 2010
Posts:: 15
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

Hello Anne, thanks for the awesome template !

I was trying to change the height of the slide show but i cant find the way to do it, your help will be really appreciated.

28 Jul 2013, 19:44

#254

doodlebuckets

Totally Zenned

Join Date:: Jul 2005
Posts:: 497
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

Here is my site: http://ciscotraining-kherson.com/?language=en

Love this template! I have added the Russian language pack and all is well. Wondering if you could tell me how to fix it so the slider appears in Russian in the Russian language mode. We have created separate graphics in Russian but not sure how to make it display only when on the Russian language side....

Thanks again for a great template!
Amy

28 Jul 2013, 20:57

#255

picaflor_azul

Totally Zenned

Join Date:: Jul 2009
Location:: picaflor-azul.com
Posts:: 6,940
Plugin Contributions:: 28

Re: Sheffield Blue Template Support Thread

fjej1970:

Hello Anne, thanks for the awesome template !

I was trying to change the height of the slide show but i cant find the way to do it, your help will be really appreciated.

I am happy that you like the template. There are instructions for using slides with different dimensions in the readme.html file included in the template package.

Thanks,

Anne

28 Jul 2013, 23:06

#256

rocknet

New Zenner

Join Date:: Jul 2013
Location:: uk
Posts:: 8
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

Hi anne,

I meant to say that 'only one thing is not working' now. I had mistyped and said 'only one thing is now working'.

My one problem seems to have been raised on post number 13.

I am getting this output in the header...

count_contents();?> item(s) - format($_SESSION['cart']->show_total());?> |
Checkout

I have not yet tried the solution quoted in post number. Just wondering what the correct solution is.

I haven't got my site online yet... Just testing on localhost at the moment.

Steve

picaflor-azul:

If you post a link to your site I can take a look.

Thanks,

Anne

29 Jul 2013, 02:42

#257

divavocals

Totally Zenned

Join Date:: Jan 2007
Location:: Los Angeles, California, United States
Posts:: 10,011
Plugin Contributions:: 3

Re: Sheffield Blue Template Support Thread

If you see Anne's response, you'll see that the solution in post #13 is right> rocknet:

Hi anne,

I meant to say that 'only one thing is not working' now. I had mistyped and said 'only one thing is now working'.

My one problem seems to have been raised on post number 13.

I am getting this output in the header...

count_contents();?> item(s) - format($_SESSION['cart']->show_total());?> |
Checkout

I have not yet tried the solution quoted in post number. Just wondering what the correct solution is.

I haven't got my site online yet... Just testing on localhost at the moment.

Steve

29 Jul 2013, 14:02

#258

picaflor_azul

Totally Zenned

Join Date:: Jul 2009
Location:: picaflor-azul.com
Posts:: 6,940
Plugin Contributions:: 28

Re: Sheffield Blue Template Support Thread

rocknet:

Hi anne,

I meant to say that 'only one thing is not working' now. I had mistyped and said 'only one thing is now working'.

My one problem seems to have been raised on post number 13.

I am getting this output in the header...

count_contents();?> item(s) - format($_SESSION['cart']->show_total());?> |
Checkout

I have not yet tried the solution quoted in post number. Just wondering what the correct solution is.

I haven't got my site online yet... Just testing on localhost at the moment.

Steve

I have this on my list for a future update ;) If you follow the instructions in the previous post, all will be well.

Thanks,

Anne

29 Jul 2013, 23:00

#259

fjej1970

New Zenner

Join Date:: Aug 2010
Posts:: 15
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

picaflor-azul:

I am happy that you like the template. There are instructions for using slides with different dimensions in the readme.html file included in the template package.

Thanks,

Anne

Thank for our reply, i did follow what the readme file states but the stylesheet.ccs its not the file that has the silder dimensions i found it on stylesheet_slides.ccs but after changing the height nothing happent.

i changed this:
#container {width:980px;padding:10px;margin:0 auto;position:relative;z-index:0;margin-bottom:20px;}
#example {width:980px;height:250px;position:relative;}
#slides {position:absolute;top:0px;left:4px;z-index:100;}
.slides_container {width:980px;overflow:hidden;position:relative;display:none;}
.slides_container a {width:980px;height:250px;display:block;}

into this:
#container {width:400px;padding:10px;margin:0 auto;position:relative;z-index:0;margin-bottom:20px;}
#example {width:400px;height:300px;position:relative;}
#slides {position:absolute;top:0px;left:4px;z-index:100;}
.slides_container {width:400px;overflow:hidden;position:relative;display:none;}
.slides_container a {width:400px;height:300px;display:block;}

and nothing happent.

29 Jul 2013, 23:23

#260

doodlebuckets

Totally Zenned

Join Date:: Jul 2005
Posts:: 497
Plugin Contributions:: 0

Re: Sheffield Blue Template Support Thread

Doodlebuckets:

Here is my site: http://ciscotraining-kherson.com/?language=en

Love this template! I have added the Russian language pack and all is well. Wondering if you could tell me how to fix it so the slider appears in Russian in the Russian language mode. We have created separate graphics in Russian but not sure how to make it display only when on the Russian language side....

Thanks again for a great template!
Amy

Is this something you can help with? Thanks, Amy