-
Posts
-
Hello. I’m trying to customize two different price tables with CSS. From the forum I retrieved a post and adapted the CSS
/* PRICING TABLE */
.main_color .pricing-table li.avia-heading-row,
.main_color .pricing-table li.avia-heading-row .pricing-extra {
background-color: #2c335d !important;
color: #ffffff;
border-style: none; !important;
}
.main_color .pricing-table li.avia-pricing-row {
background-color: #5F87A2 !important;
color: #ffffff;
border-style: none; !important;
}
.main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even), #top .main_color .avia-data-table.avia_pricing_minimal td {
color: #2c335d;
background-color: #ffffff;
border-color: #2c335d !important;
}However, I would like to use different color properties for the two price tables in
http://www.brunocover.it/CMS/wordpress/trikego/?page_id=2864
I did several tests but I can’t understand how to make two different classes to give to the two tables, I can’t understand if I have to do ID, I don’t understand what is the method that allows me to do css, give it a name and connect it to the item that I want to customize.
Thanks a lot. best regards. Bruno
Hey Bruno,
Add this to quick css and adjust the colors to what you need:
/*** 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: red !important; color: #ffffff; border-style: none; !important; } .avia-builder-el-70 .pricing-table li.avia-pricing-row { background-color: red !important; color: #ffffff; border-style: none; !important; } .avia-builder-el-70 .pricing-table-wrap .pricing-table li.avia-pricing-row + li{ color: red!important; background-color: #ffffff; border-color: #2c335d !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: green !important; color: #ffffff; border-style: none; !important; } .avia-builder-el-72 .pricing-table li.avia-pricing-row { background-color: green !important; color: #ffffff; border-style: none; !important; } .avia-builder-el-72 .pricing-table-wrap .pricing-table li.avia-pricing-row ~ li{ color: green; background-color: #ffffff; border-color: #2c335d !important; }Best regards,
Jordan ShannonWOW 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
Could you suggest me the solution? Thanks for the patience and the support. Best regards. Bruno
In addition to the border on the whole table, could you also suggest me how to change the color of the text indicated in the image?
https://ibb.co/68bKphH
Thanks again for your support. Best regards. BrunoHi,
Add this to quick css. Adjust the colors to what you need:
.avia-builder-el-72 .pricing-table, .avia-builder-el-70 .pricing-table{ border:1px solid #ececec!important; } .avia-builder-el-72 .pricing-table li:nth-child(2){ color:green!important } .avia-builder-el-70 .pricing-table li:nth-child(2){ color:red!important }Best regards,
Jordan ShannonJordan, everything perfect!!! Thanks a lot again for your support, always optimal. Best regards. Bruno
- The topic ‘Custom CSS for table prices: two different CSS for two tables. Classes or ID?’ is closed to new replies.