Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 19, 2017 at 6:55 pm #890585
    newtonlinchen

    Hello,
    I’m trying to setup Pricing Tables for my website:

    https://www.linchen.com.br/temp/

    I see several issues here:

    1. I would like to change the color in the columns. Where they display the color blue, I would like to change, so the columns 1 and 3 (left and right) are with the same color (gray) and the middle column (column 2) would have some other color (perhaps orange).
    2. I would need to have all the tables with the same size, below the pricing row. As the text for the columns may differ, some with extra length, now they are not aligned, so that the information on the leftmost column it’s not easy to relate to the other columns.
    3. I would like to get rid of the dashed line. Only of the first two on the top, if possible. If not, I would like to get rid of all dashed lines.

    Regards

    Newton

    December 20, 2017 at 3:32 pm #890805
    Victoria

    Hey Newton,

    There are no dashes on this page and I’m not sure
    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.main_color .pricing-table li.avia-pricing-row {
  background-color: #8e868b;
}
.main_color .pricing-table-wrap:nth-child(2) .pricing-table li.avia-pricing-row {
  background-color: orange;
}
.pricing-table.avia-highlight-col>li:last-child {
    padding-bottom: 10px;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    December 21, 2017 at 12:32 pm #891114
    newtonlinchen

    Victoria,

    How are you?

    Always you to the rescue, huh? :)

    The dashed lines are not in the page because I eliminated the leftmost column, that would be a “Features” Column.

    So, now the only issue is really the color.

    See how it looks now:

    https://www.linchen.com.br/temp/

    Would you mind telling me all the CSS code for this pricing tables, like, for each part?

    Because I need that the top cell (label), which now it’s blue in all columns, to be in the same color that the price cell.

    And the button should be in the same color too.

    The rest of it (or “body” of the column) would remain as it is default.

    But I need the lable cell (upper cell), the price cell and the button to be in the same color.

    And I need to manage it separately for each column.

    _____________________

    You see, I tried to solve this problem using a pricing table plugin…

    But in the Enfold General Styling, it has this

    Main Content
    Primary color
    (Font color for links, dropcaps and other elements)

    And here is the problem: LINKS, DROPCAPS AND OTHER ELEMENTS all share the same color!

    So….

    This color nowadays is blue… Because of the website style. If you see in the home page (www.linchen.com.br) you can see a ” ” in the quote at the image, and then a Mailchimp Signup. All having this same blue color.

    The issue is that, this color is also shared, somehow, with the PRICE in the plugin’s PRICING TABLE.

    So the pricing table was ok, but the PRICE in it, that should be with a white font, became blue.

    ____________________

    Sorry for trying to explain this with my poor English. Despite my name (Newton), I’m BRAZILIAN, and live in BRAZIL.

    :)

    December 21, 2017 at 6:03 pm #891240
    Victoria

    Hi Newton,

    You can see the html below. Most of the lis do not have classes and the columns are the same.
    Could you please attach a mockup of what you’re trying to achieve? Words don’t really paint a clear picture to me.

    Best regards,
    Victoria

    December 22, 2017 at 3:26 am #891456
    newtonlinchen

    Sure,

    Here’s an EXACT mockup for what I want to achieve:

    https://www.dropbox.com/s/3jx75zk09a1znml/pricing_tables_mockup.jpg?dl=0

    Kind Regards,

    Newton

    December 27, 2017 at 7:54 pm #892203
    Victoria

    Hi Newton,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.main_color .pricing-table-wrap:nth-child(2) .pricing-table li.avia-pricing-row, 
.main_color .pricing-table-wrap:nth-child(2)  li.avia-heading-row,
.main_color .pricing-table-wrap:nth-child(2) .pricing-table li.avia-heading-row .pricing-extra {
    background-color: #418fdd;
    border-color: #529fee;
}

.main_color .pricing-table-wrap:nth-child(1) .pricing-table li.avia-pricing-row, 
.main_color .pricing-table-wrap:nth-child(1)  li.avia-heading-row,
.main_color .pricing-table-wrap:nth-child(1) .pricing-table li.avia-heading-row .pricing-extra, 
.main_color .pricing-table-wrap:nth-child(3) .pricing-table li.avia-pricing-row, 
.main_color .pricing-table-wrap:nth-child(3)  li.avia-heading-row,
.main_color .pricing-table-wrap:nth-child(3) .pricing-table li.avia-heading-row .pricing-extra {
  background-color: #8e868b;
  border-color: #c7c2b8;
}

#top .main_color .pricing-table-wrap:nth-child(1) .avia-color-theme-color,
#top .main_color .pricing-table-wrap:nth-child(3) .avia-color-theme-color {
    background-color: #8e868b;
   border-color: #c7c2b8;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    January 2, 2018 at 10:37 pm #892626
    newtonlinchen

    Victoria, you are the best.

    Worked like a charm.

    Thanks!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘PRICING TABLES Configuration’ is closed to new replies.