Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1152637

    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,
    Martin

    • This topic was modified 1 month, 1 week ago by  m_reiprich.
    #1153277

    Hey 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,
    Victoria

    #1154566

    Hello 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.

    #1155397

    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,
    Mike

    #1155655

    Hi 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,
    Martin

    #1155968

    Hi,
    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,
    Mike

    #1156014

    I do not know how it works – but it works! Thank you very much Mike!

    #1156017

    The 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.

    #1156283

    Hi,

    Thanks for sharing @guenni007.

    Best regards,
    Rikard

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.