Hi Rikard. You can close this topic. Thanks a lot as always for your support. Best regards. Bruno

Hi Rikard. Perfect! Thanks a lot. Best regards. Bruno

Hi Jordan. You can close this topic. thanks a lot. Best regards. Bruno

Yes. Please, I would like to be able to use a class instead of using PAGE ID. I would like to use the separator by customizing the color. I am currently using the css with page id on http://www.brunocover.it/CMS/wordpress/trikego/?page_id=62 and on http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864

/*** ID 62 Pagina CARGO BIKE ***/
.page-id-62 .hr-short .hr-inner,
.page-id-62 .hr-short .hr-inner-style {
background-color: #2c335d;
}
/*** ID 2864 Pagina PREZZI ***/
.page-id-2864 .hr-short .hr-inner,
.page-id-2864 .hr-short .hr-inner-style {
background-color: #2c335d;
}

I would like to make a unique class, to be used on some separators, using a custom css class in Developer Settings, for example Blu2c335d

https://ibb.co/tzn22hF

.Blu2c335d .hr-short .hr-inner,
.Blu2c335d .hr-short .hr-inner-style {
background-color: #2c335d !important;
}

https://ibb.co/frGdMWW

I tried but it doesn’t change, so I’m wrong https://ibb.co/tQBc6S0

http://www.brunocover.it/CMS/wordpress/trikego/?page_id=3129

Would you be kind enough to show me the solution? Thanks a lot. Best regards. Bruno

• This reply was modified 4 years, 9 months ago by Bruno.

Hi Mike. As always, your suggestions have solved my problem: thanks a lot for your support. Best regards. Bruno

Dear Mike, I modified the css by adding your last suggestions

#top .main_color .BGbiancoTXTblu .avia-button {
background-color: #ffffff;
border-color: #ffffff;
border-style: solid;
}
#top .main_color .BGbiancoTXTblu .avia-button:hover {
background-color: #24305e;
border-color: #24305e;
border-style: solid;
color: #ffffff;
}
#top .main_color .BGbiancoTXTblu .avia-button > span.avia_iconbox_title {
color: #24305e;
}
#top .main_color .BGbiancoTXTblu .avia-button:hover > span.avia_iconbox_title {
color: #ffffff;
}
#top .main_color .BGbiancoTXTblu .avia-button > span.avia_iconbox_title:hover {
color: #fff !important;
z-index: 0 !important;
}
#top .main_color .BGbiancoTXTblu > .avia-button > .avia-button:hover {
color: #fff !important;
background-color: #24305e !important;
}

but the button continues to give problems when the mouse passes over the text, continuing to go from blue to white and from white to blue, as in the video in example

http://www.brunocover.it/CMS/wordpress/trikego/TMP/button.mp4

I also tried adding

#top .main_color .BGbiancoTXTblu .avia-button:active {
background-color: #24305e;
border-color: #24305e;
border-style: solid;
color: #ffffff;
}

but the problem persists: moving the mouse over the text, the state of the button continues to change, from white to blue and from blue to white.

http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864

What is missing? Thanks a lot for your patience. Best regards. Bruno

Thanks Mike for your suggestion: that’s exactly what I would like to understand and do. I would like to understand how to add a custom class to an element, using, as indicated in your image, CUSTOM CSS Class. I wish I could use this method where possible: create a class in quick css and use the class name in the developer settings, but I didn’t understand how to do it. I also looked at the guide

https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

Would you be kind enough to give me an example? Using for example the name “BLU”

https://postimg.cc/pp529Sn6

that I would put in the field indicated in your image (in the Developer Settings of my button element), how do I change the CSS that I put in my Enfold Child?

#BLU .main_color .avia-color-theme-color.avia-button {
background-color: #ffffff;
border-color: #ffffff;
border-style: solid;

}
#BLU .main_color .avia-color-theme-color.avia-button:hover {
background-color: #24305e;
border-color: #24305e;
border-style: solid;
color: #ffffff;
}
#BLU .main_color .avia-color-theme-color.avia-button > span.avia_iconbox_title {
color: #24305e;
}
#BLU .main_color .avia-color-theme-color.avia-button:hover > span.avia_iconbox_title {
color: #ffffff;
}

https://postimg.cc/5X3N1Cz4

I did some tests but to no avail. Would you be kind enough to help me again? Thanks for your patience. Best regards. Bruno

Jordan, everything perfect!!! Thanks a lot again for your support, always optimal. Best regards. Bruno

Your support is excellent. This topic is closed, the solution adopted is optimal. Thanks a lot. Best regards. Bruno

WOW Jordan ^__^ Thanks a lot! I customized your CSS

/*** Table 1 ***/
.avia-builder-el-70 .pricing-table li.avia-heading-row,
.avia-builder-el-70 .pricing-table li.avia-heading-row .pricing-extra {
background-color: #a9b49e !important;
color: #ffffff;
border-color: #ececec !important;
}
.avia-builder-el-70 .pricing-table li.avia-pricing-row {
background-color: #a9b49e !important;
color: #ffffff;
border-style: none; !important;
}
.avia-builder-el-70 .pricing-table-wrap .pricing-table li.avia-pricing-row + li {
color: #a9b49e !important;
background-color: #ffffff;
border-color: #ececec !important;
}

/*** Table 2 ***/
.avia-builder-el-72 .pricing-table li.avia-heading-row,
.avia-builder-el-72 .pricing-table li.avia-heading-row .pricing-extra {
background-color: #5F87A2 !important;
color: #ffffff;
border-style: none; !important;
}
.avia-builder-el-72 .pricing-table li.avia-pricing-row {
background-color: #5F87A2 !important;
color: #ffffff;
border-style: none; !important;
}
.avia-builder-el-72 .pricing-table-wrap .pricing-table li.avia-pricing-row ~ li {
color: #5F87A2;
background-color: #ffffff;
border-color: #ececec !important;
}

but was unable to outline with a light gray border #ececec

http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864

I tried to insert it in your css but it was also surrounded internally. I wish the whole table has an #ececec light gray outline

https://ibb.co/r2Zz8XC

Could you suggest me the solution? Thanks for the patience and the support. Best regards. Bruno

For example, on this page I would like to have it not white, but blue http://www.brunocover.it/CMS/wordpress/trikego/?page_id=62 for this I would like to understand how to make different css for different separator lines

Custom CSS to use buttons with different styles.

Another example: on the page

http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864

before the contact form there is a long button, I would like to make a custom css to change its color, border and colors on mouse over: custom css to have buttons with different styles, to be used according to the page and the colors of the page.

https://ibb.co/WxTgqqp

Thanks again for your support. Sincerely. Bruno

Hi Jordan. You can close this thread. Thanks a lot. Best regards. Bruno

Thanks a lot Victoria, your suggestion is perfect ^__^

#top .main_color .avia-color-theme-color.avia-button {
background-color:#ffffff;
border-color: #a9b49e;
border-style: solid;
}
#top .main_color .avia-color-theme-color.avia-button:hover {
border-color: #24305e;
}
#top .main_color .avia-color-theme-color.avia-button .avia-button {
border-radius: 0px;
}

Best regards. Bruno

Thanks a lot Yigit. Best regards. Bruno