Abbiamo Supremo Support Thread

PeazzAndycresswell:

tpl_header :)

?>

<?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="back2"> <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 } ?>

 Ok I think I found the issue... which I have fixed in the newest release. But on the tpl_header.php file find the line that looks like this

<ul class="back"> ``` and change it to ``` <ul class="back2"> ```

And let me know if that works, if not I will set up a mock zen cart and enter your stylesheet and get down to the problem. But that has a good change at fixing it

mydogisfat:

Hi Brandon,
I am just about to publish my site and have it out for critiques from those-that-make-decisions. Looks great on Firefox and Chrome but Explorer just throws it in disarray. Of course everyone and their mother uses Explorer. Aside from putting a banner at top asking the customer to view in Firefox or Chrome, do you know where the problem lies?
www.gefw.co
Thank you for all your efforts and time :)

It looks to be a compatibly issue with the css, have you made any changes to the stylesheet.css? If so if you could send me the updated stylesheet.css I will find a fix for the issues. I do not have a windows computer in front of me now, but I will later tonight and will figure out a fix this evening as long as I have that updated stylesheet.css if you made changes.

hi brandon i tried that and it was already set to back2 i tried to resave and upload anyway didnt fix it :(

Yes, many changes.

Thank you so much for your time!! Stylesheet in two parts.

/**

• Main CSS Stylesheet
• @package templateSystem
• @copyright Copyright 2003-2007 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: stylesheet.css 5952 2007-03-03 06:18:46Z drbyte $
  */

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 62.5%;
color: #000000;
}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
color: #155410;
text-decoration: none;
}

a:visited {
color: #155410;
text-decoration: none;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #d899da;
text-decoration:underline;
}

a:active {
color: #155410;
}

h1 {
font-size: 1.5em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.3em;
}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
font-size: 1.1em;
}

.biggerText {
font-size: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
margin: 0.3em 0;
}

/* Might uncomment either or both of these if having problems with IE peekaboo bug:
h1, h2, h3, h4, h5, h6, p {
position: relative;
}
*html .centerColumn {
height: 1%;
}
*/

CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 1em;
}

FORM, SELECT, INPUT {
display: inline;
padding: 5px;
margin: 0.1em;
margin: 7px 0;
border-radius: 3px;
}

TEXTAREA {
margin: auto;
display: block;
width: 95%;
}

input:focus, select:focus, textarea:focus {
background: #E4FEF5;
}

FIELDSET {
padding: 0.5em;
margin: 0.5em 0em;
border: 1px solid #cccccc;
}

LEGEND {
font-weight: bold;
padding: 0.3em;
color: black;
}

LABEL, h4.optionName {
line-height: 2.5em;
padding: 0.2em;
}

LABEL.checkboxLabel, LABEL.radioButtonLabel {
margin: 0.5em 0.3em;
}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

LABEL.inputLabel {
width: 9em;
float: left;
}

LABEL.inputLabelPayment {
width: 14em;
float: left;
padding-left: 2.5em;
}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel {
width: 11em;
float: left;
}

#checkoutPayment LABEL.radioButtonLabel {
font-weight: bold;
}

P, ADDRESS {
padding: 0.5em;
}

ADDRESS {
font-style: normal;
}

.clearBoth {
clear: both;
}

HR {
height: 1px;
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #9a9a9a;
}

/warnings, errors, messages/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
line-height: 1.8em;
padding: 0.2em;
border: 1px solid #9a9a9a;
}

.messageStackWarning, .messageStackError {
background-color: #ff0000;
color: #ffffff;
}

.messageStackSuccess {
background-color: #99FF99;
color: #000000;
}

.messageStackCaution {
background-color: #FFFF66;
color: #000000;
}

/wrappers - page or section containers/
#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 980px;
vertical-align: top;
}

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
}

#logoWrapper{
background-image: url(../images/header_bg.jpg/);
background-repeat: repeat-x;
background-color: #ffffff;
height:75px;
}

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}
#navColumnOneWrapper, #navColumnTwoWrapper {
margin-left: 0.5em;
margin-right: 0.5em;
}

#tagline {
color:#9dc236;
font-size: .8em;
text-align : center;
vertical-align: middle;
float:right;
width:49%;
}

#tagline2 {
color:#155410;
font-size: .8em;
text-align : center;
vertical-align: middle;
float:left;
width:49%;
}

#sendSpendWrapper {
border: 1px solid #cacaca;
float: right;
margin: 0em 0em 1em 1em;
}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
margin: 0;
width: 47%;
}

/*.wrapperAttribsOptions {
margin: 0em 0em ;
margin-left: 1em;
} */

.wrapperAttribsOptions {position: relative;}
h4.optionName {
float: left;
margin-left: 0em;
margin-bottom: 1em;
}
.wrapperAttribsOptions select, .wrapperAttribsOptions input {
position: absolute;
top: 2.6em;
left: .5em;
}

/navigation/

.navSplitPagesResult {}
.navSplitPagesLinks {}

.navNextPrevCounter {
margin: 0em;
font-size: 0.9em;
}
.navNextPrevList {
display: inline;
white-space: nowrap;
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
}

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #fff;
background-image: url(../images/tile_back.gif/);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

#navCatTabsWrapper {
background-color: #ffffff;
color: #9a9a9a;
background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #155410;
white-space: nowrap;
}

#navCatTabs ul li a {
color: #9a9a9a;
}

#navEZPagesTOCWrapper {
font-weight: bold;
float: right;
height: 1%;
border: 1px solid #9a9a9a;
}

#navEZPagesTOC ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
line-height: 1.5em;
}

#navEZPagesTOC ul li {
white-space: nowrap;
}

#navEZPagesTOC ul li a {
padding: 0em 0.5em;
margin: 0;
}

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}
#updatecart {float: right; margin-top: -12px;}

#navMainSearch {
text-align: center;
}

#navBreadCrumb {
padding: 0.5em 0.5em;
background-color: #ffffff;
font-size: 0.95em;
font-weight: bold;
margin: 0em;
}

#navEZPagesTop {
background-color: #abbbd3;
background-image: url(../images/tile_back.gif/);
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne, #navColumnTwo {
background-color: transparent;
}

/The main content classes/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
vertical-align: top;
}

/.content,/ #productDescription, .shippingEstimatorWrapper {
/font-size: 1.2em;/
padding: 0.5em;
}

.alert {
color: #FF0000;
margin-left: 0.5em;
}
.advisory {}
.important {
font-weight: bold;
}
.notice {}
.rating{}
.gvBal {
float: right;
}
.centerColumn, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerSix {
padding: 0.8em;
}
#bannerFive { padding-top: 15px;}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
font-size: 0.9em;
}

/Shopping Cart Display/
#cartAdd {
float: right;
text-align: center;
margin: 1em;
padding: 1em;
}

.tableHeading TH {
border-bottom: 1px solid #9a9a9a;
}

.tableHeading, #cartSubTotal {
background-color: #e9e9e9;
}

#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 3.5em;
}

.tableRow, .tableHeading, #cartSubTotal {
height: 2.2em;
}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 1em 0em;
padding-right: 5px;

}

.cartUnitDisplay, .cartTotalDisplay {
text-align: right;
padding-right: 0.2em;
}

#scUpdateQuantity {
width: 2em;

}

.cartQuantity {
width: 4.7em;
}

.cartNewItem {
color: #33CC33;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartOldItem {
color: #660099;
position: relative; /do not remove-fixes stupid IEbug/
}

.cartBoxTotal {
text-align: left;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

.cartAttribsList {
margin-left: 20.7em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
background-color: #E4FEf5;
border: 1px solid #003D00;
}
.mediaTitle {
float: left;
}
.mediaTypeLink {
float: right;
}

.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
color: #ff0000;
}

.orderHistList {
margin: 1em;
padding: 0.2em 0em;
list-style-type: none;
}

#cartBoxListWrapper ul, #ezPageBoxList ul {
list-style-type: none;
}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
margin: 0;
padding: 0.2em 0em;
}

#cartBoxEmpty, #cartBoxVoucherBalance {
font-weight: bold;
}

.totalBox {
width: 5.5em;
text-align: right;
padding: 0.2em;
}

.lineTitle, .amount {
text-align: right;
padding: 0.2em;
}

.amount {
width: 5.5em;
}

/Image Display/
#productMainImage {float:right;}
{
padding: 3em 3em 3em 3em;
}

.listingProductImage {
margin: 3em 3em 1em 3em;
}

#reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
margin: 0em 1em 1em 0em ;
}

.categoryIcon {}

#cartImage {
margin: 0.5em 1em;
}

/Attributes/
.attribImg {
width: 20%;
margin: 0.3em 0em;
}

.attributesComments {}

/list box contents/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
margin: 1em 0em;
}

.centerBoxWrapper {
height: 1%;
margin: 1.1em 0;
}

h2.centerBoxHeading {
font-size: 1.5em;
color: #155410;
text-align : left;
}

/sideboxes/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a,
h3.rightBoxHeading, h3.rightBoxHeading a {
font-size: 1.0em;
color: #1c8314;
text-align : left;
}
#manufacturersHeading, #currenciesHeading, #musicgenresHeading, #recordcompaniesHeading, #searchHeading, #search-headerHeading {
font-size: 0.9em;
color: #1c8314;
}

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
margin: 0em;
background-image: url(../images/tile_back.gif/);
padding: 0.5em 0.2em;
}

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
margin-top: 1.5em;
}

.sideBoxContent {
background-color: #ffffff;
padding: 0.4em;
}

h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
color: #155410;
text-decoration: underline;
}

.rightBoxHeading a:visited, .leftBoxHeading a:visited, .centerBoxHeading a:visited {
color: #155410;
}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
text-align: center;
}
.productListing-data {
padding:5.5em;
margin-bottom: 2em;
}

/* space & border between listing items */
#indexProductList .productListing-odd td, #indexProductList .productListing-even td
text-align: left;
vertical-align: top;
padding:2.5em;
margin-bottom: 1em;
border-bottom: 3px double #aaccbb;
}

.listingProductImage {
margin: 20em 0em 0em 20em;
}

#bestsellers .wrapper {
margin: 0em 0em 0em 1.5em;
}

#bestsellers ol {
padding: 0;
margin-left: 1.1em;
}

#bestsellers li {
padding: 0;
margin: 0.3em 0em 0.3em 0em;
}

#bannerboxHeading {
background-color: #ffffff;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/* categories box parent and child categories */
A.category-top, A.category-top:visited {
color: #########3d;
text-decoration: none;
}
A.category-links, A.category-links:visited {
color: #########3d;
text-decoration: none;
}
a.category-top, a.category-links {line-height: 2.0em;}

A.category-subs, A.category-products, A.category-subs:visited, A.category-products:visited {
color: #155410;
text-decoration: none;
}
SPAN.category-subs-parent {
font-weight: bold;
}
SPAN.category-subs-selected {
font-weight: bold;
}
/* end categories box links */

/misc/
.back {
float: left;
}

.forward, #shoppingCartDefault #PPECbutton {
float: right;
}

.bold {
font-weight: bold;
}

.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
}

.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;
}

.hiddenField {
display: none;
}
.visibleField {
display: inline;
}

CAPTION {
/display: none;/
}

#myAccountGen li, #myAccountNotify li {
margin: 0;
}

.accountTotalDisplay, .accountTaxDisplay {
width: 20%;
text-align: right;
/vertical-align: top/
}

.accountQuantityDisplay {
width: 10%;
vertical-align: top
}

TR.tableHeading {
background-color: #cacaca;
height: 2em;
}

.productListing-rowheading {
background-color: #3991e6;
background-image: url(../images/tile_back.gif/);
height: 2em;
color: #FFFFFF;
}

.productListing-rowheading a:link {color: #FFFFFF;}

#siteMapList {
width: 90%;
float: right;
}

.ratingRow {
margin: 1em 0em 1.5em 0em;
}

LABEL#textAreaReviews {
font-weight: normal;
margin: 1em 0em;
}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
}
.information {padding: 10px 3px; line-height: 150%;}

#shoppingcartBody #shippingEstimatorContent {
clear: both;
}

.seDisplayedAddressLabel {
background-color:#85C285;
text-align: center;
}
.seDisplayedAddressInfo {
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
#seShipTo {
padding: 0.2em;
}

abody {
margin:0;
padding-top: 10px;
color:#000;
background:#fff;
}
#abody {
width:100%;
margin:0 auto;
background:#fff;
}

#acontent-1 {
float:left;
width:33.33%;
background:#fff;
padding-top: 10px;
}

#acontent-2 {
float:right;
width:66.66%;

}

#acontent-2-1 {
float:left;
width:55%;
padding-bottom: 10px;
margin-top: -20px;
}
#acontent-2-2 {
background:#fff;
float:right;
width:45%;
padding-top: 3px;
}

#afooter {
background:#ff9;
clear:both;
}

.coin-slider { overflow: hidden; position: relative; z-index:2;}
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 680px; padding: 10px; background-color: #000000; color: #FFFFFF; }

.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

#rowOne {width: 100%;}
#rowTwo {width: 100%; padding-top: 4px;}
#rowThree {width: 100%; padding-top: 4px;}
#coin-side {float: right; width: 280px; padding-left: 4px;}

#maincontainer {width: 240px; float: right;}
#topsection {text-align: right; padding-bottom: 4px;}
#contentwrapper{float: left; width: 240px;}
#contentcolumn{float: right; width: 173px; padding-top: 8px; font-size:12px; background: #d8e8f3; height: 39px;}
#leftcolumn{float: left; width: 67px;}
#footer{width: 93%; float: right; text-align: center; padding-top: 6px;}

#footer_wrapper{width: 920px; background: #f1f1f2; margin-left: 10px; border: 1px solid #cccccc; padding: 20px 20px 20px 20px; font-size:1.2em;}
#footer_inside_left{float: left; width: 75%; list-style: none;}
#footer_inside_right{float: right; width: 25%;text-align:left;color: #155410;}
#footer_nav1{float: left; width: 33.33%; list-style: none;}
#footer_nav2{float: right; width: 66.66%;}
#footer_nav2-1{float: left; width: 50%; list-style: none;}
#footer_nav2-2{float: right; width: 50%; list-style: none;}
#footer_bottom{width: 100%; text-align:center;}
#menutitle {margin:0;padding-bottom:.8em;text-align:left;font-size:1.2em;color:#523814;}
.menuTitle {margin:0;padding-bottom:.8em;text-align:left;font-size:1.2em;color:#523814;}
foot_link ul {list-style: none;}

span#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

span#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

/* ######################################################################____

01 MENU BAR
######################################################################____  */

#wrapper_menu {
width: 980px;
margin:0 auto;
display:block;
position: relative;
z-index:9999;
}
#wrapper_menu .menu {
list-style:none;
width:940px;
margin:10px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#wrapper_menu_full {
width: 100%;
margin:0;
display:block;
position: relative;
z-index:9999;
}
#wrapper_menu_full .menu {
list-style:none;
width:940px;
margin:0px auto 0px auto;
height:43px;
padding:0px 20px 0px 20px;
}
.menu li {
float:left;
text-align:center;
position:relative;
margin-right:20px;
margin-top:6px;
border:none;
}
.menu li.fullwidth {
position: static !important;
}
.menu li:hover {
background:#eeeeee;
border:1px solid #444444;
border-bottom:none;
margin-right:19px;
background: -moz-linear-gradient(top, #f2fff0, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f2fff0), to(#EEEEEE));
background: -o-linear-gradient(top, #f2fff0, #EEEEEE);
-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;
}
.menu li.nodrop:hover {
background:#eeeeee;
border:1px solid #444444;
padding: 4px 10px 4px 9px;
background: -moz-linear-gradient(top, #f2fff0, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f2fff0), to(#EEEEEE));
background: -o-linear-gradient(top, #f2fff0, #EEEEEE);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.menu li.nodrop:hover a {
padding: 0px;
}
.menu li a {
color: #EEEEEE;
outline:0;
padding: 5px 10px 3px 10px;
text-decoration:none;
display:block;
text-shadow: 1px 1px 1px #000;
}
.menu li:hover a {
color:#dc58e1;
text-shadow: none;
position:relative;
z-index:11;
border-bottom:1px solid #EEEEEE;
padding: 4px 9px 4px 9px;
}
.menu li:hover div a {
display:inline;
}
.menu li .drop {
padding-right:27px;
background:url("img/drop.png") no-repeat right 13px;
}
.menu li:hover .drop {
padding-right:27px;
background:url("img/drop.png") no-repeat right 12px;
}

/* Right aligned menu item */

.menu .right {
float:right;
right:0;
margin-right:0px;
}
.menu li.right:hover {
margin-right:-1px;
}

/* ######################################################################____

02 DROP DOWN MENU
######################################################################____  */

/* Left & right aligned common styles */

.menu .dropdown_1column,
.menu .dropdown_2columns,
.menu .dropdown_3columns,
.menu .dropdown_4columns,
.menu .dropdown_5columns,
.menu .dropdown_fullwidth {
margin:4px auto;
left:-999em;
position:absolute;
background:#eeeeee;
border:1px solid #444444;
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: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
background: -o-linear-gradient(top, #EEEEEE, #BBBBBB);
}

/* Drop Downs Sizes */

.menu .dropdown_1column {width: 145px;}
.menu .dropdown_2columns {width: 300px;}
.menu .dropdown_3columns {width: 455px;}
.menu .dropdown_4columns {width: 610px;}
.menu .dropdown_5columns {width: 765px;}
.menu .dropdown_fullwidth {
width: 920px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
border-radius:5px;
}
.menu li .first_fullwidth {
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

/* Showing Drop Down on Mouse Hover - Left aligned */

.menu li:hover .dropdown_1column,
.menu li:hover .dropdown_2columns,
.menu li:hover .dropdown_3columns,
.menu li:hover .dropdown_4columns,
.menu li:hover .dropdown_5columns {
left:-1px;
top:25px;
}
.menu li:hover .dropdown_fullwidth {
left:21px;
top:33px;
display: block;
}
#wrapper_menu_full .menu li:hover .dropdown_fullwidth {
left:50%;
margin-left:-470px;
top:32px;
display: block;
}

/* Showing Drop Down on Mouse Hover - Right aligned */

.menu li .align_right {
/* Rounded Corners */
-moz-border-radius: 5px 0px 5px 5px;
-webkit-border-radius: 5px 0px 5px 5px;
border-radius: 5px 0px 5px 5px;
}
.menu li:hover .align_right {
left:auto;
right:-1px;
top:25px;
}
.menu li.right:hover .dropdown_fullwidth {
right:18px;
top:33px;
}

/* Columns Sizes */

.menu .col_1,
.menu .col_2,
.menu .col_3,
.menu .col_4,
.menu .col_5,
.menu .col_6 {
display:inline;
float: left;
position: relative;
margin-left: 10px;
}
.menu .col_1 {width:145px;}
.menu .col_2 {width:300px;}
.menu .col_3 {width:455px;}
.menu .col_4 {width:610px;}
.menu .col_5 {width:765px;}
.menu .col_6 {width:920px;}

/* IMPORTANT */

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown /
.menu .firstcolumn {
margin-left: 0; / Clearing margin & left */
clear: left;
}

/* ######################################################################____

03 CONTENT STYLING
######################################################################____  */

.menu p,
.menu ul,
.menu li,
.menu h2,
.menu h3 {
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
line-height:21px;
text-align:left;
}
.menu p {
font-size:12px;
line-height:18px;
margin:0;
margin-bottom:10px;
text-shadow: 1px 1px 1px #FFFFFF;
}
.menu .strong {
font-weight:bold;
}
.menu .italic {
font-style:italic;
}
.menu h2,
.menu h3 {
text-shadow: 1px 1px 1px #FFFFFF;
border-bottom:1px solid #888888;
margin-top:7px;
}
.menu h2 {
font-weight:400;
font-size:21px;
margin-bottom:18px;
padding-bottom:11px;
}
.menu h3 {
font-weight:600;
font-size:14px;
margin-bottom:14px;
padding-bottom:7px;
}
.menu li:hover div a {
text-decoration:none;
text-shadow:none;
border:none;
padding:0;
}
.menu .pusher { /* Use this pucher if you want to give more vertical spacing between your rows of content */
margin-top:28px;
}

/* Icon paragraphs */

.menu .help,
.menu .favorite,
.menu .mail,
.menu .print {
padding-left:36px;
margin-bottom:18px;
}
.menu .help {background:url("img/help.png") no-repeat 0px 2px;}
.menu .favorite {background:url("img/favorite.png") no-repeat 0px 2px;}
.menu .mail {background:url("img/mail.png") no-repeat 0px 2px;}
.menu .print {background:url("img/print.png") no-repeat 0px 2px;}

/* Images styles */

.menu .imgshadow_dark { /* Better style on dark background /
background:#FFFFFF;
padding:4px;
border:1px solid #333333;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #000000;
-webkit-box-shadow:0px 0px 5px #000000;
box-shadow:0px 0px 5px #000000;
}
.menu .imgshadow_light { / Better style on light background /
background:#FFFFFF;
padding:4px;
border:1px solid #777777;
margin-top:5px;
-moz-box-shadow:0px 0px 5px #666666;
-webkit-box-shadow:0px 0px 5px #666666;
box-shadow:0px 0px 5px #666666;
}
.menu .img_left { / Image sticks to the left /
width:auto;
float:left;
margin:2px 15px 5px 0px;
}
.menu .img_right { / Image sticks to the right */
width:auto;
float:right;
margin:2px 0px 5px 15px;
}

/* Box styles */

.menu li .black_box,
.menu li .dark_grey_box {
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.menu li .black_box {
background-color:#333333;
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}
.menu li .dark_grey_box {
background-color:#555555;
-webkit-box-shadow:inset 0 0 3px #111111;
-moz-box-shadow:inset 0 0 3px #111111;
box-shadow:inset 0 0 3px #111111;
}

/* Standard lists styles */

.menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
.menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:left;
text-align:left;
width:145px;
}
.menu li ul li a {
padding:0;
}
.menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}

/* Greybox lists styles */

.menu li .greybox li {
background:#f2fff0;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:131px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

/* Other lists styles */

.menu li .plus li {
background: url("img/plus.png") left 6px no-repeat;
margin:0px 0px 4px 0px;
padding:0px 0px 0px 21px;
width:109px;
}
.menu li .plus li:hover {
background: url("img/plus.png") left 6px no-repeat;
padding:0px 0px 0px 21px;
margin:0px 0px 4px 0px;
}

/* Social Icons */

.menu li ul.social {
list-style:none;
margin:0;
padding:0;
}
.menu li ul.social li {
padding-top:5px;
margin:0 12px 12px 0;
float:left;
position:relative;
display:inline;
width:32px;
}
.menu li ul.social li img {
border:none;
}
.menu li ul.social li:hover {
padding-top:5px;
margin:-1px 12px 12px 0;
}
.menu li ul.social li span {
display:none;
}

/* 2-Levels Drop Down */

.menu .levels, .menu .levels ul { /* all lists /
padding: 0;
margin: 0;
list-style: none;
}
.menu li:hover .levels a {
display:block;
}
.menu .levels a {
display: block;
width: 10em;
}
.menu .levels a.parent, .menu .levels a.parent:hover {
background: url("img/drop2.png") right center no-repeat;
}
.menu .levels li {
float: left;
width:150px;
}
.menu .levels li ul { / second-level lists */
position: absolute;
border:1px solid #666666;
background:#EEEEEE;
top:-23px;
margin:15px 0px 0px 4px;
padding:6px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
background: -o-linear-gradient(top, #EEEEEE, #BBBBBB);
left: -999em;
}
.menu .levels li ul ul {
top:-23px;
}
.menu .levels li:hover ul ul, .menu .levels li:hover ul ul ul {
left: -999em;
}
.menu .levels li:hover ul, .menu .levels li li:hover ul, .menu .levels li li li:hover ul {
left: 142px;
}

/* ######################################################################____

04 CONTACT FORM
######################################################################____  */

#contact_form label, legend {
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
}
#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, textarea, select {
width: 250px;
padding: 5px;
border:1px solid #0A0A0A;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
font-size:12px;
margin-left: 104px;

}
#contact_form textarea {
resize:none;
}
#contact_form input:focus, textarea:focus, select:focus {
box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;
-moz-box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;
-webkit-box-shadow: rgba(0,0,0, 0.7) 0px 0px 3px;
border:1px solid #333333;
}
#contact_form input:hover, textarea:hover, select:hover {
}
#contact_form .required {
color:#C00;
}
#contact_form .form_buttons {
margin:4px 0 0 80px;
}
#contact_form input.button {
width: 80px;
margin-right:10px;
cursor: pointer;
background-color:#1E1E1E;
border:1px solid #0A0A0A;
color:#cccccc;
padding: 4px 7px 4px 7px;
}
#contact_form input.button:hover {
color:#eeeeee;
background-color:#222222;
border:1px solid #000000;
}
#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:#F2A197 solid 1px;
color:#992213;
}
#contact_form .sent {
background:#E1F8CB;
border:#C6D880 solid 1px;
color:#37620d;
}

mydogisfat:

/Shopping Cart Display/
The next time you're going to post the contents of (or a fragment of) a file, it's good to use the CODE tags around those contents to reduce the amount of scrolling that readers of your post must use to view (or not view) those contents. The # in the toolbar you see when you're writing the post inserts the CODE start/end tags and you just need to paste your file's contents between the two.

haha!! That's how to do it!! Thank you for the instructions and sorry about taking up all the space...

hey brandon :)

got a few questions, i understand its something to do with the stylesheet.css but ot sure where ;P

first off how can i change the writing at the top of the page in green? the 'shop statement' part?

wen u click a sub cat and it shows the page with all products on it, theres a bar across the top in a baby blue how am i alble to change this?

Also, the main menu bar which is on every screen, whats the code to handle colours/gradients?

thanks mate :)

PS: anyone that needs templates designed this is ur dude, quick and straight to the point

Hi Brandon,
Any luck with looking at my stylesheet? I'm thinking of backtracking my changes and see if it will fix the problem with IE. Unless you know exactly where I went wrong :lookaroun
BUT methinks the site looks GREAT on Firefox, Chrome and my ipad!!
Tremendous thanks to you!

PeazzAndycresswell:

first off how can i change the writing at the top of the page in green? the 'shop statement' part?

On the stylesheet there are 2 parts

#tagline {
	color:#9dc236;
	font-size: .8em;
	text-align : center;
	vertical-align: middle;
        float:right;
        width:49%;
	}

#tagline2 {
	color:#0072bc;
	font-size: .8em;
	text-align : center;
	vertical-align: middle;
        float:left;
        width:49%;
	}

tagline2 is Instant Delivery XBOX live, PSN and WOW codes and
tagline is the Delivered to your inbox 24/7....

Just change the color:# to the color you

PeazzAndycresswell:

wen u click a sub cat and it shows the page with all products on it, theres a bar across the top in a baby blue how am i alble to change this?

There are 2 options for this, on the demo site I have column display turned on so instead of having them listed in rows they are in columns or boxes. This removes the header bar

To turn that on you can go into the admin, under configuration > Product Listing and change Product Listing - Layout Style to columns... If that is not there then you did not install the SQL for column display that came with the template.

If you want to keep it how it is and just change the color of the top header you can edit it on your stylesheet.css it is found in:

.productListing-rowheading {
	background-color: #3991e6;
	height: 2em;
	color: #FFFFFF;
	}

The background-color: #3991e6; is the color of the bar
The color: #FFFFFF; changes the color of the text in the first section "Product Image"
The Item Name and Price color are the changed in

.productListing-rowheading a:link {
  color:#FFFFFF;

PeazzAndycresswell:

Also, the main menu bar which is on every screen, whats the code to handle colours/gradients?

The drop menu colors are changed on the stylesheet.css as well

/*  ######################################################################____

	05 COLORS
    ######################################################################____  */


.menu_blue {
	background: #014464;
	background: -moz-linear-gradient(top, #0272a7, #013953);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
	background: -o-linear-gradient(top, #0272a7, #013953);
}
#wrapper_menu .menu_blue {
	border: 1px solid #015b86;
	border-top: 1px solid #029feb;
}
#wrapper_menu_full .menu_blue {
	border-bottom: 1px solid #015b86;
}
.menu_blue li:hover div a {
	color:#015b86;
}
.menu_blue li:hover div a:hover {
	color:#029feb;
}
.menu_blue li ul li a:hover {
	color:#029feb;
}

the first section is going to be the gradient colors on the menu.

.menu_blue {
background: #014464; ** FOR NON SUPPORTED BROWSERS
background: -moz-linear-gradient(top, #0272a7, #013953); FOR MOZILLA BROWSERS **
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953)); ** WEBKIT BROWSERS (CHROME AND SAFARRI)
background: -o-linear-gradient(top, #0272a7, #013953); OPERA BROWSERS **

the first color is the top color and the 2nd color on each one is the color it turns into. You will want to put the same first and second color on each one as each line is the same thing used for different browsers.

PeazzAndycresswell:

PS: anyone that needs templates designed this is ur dude, quick and straight to the point

Thanks, means a lot! :-)

mydogisfat:

Hi Brandon,
Any luck with looking at my stylesheet? I'm thinking of backtracking my changes and see if it will fix the problem with IE. Unless you know exactly where I went wrong :lookaroun
BUT methinks the site looks GREAT on Firefox, Chrome and my ipad!!
Tremendous thanks to you!

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 mate

thanks for that got the gradient looking nice now..

also around the edge of the menu, one the corners there are like yellow corners? is there a way i can change the yellow to white to give it the rounded effecT?

and also mate how do i change the background colour of the cart @ the top of the page :)?

PeazzAndycresswell:

and also mate how do i change the background colour of the cart @ the top of the page :)?

there is a left image, and a right that has the text

for the right side you can change the color here on your stylesheet.css

#contentcolumn {
  background-color:#D8E8F3;
  background-position:initial initial;
  background-repeat:initial initial;
  float:right;
  font-size:12px;
  height:39px;
  padding-top:8px;
  width:173px;
}

Then the left side that has the cart is a image you can download it by right clicking it or I also attached it to the thread then you just need to change this part to the link to the image in your header.php

<div id="leftcolumn">
  <img src="direct link to image" class="cart-image" alt="the shopping cart" />
</div>

I will look at the yellow lines when I get home in a few hours. Right now it is not showing on any of the browsers that I have at my office

brandonturpin:

there is a left image, and a right that has the text

for the right side you can change the color here on your stylesheet.css

#contentcolumn {
background-color:#D8E8F3;
background-position:initial initial;
background-repeat:initial initial;
float:right;
font-size:12px;
height:39px;
padding-top:8px;
width:173px;
}

> 
> Then the left side that has the cart is a image you can download it by right clicking it or I also attached it to the thread then you just need to change this part to the link to the image in your header.php 
> 
> ```
<div id="leftcolumn">
  <img src="direct link to image" class="cart-image" alt="the shopping cart" />
</div>

I will look at the yellow lines when I get home in a few hours. Right now it is not showing on any of the browsers that I have at my office

if you take a print screen of my website https://www.consolecodeslab.com and zoom in to the corners of the menu, you will see what i mean, maybe i just see it before i know its there i dont know :)

Also, im pretty much finished now few ez pages to set up for seo purposes, what do you think mate? is it to much? does it look professional?

Yellow around header menu? If I may jump in here. I cannot bring up either of your sites now for some reason. However, I've long noticed on Abbiamo that if I place my IE9 in "compatability view"* that a yellow background appears; usually like a yellow space above the menu nearly as tall as the menu itself. No, it doesn't look good and I hope that most customers would not be in compatability view...but who knows?

This is not unique to Abbiamo. I recall that the Apple Zen template with its drop-down menu had a similar issue.

Or maybe this isn't what you're talking about....

*IE9 menu bar/tools/compatability view

SPH:

Yellow around header menu? If I may jump in here. I cannot bring up either of your sites now for some reason. However, I've long noticed on Abbiamo that if I place my IE9 in "compatability view"* that a yellow background appears; usually like a yellow space above the menu nearly as tall as the menu itself. No, it doesn't look good and I hope that most customers would not be in compatability view...but who knows?

This is not unique to Abbiamo. I recall that the Apple Zen template with its drop-down menu had a similar issue.

Or maybe this isn't what you're talking about....

*IE9 menu bar/tools/compatability view

i just opened internet explorer, and put into compat mode and see what you mean i would love to know what this is , as this is the color im seeing on the corners :)

website in non compat mode looks very 2d no gradients but i know this is a ie issue? check it out in chrome looks awesome imo

PeazzAndycresswell:

i just opened internet explorer, and put into compat mode and see what you mean i would love to know what this is , as this is the color im seeing on the corners :)

website in non compat mode looks very 2d no gradients but i know this is a ie issue? check it out in chrome looks awesome imo

Ahhh!! I see what you are talking about, its hard to see if its not in compatibility mode in IE! I believe SPH mentioned it before but when I looked I did not see it, after looking closer I found the issue that will solve the corner in regular mode and in compatibility mode IE.

On the stylesheet you need to change this line

#afooter {
    background:#ff9;
    clear:both;
}

to

#afooter {
    background:#fff;
    clear:both;
}

That should do it, I have a few updates to release on this template, hope to compile them and get it updated this weekend, I will definitely add this in there! Thanks!

hey buddy

ok so we have fixxed the problem of yellow corners, but i noticed in compat mode in ie9, the search bar goes out of position, again i believe this to be a css issue somewhere? but i dont know what im looking for yet :P

Yes, yellow is gone. But I think that the strange space is still there; it's just now white instead of yellow. When change back and forth from compatability view, the page jumps and the menu bar goes slightly up and down in relation to other text in header. May explain why search button moves.

But much better than the yellow. Thanks.