Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 15, 2020 at 6:14 pm #1184780
    Bruno

    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.

    https://ibb.co/k8BJgSg

    Thanks a lot. best regards. Bruno

    February 15, 2020 at 9:42 pm #1184852
    Jordan Shannon

    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 Shannon

    February 16, 2020 at 12:25 am #1184889
    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

    February 16, 2020 at 1:17 am #1184892
    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. Bruno

    February 16, 2020 at 5:30 am #1184924
    Jordan Shannon

    Hi,

    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 Shannon

    February 17, 2020 at 11:08 pm #1185454
    Bruno

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

    February 18, 2020 at 2:19 am #1185480
    Jordan Shannon

    Hi,

    No problem at all! I’m happy to help. If you need anything else, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Custom CSS for table prices: two different CSS for two tables. Classes or ID?’ is closed to new replies.