Tagged: ,

Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • January 5, 2015 at 3:00 am #374886
    millertimesites

    I have been trying to customize the row color with no luck. Have already enabled the Custom Css Class inside Functions.php but still cant get any of the code to work either there or in the General Styling > Quick CSS.
    Looked through the forum and couldn’t get any of the various coding to alter the Pricing Table at all.

    I understand that to make the colors in each column to be different they need to be in different containters (ir 1-2, 1-3) but cant get it to work to change the row /alternate row/header/ or button background color or text colors.

    Thanks for the help

    January 5, 2015 at 8:32 pm #375299
    Andy

    Hi Jon!

    can you please give us a link to your website showing what you want to have customized?

    Cheers!
    Andy

    January 6, 2015 at 3:34 am #375450
    millertimesites

    Here you go http://www.millertimesites.com/pages/pricing/
    Trying to figure out how to control the row/header background and text colors. Having found any quick css that has worked so far.
    Sorry is if is easy coding, but I have been struggling as it looks a number of people on the forum are.
    Thanks in advance
    Jon

    January 7, 2015 at 8:58 am #376015
    Ismael

    Hey!

    Thank you for the info but we need an actual screenshot on how you want the table to look like. Please use firebug or google chrome’s inspector to find the right selectors.

    Cheers!
    Ismael

    March 24, 2015 at 7:39 pm #417328
    millertimesites

    Isamel, sorry for the delay.
    I guess I’m looking for pricing tables that act and look like these http://theme-fusion.com/avada/pricing-tables/

    Also the Avada Theme that the example is from looks like they are straight up copying Enfold and reselling it. Here is another example http://www.funrunpartybuses.com/

    Jon

    March 25, 2015 at 5:37 pm #417962
    Andy

    Hi!

    you can control the row colors using this:

    li.avia-heading-row {
background-color: red !important;
}
li.avia-pricing-row {
background-color: green !important;
}
.main_color tr:nth-child(odd), .main_color .pricing-table>li:nth-child(odd), .main_color .pricing-extra {
background-color: orange;
}

    Adjust the colors as needed.

    Hope that helps.

    Regards,
    Andy

    June 12, 2015 at 10:48 pm #458652
    beezdezines

    I would like to change the heading and pricing rows to green on all columns except the description column. Is that possible?

    June 15, 2015 at 5:40 am #459087
    Rikard

    Hey!

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    June 15, 2015 at 12:43 pm #459255
    beezdezines

    sure – https://dev.thecynergisticlife.com/join/
    I do not want the coloring to impact the first column which is the description column – The Cynergistic Life
    thanks for your help!

    June 15, 2015 at 1:55 pm #459291
    Yigit

    Hey!

    Please add following code to Quick CSS and adjust as needed

    .avia-heading-row h3 { color: orange; }

    Best regards,
    Yigit

    June 15, 2015 at 3:20 pm #459373
    beezdezines

    That is not addressing this issue.
    Please take a look: https://dev.thecynergisticlife.com/join/

    Here is what I entered into CSS

    li.avia-heading-row {
    background-color: #5e7560 !important;
    }
    li.avia-pricing-row {
    background-color: #5e7560 !important;
    }
    .main_color tr:nth-child(odd), .main_color .pricing-table>li:nth-child(odd), .main_color .pricing-extra {
    background-color: #5e7560;
    }
    .avia-heading-row h3 { color: orange; }

    June 16, 2015 at 3:13 pm #460078
    Yigit

    Hey!

    Please try adding !important rule as following 

    .avia-heading-row h3 { color: orange !important; }

    Cheers!
    Yigit

    June 17, 2015 at 11:15 am #460650
    beezdezines

    This is not working.
    Please take a look at the table on this page: https://dev.thecynergisticlife.com/join/
    I want the column headers in columns 2, 3 and 4 to have a green background.
    And I want the row with the prices only to have a green background.
    I do not want the first column – the description column – nor any of the other rows to be impacted.
    Thank you

    June 17, 2015 at 9:54 pm #460993
    Andy

    Hi!

    I can’t open your link, because it says it’s not a secure website. We would need to inspect the elements, so please check.
    Screenshots showing what you want to achieve would help a lot. Please use imgur.com or dropbox.

    Regards,
    Andy

    June 17, 2015 at 11:57 pm #461017
    beezdezines

    Hi Andy – it’s a development site; it is secure. Please try opening it in Firefox instead of Chrome.
    Here is a link to a screen shot: https://www.dropbox.com/s/hfus49c72bn4a20/pricingtable.png?dl=0
    Thank you

    June 19, 2015 at 12:47 pm #461832
    Andy

    Hey!

    sorry, but same is happening with firefox. We need a normal, secure website, without any risks for us to be able to check.

    When we are not able to check your website can you please provide us the shortcodes of the table elements in question please? You can activate debugging mode for it, so we can implement it in our own installation and check whats going on.

    Cheers!
    Andy

    June 19, 2015 at 11:14 pm #462128
    beezdezines

    here is a test page on the live site
    http://www.thecynergisticlife.com/test/

    June 22, 2015 at 11:07 am #462559
    Andy

    Hi!

    thank your for this test link. Use this code to make things green:

    .main_color .pricing-table li.avia-heading-row, .main_color .pricing-table li.avia-heading-row .pricing-extra {
border-color: #5e7560;
}
.main_color .pricing-table li.avia-pricing-row, .main_color .pricing-table li.avia-heading-row, .main_color .pricing-table li.avia-pricing-row .pricing-extra {
border-color: #5e7560;
}
.main_color .pricing-table li.avia-heading-row, .main_color .pricing-table li.avia-heading-row .pricing-extra {
background-color: #5e7560;
}

    Best regards,
    Andy

    June 22, 2015 at 1:42 pm #462750
    beezdezines

    thank you

    June 23, 2015 at 5:29 am #463129
    Rikard

    Hi!

    Glad we could help :)

    Cheers!
    Rikard

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘How To Change Pricing Tables Row Colors’ is closed to new replies.