Is there a basic Black Background / White font Skin / Theme available somewhere for Able Commerce 9?

Hi Dennis,

You will be hard-pressed to find any commercial themes for Ablecommerce, not sure why, however it's not that hard to create your own. You could try the color picker as Mike suggests, however modifying the custom.css directly gives you more power and better control. It also lets you take advantage of the MVC framework.

#1. Do not use the sample theme, create your own theme by making a copy of sample.

#2. Edit the custom.css in your new theme to override anything in the sample theme custom.css file.

Here's an example of the background that I am using, which is a linear-gradient background.

html, body, #page-wrapper {
background-image: none !important;
background-color: f6f6f6 !important;
background-image: linear-gradient(90deg, #f6f6f6 0%, #bdbdbd 91%) !important;
}

I have also modify the scrollbars in all browsers to a specific color to match my background. Unless you want all your font to be white, which would mean making an entry to the body css, example:

body {
color: white;
}

I would be more specific and just list the css for h1 ... h6, p, as white, or any other color that you wish for more control.

I hope this helps

Edited by user Monday, April 12, 2021 2:55:30 PM(UTC)  | Reason: Not specified

You are welcome Mike, thank you for continuing to fix bugs and continuing to add new features to AbleCommerce. I’m about to launch my first site, hopefully one of many.

As an update to this thread, I was actually able to use both of these methods to achieve a black background look for my site. I used the GUI method that Mike recommended in order to pinpoint a lot of the elements (mainly fonts) that needed color changed and the CSS method for the background. I obviously created a coy of the Sample theme and modified that copy. Here's the custom CSS I used:

So here's where I'm at on the custom black background theme:

http://dev.drumcityguitarland.com/

I have a small handful of elements left that I need to identify and change their color properties:

1. The pagination controls at the bottom of the category / product grid page
2. The quantity controller on the full size view product pages ("+" and "-" button)
3. The "Quick View" mouseover which shows when mousing over products in the category view
4. The tabs on the full size view product page (Description, Customer Reviews & Also In Category)

Using Firefox as you recommended, Ray, I believe I pinpointed the pagination I need to address, which is ul.pagination. How would I go about assigning a style to this element? In the css file for the skin?

Aside from this, I was surprised at how easy this effort was!

Thanks again for all your help and shove in the right direction, Mike & Ray!

Thank you so much for your help and assistance on this topic, Ray! I was able to change the majority of the rest of the items I was looking for, thanks to your help! I really appreciate it! Thanks again!