Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • June 29, 2020 at 9:25 pm #1226598
    Stepconsulting

    Hi,
    I’m trying to personalize my Pricing table with some custom css. I’ve looked and copied codes from other opened topics but with no result.
    I would like to make these changes:
    1.) Whole background of the table white
    2.) Without borders and lines
    3.) With rounded corners

    This is the table: https://www.step-lab.com/wp-content/uploads/Schermata-2020-06-29-alle-21.18.03.png
    And this is the page: https://www.step-lab.com/prodotti/attuatori-elettrodinamici-con-motori-lineari/

    The only thing I’ve managed to modify is the shadow of the box.

    Thank you in advance,
    Anita

    June 30, 2020 at 2:49 pm #1226766
    Nikko

    Hey Stepconsulting,

    Please try adding this CSS code:

    #top .pricing-table li, 
#top .pricing-table.avia-highlight-col .pricing-extra {
    background-color: white;
}

#top .pricing-table li {
    border-top: none !important;
}

    Best regards,
    Nikko

    June 30, 2020 at 6:48 pm #1226876
    Stepconsulting

    Thank you Nikko,
    that worked.
    There is the third point that is unsolved: I would like the corners of the tables to be more rounded. Now I can see that there is a 3px value but I want to bring it to 8px.

    Thank you,
    Anita

    June 30, 2020 at 6:55 pm #1226879
    Victoria

    Hi Anita,

    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

    
.pricing-table.avia-highlight-col .pricing-extra {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}
#top .pricing-table li.avia-button-row {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.pricing-table.avia-highlight-col {
    border-radius: 12px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    July 1, 2020 at 3:52 pm #1227270
    Stepconsulting

    Thank you very much Victoria!
    I have one last question: is there a way to make the column as link? I do not want the button row but to add a link to a single box > see the 3 boxes under the banner (layerslider): https://www.step-lab.com/prodotti/attuatori-elettrodinamici-con-motori-lineari/.
    Event through a shortcode is fine as I’m using it.

    Thank you.
    Kind regards,
    Anita

    July 2, 2020 at 5:46 am #1227379
    Nikko

    Hi Anita,

    Since you are using a pricing table, unfortunately, there’s no way to make the whole column a link :(

    Best regards,
    Nikko

    July 2, 2020 at 11:06 am #1227435
    Stepconsulting

    Hi Nikko,
    and what about the single cell? I do not want to link the text but the area of the text > li or td
    I have this shortcode, where would it be correct to place the link?
    [av_cell col_style='avia-highlight-col' av_uid='av-bwxwcd9'][av_heading heading='Attuatori UD' tag='h3' style='blockquote modern-quote modern-centered' subheading_active='' size='26' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' color='' custom_font='' margin='10px,,,' padding='10' link='' link_target='' id='' custom_class='' av_uid='av-kc0wsv6u' admin_preview_bg=''][/av_heading][/av_cell]
    Note that I do not want to put the link here: link=” because that would link the text and not the cell (and text would have the underline decoration!).

    Thank you,
    Anita

    July 2, 2020 at 12:21 pm #1227450
    Stepconsulting

    Hi,
    I’ve changed the element to icon grid and i’ve managed to do some personalizations in css.
    These are the things I cannot manage to change:
    1.) I would like the corners to be rounded
    2.) I would like to add some shadow to each box
    3.) I would like to reduce the height of each box, I can see now is set to min-heigh: 290px but I cannot manage to reduce it to 250 px.

    This is the page: https://www.step-lab.com/prodotti/attuatori-elettrodinamici-con-motori-lineari/
    And this is the grid element: https://www.step-lab.com/wp-content/uploads/Schermata-2020-07-02-alle-12.17.55.png

    Thank you very much.
    Kind Regards,
    Anita

    July 2, 2020 at 3:07 pm #1227519
    Stepconsulting

    I’ve managed to solve almost everything. The only thing that I haven’t resolved is the minimum height issue I want to bring it from 290px to 250px.

    Thank you,
    Anita

    July 4, 2020 at 3:51 pm #1227937
    Stepconsulting

    Hi,
    I have one question regarding the strong tag of the <p> text: how come the font doesn’t appear in bold when I add the strong and it appears only in red color. Where can I change this setting?

    Thanks,
    Anita

    July 5, 2020 at 11:58 pm #1228116
    Nikko

    Hi Anita,

    I apologize for the delayed response.
    I see you have already managed to change the minimum height.
    As for the bold tag, by default it should appear in bold since it is defined in base.css:

    strong, b {
    font-weight: bold;
}

    You can change the setting in Enfold > Advanced Styling > (Select an element to customize), select < strong > and click Edit Element.

    Best regards,
    Nikko

    July 6, 2020 at 9:14 pm #1228363
    Stepconsulting

    Hi Nikko,
    I have one urgent problem: I have a layer slider on my homepage that doesn’t show. I’ve tried to empty the cache, I’ve even activated “always load all elements” on themes options, tried to apply a shortcode but nothing.
    This is the layerslider that I would like on homepage, it is called “Prodotti homepage”: https://www.step-lab.com/64414-2/
    And this is homepage result: https://www.step-lab.com/
    So you see a blank white space?!
    And then on mobile devices there is also a huge whitespace even if I set “hide on mobile” under 500px on layerslider settings. On other pages the layerslider is functioning without any problem.
    It is urgent.

    I’ll leave you my WP credentials to analyze the bug.

    Regards,
    Anita

    July 7, 2020 at 2:11 am #1228459
    Nikko

    Hi Anita,

    Can you give a screenshot of the issue?
    Both pages look the same on my end and it also shows properly.

    Best regards,
    Nikko

    July 8, 2020 at 9:00 pm #1228993
    Stepconsulting

    Hi Nikko,
    I’ve rebuilt the page from scratch and layerslider now shows.

    Thank you.
    Kind regards,
    Anita

    July 9, 2020 at 2:30 am #1229016
    Nikko

    Hi Anita,

    We’re glad to hear that :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Pricing table’ is closed to new replies.