TulipTools Internet Business Owners and Online Sellers Community

TulipTools Internet Business Owners and Online Sellers Community > Graphics, Ajax, HTML, Multimedia, Web Design > Graphics, Ajax, HTML, Multimedia, Web Design > HTML, CSS, DHTML, Javascript, AJAX, and Coding > CSS > Need a Quick CSS Fix...Pleaassseeee
Full Version: Need a Quick CSS Fix...Pleaassseeee
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

RiverRat

01-30-2007, 02:32 AM
Okay I'm redoing my Zen Cart. 
I really did try going to the w3school thingy, but my tired ADD brain took one look and shut down. Tard

So I'm hoping someone here can just send me directly where I need to go to fix this:

On my navigation bar and my sideboxes my 'hover' color is white.  They're kinda dark colored and need this.  BUT  I don't want the 'hover' in my centerbox to be white. 

Is it possible to change this?  If so, what do I need to add to my stylesheet?

Here's a link 'cause I know it's easier to offer suggestions if you can see the site: My Website

Any and all help will be gratefully accepted and appreciated!!  Notworthy

Edited to add:  If you click on any of the links in the centerbox, you will end up at my live/old site.  I haven't changed the domain over yet for this 'new and improved' site.

thentavius

01-30-2007, 03:06 AM
I see what you're talking about.

I think you have to use a different tag to define the links in the center part of the page, and then define their effects.

Let me mess around a bit.

thentavius

01-30-2007, 03:09 AM
Can you post your CSS file?

bargainbloodhound

01-30-2007, 03:09 AM
(example from 1.37 classic template)


Code:
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    color: #FF0000;
    }

change to:

Code:
#navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    color: #FF0000;
    }

a:hover {
    color: #9629DF;
    }

EDIT: you're under no obligation to keep the purple hover color :twistedevil:

RiverRat

01-30-2007, 03:14 AM
[quote author=thentavius link=topic=6888.msg41623#msg41623 date=1170126562]
Can you post your CSS file?
[/quote]


Don't laugh...too hard.  It may be a mess.  I'm still learning this CSS stuff.  Smile

Code:
/**
* Main CSS Stylesheet
*
* @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: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $
*/

body {
    margin: 0 auto;
                padding: 0;
      font-family: verdana,tahoma,arial,sans-serif;
    font-size: 67.8%;
    color: #000000;
    background-color: #94947b;
        }

a img {border: none; }

.greeting {
        font-size: 1.2em;
        }

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

a:visited {
    color: #000000;
    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: #ffffff;
    }

a:active {
    color: #94947b;
    }

h1 {
    font-size: 1.5em;
    }

h2 {
    font-size: 1.4em;
    }

h3 {
    font-size: 1.3em;
    }

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

.biggerText {
    font-size: 1.0em;
    }

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

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

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

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

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

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

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

LABEL, h4.optionName {
    line-height: 1em;
    padding: 0.1em;
    }

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

#logo {
    text-align: center;
    }

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

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

#logoWrapper{
       background-image: url(../images/header_bg.jpg);
       background-repeat: repeat-x;
       background-color: #cecebd;
       height:152px;
       }
    
#headerWrapper, #contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    margin: 0em;
    padding: 0em;
    }

.centerBoxWrapper, .tabTable {
    padding: 0px;
    height: 1%; /*do not remove- IEhack*/
                background-color: #94947b;
    margin-bottom: 1em;
    }

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

#tagline {
display: none;
    }

#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: 0.5em;
                padding: 0em;
    background-color: #494a44;
                background: url(../images/ratwood.gif) top center repeat;
    border-top: 2px solid #494a44;
    border-left: 1px solid #494a44;
    border-right: 2px solid #494a44;
    font-weight: bold;
    color: #000000;
    height: 1%;
    }

#navMain ul, #navSupp ul, #navCatTabs ul  {
    margin: 0;
    padding:  0.5em 0em;
    list-style-type: none;
    text-align: left;
                font-size: 1.2em;
    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.5;
    color: #000000;
    }

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

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

#navMainSearch, .navMainSearch {
    float: right;
        margin: 0.5em;
    }

#navBreadCrumb {
    background-color: #cecebd;
    }

#navEZPagesTop {
    background-color: #cecebd;
    }

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

#navColumnOne {}
#navColumnTwo {}

/*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.9em;
    }

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

/*Shopping Cart Display*/
#cartAdd {
    float: right;
    text-align: center;
    margin: 1em;
                margin-right: 4em;
                background-color: #a5a58c;
    border: 1px solid #494a44;
    padding: 0.5em;
    }

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

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

#cartSubTotal {
    border-top: 1px solid #494a44;
    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: #606000;
    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*/

h3.leftBoxHeading, h3.rightBoxHeading, h2.centerBoxHeading {
        font-size: 1.2em;
        color: #000000;
    }

h3.leftBoxHeading a, h3.rightBoxHeading a, h2.centerBoxHeading a {
        font-size: 1.2em;
        color: #000000;
    }

.leftBoxHeading, .rightBoxHeading, .centerBoxHeading {
    margin: 0.5em;
                background: url(../images/ratwood.gif) top center repeat-x;
    border-top: 2px solid #494a44;
    border-bottom: 1px solid #494a44;
    border-left: 1px solid #494a44;
    border-right: 2px solid #494a44;
    padding: 0.5em 0.3em;
    }

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

.sideBoxContent {
                color: #cecebd;
    padding: 0.1em;
    }
    
h3.leftBoxHeading a:hover, h3.rightBoxHeading a:hover {
    color: #cecebd;
    text-decoration: none;
    }

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

#upProductsHeading {
    text-align: left;
    }

#upDateHeading {
    text-align: right;
    }

.productListing-data img {
       padding:8px;
       }

.productListing-even {
       background-color:#f0f0f0;
       }

.productListing-odd {
       background-color:#fafafa;
       }

.productListing-heading {
       border-bottom: 2px solid #ffffff;
       }

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

.forward {
    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;
    }

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

.hiddenField {
       display: none;
       }

.visibleField {
      display: inline;
      }
#ccacceptContent {
        text-align:center;
        padding:3px 0px;
        line-height:1.5em;
        background-color: #a5a58c;
        border-top: 1px solid #494a44;
        border-bottom: 1px solid #494a44;
        border-left: 1px solid #494a44;
        border-right: 2px solid #494a44;
       }

RiverRat

01-30-2007, 03:15 AM
Wow you're quick BBH! 

You must have posted while I was trying to figure out how to put my code in.  LOL

I'll try that and see if that works.  Who knows, the purple may look good!  Icon_biggrin

thentavius

01-30-2007, 03:27 AM
LOL! BBH is quick.

RiverRat

01-30-2007, 04:03 PM
I now have a white hover on the navigation bar and a beautiful purple hover in the centerbox.  Yeah!  Icon_biggrin
Unfortunately, I also have purple hover in my sideboxes now.  Sad10

Can I pick your brain again?
I really apologize for being so dense on this.
Normally, I can experiment and eventually get it right, but I've apparently got 'brain lock' or something on this one.  Big Grin

I only had to go over my stylesheet three times last night to find the other line of code. 
As my Grandma always used to say, "If it'd been a snake it woulda bit me!" and I'm sure this is another one of those plain as day changes I'm just not seeing.  LOL

I think I need to get a copy of "CSS for Dummies".  Tard

RiverRat

01-30-2007, 07:20 PM
WooHoo!!!  I found it!    Occasion18

After three cups of coffee and more cigarettes than I'd care to count, I found the fix!

I found this in the BetterCategoriesEZInfo.css file:

Code:
.betterCategories a:hover, .betterCategories a:active,
.betterDocuments a:hover, .betterDocuments a:active,
.betterEzpages a:hover, .betterEzpages a:active,
.betterInformation a:hover, .betterInformation a:active,
.betterMoreinformation a:hover, .betterMoreinformation a:active,
.betterBestsellers a:hover, .betterBestsellers a:active {
                 background-color: #494a44;
}

And changed it to this:

Code:
.betterCategories a:hover, .betterCategories a:active,
.betterDocuments a:hover, .betterDocuments a:active,
.betterEzpages a:hover, .betterEzpages a:active,
.betterInformation a:hover, .betterInformation a:active,
.betterMoreinformation a:hover, .betterMoreinformation a:active,
.betterBestsellers a:hover, .betterBestsellers a:active {
                   color: #ffffff;
                   background-color: #494a44;
}


Works great now. 
Now lets go see what else I can mess up.  Toothy9

bargainbloodhound

01-30-2007, 09:17 PM
Quote:I think I need to get a copy of "CSS for Dummies". 

I know I need to get a copy of "The 12 Step Program to Forcing Yourself to Use CSS: How to Break Your Addiction to 1998 Coding Methods".  View source on this page and you'll see why.  :-[ 
TulipTools Internet Business Owners and Online Sellers Community > Graphics, Ajax, HTML, Multimedia, Web Design > Graphics, Ajax, HTML, Multimedia, Web Design > HTML, CSS, DHTML, Javascript, AJAX, and Coding > CSS > Need a Quick CSS Fix...Pleaassseeee