eStore: customizing the eStore_buy_now_button CSS class

Tips and Tricks HQ Forum » WP eStore Forum » WP eStore Tweaks

eStore: customizing the eStore_buy_now_button CSS class

(2 posts) (2 voices)

Started 6 months ago by MrCamaleo
Latest reply from admin
Possible Solutions (Related Topics):

Tags:

MrCamaleo
Member

Hallo developers,

I just found out that the following lines in wp_eStore_style.css :

.eStore_paypal_checkout_button,.eStore_button,.eStore_remove_item_button,.eStore_empty_cart_button,.eStore_buy_now_button,.eStore_subscribe_button,.download_now_button_submit,.eStore_sold_out {
width: auto !important;/*override the eStore button width to auto to prevent them from looking weird on some themes */
}
.eStore_paypal_checkout_button:hover,.eStore_button:hover,.eStore_remove_item_button:hover,.eStore_empty_cart_button:hover,.eStore_buy_now_button:hover,.eStore_subscribe_button:hover {
opacity:0.7;
}

can create a problem when trying to customize the look of the BUY NOW button in wp_eStore_custom_style.css

If possible, I suggest the following changes for the next version:

1) remove the .eStore_buy_now_button class in the above statements, example:

.eStore_paypal_checkout_button,.eStore_button,.eStore_remove_item_button,.eStore_empty_cart_button,.eStore_subscribe_button,.download_now_button_submit,.eStore_sold_out {
width: auto !important;/*override the eStore button width to auto to prevent them from looking weird on some themes */
}
.eStore_paypal_checkout_button:hover,.eStore_button:hover,.eStore_remove_item_button:hover,.eStore_empty_cart_button:hover,.eStore_subscribe_button:hover {
opacity:0.7;
}

2) add the removed commands to the wp_eStore_custom_style.css:

.eStore_buy_now_button {
width: auto !important;
opacity:0.7;
}

3) rename the wp_eStore_custom_style.css to wp_eStore_custom_style.css.txt so that, after having followed the instruction to upgrade the plugin, users will not loose any customizations.

4) amend the instructions for customization so that users will know they need to rename wp_eStore_custom_style.css.txt if they want to customize the style.

Posted 6 months ago #

admin
Key Master
You maybe misunderstanding how CSS works. You don't need to change anything in the plugin for you to override the CSS. Simply add your CSS in custom CSS file and it will override the other one (the custom CSS file is loaded after the main eStore CSS file so the custom one will take priority).

For example add the following to the custom CSS file to make the button width 300px and remove the opacity:
```
.eStore_buy_now_button {
width: 300px !important;
opacity:1 !important;
}
```
When you upgrade the plugin simply take a backup of the custom CSS file and then re upload the file after the update. Let me know if that makes sense.
Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.