Theme Request

[heatherbell]

Meaning placing the colors in the correct places and choosing the most perfect colors to compliment the primary color.
I believe my hold up is my lack of color coordination.

Well, it's all in the eye of the beholder and there's no accounting for taste but clichés aside, this site is very helpful for that - https://coolors.co/

[lecarlb]

Hello,

I would like: (1) to change the page background color behind the modules, (2) remove borders around the pi modules. I've tried with no success. and (3) any tips on centering the pi modules. I have the basic idea on how to do it but I lack talent in the aesthetics area. I do believe it's too much brightness in the background and it needs to be toned down.

On a version 1.0.7.6 shop.

I know and hope you all are very busy making sales so I'll keep trying until someone can help.

Thanks in advance.

[heatherbell]

(1) to change the page background color behind the modules

Try:

Code: Select all

body {background-color: #fff;}

(2) remove borders around the pi modules.

Do they all have borders? The buttons do, which is controlled by btn class but you'd have to focus on the specific button e.g. try:

Code: Select all

.pi-buy-button .btn {border: none;}

That selects elements with class btn that are within parents with class pi-buy-button

(3) any tips on centering the pi modules.

E.g try:

Code: Select all

.pi-name h1 {text-align: center;}

I haven't tested these so you might have to add !important before the ; like e.g.

Code: Select all

.pi-name h1 {text-align: center !important;}

Maybe you want to post a link to your site.

[lecarlb]

(1) to change the page background color behind the modules

Try:

Code: Select all

body {background-color: #fff;}

(2) remove borders around the pi modules.

Do they all have borders? The buttons do, which is controlled by btn class but you'd have to focus on the specific button e.g. try:

Code: Select all

.pi-buy-button .btn {border: none;}

That selects elements with class btn that are within parents with class pi-buy-button

(3) any tips on centering the pi modules.

E.g try:

Code: Select all

.pi-name h1 {text-align: center;}

I haven't tested these so you might have to add !important before the ; like e.g.

Code: Select all

.pi-name h1 {text-align: center !important;}

Maybe you want to post a link to your site.

@heatherbell I can't get rid of the borders around the pi_modules. Using border-0 inline only worked for pi-manufacturer-name. Your suggestion above for borders didn't work for me. My goal is to improve the attractiveness which I believe will increase the conversion rate. Sample page: https://btfragrances.com/4711-4711-body ... -2802.html

Please feel free to give any further suggestions you may have.

[lecarlb]

@heatherbell I figured out the borders but please feel free to give suggestions. Thank you so much.

[heatherbell]

Your suggestion above for borders didn't work for me.

I see, using Dev Tools in Chrome that the pi addons you refer to have borders set by .list-group-item
So using the same principle as I posted should work e.g.

Code: Select all

.pi-size .list-group-item {border: none;}

improve the attractiveness

Very much in the eye of the beholder but first thing that jumps out (or doesn't jump out as it should!) is the colour of Add to Cart.
No matter what theme colour you use or how you use it (internet search colour theme generators to find the many ways), it is advisable to make the Add to Cart have prominence on the page e.g. it is the most vivid or darkest element.
Whilst you have pi-stock with #8a2be2, the grey Add to Cart doesn't do that.
Personally, I would 'tone down' the pi-stock (e.g. you could make it lighter or greyer) and 'tone up' the Add to Cart (e.g. make it the only element on any page with #8a2be2 but therefore tone down other elements that have that colour e.g. cm-header-holiday and elsewhere, also possibly your use of inline styling there and elsewhere would be better done in user.css but if you've edited a copy of the tpl file in your selected template so it does not get overwritten in an update and it works for you then maybe there's no arguing with success!).
Again, personally, the use of neutral grey always works well when using an accent theme colour but I'd use a variation of your theme colour for buttons.

[lecarlb]

Your suggestion above for borders didn't work for me.

I see, using Dev Tools in Chrome that the pi addons you refer to have borders set by .list-group-item
So using the same principle as I posted should work e.g.

Code: Select all

.pi-size .list-group-item {border: none;}

improve the attractiveness

Very much in the eye of the beholder but first thing that jumps out (or doesn't jump out as it should!) is the colour of Add to Cart.
No matter what theme colour you use or how you use it (internet search colour theme generators to find the many ways), it is advisable to make the Add to Cart have prominence on the page e.g. it is the most vivid or darkest element.
Whilst you have pi-stock with #8a2be2, the grey Add to Cart doesn't do that.
Personally, I would 'tone down' the pi-stock (e.g. you could make it lighter or greyer) and 'tone up' the Add to Cart (e.g. make it the only element on any page with #8a2be2 but therefore tone down other elements that have that colour e.g. cm-header-holiday and elsewhere, also possibly your use of inline styling there and elsewhere would be better done in user.css but if you've edited a copy of the tpl file in your selected template so it does not get overwritten in an update and it works for you then maybe there's no arguing with success!).
Again, personally, the use of neutral grey always works well when using an accent theme colour but I'd use a variation of your theme colour for buttons.

Thank you for your valuable input. If I understand correctly, you suggest making the Add to Cart button #8a2be2 the only element on the page that color? What color you think cm-header-holiday should be? Maybe a lighter version of #8a2be2? I got confused about your pi-stock comment. It appears white to me. Or did you mean pi-msrp instead?

I take your suggestions seriously because as I previously stated I struggle with color coordination. If colors are matched correctly that could encourage some people to buy.

[heatherbell]

you suggest making the Add to Cart button #8a2be2 the only element on the page that color?

Yes.

What color you think cm-header-holiday should be? Maybe a lighter version of #8a2be2?

Maybe, just avoid making elements other than Add to cart the same prominence.

I got confused about your pi-stock comment. It appears white to me.

I see on your site Enter FIRST15 at checkout 15% off in a div with inline style of background-color:#8a2be2; that is within a div with class pi-stock.

If colors are matched correctly that could encourage some people to buy.

For tips and inspiration, spend some time looking at big brand sites that throw a shedload of money at a website dev team that usually keep it up to date with current trends and what works.

[lecarlb]

you suggest making the Add to Cart button #8a2be2 the only element on the page that color?

Yes.

What color you think cm-header-holiday should be? Maybe a lighter version of #8a2be2?

Maybe, just avoid making elements other than Add to cart the same prominence.

I got confused about your pi-stock comment. It appears white to me.

I see on your site Enter FIRST15 at checkout 15% off in a div with inline style of background-color:#8a2be2; that is within a div with class pi-stock.

If colors are matched correctly that could encourage some people to buy.

For tips and inspiration, spend some time looking at big brand sites that throw a shedload of money at a website dev team that usually keep it up to date with current trends and what works.

Thanks for the guidance. I think overall I approved the appearance. Moved more towards pastel type colors that are variations of the Add to Cart button.

[heatherbell]

I think overall I approved the appearance. Moved more towards pastel type colors that are variations of the Add to Cart button.

Yes, looking good!
Maybe to get 'collars and cuffs' to match your theme colour, maybe now change the other standard Bootstrap colour buttons and alerts like -secondary, -success, -info etc. e.g. pagination, on login page, contact_us, account etc.
BTW your favicon is not showing for me.