Tagged: ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 15, 2017 at 11:20 pm #839636
    newtonlinchen

    Hello!

    I’m not finding where can I change the colors of the pricing tables.

    Specially, I would like to have each column with different colors.

    How can I do that?

    Thanks in advance!

    Newton

    August 16, 2017 at 8:39 am #839762
    Rikard

    Hey newtonlinchen,

    You will need custom CSS to achieve that, please post a link to your site and point out the changes you would like to make.

    Best regards,
    Rikard

    August 16, 2017 at 2:50 pm #839899
    newtonlinchen

    Hello,

    This is the website: http://www.linchen.com.br/curso-setups-robo/

    In the bottom you can see the two column pricing table.

    I would need two things:

    1. Change the height and width of them (they are looking like boxes right now, not columns);

    2. Change their color (specially, I would need to have different collors for each one of them, so I can manage to make a special case for the discount one).

    That’s it. :)

    August 16, 2017 at 5:58 pm #840022
    Sarah

    Hi!

    1. For this, can you send us a mockup of what you would like the tables to look like?

    2. I’ve made an example code for you for changing the colors of the discount column. I’ve made the colors very obvious (and quite ugly right now) so that you can easily see how each line of code affects the column. Please change the colors to suit your preference! Please try this in quick CSS:

    .main_color > div:nthchild(2) .pricing-table li.avia-heading-row {background-color: red!important; }
.main_color > div:nthchild(2) .pricing-table li.avia-heading-row .pricing-extra {background-color: darkred!important; }
.main_color > div:nthchild(2) .pricing-table li.avia-pricing-row {background-color: green!important; color: black!important;}
.main_color > div:nthchild(2) .pricing-table>li.avia-button-row {background-color:gold!important;}

    If you would like to control the first column, please make a copy of this code then replace div:nthchild(2) with div:firstchild.

    I hope that was clear and helpful. Please let us know if you have other questions. We look forward to helping you with #1 as well.

    Best regards,
    Sarah

    August 16, 2017 at 9:47 pm #840086
    newtonlinchen

    Hello,

    I did what you asked, but nothing happened.

    Newton.

    August 18, 2017 at 3:02 pm #840892
    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 li.avia-heading-row, 
.main_color .pricing-table li.avia-heading-row .pricing-extra {
    background-color: #ccc !important;
    color: #ffffff;
    border-color: #666 !important;
}
.main_color .pricing-table li.avia-pricing-row {
    background-color: #F44336 !important;
    color: #ffffff;
    border-color: #FF5722 !important;
}
.main_color .pricing-table>li.avia-button-row {
   background-color: green !important;
   border-color: #FF5722 !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    August 21, 2017 at 4:49 pm #842086
    newtonlinchen

    Hello,

    This last code you sent me both did and didn’t work.

    It did work: It really changed the colors of the pricing table.

    It didn’t work: The main point was to be able to have different colors for the different columns, and this point the code didn’t provide.

    How can I have both?

    Newton

    August 22, 2017 at 6:16 pm #842679
    newtonlinchen

    Posting again:

    Hello,

    This last code you sent me both did and didn’t work.

    It did work: It really changed the colors of the pricing table.

    It didn’t work: The main point was to be able to have different colors for the different columns, and this point the code didn’t provide.

    How can I have both?

    Newton

    August 24, 2017 at 12:10 pm #843435
    Ismael

    Hi,

    Please use css child selectors. Example:

    .main_color .pricing-table-wrap:nth-child(1) .pricing-table li.avia-pricing-row {
    background-color: #ffffff !important;
    color: #55606e;
    border-color: #ccc !important;
}

    The code above will only be applied to the first table because of the “nth-child(1)” selector.

    // https://www.w3schools.com/cssref/sel_nth-child.asp

    Best regards,
    Ismael

    December 18, 2017 at 9:18 am #889931
    newtonlinchen

    Guys,

    I didn’t quite accomplished what I wanted here.

    Here’s the website link to the pricing table:

    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 22, 2017 at 6:46 am #891479
    Ismael

    Hi,

    Could you please provide a screenshot of the table layout or design? Use imgur or dropbox.

    Best regards,
    Ismael

    December 22, 2017 at 4:19 pm #891611
    newtonlinchen

    You can close this thread, as I opened another one since it was taking to long. Victoria is helping me in the other one. Thanks.

    December 25, 2017 at 4:58 pm #891984
    newtonlinchen

    Hello (and Merry X-mas!)

    The support here indicates that the last comment was by Victoria, but I couldn’t find it.

    But you can close this thread and we continue in the other “PRICING TABLES Configuration”.

    Regards

    Newton

    December 26, 2017 at 12:13 am #892005
    Nikko

    Hi Newton,

    Sure, we will be closing this thread. Merry Christmas :)

    Best regards,
    Nikko

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