Page 1 of 1
CSS Help for Bootstrap
Posted: Mon Jul 11, 2016 4:39 pm
by 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!!
Re: CSS Help for Bootstrap
Posted: Tue Jul 12, 2016 3:05 am
by 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
Re: CSS Help for Bootstrap
Posted: Tue Jul 12, 2016 5:47 pm
by RickSilver
Thanks! I haven't tried it yet but it looks like exactly what I need to get going.

Re: CSS Help for Bootstrap
Posted: Sat Jul 16, 2016 10:52 am
by RickSilver
Re: CSS Help for Bootstrap
Posted: Tue Jul 19, 2016 2:48 am
by 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;
}