Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 21, 2020 at 12:12 pm #1261919
    emielvanwegen

    Good day team Kriesi!

    Thanks for the great theme! Loving every bit of it. Here’s a question. I am in need of 2 different stylings for a “fullwidth button”. See my examples on this page:

    http://staging.lysandro.nl/test-team-kriesi/

    Button 1 = Default button. Mostly used. This is styled the way I need it to be…. So no changes here.
    Button 2 = The alternative Fullwidth button I need. The hoover over effect is correct, but I am missing a border line
    Button 3 = This normal button has the border line, this is what I need to see for button 2 too.

    QUESTION: how to force a border line in Fullwidth Button 2?

    Thank you in advance for your support.

    November 21, 2020 at 10:30 pm #1262024
    Victoria

    Hey Emiel,

    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

    
#top .avia-builder-el-6 .avia-button-fullwidth {
    border: #ccc 1px solid;
}

    But you need to add a custom class to that button in the Developer settings.

    If you need further assistance please let us know.

    Best regards,
    Victoria

    November 23, 2020 at 11:31 am #1262311
    emielvanwegen

    Thank you Victoria for looking into this. It did half of the trick! The only thing left now is the color of the border of button 2. Please compare the color of the border of button 3 (gold brown) to the now updated button 2 (grey). How can I force the border color in the theme color?

    http://staging.lysandro.nl/test-team-kriesi/

    November 24, 2020 at 7:06 am #1262585
    Rikard

    Hi,

    Thanks for the update. Please try this CSS instead:

    #top .avia-builder-el-6 .avia-button-fullwidth {
    border: 1px solid #ab8e66;
}

    Best regards,
    Rikard

    November 24, 2020 at 7:05 pm #1262787
    emielvanwegen

    Thank you. A little follow up is needed unfortunately.

    It now clearly works at the page I shared above: http://staging.lysandro.nl/test-team-kriesi/
    It shows exactly what I need (button 2).

    However I now implemented this on the home page, and there it is not showing up the way it should (the middle button), see here:

    http://staging.lysandro.nl/#afspraak
    The middle button still does not show the border.

    Thank you again for checking!

    PS: there is not much custom CSS on the site, just in case you need it, here is all the CSS I have active currently:
    h1, h2, h3 { text-transform: none !important; }
    h2 { font-style: italic !important; }
    h6 { text-shadow: 10px 10px 40px rgba(151,142,122,1); }
    .title_container { display: none; }
    .avia-button { font-size: 20px !important; }
    #top .avia-builder-el-6 .avia-button-fullwidth { border: 1px solid #ab8e66; }
    “time.slide-meta-time { display: none!important; }
    .avia-content-slider-inner { height: auto!important; }”
    “.mega_menu_title.heading-color.av-special-font{
    font-family: Lato!important;
    }”
    .news-time { display: none; }

    • This reply was modified 4 years ago by emielvanwegen. Reason: It looked to work, but then it was not working on all pages
    November 25, 2020 at 7:15 pm #1263060
    Victoria

    Hi emielvanwegen,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    November 26, 2020 at 6:05 pm #1263315
    emielvanwegen

    Hi Victoria, sure thing. No problem. Credentials shared privately.

    So this page http://staging.lysandro.nl/test-team-kriesi/ was the test page, and your colleagues CSS seems to work just fine (button 2).

    But unfortunately, it is not working on the home page:
    http://staging.lysandro.nl/#afspraak
    Please check the middle button (Look for “Aanvraagformulier”).

    November 26, 2020 at 8:01 pm #1263355
    Victoria

    Hi emielvanwegen,

    This code will work for the home page:

    

#top .avia-builder-el-66 .avia-button-fullwidth {
    border: 1px solid #ab8e66;
}

    Best regards,
    Victoria

    November 29, 2020 at 11:55 am #1263761
    emielvanwegen

    That looks awsome! Thank you Victoria, thank you team. Case closed!

    November 29, 2020 at 8:58 pm #1263816
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Alternative Fullwidth Button Styling – Border Color’ is closed to new replies.