Hi. I'm having trouble styling the buttons for a third party form builder. The button on the form keep defaulting to the nectar button style, despite me inputting CSS styles in the form itself. I have inspected the button and the list of classes associated to the button is huge and I can't work out which to use to put some custom css to fix the issue. I have tried the three button options in the Salient them options, but none will inherit the CSS I have put in the form builder.
form can be seen at the bottom of this page. We want the button outline to be white and essentially act like the button on the hero section at the top. https://newdisplays.monsteroutdoor.co/
Thanks, that has added the white keyline. I'd also like to make the hover state background white and the text dark. I tried adding in :hover to the end of the class, but that didn't work. Do you know the class? Thanks
Hi, ive looked on another PC and yes the text is dark. But it's dark in the normal state and we what it white in normal state and dark on hover, if possible
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
On a separate not, I think on future releases of the theme, you could do with an option to disable Nectar buttons for third party apps/plugins, such as form builders, sign up forms etc, to save all this kind of issues.
Hi. I'm having trouble styling the buttons for a third party form builder. The button on the form keep defaulting to the nectar button style, despite me inputting CSS styles in the form itself. I have inspected the button and the list of classes associated to the button is huge and I can't work out which to use to put some custom css to fix the issue. I have tried the three button options in the Salient them options, but none will inherit the CSS I have put in the form builder.
Hi there,
Try turning off the Salient Form Styling options and check :
Kind regards.
That didn't work, it removed the styling from the form, but didn't inherit the form button style.
form can be seen at the bottom of this page. We want the button outline to be white and essentially act like the button on the hero section at the top. https://newdisplays.monsteroutdoor.co/
Hi there,
Use the following custom css in Salient > General settings > CSS/Script related:
body[data-form-submit="see-through"] button[type=submit]:not(.search-widget-btn) { border-color: white !important; }Hope this helps.
Thanks, that has added the white keyline. I'd also like to make the hover state background white and the text dark. I tried adding in :hover to the end of the class, but that didn't work. Do you know the class? Thanks
Hi There,
Please try this css:
.quform-1 .quform-button-submit button .quform-button-text, .quform-1 .quform-element-submit.quform-button-style-theme .quform-button-submit button .quform-button-text { color: #0e0e0e; } .orbit-wrapper .slider-nav .right, .orbit-wrapper .slider-nav .left, .progress li span, .nectar-progress-bar span, #footer-outer #footer-widgets .col .tagcloud a:hover, #sidebar .widget .tagcloud a:hover, #fp-nav.tooltip ul li .fp-tooltip .tooltip-inner, #pagination .next a:hover, #pagination .prev a:hover, .comment-list .reply a:hover, .comment-list .reply a:focus, .icon-normal, .bar_graph li span, .nectar-button[data-color-override="false"].regular-button, .nectar-button.tilt.accent-color, body .swiper-slide .button.transparent_2 .primary-color:hover, #footer-outer #footer-widgets .col input[type="submit"], body .products-carousel .carousel-next:hover, body .products-carousel .carousel-prev:hover, .blog-recent .more-link span:hover, .post-tags a:hover, #to-top:hover, #to-top.dark:hover, body[data-button-style*="rounded"] #to-top:after, #pagination a.page-numbers:hover, #pagination span.page-numbers.current, .portfolio-items .col[data-default-color="true"] .work-item:not(.style-3) .work-info-bg, .portfolio-items .col[data-default-color="true"] .bottom-meta, .portfolio-items .col.nectar-new-item .inner-wrap:before, .portfolio-filters-inline[data-color-scheme="accent-color-underline"] a:after, .portfolio-filters a, .portfolio-filters #sort-portfolio, .project-attrs li span, .portfolio-filters, .portfolio-filters-inline[data-color-scheme="accent-color"], .bottom_controls #portfolio-nav .controls li a i:after, .bottom_controls #portfolio-nav ul:first-child li#all-items a:hover i, .single-portfolio .facebook-share a:hover, .single-portfolio .twitter-share a:hover, .single-portfolio .pinterest-share a:hover, .single-post .facebook-share a:hover, .single-post .twitter-share a:hover, .single-post .pinterest-share a:hover, .mejs-controls .mejs-time-rail .mejs-time-current, .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current, .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current, #sidebar .widget:hover [class^="icon-"].icon-3x, .post.quote .content-inner .quote-inner .whole-link, .masonry.classic_enhanced .post.quote.wide_tall .post-content a:hover .quote-inner, .masonry.classic_enhanced .post.link.wide_tall .post-content a:hover .link-inner, .iosSlider .prev_slide:hover, .iosSlider .next_slide:hover, #header-outer .widget_shopping_cart a.button, #header-outer a.cart-contents .cart-wrap span, #header-outer #mobile-cart-link .cart-wrap span, #top nav ul .slide-out-widget-area-toggle a:hover .lines, #top nav ul .slide-out-widget-area-toggle a:hover .lines:after, #top nav ul .slide-out-widget-area-toggle a:hover .lines:before, #top nav ul .slide-out-widget-area-toggle a:hover .lines-button:after, #header-outer #top nav > ul > li:not(.megamenu) ul a:hover, #header-outer #top nav > ul > li:not(.megamenu) .sfHover > a, #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) .sfHover > a, #header-outer .widget_shopping_cart a.button, body[data-header-format="left-header"] #header-outer[data-lhe="animated_underline"] #top nav ul li:not([class*="button_"]) > a span:after, #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul a:hover, #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current-menu-item > a, #header-outer:not([data-format="left-header"]) #top nav > ul > li:not(.megamenu) ul .current-menu-ancestor > a, #top nav > ul > .megamenu > ul ul li a:hover, #top nav > ul > .megamenu > ul ul li a:focus, #top nav > ul > .megamenu > ul ul .sfHover > a, body:not([data-header-format="left-header"]) #top nav > ul > .megamenu > ul ul .current-menu-item > a, #buddypress a.button:focus, .text_on_hover.product a.added_to_cart, .swiper-slide .button.solid_color a, .swiper-slide .button.solid_color_2 a, .select2-container .select2-choice:hover, .select2-dropdown-open .select2-choice, #top nav > ul > .button_solid_color > a:before, #header-outer.transparent #top nav > ul > .button_solid_color > a:before, .twentytwenty-handle, .twentytwenty-horizontal .twentytwenty-handle:before, .twentytwenty-horizontal .twentytwenty-handle:after, .twentytwenty-vertical .twentytwenty-handle:before, .twentytwenty-vertical .twentytwenty-handle:after, .masonry.classic_enhanced .posts-container article .meta-category a:hover, .blog-recent[data-style*="classic_enhanced"] .meta-category a:hover, .masonry.classic_enhanced .posts-container article .video-play-button, .masonry.material .masonry-blog-item .meta-category a:before, .material.masonry .masonry-blog-item .video-play-button, .masonry.material .quote-inner:before, .masonry.material .link-inner:before, .nectar-recent-posts-slider .container .strong span:before, #page-header-bg[data-post-hs="default_minimal"] .inner-wrap > a:hover, #page-header-bg[data-post-hs="default_minimal"] .inner-wrap > a:focus, .single .heading-title[data-header-style="default_minimal"] .meta-category a:hover, .single .heading-title[data-header-style="default_minimal"] .meta-category a:focus, .nectar-fancy-box:after, .divider-small-border[data-color="accent-color"], .divider-border[data-color="accent-color"], .nectar-animated-title[data-color="accent-color"] .nectar-animated-title-inner:after, #fp-nav:not(.light-controls).tooltip_alt ul li a span:after, #fp-nav.tooltip_alt ul li a span:after, .nectar-video-box[data-color="default-accent-color"] .nectar_video_lightbox, body .nectar-video-box[data-color="default-accent-color"][data-hover="zoom_button"] .nectar_video_lightbox:after, .span_12.dark .owl-theme .owl-dots .owl-dot.active span, .span_12.dark .owl-theme .owl-dots .owl-dot:hover span, .nectar_image_with_hotspots[data-stlye="color_pulse"][data-color="accent-color"] .nectar_hotspot, .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose span:before, .nectar_image_with_hotspots .nectar_hotspot_wrap .nttip .tipclose span:after, #header-secondary-outer ul > li:not(.megamenu) .sfHover > a, #header-secondary-outer ul > li:not(.megamenu) ul a:hover, #header-secondary-outer ul > li:not(.megamenu) ul a:focus, .nectar-recent-posts-single_featured .strong a, .post-area.standard-minimal .post .more-link span:before, .nectar-slide-in-cart .widget_shopping_cart a.button, .related-posts[data-style="material"] .meta-category a:before, .post-area.featured_img_left .meta-category a:before, .nectar_icon_wrap[data-style="border-animation"][data-color="accent-color"]:not([data-draw="true"]) .nectar_icon:hover, body.material #page-header-bg.fullscreen-header .inner-wrap >a, .nectar-google-map[data-nectar-marker-color="accent-color"] .animated-dot .middle-dot, .nectar-leaflet-map[data-nectar-marker-color="accent-color"] .animated-dot .middle-dot, .nectar-google-map[data-nectar-marker-color="accent-color"] .animated-dot div[class*="signal"], .nectar-leaflet-map[data-nectar-marker-color="accent-color"] .animated-dot div[class*="signal"], .nectar_video_lightbox.play_button_with_text[data-color="default-accent-color"]:not([data-style="small"]) .play > .inner-wrap:before, .nectar-hor-list-item[data-color="accent-color"]:before, .material #sidebar .widget .tagcloud a:before, .single .post-area .content-inner > .post-tags a:before, .auto_meta_overlaid_spaced .post.quote .n-post-bg:after, .auto_meta_overlaid_spaced .post.link .n-post-bg:after, .post-area.featured_img_left .posts-container .article-content-wrap .video-play-button, .post-area.featured_img_left .post .quote-inner:before, .post-area.featured_img_left .link-inner:before, .nectar-recent-posts-single_featured.multiple_featured .controls li:after, .nectar-recent-posts-single_featured.multiple_featured .controls .active:before, .nectar-fancy-box[data-color="accent-color"]:not([data-style="default"]) .box-bg:after, body.material[data-button-style^="rounded"] .nectar-button.see-through.accent-color[data-color-override="false"] i, body.material .nectar-video-box[data-color="default-accent-color"] .nectar_video_lightbox:before, .nectar_team_member_overlay .team_member_details .bio-inner .mobile-close:before, .nectar_team_member_overlay .team_member_details .bio-inner .mobile-close:after, .fancybox-navigation button:hover:before, ul.products li.minimal.product span.onsale, .span_12.dark .nectar-woo-flickity[data-controls="arrows-and-text"] .nectar-woo-carousel-top a:after, .woocommerce-page button.single_add_to_cart_button, .woocommerce div.product .woocommerce-tabs .full-width-content ul.tabs li a:after, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce #order_review #payment #place_order, .woocommerce .span_4 input[type="submit"].checkout-button, .woocommerce .material.product .add_to_cart_button, body nav.woocommerce-pagination span.page-numbers.current, .woocommerce span.onsale .nectar-quick-view-box .onsale, .nectar-quick-view-box .onsale, .woocommerce-page .nectar-quick-view-box .onsale, .nectar-quick-view-box .cart .quantity input.plus:hover, .nectar-quick-view-box .cart .quantity input.minus:hover, .woocommerce .cart .quantity input.plus:hover, .woocommerce .cart .quantity input.minus:hover, body .nectar-quick-view-box .single_add_to_cart_button, .woocommerce .classic .add_to_cart_button, .woocommerce .classic .product-add-to-cart a.button, button[type=submit]:hover, button[type=submit]:focus, body[data-form-submit="see-through"] input[type=submit]:hover, body[data-form-submit="see-through"] button[type=submit]:hover, body[data-form-submit="see-through"] .container-wrap .span_12.light input[type=submit]:hover, body[data-form-submit="see-through"] .container-wrap .span_12.light button[type=submit]:hover, body[data-form-submit="see-through"] .woocommerce #order_review #payment #place_order:hover, .text_on_hover.product .nectar_quick_view, body.original .bypostauthor .comment-body:before, .widget_layered_nav ul.yith-wcan-label li a:hover, .widget_layered_nav ul.yith-wcan-label .chosen a, .nectar-next-section-wrap.bounce a:before, body .nectar-button.see-through-2[data-hover-color-override="false"]:hover { background-color: #fefdfd!important; }Hope this helps.
Thanks.
Nearly there, button background is now white on hover, but the text is also white. Needs to be dark.
Hi There,
The issue is not replicating from my end. The text on the button is dark. Please see:
Please try clearing cache using this guide https://themenectar.ticksy.com/article/6226/ and check again.
Thanks.
Hi, ive looked on another PC and yes the text is dark. But it's dark in the normal state and we what it white in normal state and dark on hover, if possible
Hi There,
Please watch the video below, the text is white in normal state and dark on hover.
https://www.awesomescreenshot.com/video/1849561.
Let me know if I am missing something.
Thanks.
that is very odd, because not working in chrome, Opera or Safari, or Chrome Incognito
https://www.awesomescreenshot.com/video/1849908?key=5136e56d0ed969ce9c93a818fe476046
It's kind of working now, but the hover dark text is only working if you hover over the word 'send' not on anywhere else on the button
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
button[type=submit]:hover span { color: #000 !important; }Thanks
ThemeNectar Support Team
Thanks for your help, all sorted now.
On a separate not, I think on future releases of the theme, you could do with an option to disable Nectar buttons for third party apps/plugins, such as form builders, sign up forms etc, to save all this kind of issues.
Hey Again,
We do have an option to adjust it here:
Thanks
ThemeNectar Support Team