logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error

Options
Go to last post Go to first unread
dennis3396677  
#1 Posted : Monday, April 12, 2021 1:17:41 PM(UTC)
dennis3396677

Rank: Member

Groups: Authorized User, Developers
Joined: 4/7/2021(UTC)
Posts: 18

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

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.

MikeR  
#2 Posted : Monday, April 12, 2021 2:33:10 PM(UTC)
MikeR

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, System, Admin
Joined: 10/18/2018(UTC)
Posts: 183

Thanks: 1 times
Was thanked: 6 time(s) in 6 post(s)
Hello Dennis,

Have you played with the color picker? Doesn't seem that would be difficult to do. If you run into any anomalies let us know and we'd be happy to assist.
Thank you for your support!
Mike Randolph
AbleCommerce.com
ray22901031  
#3 Posted : Monday, April 12, 2021 2:54:37 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 826

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
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

thanks 1 user thanked ray22901031 for this useful post.
MikeR on 4/12/2021(UTC)
MikeR  
#4 Posted : Monday, April 12, 2021 3:04:19 PM(UTC)
MikeR

Rank: Advanced Member

Groups: Administrators, Developers, Registered, HelpDesk, System, Admin
Joined: 10/18/2018(UTC)
Posts: 183

Thanks: 1 times
Was thanked: 6 time(s) in 6 post(s)
Hi Ray,

Thank you for the more helpful and detailed reply!
Thank you for your support!
Mike Randolph
AbleCommerce.com
ray22901031  
#5 Posted : Monday, April 12, 2021 3:11:44 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 826

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
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.
dennis3396677  
#6 Posted : Monday, April 12, 2021 4:02:16 PM(UTC)
dennis3396677

Rank: Member

Groups: Authorized User, Developers
Joined: 4/7/2021(UTC)
Posts: 18

Thank you so much for the helpful tips and ideas, Mike & Ray. I don't know if a black background is a good direction for an e-commerce site but it is a store for musicians so perhaps. Obviously some of the small icons will need work as well, such as the search magnifying glass, the shopping cart icon and other graphics. Again, I sincerely appreciate your replies!
dennis3396677  
#7 Posted : Tuesday, April 13, 2021 2:07:46 PM(UTC)
dennis3396677

Rank: Member

Groups: Authorized User, Developers
Joined: 4/7/2021(UTC)
Posts: 18

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:

Quote:

html, body, div, span, article, header, ul, li, select, input, #page-wrapper {
background-image: none !important;
background-color: #000000 !important;
color: white;
}

h1 {
color: white;
}

h2 {
color: white;
}

h3 {
color: white;
}

h4 {
color: white;
}

h5 {
color: white;
}

h6 {
color: white;
}

p {
color: white;
}
ray22901031  
#8 Posted : Tuesday, April 13, 2021 2:15:29 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 826

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
I use Inspector in Firefox to pinpoint elements. I'm assuming that if you want to break all the whiteness, you will either have to use an ID or an in-line <span> tag. Would love to see what the site looks like once you get it up and running.

-Ray
dennis3396677  
#9 Posted : Thursday, April 15, 2021 11:57:47 AM(UTC)
dennis3396677

Rank: Member

Groups: Authorized User, Developers
Joined: 4/7/2021(UTC)
Posts: 18

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!
ray22901031  
#10 Posted : Thursday, April 15, 2021 4:16:35 PM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 826

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
Hi Dennis,

I must say I am pleasantly surprise how nice it looks with all the black, however I hate the built-in drop-down menu. I believe you using the store header compact, which is the same one I'm using, but I overrode my automatic menu with a manual one.

I did this quickly so you may wish to verify or fine-tune my findings.

#1. - Not sure about the grid, I don't use it, send me a screenshot and a URL and I'll try to verify.

#2 - article.product-item.product-single .product-quantity .btn

#3 - article.product-item .product-quickview .btn-quickview

#4 - .tabs.product-tabs .nav-tabs > li > a
and/or
.tabs .nav-tabs > li > a

Hope this helps.

PS: sometimes when I cannot get the answer using the inspector in Firefox, Chrome has one also that might be a little easier to use.
dennis3396677  
#11 Posted : Sunday, April 18, 2021 12:39:57 PM(UTC)
dennis3396677

Rank: Member

Groups: Authorized User, Developers
Joined: 4/7/2021(UTC)
Posts: 18

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!
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.