Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #297536

    I’ve been studying the thread below for clues as to how to go about showing a different color on table column headers:

    https://kriesi.at/support/topic/pricing-table-different-colors-on-each-collumn-header/

    From the inspector I can see how the class id and CSS work but I have one perhaps dumb question. Is this user creating 4 separate tables to achieve this effect? Cause that’s what it looks like. If I’m missing something and there’s a short explanation for how to achieve this particular table style please share. I’ve seen other Enfold users attempt to do this but mostly they paint the same color on every column header across the entire row.

    I want to duplicate this style on this page: http://www.premierfloorcare.com/services/service-plans/

    Thanks,
    Frank

    #297636

    Hi Frank!

    Thank you for using the theme.

    Actually he’s using a very old version of Enfold which applies an id to each table column. If you can provide us with a screenshot on how you want the table to look like, we’ll try to give you a css solution. We can apply the css child pseudo selectors in order to apply different colors for each heading rows.

    Cheers!
    Ismael

    #297926

    Hey Ismael,

    Thanks in advance for the offer. Yes, basically I want to change the background color and text color of the cells in the pricing row. I have a CSS now that will do the entire row, but I want to change the individual cells in each column. If you could show me how to use the pseudo selectors that would be great!

    So for example:

      Pricing Row, Col 1: BG Bronze, Text White
      Pricing Row, Col 1: BG Silver, Text Black
      Pricing Row, Col 1: BG Gold, Text White

    Thanks,
    Frank

    • This reply was modified 9 years, 8 months ago by Frank.
    #297982

    Hi Frank!

    Please turn on custom CSS field for ALB elements (http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/), give a custom class to your table and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .custom-class tr.avia-pricing-row td:first-child {
    background: red;
    }
    .custom-class tr.avia-pricing-row td:first-child h3 {
    color: white;
    }
    .custom-class tr.avia-pricing-row td:nth-child(2) { 
    background: blue;
    }
    .custom-class tr.avia-pricing-row td:nth-child(2) h3 {
    color: orange;
    }
    .custom-class tr.avia-pricing-row td:nth-child(3) { 
    background: green;
    }
    .custom-class tr.avia-pricing-row td:nth-child(3) h3 {
    color: yellow;
    }

    Best regards,
    Yigit

    #298482

    That worked splendidly! You guys are awesome!

    Thanks,
    Frank

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Different Colors On Table Column Headers’ is closed to new replies.