-
Posts
-
Hi,
I ‘ve been searching the threads but i couldn’t find one for this problem:
I have a pricing table of three columns, the middle one is a marked column.I want the background color of the top left cell to be bronze, the top middle cell to be gold and the top right cell to be silver. The second row I want to be the same color (blue), I have already established this.
This is the page of the pricing table: http://www.fronikboerderij.nl/nieuw2018/meedoen/doneren/
Hope you can help me out!
Hey JantienM,
Please check our documentation to change the pricing table color https://kriesi.at/documentation/enfold/table/#pricing-table-background
Best regards,
VinayHi Vinay,
Thanks for this documentation. I cannot find in here what I need though. It does not explain how to make every top cell in its own color. I think I have to use childs, but I cannot find out how exactly where to put it in the code. Hope you can help me with that.
Thanks a lot!
Hi JantienM,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:first-child .avia-heading-row { background-color: #c18100; border-color: #c18100; } .avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:nth-child(2n) .avia-heading-row, .avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:nth-child(2n) .avia-heading-row .pricing-extra { background-color: #edc112; border-color: #edc112; } .avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:nth-child(3n) .avia-heading-row { background-color: #DADADA; border-color: #DADADA; }If you need further assistance please let us know.
Best regards,
VictoriaHi,
Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardHi Victoria,
The code you’ve send worked fine, untill I deleted an image from a text block above the pricing table. Really weird. They’re not even in the same content block. But now the pricing table is completely in the theme colors. Hope you can help me find this bug.
I made a screenshot of when the table was fine and the image was still in the textblock above. In the URL you can see how it is now with a green pricing table.
The code I’m using:
.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:first-child .avia-heading-row {
background-color: #ea9c00;
border-color: #ea9c00;
}
.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:nth-child(2n) .avia-heading-row,
.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:nth-child(2n) .avia-heading-row .pricing-extra {
background-color: gold;
border-color: gold;
color:#ffffff;
}
.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:nth-child(3n) .avia-heading-row {
background-color: #DADADA;
border-color: #DADADA;
color:#4c4b4b;
}
.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:first-child li.avia-pricing-row {
background-color: #c18100;
color:#ffffff;
border-color: #c18100
}
.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:nth-child(2n) li.avia-pricing-row {
background-color: #edc112;
color:#ffffff;
border-color: #edc112;
}
.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6 .pricing-table-wrap:nth-child(3n) li.avia-pricing-row {
background-color: silver;
color: #4c4b4b;
border-color: silver;
}Thanks again!
Hi,
Did you add more elements to the page? It’s not working anymore because the generic builder class attribute (avia-builder-el-6) has been changed or adjusted. You should enable the custom css class field and then use that selector instead of the generated class attributes.
Best regards,
IsmaelHi Ismael,
I understand, so I made a custum class field called “prijstabel”.
In the CSS code I replaced “.avia-table.avia_pricing_default.avia-table-1.avia-builder-el-6” with “.prijstabel”.
As you can see it works fine for the top row of the table, but it doesn’t have any effect on the pricing row. I cannot find the mistake, hopefully you can help me with it.
The code as it is:
.prijstabel .pricing-table-wrap:first-child li .avia-pricing-row {
background-color: #c18100;
color:#ffffff;
border-color: #c18100; }.prijstabel .pricing-table-wrap:nth-child(2n) li .avia-pricing-row {
background-color: #edc112;
color:#ffffff;
border-color: #edc112; }.prijstabel .pricing-table-wrap:nth-child(3n) li .avia-pricing-row {
background-color: silver;
color: #4c4b4b;
border-color: silver; }Thanks again!
Hi,
The selector:
li .avia-pricing-rowshould be replaced with:
li.avia-pricing-rowBest regards,
Ismael
- You must be logged in to reply to this topic.