|
Launch
|
July 7, 2019 at 12:49 pm
Trying to format my checkout pages to be more on-brand, but for example when I chance the css to edit the button for “Proceed to Payment Option” by changing the background, it also changes the background for the state dropdown field. This is really weird and not the desired outcome, but it seems that fixing it would require me to edit the plugin and risk losing updates. Am I missing something here?
You can see what I mean by visiting this page and beginning the checkout process… https://ecommbash.com/tickets/ecommbash-2019/
|
|
Tony
|
July 8, 2019 at 5:44 am
Hi there,
Can you post the CSS you tried to use so I can see what is happening, please?
|
|
Launch
|
July 8, 2019 at 9:57 am
This seems to change the button colors, as well as the drop downs for things like state/province:
input, select, textarea {
font: 100% Arial,Helvetica,sans-serif;
vertical-align: middle;
color: #fff;
background-color: #23285f;
}
|
|
Tony
|
July 8, 2019 at 10:06 am
Yeah, that will.
That CSS selects all inputs, selects and textarea elements on the page.
The ‘Proceed to Payment Option’ is an input and the State dropdown is a select element so the above will target those.
For the SPCO buttons, you can use the class .spco-next-step-btn
|
|
Launch
|
July 8, 2019 at 10:18 am
If needed, here is the full CSS which we have changed for EE.
#tribe-events-content .tribe-events-tooltip .entry-title, #tribe-events-content .tribe-events-tooltip .tribe-event-title, .fusion-accordian .panel-heading a, .fusion-accordian .panel-title, .fusion-carousel-title, .fusion-flip-boxes .fusion-flip-box .flip-box-heading-back, .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-title, .fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-title a, .fusion-megamenu-title, .fusion-modal h4, .fusion-person .person-desc .person-author .person-author-wrapper, .fusion-tabs .nav-tabs li .fusion-tab-heading, .fusion-tabs-widget .fusion-tabs-nav ul li a, .fusion-title h4, .fusion-widget-area h4, .popover .popover-title, .post-content h4, .project-content .project-info h4, .share-box h4, .tribe-block__tickets__registration__tickets__header, table th {
font-weight: 600;
line-height: 1.5;
font-size: 20px;
letter-spacing: 0px;
font-style: normal;}
.small-text {
font-size: 18px;
}
table {
background-color: #f2f2f2;
border-color:#000;
border-radius: 15px;}
#reviews li .comment-text, #small-nav, #wrapper .side-nav li a, #wrapper .side-nav li.current_page_item li a, .avada-skin-rev, .chzn-container-single .chzn-single, .chzn-container-single .chzn-single div, .chzn-drop, .commentlist .the-comment, .es-carousel-wrapper.fusion-carousel-small .es-carousel ul li img, .fusion-author .fusion-author-social, .fusion-author-widget .fusion-author-widget-separator .fusion-author-widget-sep, .fusion-content-widget-area .widget .recentcomments, .fusion-content-widget-area .widget li a, .fusion-content-widget-area .widget li a:before, .fusion-content-widget-area .widget_archive li, .fusion-content-widget-area .widget_categories li, .fusion-content-widget-area .widget_links li, .fusion-content-widget-area .widget_meta li, .fusion-content-widget-area .widget_nav_menu li, .fusion-content-widget-area .widget_pages li, .fusion-content-widget-area .widget_recent_entries li, .fusion-counters-box .fusion-counter-box .counter-box-border, .fusion-filters, .fusion-hide-pagination-text .pagination-next, .fusion-hide-pagination-text .pagination-prev, .fusion-pagination .page-numbers, .fusion-tabs.vertical-tabs.clean .nav-tabs li .tab-link, .input-radio, .ls-avada, .page-links a, .pagination a.inactive, .panel.entry-content, .post .fusion-meta-info, .price_slider_wrapper, .progress-bar, .project-content .project-info .project-info-box, .search-page-search-form, .side-nav, .side-nav li a, .single-navigation, .table, .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th, .table-1 table, .table-1 table th, .table-1 tr td, .table-2 table thead, .table-2 tr td, .tabs-vertical .tabs-container .tab_content, .tabs-vertical .tabset, .tagcloud a, .tkt-slctr-tbl-wrap-dv table, .tkt-slctr-tbl-wrap-dv tr td, h5.toggle.active + .toggle-content, tr td {
text-align: center;
}
#ee-single-page-checkout-dv input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=file]) {
border-color: #d9222b;
}
#ee-single-page-checkout-dv .ee-has-value, #ee-single-page-checkout-dv .ee-has-value:focus {
border-color: rgb(35, 40, 95) !important;
-webkit-box-shadow: 0 0 3px 0 rgba(112, 204, 80, .8) !important;
-moz-box-shadow: 0 0 3px 0 rgba(112, 204, 80, .8) !important;
box-shadow: 0 0 3px 0 rgba(0, 0, 80, .8) !important;
}
input, select, textarea {
font: 100% Arial,Helvetica,sans-serif;
vertical-align: middle;
color: #fff;
background-color: #23285f;
}
.highlight-bg {
padding: 1em 1.5em;
background: #23285f;
color: white;
}
|
|
Launch
|
July 8, 2019 at 10:19 am
Missed your message before posting my last one. Will try that now. Thanks!
|
|
Josh
|
July 8, 2019 at 10:50 am
Hi,
The selectors input, select, and textarea will match quite a bit more than the buttons you’re trying to customize. What you can do instead is narrow down the selection using CSS classes.
e.g.
.spco-next-step-btn,
.ticket-selector-submit-btn {
font: 100% Arial,Helvetica,sans-serif;
vertical-align: middle;
color: #fff;
background-color: #23285f;
}
|
