CSS Help for Bootstrap

[RickSilver]

I have to make some cosmetic changes in a site using BOOTSTRAP_RESPONSIVE and I'm not getting very far. I've tried every class and id that makes sense in custom.css and even tried inline styles but I can't change some items. Specifically, I need to change the color of the links in the store header (both top right and bottom left), the search glyph to an image, or at least change the color green to yellow, and change the background colors for Categories on the home page. Lastly, I need to replace the Add to Cart buttons with an image. Any help is much appreciated!!

[Katie]

Hi,

If you install an add-on to Firefox (eg. Inspector or Firebug), then you can easily make changes to the CSS. Here is a link to the documentation that shows you how to modify the CSS for the bootstrap theme.

http://help.ablecommerce.com/mergedProj ... _theme.htm

Scroll down to "OPTION 3: USING A CUSTOM STYLESHEET TO OVER-RIDE STYLE.LESS"

You can skip over Steps 1) to 3) if you are using Gold R11 or higher. Review the section on "Add Your Custom CSS".

The benefit to using the custom.css file is that you will be able to easily upgrade your store without having to merge any changes going forward. It is not uncommon for us the fix display issues in the stock css files, so keeping your custom over-rides in a separate files makes it so much easier.

Hope this helps.

Katie

[RickSilver]

Thanks! I haven't tried it yet but it looks like exactly what I need to get going.

[RickSilver]

I was able to take a look at your link and followed the example to change the top link. It is still not changing. I know my custom.css is working because I did get changing the navbar background color working. But just adding the css for "a" did nothing to change the links.

[nadeem]

To change the top link color, add the following style to your theme's custom.css file:

Code: Select all

#storeHeader .shortcuts a, #headerNavigation .navigation a {
    color:#0026ff;
}

If you want to apply color separately on top and bottom links use the following styles individually:

Code: Select all

#storeHeader .shortcuts a {
    color:#0026ff;
}

and

Code: Select all

 #headerNavigation .navigation a {
    color:#00ff90;
}