Change default colors of Vibe shortcuts for Note and Buttons

[amishbhavsar_136]

The default colors for note background is #78C8CE and Button border is #78C8CE. I want to change the note background color to #444444 and Button border to #1FA2E1. How do I do that?

[Jackson]

Please share me with some screenshots and url of page which you want to customize.

[amishbhavsar_136]

Hi, The Buttons on the Cart page appear different than the one I have for the theme. See screenshot: https://prnt.sc/rmrbth. The Theme button is with blue outline and on mouse-over will make it solid blue (hex code #1FA2E1) (example is the "Proceed to checkout" button). But the "Update cart" and "Apply coupon" buttons use the default colors (hex code #78C8CE). Same thing is happening on the Note background.  Visit any course page like: https://online.accellearning.com/course/bca-exam-free-trial/ See screenshot: https://prnt.sc/rmrfom The Note default theme is color is hex code #78C8CE and I want to change it to #444444. Also, the Note box width is less than the width of the page and it appears left aligned. Do you have a way to make the width = to the page width? Appreciate if you can show me how to make the color and size changes. Thanks

[Jackson]

For update cart and apply now button use this css :appearance>>customize>>customcss table.shop_table td button.button:hover { border-color: #1FA2E1 !important; background-color:#1FA2E1 !important; color: #fff !important; } table.shop_table td button.button { border-color: #1FA2E1 !important; color: #1FA2E1 !important; } Use this css code for note background color: .notification { width:100% !important background:#444444; } and dear use note box width maximum increase only in this size because of parents of note box has default size you can also see after doing width 100% it will look better .

[amishbhavsar_136]

Hi, The CSS you gave only worked for 1 out of 3 issues: It worked for the "Apply Coupon" button, but not the "Update Cart" button. Please see screenshot: https://prnt.sc/ro1n2b Also, the Note background color to #444444 did not work with the custom CSS. Please help.

[Diana]

The Update Cart will be visible as faded one. If that's the issue then no it is not an issue because it will be appeared as faded one by default And, if you are asking about border color of the update cart button then I checked the code. The CSS was same This Code will work for Note Background .single-course .notification { background: #444444 !important; width:100% !important } refer: http://prntscr.com/roc21j  

[amishbhavsar_136]

Thanks that worked. Can you also send me the CSS for change the "Sign up now" button on the Checkout page to do the same? See screenshot: https://prnt.sc/rojm3a

[Diana]

@amishbhavasar_136, This Custom CSS will work .logged-out input#signup_submit {border-color:#78C8CE !important;} Changed only border color anything else?

[amishbhavsar_136]

Hi Diana, I think you gave me the wrong CSS. I am looking for the one for the "Sign up now" button on the Checkout page. See screenshot: https://prnt.sc/rojm3a

[Jackson]

Dear user use this css button.button { border-color: #1FA2E1 !important; color: #1FA2E1 !important; } button.button:hover { border-color: #1FA2E1 !important; background-color:#1FA2E1 !important; color: #fff !important; }

[amishbhavsar_136]

Thanks. You can close this topic now.

[Jackson]

Ok thanks.

[Author]

Posts