Abbiamo Supremo Support Thread

hey dude :D

ive just downloaded and checked opera, and for some reason the whole well page is alot bigger in there, and also that mysterious white space between the header + menu is there :S still happens in IE compat mode also all shiny graphics show etc

PeazzAndycresswell:

hey dude :D

ive just downloaded and checked opera, and for some reason the whole well page is alot bigger in there, and also that mysterious white space between the header + menu is there :S still happens in IE compat mode also all shiny graphics show etc

mate i know its not your mod ut im getting no reply in its support thread, im using css fly out menu, and i copied my image links in, the first hover menu works a dream just the effect i wanted.

but now with the fly outs the image that over laps its to small ive tried setting hieght width padding etc, but its just not the same....any ideas how i can get hte fly out menus to match the catagorys list?

#dhtmlgoodies_menu{
	font-family:segoe ui;	/* Font for main menu items */
background-image: url(/images/mback.png) ;	  
list-style: none;
          width: 147px;
         
}
#dhtmlgoodies_menu	li{	/* Main menu <li> */
	list-style-type:none;	/* No bullets */
	margin:0px;	/* No margin - needed for Opera */
}
#dhtmlgoodies_menu ul{
	margin:0px;	/* No <ul> air */
	padding:0px;	/* No <ul> air */
}
#dhtmlgoodies_menu ul li ul{	/* Styling for those who doesn't have javascript enabled */
	padding-left:10px;
}
#dhtmlgoodies_menu	li a{	/* Main menu links */
	text-decoration:none;	/* No underline */
	color:#fff;	/* Blue text color */

	height:27px;	/* 20 pixel height */
	line-height:30px;	/* 20 pixel height */
	vertical-align:middle;	/* Align text in the middle */
	margin:1px;	/* A little bit of air */
	padding:1px;	/* Air between border and text inside */
        text-align:center;


	display:block;
}
#dhtmlgoodies_menu	li a:hover,#dhtmlgoodies_menu .activeMainMenuItem{
	background-image: url(/images/mback1.png) ;
        text-align:center;
        text-decoration:underline;
}
.dhtmlgoodies_subMenu{
	visibility:hidden;
	position:absolute;
	overflow:hidden;
	background-image: url(/images/mback.png) ;
        width: 145px;
	font-family:arial;
	text-align:center;

}
.dhtmlgoodies_subMenu ul{
	margin:0px;
	padding:3px;
}
.dhtmlgoodies_subMenu ul li{
	list-style-type:none;
	margin:0px;
	padding:6px;	/* 1px of air between submenu border and sub menu item - (the "white" space you see on mouse over )*/
}
.dhtmlgoodies_subMenu ul li a{	/* Sub menu items */
	white-space:nowrap;	/* No line break */
	text-decoration:none;	/* No underline */
	color:#fff;	/* Black text color */

	height:11px;	/* 16 pixels height */
	line-height:16px;	/* 16 pixels height */
	padding:1px;	/* 1px of "air" inside */

	display:block;	/* Display as block - you shouldn't change this */
}
.dhtmlgoodies_subMenu ul li a:hover{	/* Sub menu items - mouse over effects */
	background-image: url(/images/mback1.png) ;
	color:#bcdc65;	/* White text */
        vertical-align: middle;
        font-family:segoe ui;
}

there must be something im missing here...

Andy, although I think you are doing a great job enhancing your site and making it look good, I normally do not see an advantage to having a top drop-down and a side fly-out. In such a case, I leave my side categories as normal, as a kind of added "bread crumb" to help orient customers.

My past attempts to get a good looking side flyout have been pretty dismal. But if I needed both flyouts - top and side - I'd probably begin with this new template (demo link from first post):

http://www.zen-cart.com/showthread.php?197839-Hope-multipurpose-Template-Support-Thread

I also often wonder where free support for these nice, new free templates ends. Especially when we begin re-arranging and re-designing the free template.

Anyway, good luck!

SPH:

Andy, although I think you are doing a great job enhancing your site and making it look good, I normally do not see an advantage to having a top drop-down and a side fly-out. In such a case, I leave my side categories as normal, as a kind of added "bread crumb" to help orient customers.

My past attempts to get a good looking side flyout have been pretty dismal. But if I needed both flyouts - top and side - I'd probably begin with this new template (demo link from first post):

http://www.zen-cart.com/showthread.php?197839-Hope-multipurpose-Template-Support-Thread

I also often wonder where free support for these nice, new free templates ends. Especially when we begin re-arranging and re-designing the free template.

Anyway, good luck!

i agree, brendon has already been a great help! people will know its his template on the site, and that i simply just modded it a little and some code :P

hi mate,

again asked for help and i solved it...

thanks so much with your help mate, wouldnt of got this far without you so far...ill put ur website up on mine once im fully active, and give template credit to you and state i just modded it...thanks so much mate, really hope u dont mind that ive changed it a little :)

Andy

PeazzAndycresswell:

hi mate,

again asked for help and i solved it...

thanks so much with your help mate, wouldnt of got this far without you so far...ill put ur website up on mine once im fully active, and give template credit to you and state i just modded it...thanks so much mate, really hope u dont mind that ive changed it a little :)

Andy

Thanks, of course I don't mind you changed it, that's what they are there for.

I try to help as much as I can even if its nothing that is to do with the template. The more people that like what I do, the more future business I will get so any questions I am open to helping with.

ok i got a lil issue :) sorry mate :P

so in mozzila, load up the xbox page, and hover over my new menu, all lines up fine, also take notice of the top section as it loads, the page is fixed..

now in chrome, when you load it u can see the top of the page 'sets in' this is throwing my menu out of alignment any idea how i can fix this mate? and also, you managed to locate the mysterious area above the menu in ie compat mode? its doing it to me in opera aswell :P

PeazzAndycresswell:

ok i got a lil issue :) sorry mate :P

so in mozzila, load up the xbox page, and hover over my new menu, all lines up fine, also take notice of the top section as it loads, the page is fixed..

now in chrome, when you load it u can see the top of the page 'sets in' this is throwing my menu out of alignment any idea how i can fix this mate? and also, you managed to locate the mysterious area above the menu in ie compat mode? its doing it to me in opera aswell :P

ok mate, it happens when your signed into facebook, if your not signed into facebook, then it doesnt do it...

brandonturpin:

Thanks, of course I don't mind you changed it, that's what they are there for.

I try to help as much as I can even if its nothing that is to do with the template. The more people that like what I do, the more future business I will get so any questions I am open to helping with.

ok so i dont know if other poeople are getting this when they are logging into facebook and liking my page...i have an extra link for my bar as im page admin so it might just be mate, can anyone log my site https://www.consolecodeslab.com and like the fb page after that see if the header 'drops' and sets in on page refresh.

its happening to me and everytime throws my flyout out of position

brandonturpin:

I will get that fixed this evening, sorry I only have a windows computer at home, the office runs Linux and my laptop is a mac and I have not been home till late the past 2 night a lot of late work at the office. :-(

But tonight I will get that taken care of sorry about the delay!

Hey Brandon... I'm trying to follow this thread to see maybe if there is a something I can work with but I'm having difficulty deciphering the inputs :)

Any luck in the stylesheet changes that affect Explorer? I'm ready to publish the site (owner LOVES the look!) but want it to be seen perfectly by the masses!

Thanks again for all your help,
Paula

mydogisfat:

Hey Brandon... I'm trying to follow this thread to see maybe if there is a something I can work with but I'm having difficulty deciphering the inputs :)

Any luck in the stylesheet changes that affect Explorer? I'm ready to publish the site (owner LOVES the look!) but want it to be seen perfectly by the masses!

Thanks again for all your help,
Paula

everything is in the css style sheet, if your struggling with inputs, the start of the css code is a referance to the div tag in the html.

ive managed find out what controls what simply by using firefox web devoloper tools and editing the css live so i can see what changes what hope this helps :)

My site is ready to go except for my messing with something in the stylesheet that changed the look in IE. Brandon is so kind to take a look see and find where the explorer issues are located in my file. Everything looks so darn great in Chrome, Firefox, etc that I don't really want to chance any more changes without his expert opinion!

Thanks, Andy, for your suggestions though!

www.gefw.co (please view in chrome or firefox or on your ipad!)
Paula

mydogisfat:

My site is ready to go except for my messing with something in the stylesheet that changed the look in IE. Brandon is so kind to take a look see and find where the explorer issues are located in my file. Everything looks so darn great in Chrome, Firefox, etc that I don't really want to chance any more changes without his expert opinion!

Thanks, Andy, for your suggestions though!

www.gefw.co (please view in chrome or firefox or on your ipad!)
Paula

Wow i see what you mean, everything is so big in IE, also u got the same compatability problem i have..wierd.
best thing i can suggest for ur menu bar is replacing the gradient with an actual image. this make's it look the same in all browsers. as IE dont show gradients. this is why ive modded mine quite a bit :)

PeazzAndycresswell:

ok so i dont know if other poeople are getting this when they are logging into facebook and liking my page...i have an extra link for my bar as im page admin so it might just be mate, can anyone log my site https://www.consolecodeslab.com and like the fb page after that see if the header 'drops' and sets in on page refresh.

its happening to me and everytime throws my flyout out of position

That only happens if you are the admin of the site that is linked. It shows extra rows in the facebook section for the admin of the page. But everyone else will see it normally as they do not have admin access to your facebook site but the regular template does not throw anything off, just pushes it down a row.

mydogisfat:

My site is ready to go except for my messing with something in the stylesheet that changed the look in IE. Brandon is so kind to take a look see and find where the explorer issues are located in my file. Everything looks so darn great in Chrome, Firefox, etc that I don't really want to chance any more changes without his expert opinion!

Thanks, Andy, for your suggestions though!

www.gefw.co (please view in chrome or firefox or on your ipad!)
Paula

I spent some time the other day and am not sure why it is doing that as its not like that with a unedited version of the template. There have been some changes made either to the tpl_header.php or the stylesheet.

If you can copy your tpl_header.php code (or send it to me) I will create a fresh install with your header and css files and figure it out for sure. But I could not detect it from just the stylesheet.

Brandon, here's the tpl_header.php
Keeping my fingers crossed!!

<?php
/**
 * Common Template - tpl_header.php
 *
 * this file can be copied to /templates/your_template_dir/pagename<br />
 * example: to override the privacy page<br />
 * make a directory /templates/my_template/privacy<br />
 * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br />
 * to override the global settings and turn off the footer un-comment the following line:<br />
 * <br />
 * $flag_disable_header = true;<br />
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $
 */
?>
<?php
  // Display all header alerts via messageStack:
  if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
  }
  if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
  echo htmlspecialchars(urldecode($_GET['error_message']));
  }
  if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
   echo htmlspecialchars($_GET['info_message']);
} else {

}
?>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<!--bof-header logo and navigation display-->
<?php
if (!isset($flag_disable_header) || !$flag_disable_header) {
?>

<div id="abody">
    <div id="amain">
        <div id="acontent-1">
             <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
        </div>
        <div id="acontent-2">
            <div id="acontent-2-1">
              <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
              <br class="clearBoth" />
                    <div id="tagline2"><?php echo HEADER_SALES_TEXT;?></div>
                    <div id="tagline"><?php echo HEADER_SALES_TEXT2;?></div>
            </div>
            <div id="acontent-2-2">
<div id="navMain">
    <ul class="back">  
<div id="maincontainer">
<div id="topsection">
   <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a>|</li>
     <?php if ($_SESSION['customer_id']) { ?>
   <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>|</li>
     <?php
        } else {
          if (STORE_STATUS == '0') {
      ?>
   <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>|</li>
     <?php } } ?>
   <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li><br> 
</div>

<div id="contentcolumn">
   <a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <? echo $_SESSION['cart']->count_contents();?> item(s)<br> <? echo $currencies->format($_SESSION['cart']->show_total());?></a>
</div>

<div id="leftcolumn">
  <img src="http://d1xdpwxwt2wdkc.cloudfront.net/cart.png" class="cart-image" alt="the shopping cart" />
</div>
<br class="clearBoth" />
<div id="footer">
  <div class="fb-like" data-href="<?php echo FACEBOOK_URL;?>" data-send="false" data-width="200" data-show-faces="false"></div>
</div>

</div>

</ul>
            </div>
        </div>
    </div>
    <div id="afooter">
<!--bof-drop down menu -->
 <?php include("tpl_drop_down.php"); ?>
<!--eof-drop down menu -->
    </div>
</div>


<?php } ?>

mydogisfat:

Brandon, here's the tpl_header.php
Keeping my fingers crossed!!

<?php /** * Common Template - tpl_header.php * * this file can be copied to /templates/your_template_dir/pagename<br /> * example: to override the privacy page<br /> * make a directory /templates/my_template/privacy<br /> * copy /templates/templates_defaults/common/tpl_footer.php to /templates/my_template/privacy/tpl_header.php<br /> * to override the global settings and turn off the footer un-comment the following line:<br /> * <br /> * $flag_disable_header = true;<br /> * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0 * @version $Id: tpl_header.php 4813 2006-10-23 02:13:53Z drbyte $ */ ?> <?php // Display all header alerts via messageStack: if ($messageStack->size('header') > 0) { echo $messageStack->output('header'); } if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) { echo htmlspecialchars(urldecode($_GET['error_message'])); } if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) { echo htmlspecialchars($_GET['info_message']); } else { } ?> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!--bof-header logo and navigation display--> <?php if (!isset($flag_disable_header) || !$flag_disable_header) { ?> <div id="abody"> <div id="amain"> <div id="acontent-1"> <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div> </div> <div id="acontent-2"> <div id="acontent-2-1"> <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div> <br class="clearBoth" /> <div id="tagline2"><?php echo HEADER_SALES_TEXT;?></div> <div id="tagline"><?php echo HEADER_SALES_TEXT2;?></div> </div> <div id="acontent-2-2"> <div id="navMain"> <ul class="back"> <div id="maincontainer"> <div id="topsection"> <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a>|</li> <?php if ($_SESSION['customer_id']) { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>|</li> <?php } else { if (STORE_STATUS == '0') { ?> <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>|</li> <?php } } ?> <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li><br> </div> <div id="contentcolumn"> <a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?> - <? echo $_SESSION['cart']->count_contents();?> item(s)<br> <? echo $currencies->format($_SESSION['cart']->show_total());?></a> </div> <div id="leftcolumn"> <img src="http://d1xdpwxwt2wdkc.cloudfront.net/cart.png" class="cart-image" alt="the shopping cart" /> </div> <br class="clearBoth" /> <div id="footer"> <div class="fb-like" data-href="<?php echo FACEBOOK_URL;?>" data-send="false" data-width="200" data-show-faces="false"></div> </div> </div> </ul> </div> </div> </div> <div id="afooter"> <!--bof-drop down menu --> <?php include("tpl_drop_down.php"); ?> <!--eof-drop down menu --> </div> </div> <?php } ?>

 
I used the exact same header text and CSS and its not having the same error. hmmm lets test this

Add this to your stylesheet

#topsection a {font-size: 12px;} /* or font size you would like */

if that does not work, remove it and try adding this

#topsection li {font-size: 12px;} /* or font size you would like */

I have released a much needed update for the template to completely reformat the header. Its pending with Zen Cart but you can download the new template HERE till its released

Changes

• Rewrote the header to fix all the formatting issues
• Changed the drop down contact form in a table to line up the forms better
• Adjusted some CSS for IE compatibility

If you are upgrading the only files I changed was tpl_header.php, tpl_search_header and tpl_drop_down.php

added some CSS code for the header as well in the stylesheet.css

brandonturpin:

I have released a much needed update for the template to completely reformat the header. Its pending with Zen Cart but you can download the new template HERE till its released

Changes

• Rewrote the header to fix all the formatting issues
• Changed the drop down contact form in a table to line up the forms better
• Adjusted some CSS for IE compatibility

If you are upgrading the only files I changed was tpl_header.php, tpl_search_header and tpl_drop_down.php

added some CSS code for the header as well in the stylesheet.css

nice one mate! how would i go about updating my template? drag and drop the files? or is it a case of replacing the files and just reworking them again?

PeazzAndycresswell:

nice one mate! how would i go about updating my template? drag and drop the files? or is it a case of replacing the files and just reworking them again?

You should be able to upload the new header file. From what I see you have not made too many changes to the layout of the header and you might just need to update the new CSS to match the colors on links and stuff.

1. save all old files
2. upload tpl_header.php
3. copy the following part of the stylesheet.css and put it in your stylesheet.

#header-wrapper {width: 100%;}

#header-left {float: left; width: 33%; padding-top: 5px;}

#header-middle {float: left; width: 40%;}

#header-right {float: left; width: 27%; padding-top: 10px;}


#header-search {height: 55px; text-align: center;}

#header-tagline {padding-top: 10px;}

#tagline-one {float: left; width: 50%; color:#9dc236; font-size: .8em; text-align : center;}

#tagline-two {float: left; width: 50%; color:#0072bc; font-size: .8em; text-align : center;}
 
#header-right-nav {text-align: right; width: 100%;}

#header-right-nav ul {margin: 0;}

#header-right-nav li {display: inline; padding: 0 5px 0 5px; border-right: solid 1px #000;}

#header-right-nav li.last {border-right: none;}

#header-right-cart {padding-top: 10px;}

#header-right-cart-right {float: right; background: #D8E8F3; width: 180px; height: 42px; text-align: center; font-size: 13px; padding-top: 5px;}

#header-right-cart-left {float: right; width: 67px; height: 47px; background-image: url(../images/cart.png);}

#header-right-social {float: right; margin-top: 10px; width: 220px; height: 10px;}

4. Change this to match the colors on your site.
5. upload the cart.png image to your images folder

The drop down menu should not need to be changed, if you want the drop down contact you can just copy the contact part that has the table built in for styling.

**Make sure you back up your old files just in case you made changes on them and need to reference them, or go back to them
**