Customizing ProductCart - modify the css in Related Items

Print Page | Close Window

modify the css in Related Items

Printed From: ProductCart E-Commerce Solutions
Category: ProductCart
Forum Name: Customizing ProductCart
Forum Description: Exchange messages with other users that are customizing ProductCart.
URL: https://forum.productcart.com/forum_posts.asp?TID=3319
Printed Date: 21-July-2025 at 4:48am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: modify the css in Related Items

Posted By: BettyH
Subject: modify the css in Related Items
Date Posted: 30-December-2009 at 5:13pm

I am working on a website, product page here: http://www.snapbac.com/store/pc/Mens-Leg-Sleeve-2p9.htm - http://www.snapbac.com/store/pc/Mens-Leg-Sleeve-2p9.htm

Greg Dinger has done a great job with the tabs display, however, if you look at the related items tab, you will see that the links are very hard to read. I need to change the color of these. Can anyone direct me to the proper file/css style for this?

Replies:

Posted By: Hamish
Date Posted: 30-December-2009 at 5:32pm

Hi,
It's set in CSS SpryTabbedPanels-PD.css See color in


.TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 0.9em;
    font-weight: bold;
    color: #666666;
}

-------------
Editing ProductCart Code?

See http://wiki.earlyimpact.com/developers/editcode" rel="nofollow - WIKI Guidelines for Editing ProductCart's ASP Source Code

Posted By: BettyH
Date Posted: 30-December-2009 at 5:39pm

Tried that... well actually, that changes the color of the text on the tab. I need to change the color of the link in the content on the "related items" tab.

I tried this:

.TabbedPanelsContent {
padding: 4px;
}
.TabbedPanelsContent a {
color:#666666;
}

But that didn't work either. I also noticed that the <p> style is pcShowProductName . I went into the pcStorefront.css and modified this in a similiar fashion, but that has not solved it either.

Posted By: Hamish
Date Posted: 30-December-2009 at 5:56pm

Ah, Sorry, I though that was the one you wanted. At the moment this is controlled by the site wide setting in pcStoreFront.css :


/* The following two statements assign a style to links storewide. They are sometimes
       overwritten by other styles that target specific links. */
    #pcMain a:link {
    color: #CCCCCC;
    }
    
    #pcMain a:visited {
        color: #d3d2d2;
    }

If you wish to add one specific to the tabs I suggest adding to SpryTabbedPanels-PD.css


#TabbedPanels1 a:link {
        color: red;
}

Of course with whatever color you prefer.

-------------
Editing ProductCart Code?

See http://wiki.earlyimpact.com/developers/editcode" rel="nofollow - WIKI Guidelines for Editing ProductCart's ASP Source Code

Posted By: BettyH
Date Posted: 30-December-2009 at 6:03pm

Just so you know.... I found the answer. in the pcStorefron.css I had to create the following style:

#pcMain .pcShowProductName a {
color:#333333;
}

However, you may be correct in that it would be better to set it to a specific tab in order to have it not affect other parts of the store adversly.

Thanks for your help!