-
Posts
-
Hallo,
ich habe eine Tabelle, deren Kopf ich unterschiedlich einfärben möchte. Die Seite findet ihr hier: https://www.academixer.com/programm/saalplan-preise/
Die Tabellenfelder heißen “Platzgruppe 1 ROT” und so weiter. Das Feld “Platzgruppe 1 GRÜN” hätte ich gern grün und das Feld mit “GRAU” dann grau. Wie kann ich das bearbeiten? Kommt man an den Quellcode ran?viele Grüße,
MartinHey m_reiprich,
Please have a look at the following thread:
https://kriesi.at/support/topic/pricing-table-color/If you need further assistance please let us know.
Best regards,
VictoriaHello Victoria,
Unfortunately, I can not continue at this point:
“Then give different custom classes to your pricing tables and add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed”
How exactly do I forgive this class? I have to give something for each field, but I can not find where I can give what.
Hi,
Sorry for the late reply, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:#top.page-id-1065 #av_section_1 > div > div > div > div > div.avia-table.main_color.avia-pricing-table-container.avia_show_empty_cells.avia_pricing_default.avia-table-1.avia-builder-el-8.el_after_av_heading.el_before_av_hr > div:nth-child(3) > ul > li.avia-heading-row { background-color: #317B0E !important; border-color: #317B0E !important; } #top.page-id-1065 #av_section_1 > div > div > div > div > div.avia-table.main_color.avia-pricing-table-container.avia_show_empty_cells.avia_pricing_default.avia-table-1.avia-builder-el-8.el_after_av_heading.el_before_av_hr > div:nth-child(4) > ul > li.avia-heading-row { background-color: #9C9D9D !important; border-color: #9C9D9D !important; }Best regards,
MikeHi Mike,
How should I edit the tables individually? As I said, I want to be able to change the top color of each column (red, green, blue).
Best wishes,
MartinHi,
The css above allows you to change the color of the last two columns as you asked for, the first column is already red. But I will add it also here. Just adjust the colors to suit, Please see the screenshot in Private Content area.#top.page-id-1065 #av_section_1 > div > div > div > div > div.avia-table.main_color.avia-pricing-table-container.avia_show_empty_cells.avia_pricing_default.avia-table-1.avia-builder-el-8.el_after_av_heading.el_before_av_hr > div:nth-child(2) > ul > li.avia-heading-row { background-color: red !important; border-color: red !important; } #top.page-id-1065 #av_section_1 > div > div > div > div > div.avia-table.main_color.avia-pricing-table-container.avia_show_empty_cells.avia_pricing_default.avia-table-1.avia-builder-el-8.el_after_av_heading.el_before_av_hr > div:nth-child(3) > ul > li.avia-heading-row { background-color: green !important; border-color: green !important; } #top.page-id-1065 #av_section_1 > div > div > div > div > div.avia-table.main_color.avia-pricing-table-container.avia_show_empty_cells.avia_pricing_default.avia-table-1.avia-builder-el-8.el_after_av_heading.el_before_av_hr > div:nth-child(4) > ul > li.avia-heading-row { background-color: blue !important; border-color: blue !important; }After applying the css, Please clear your browser cache and check.
Best regards,
MikeThe crux of the matter is that one can distinguish same selectors by counting.
But be careful because it is counted over all.
So if div, p, ol, ul tags appear , then it is counted over all.
Sometimes it is advisable to go over nth-of-type: The :nth-of-type(n) selector matches every element that is the nth child, of a particular type, of its parent.https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
see the markup from: “Let’s say our markup changed to this:” there you can see that nth-child will not work as wanted.
Hi – I’m trying to achieve pretty much the same as the original poster; I want the second column to be a different colour but failing to adopt the css code to my needs. The test site is: http://test.aboderc.de/digi-bel-system/#preise.
What I noticed is that the css path seemed to have changed from … builder-el-8 …. to builder-el-81 etc – still the follwoing css doesn’t do the trick:
#top.page-id-585 #av_section_1 > div > div > div > div > #av_section_1 > div > div > div > div > div.avia-table.main_color.avia-pricing-table-container.avia_show_empty_cells.avia_pricing_default.avia-table-1.avia-builder-el-81.el_after_av_heading.el_before_av_hr > div:nth-child(3) > ul > li.avia-heading-row {
background-color: green !important;
border-color: green !important;
}
What am I missing?
ThanksHi,
@aboderc is this what you ment:
this is the css:#preise > div > div.container > div > div > div > div:nth-child(5) > div > div.avia-table.main_color.avia-pricing-table-container.avia_pricing_minimal.avia-builder-el-92.el_after_av_hr.el_before_av_textblock.skTable.avia-table-1 > div:nth-child(2) > ul > li.avia-heading-row, #preise > div > div.container > div > div > div > div:nth-child(5) > div > div.avia-table.main_color.avia-pricing-table-container.avia_pricing_minimal.avia-builder-el-92.el_after_av_hr.el_before_av_textblock.skTable.avia-table-1 > div:nth-child(2) > ul > li.avia-heading-row > span { background-color: green !important; border-color: green !important; }What I note from your css is there is no #av_section_1 on that page, I believe that you used the custom ID #preise which replaced the default #av_section_1. But that is OK because a custom ID is a better approach.
Best regards,
MikeHi Mike, perfect, exactly what I was looking for.
One more question: how do you extract the correct css path to the div? I tried Firefox inspector – Copy CSS Path / Selector or css path from “this Element” and normally come up with a good enough css path to use – but somehow not in this case.
Cheers
Hi,
Glad to hear that this helped, in this case copying the selector within the table I had used Inspector > Copy Selector, but the heading-row also contained another Span, thus the two rules above.
So as you pointed out, typically this will provide a “good enough” selector, but in this case it was a little different 🙂
Best regards,
Mike
- You must be logged in to reply to this topic.