Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 7, 2020 at 1:33 am #1220087
    tremblayly

    Hi
    I have created shipping methods and rates data tables within tab content area using HTML because I could not find any other way to do this that would make it easy to edit the table content. When I use the avia builder code within the content area, it’s unreadable.
    The problem I have is getting rid of the applied theme row styling and apply my own. This becomes very tricky. I tried different methods, including assigning a table ID but no luck.

    Can you help me setup styling for those tables that appear within each of the tab content areas. Even just removing the row styling would work. I just need a way to style those tables in a very simple way because I use colspan and rowspan.

    I do use the theme pricing table very well elsewhere on the site, so don’t what to mess that up.

    My site is under development so you will need to access it using the access credentials I have provided below.

    Much appreciated.
    Lyse

    June 12, 2020 at 7:16 pm #1222161
    Yigit

    Hey Lyse,

    Sorry for the late reply!

    Please add following code to Quick CSS

    #t01 tr th, #t01 tr td {
    border: none;
}
.main_color #t01 tr:nth-child(2n),
.main_color #t01 tr:nth-child(2n+1) {
    background: transparent;
}
.tab_content table {
    background: transparent;
}

    This would remove theme styling from your table. If you need assistance applying your own styling, please let us know :)

    Best regards,
    Yigit

    June 12, 2020 at 7:55 pm #1222169
    tremblayly

    Hi Yigit,

    That helped and with some tweaking I styled the table the way I wanted it.

    What about pricing tables, what would be the CSS elements I would need to target to change each of the columns color schemes for the header title, pricing fields, and table alternate rows? My client would like me to reproduce the one I created here: https://silviafindings.com/custom-made-jewellery but this worked fine because the Enfold theme colors on that website are silver and gold.

    For this new website the Enfold theme color scheme is blue, so I have to try to see what colors would best work. Here’s a link to the pricing table I would like to change to one is silver tones and the other gold tones (for metal colors…) on the website in development:
    https://diyjewellery1.wpengine.com/custom-made-pricing-and-shipping/#pricing

    Thanks so much,
    Lyse

    June 15, 2020 at 3:39 pm #1222684
    Yigit

    Hi Lyse,

    Please edit your Color Section element and give it a unique ID (“my-id” in example below), edit your Table elements and give them unique ID’s as well (“silver-id” and “gold-id” in my example) and then add following code to Quick CSS

    
#my-id .main_color .pricing-table li.avia-heading-row {
    background: black;
    border: none;
}
#silver-id.main_color .pricing-table li.avia-pricing-row {
    background: #d4d3d2;
    color: black;
    border: none;
}
#silver-id.avia_pricing_default .pricing-table li.avia-pricing-row small, #silver-id.avia_pricing_default .pricing-table li.avia-pricing-row .currency-symbol {
   color: black;
}
#gold-id.main_color .pricing-table li.avia-pricing-row {
    background: #a9905a;
    color: white;
    border: none;
}
#gold-id.avia_pricing_default .pricing-table li.avia-pricing-row small, #gold-id.avia_pricing_default .pricing-table li.avia-pricing-row .currency-symbol {
   color: black;
}

    Best regards,
    Yigit

    August 8, 2020 at 2:51 am #1236160
    tremblayly

    Hi
    I got this to work and added more.
    Thank you for your help
    Lyse

    August 8, 2020 at 3:51 pm #1236223
    Victoria

    Hi Lyse,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.