I'm trying to improve the look of some of the buttons on my site today, but cannot figure out what css I need to change in my Wordpress store to make these changes. I've made some screenshots of what I'm trying to change with notations. Maybe someone can point me in the right direction. Do I make these changes to my Wordpress Additional CSS screen or to a file in the css folder?

SCREEN SHOTS

[font=Impact]Product Page:[/font=Impact]
I want to change the size and color of the text so it is more readable on whatever color of background I choose for the button.
[img]https://www.decorativepaintingstore.com/images-site/ECT-Product-Page-Details-QuickBuy-Buttons.jpg[/img]


[font=Impact]QuickBuy Page:[/font=Impact]
Same issue for Details button - I'd like to enlarge the text and make it black to be more easily readable.
For the Add to Cart and Add to List - I'd like to give a little more space between them and change the color of the Add to Cart button to make it more prominent.
[img]https://www.decorativepaintingstore.com/images-site/ETC-Quick-Buy-Window-Buttons.jpg[/img]


[font=Impact]Product Detail Page:[/font=Impact]
Same issues as the QuickBuy Page regarding the Checkout Button, Add to Cart, and Add to List
[img]https://www.decorativepaintingstore.com/images-site/ECT-Product-Detail-Page-Buttons.jpg[/img]


Here is the CSS that is currently in my Wordpress Additional CSS with comments about what I think it is controlling.
/*
Left Column Login / Checkout Buttons - Background, Text Color/Size
Product Page Details Button - Background Only
Add to Cart & Add to List Buttons - Background, Text Color & Size
*/
input.ectbutton, button.ectbutton {
color: #fff;
font-size: 1.0em;
background-color:#aaa;
}
/*
Only seems to change Product Page - QuickBuy Button Background Only - Detail Button Doesn't Change - Text color and size are not affected on either button.
*/
input.qbuybutton, input.detailbutton {
color:#fff;
padding:4px 12px;
font-size:1.0em;
background-color:#aaa;
}

Any help would be greatly appreciated.

Hi Sharon
I think you want to change this Additional CSS to something like this...

input.ectbutton, button.ectbutton {
color: #000;
font-size: 1.2em;
background-color:#aaa;
}

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

I tried that and it changes the Details button background and color of the text, but not the size of the text. Something else must be controlling text size on the Details and Quick Buy buttons.

Here's the additional CSS code I have in Wordpress now. For the moment I've went with black buttons with white text because they are more readable. The second one only controls the background color of the Quick Buy button. You can see I have the text size set differently in each, but in my store the Details and Quick Buy text sizes are the same. You can see my Products page here.
https://www.decorativepaintingstore.com/products.php/?cat=New+Products

/*
Controls Left Column Widgets Buttons Login, Checkout
Background and Text Size/Color-
Product Page Details Button Background
Add to Cart- Add to List Background / Text Color/Size
*/
input.ectbutton, button.ectbutton {
color: fff;
font-size: 1.2em;
background-color:#000;
}
/*
Controls Product Page - QuickBuy Button Background
*/
input.qbuybutton, button.qbuybutton, input.detailbutton, button.detailbutton {
color:#fff;
font-size:1.0em;
background-color:#000;
}
Here's the remainder of the Additional CSS in case there is something in it that is affecting the site. I think you may have added this in a couple of ago when moving my site completely over the Wordpress, but I don't know what it affects.

div.category {
min-height: 100px;
}

div.savecartlist {
left: -200px !important;
}
div.prodarticle div.addtocart,
div.prodarticle div.prodprice,
div.prodarticle div.qbuybutton,
div.prodarticle div.csaddtocart,
div.prodarticle div.csqbuybutton,
div.contact div.addtocart,
div.contact div.prodprice,
div.contact div.qbuybutton,
div.contact div.csaddtocart,
div.contact div.csqbuybutton {
display: none;
}
In the css folder on my site I have a file named ectstyle.css. I don't think that is one of the files that gets changed with version updates. Maybe it's an old style sheet I used when I had a regular php site. Could anything in it be overriding the WP css? Just trying to figure out where to track things on my own.

Hi Sharon
Can you let me know the URL of the store and I'll try it there.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Hi Sharon
Ok, from your other post I think it is the decorativepaintingstore.com site and the buttons seem to have changed now so did you get this sorted?

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

I've been able to change the Detail and Quick Buy button colors, but not the size of the text on either of these two buttons.

I have two sites using the ECT shopping cart.

DecorativePaintingStore.com (this was once a php site that got transitioned over to WP)
SharonChinn.com (this one I started up with ECT Wordpress

On my SharonChinn site, the larger text on thse two buttons is the default because I didn't do anything to make it that way. I get frustrated because there is something in the DecorativePaintingStore.com site that overrides the default settings in a fresh ECT WP install. Maybe an old css style sheet? I just don't know what it is and how to get rid of it. I have some other issues with this same type issue that I'll mention in my other post.

Hi Sharon
While I think about it, would this be a good addition to...
/css/signup-forms/popup/ab07d3a33dd6bffdc7d230f2e09cfd09e1166bde/layout-2.css

.modalContent {
background-color: #fff;
}

It's just the background is transparent on that mailing list popup so it's hard to see.

Vince



Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Would I put this in the Additional CSS on both of my sites?

I'm not getting either of the pop-ups when I look at the page so didn't notice a problem.

Re your last note - I added your suggestion to the Additional CSS, but the background is still transparent on the mailing signup behind the fields for email and name so you can't read the labels. Any other ideas.

Hi Sharon
I think it is missing the dot before the "modalContent". That is you have...

modalContent {
background-color: #fff;
}

...instead of...

.modalContent {
background-color: #fff;
}

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

I added the 'period' but it's still not working on either of my sites. The background behind the input box is still transparent.

Edit: I went into mailchimp and made a change to the background of my popups and both sites and I think that has fixed the problem.