Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • April 27, 2018 at 3:36 pm #947995
    Tobias

    Hello Kriesi support team,
    I would like tu use the new button row element of Enfold 4.3
    but dont get the buttons to a rounded style like shown at https://kriesi.at/themes/enfold-elegant-portfolio/#footer-template
    The buttons remaining square styled.
    Could You please give a hint how to adjust?

    kind regards

    April 29, 2018 at 8:12 am #948560
    Victoria

    Hey Tobias,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    May 2, 2018 at 3:13 pm #950098
    AnnemarieDoolin

    I got them round as I wanted to do the same – added below to Quick CSS. :-)

    USING MEDIUM SIZE BUTTON
    #top .avia-button, #top .av-menu-button > a .avia-menu-text {
    border-radius: 100px;
    line-height: 18px;
    }
    USING LARGE SIZE BUTTON
    #top .avia-button, #top .av-menu-button > a .avia-menu-text {
    border-radius: 100px;
    line-height: 42px;
    }

    May 2, 2018 at 8:17 pm #950254
    Jordan Shannon

    Hey Annemarie,

    Thanks for your input on this.

    Best regards,
    Jordan Shannon

    May 3, 2018 at 2:37 pm #950800
    AnnemarieDoolin

    Sorry I jumped the gun because it effects styling on default buttons… but have pursued a solution on this thread…
    Reply to: Custom styling for the new button row element

    May 3, 2018 at 7:45 pm #951034
    Jordan Shannon

    Hey Annemarie,

    Was the solution you posted able to help you?

    Best regards,
    Jordan Shannon

    May 3, 2018 at 10:56 pm #951134
    Tobias

    Hi Jordan,
    I think the question is still open as also described in post-946293

    kind regards
    Tobias

    May 3, 2018 at 10:58 pm #951135
    Jordan Shannon

    Hey Tobias,

    Do you have a link to your site available?

    Best regards,
    Jordan Shannon

    May 7, 2018 at 4:10 pm #952732
    AnnemarieDoolin

    Hej Tobias,

    The code I used did give me the rounded buttons in the Button Row element (and I was rather pleased with myself!)… BUT the border-radius 100px now overrides the border-radius on all standard buttons so my default buttons have now taken on the button row element “border-radius; 100px” :-(

    May 7, 2018 at 5:08 pm #952763
    Tobias

    Hello everyone,
    this is a link to a demo of the described behavior: https://www.outdoor-inn.de/demo-button-row-element/
    But You will get the same result by using a new installation from scratch.
    Maybe there is a possibility to define border-radius: 100px only to a dedicated element by using user defined CSS class?

    kind regards

    May 7, 2018 at 5:09 pm #952765
    Jordan Shannon

    Hey Annemarie,

    We likely have to be more specific with the css. Please provide a link to the site/page in question so I can help you.

    Best regards,
    Jordan Shannon

    May 8, 2018 at 4:13 pm #953435
    Tobias

    Based on the hint by Ismael,
    finally I get the solution:
    1. at Enfold Child settings > Tab “Layout Builder”: activate the checkbox for Show element options for developers
    2. insert Quick CSS: (th-class1 can be renamed to Your needs)

    #top .th-class1 .avia-button {
  border-radius: 100px;
}

    3. add th-class1 to the userdefined CSS class of the button-row-element

    Topic is resolved.
    Thanks everyone for participation!!
    kind regards
    Tobias

    May 9, 2018 at 4:59 pm #954053
    Jordan Shannon

    Hi,

    I’m glad you were able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘button row element – round styled buttons’ is closed to new replies.