Some Questions - Hovers and Others

[theveed]

Hi all,

Newbie here.

I'm currently trying to customize my online shop to somehow match our portal's looks (www.bigberts.org) / (www.bigberts.org/shop).

I've created a new folder for the template and made some changes to the CSS and main logo so far and somehow I have the ff: probs...

1) When you hover over a text link, it moves the whole page a little. It's quite annoying when you hover in and out all of the links, the hover text seems to be much smaller and the page readjusts to it. How and where can I fix this?

2) Zones - How can I customize/change the zones in the admin panel? I'm based in the Philippines and none of the hundreds of zones on the list applies to me.

3) Our courier of choice has 2 different shipping methods depending on size/weight. If people order something large in measurement and/or heavy (gallon containers), they would need to use the "box" services. While if they simply order bottled products, they would use the "pouch" service offered by our courier. How can the system determine what kind of shipping to use?

In addition, our courier charges a certain % tax based on declared value then charges for VAT. For example:

Item A is 500 bucks, it'll be using the "pouch" shipping method and it costs 100 bucks. The courier then charges 1% additional of the declared value (500 x 1.01 = 505) and charges 10% additional for VAT (505 + 100 x 1.1 = 665.50).

Can Zen do such calculations?

4) Lastly, how/where are the background colors for the little boxes on the left and right column changed in the CSS? they're all white and if I search my css, there isn't a line of background that equals to #FFFFFF.

Thanks a million in advance.

[kuroi]

Hi theveed.

This is too many diverse questions for one thread. I suspect that you're not getting an answer because very people would feel comfortable trying to answer all these diverse questions in one go. I'll try all but the shipping question, and hope that somebody else jumps in on that one. Please don't feel inhibited from asking questions, but next time, I recommend separate posts for unrelated questions.

1) When you hover over a text link, it moves the whole page a little. It's quite annoying when you hover in and out all of the links, the hover text seems to be much smaller and the page readjusts to it. How and where can I fix this?

I could not see this in either Internet Explorer or Firefox.

2) Zones - How can I customize/change the zones in the admin panel? I'm based in the Philippines and none of the hundreds of zones on the list applies to me.

You will probably need to define your own zones by going to Admin > Locations/Taxes > Zones Definitions.

4) Lastly, how/where are the background colors for the little boxes on the left and right column changed in the CSS? they're all white and if I search my css, there isn't a line of background that equals to #FFFFFF.

No but there are a number that have color #ffffff. Including this one, which is the one you need to change

.sideBoxContent {

background-color: #ffffff;
padding: 0.4em;

}

[theveed]

Hi and thanks for replying...

I guess I got accustomed to car forums where people are expected to post multiple questions in one thread hehe. I guess they are too unrelated and deserves to be split. Thanks for the heads-up.

1) I removed the hover attribute so I no longer have hovers in my site since I can't seem to resolve this last week.
2) Zones - Thanks... is there a way to delete all the other ones without going through all of them one-by-one? Although it seems unnecessary for me to do so... Never mind
3) Got it...

THANK YOU SO MUCH!

[theveed]

Sorry for another follow-up.

My sidebox category box is slightly lower than the center column. How do I align this?

My right boxes are a little off as well...

/**
* Main CSS Stylesheet
*
* @package templateSystem
* @copyright Copyright 2003-2005 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 3215 2006-03-20 06:05:55Z birdbrain $
*/

body {
margin: 0;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 10px;
color: #ffffff;
background-color: #000000;
}

a img {border: none; }

a:link, #navEZPagesTOC {
color: #FFDB31;
font-size: 10px;
text-decoration: none;
}

a:visited {
color: #FFDB31;
font-size: 10px;
text-decoration: none;
}

/a:hover, #navEZPagesTOC a:hover, #navMain a:hover, #navSupp a:hover, #navCatTabs a:hover {
font-family: arial, verdana, helvetica, sans-serif;
color: #FFFFFF;
font-size: 10px;
text-decoration: bold;
}
/
a:active {
font-family: arial, verdana, helvetica, sans-serif;
color: #FFFFFF;
}

h1 {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 13px;
}

h2 {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
}

h3 {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
}

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

.biggerText {
font-size: 12px;
}

h1, h2, h3, h4, h5, h6 {
font-family: arial, verdana, helvetica, sans-serif;
margin: 0.3em;
}

CODE {
font-family: arial, verdana, helvetica, sans-serif;
font-size: 8px;
}

FORM, SELECT, INPUT {
display: inline;
font-size: 10px;
margin: 0.1em;
}

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

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

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

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

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

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

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

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

LABEL.inputLabelPayment {
width: 15em;
float: left;
}

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

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 #000000;
}

.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: #000000;
text-align: left;
width: 100%;
vertical-align: top;
}

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

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
}

#tagline {
color:#ffffff;
font-size: 2em;
text-align : center;
vertical-align: middle;
}

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

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

.wrapperAttribsOptions {
margin: 0.3em 0em;
}

/*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: #808080;
font-weight: bold;
color: #ffffff;
height: 1%;
width: 100%;
}

#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;
white-space: nowrap;
}

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

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

#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;
}

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
margin: 0.5em;
}

#navBreadCrumb {
background-color: #6a6a6a;
}

#navEZPagesTop {
background-color: #808080;
border: 1px solid #a6a6a6;
}

#navBreadCrumb, #navEZPagesTop {
font-size: 0.95em;
font-weight: bold;
margin: 0em;
padding: 0.5em;
}

#navColumnOne {
background-color: #404040;
}

#navColumnTwo {
background-color: #808080;
}

/*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, #bannerFive, #bannerSix {
padding: 0.8em;
}

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

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

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

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

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

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

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay {
padding: 0.5em 0em;
}

.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: right;
font-weight: bold;
}

.cartRemoveItemDisplay {
width: 3.5em;
}

#cartAttribsList {
margin-left: 1em;
}

#mediaManager {
width: 50%;
margin: 0.2em;
padding: 0.5em;
}
.normalprice, .productSpecialPriceSale {
text-decoration: line-through;
}

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

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

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

.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, #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;
}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
font-size: 1em;
color: #ffffff;
background-color: #6b6b6b;
}

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #6b6b6b;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
border: 1px solid #404040;
margin-top: 1.5em;
}

.sideBoxContent {
background-color: #404040;
padding: 0.1em;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
background-color: #6b6b6b;
font-size: 1.1em;
color: #FFFF00;
}

.rightBoxHeading {
margin: 0em;
background-color: #6b6b6b;
padding: 0.2em 0em;
}

h3.leftBoxHeading a:hover {
color: #FFffff;
text-decoration: none;
}

h3.rightBoxHeading a:hover {
color: #FFfff;
text-decoration: none;
}

.rightBoxContent {
background-color: #6b6b6b;
margin-bottom: 1em;
}

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

#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: #7d7d7d;
}

#upProductsHeading {
text-align: left;
}

#upDateHeading {
text-align: right;
}

/*misc*/
.back {
float: left;
}

.forward {
float: right;
}

.bold {
font-weight: bold;
}

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

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

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;
}

#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 {
background-color: #000000;
}

[kuroi]

Please, there is no need to post your stylesheet. I'm never going to trawl through a simple 500+ page listing (happily those days are history), a simple link to your site let's me investigate the styles in context which is both easier and a lot more fun .

Firstly to your left column. There are two problems here. The margin at the top throwing it out of alignment with the center column, but also a 2 pixel overlap with the center column. These are both consequences of the same piece of styling. I recommend finding

.leftBoxContainer {

border: 1px solid #404040;
margin-top: 1.5em;

}

and, sicne this design doesn't need a border but you do still need space between the boxes, changing it to

.leftBoxContainer {

margin-bottom: 1.5em;

}

Now your right column. The CSS here is all a bit jumbled up. This is the bit that I am talking about

h3.leftBoxHeading, h3.leftBoxHeading a {
font-size: 1em;
color: #ffffff;
background-color: #6b6b6b;
}

.leftBoxHeading, .centerBoxHeading {
margin: 0em;
background-color: #6b6b6b;
padding: 0.5em 0.2em;
}

.leftBoxContainer {
border: 1px solid #404040;
margin-top: 1.5em;
}

.sideBoxContent {
background-color: #404040;
padding: 0.1em;
}

h3.rightBoxHeading, h3.rightBoxHeading a {
background-color: #6b6b6b;
font-size: 1.1em;
color: #FFFF00;
}

.rightBoxHeading {
margin: 0em;
background-color: #6b6b6b;
padding: 0.2em 0em;
}

h3.leftBoxHeading a:hover {
color: #FFffff;
text-decoration: none;
}

h3.rightBoxHeading a:hover {
color: #FFfff;
text-decoration: none;
}

.rightBoxContent {
background-color: #6b6b6b;
margin-bottom: 1em;
}

In order to really see what is going on, I would recommend tidying it into a small number of styles that are applied to both your right and left boxes. For example here's some example styling (based on the future Zen template) that balances left and right columns and the varying stuff that can appear in headers. I'd recommend extending your left column styles to your right column in a similar way.

h3.leftBoxHeading, h3.leftBoxHeading a, h3.leftBoxHeading label, h3.rightBoxHeading, h3.rightBoxHeading a, h3.rightBoxHeading label {
font-size: 1em;
color: #ffffff;
}

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

.leftBoxHeading, .rightBoxHeading {
margin: 0em;
padding: 0.5em 0.2em;
}

.centerBoxHeading {
margin: 0em;
padding: 0.5em 0.2em;
}

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

.sideBoxContent {
padding: 0.4em;
}

It won't necessarily solve your problem, though it might, but it would certainly make it easier to work out what's going on.

Finally, Zones. I don't know of any way easy way within Zen Cart to delete multiple zones. Persionally, I'd write a SQL script to apply directly to the zones table in my database to delete zones for countries in which I wasn't interested. Alternatively browsing the table with phpMyAdmin would offer you the easy option to just keep hitting the delete icon for those zones you don't want.

[theveed]

Holy lord, I'm so sorry, I wanted to post just a part of the CSS but pasted the whole thing, now I can't edit it... I hope mods can delete the css I posted... I'm very sorry. (Should've previewed before posting grrr)

Thanks for your help Kuroi, I'll fix it right up....

Argghh, so embarassing for screwing up the post...

site is bigberts.org/shop by the way...

i want to incorporate images for each category eventually... much to learn... hehe