Tagged: , ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 30, 2014 at 3:16 am #297536
    Frank

    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

    July 30, 2014 at 11:37 am #297636
    Ismael

    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

    July 30, 2014 at 10:53 pm #297926
    Frank

    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 10 years, 4 months ago by Frank.
    July 31, 2014 at 12:56 am #297982
    Yigit

    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

    July 31, 2014 at 11:35 pm #298482
    Frank

    That worked splendidly! You guys are awesome!

    Thanks,
    Frank

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