modify the css in Related Items

Author

Message

Topic Search

Topic Options

BettyH

Newbie

Joined: 17-December-2009
Location: Arizona
Status: Offline
Points: 0

Post Options

Post Reply

Quote BettyH

Report Post

Thanks(0)

Quote

Topic: modify the css in Related Items
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

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?

Hamish

Admin Group

Joined: 12-October-2006
Location: United Kingdom
Status: Offline
Points: 56

Post Options

Post Reply

Quote Hamish

Report Post

Thanks(0)

Quote

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 WIKI Guidelines for Editing ProductCart's ASP Source Code

BettyH

Newbie

Joined: 17-December-2009
Location: Arizona
Status: Offline
Points: 0

Post Options

Post Reply

Quote BettyH

Report Post

Thanks(0)

Quote

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.

Hamish

Admin Group

Joined: 12-October-2006
Location: United Kingdom
Status: Offline
Points: 56

Post Options

Post Reply

Quote Hamish

Report Post

Thanks(0)

Quote

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 WIKI Guidelines for Editing ProductCart's ASP Source Code

BettyH

Newbie

Joined: 17-December-2009
Location: Arizona
Status: Offline
Points: 0

Post Options

Post Reply

Quote BettyH

Report Post

Thanks(0)

Quote

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!