Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • February 22, 2018 at 3:04 pm #916118
    buscoseo

    Dear, I need to give a rounded (border-radius) edge to the buttons that I believe in place, but, I do not know how to do it and it looks good, since I am deformed:

    Another question I have is that I can put the buttons that are in the image, side by side horizontally, but not separated? for example as in the EndFold OnePage demo:
    dual buttons

    On the other hand, I need to change the background color of the social buttons of the header and the footer, I do not know how to do it:
    icons background

    Thank you.
    Norberto

    • This topic was modified 6 years, 9 months ago by buscoseo.
    February 22, 2018 at 8:13 pm #916284
    Basilis

    Hey buscoseo,

    We are releasing a new update that will do support the buttons like that.
    Regarding the border-radius, please add the following CSS

    .avia-btn { border-radius: 5px; }

    Best regards,
    Basilis

    February 22, 2018 at 9:35 pm #916352
    buscoseo

    Hello, thanks for the answer.

    I have added the css code, but do not see changes, the buttons remain the same, I have tried several browsers.

    When do you think they will launch the update?

    On the other hand, I need to change the color of the social buttons of the header and the footer, I do not know how to do it.

    Thank you.

    February 23, 2018 at 6:34 am #916523
    Rikard

    Hi,

    Please try this instead for the border radius:

    a.avia-button {
  border-radius:20px !important;
}

    We try to put out one update per week now, it will likely be released early next week.

    Best regards,
    Rikard

    March 9, 2018 at 6:01 am #924266
    buscoseo

    hello, has already launched the new version that allows you to order lso buttons as I show in the image?

    On the other hand, I need to change the background color of the social buttons of the header and the footer, I do not know how to do it:
    icons background.

    March 9, 2018 at 2:46 pm #924512
    Victoria

    Hi,

    Best regards,
    Victoria

    March 10, 2018 at 5:32 pm #924960
    buscoseo

    Hi, Victoria, thanks for the reply.
    I mean this:

    I would like to leave it like this:
    img2
    ————————

    Another moderator, told me a few weeks ago that thema would be updated and would allow this configuration with the buttons.

    On the other hand, I would like to know how to change the background color of the social icons of the header and footer.
    img3

    Thank you.

    • This reply was modified 6 years, 9 months ago by buscoseo.
    March 10, 2018 at 8:09 pm #925006
    Mike

    Hi,
    I looked at your page and it seems the buttons already have the radius applied:
    2018-03-10_125848
    Perhaps try clearing your site & browser cache.
    You can change the social icons background-color by adding this code in the General Styling > Quick CSS field with the colors you want:

    #top #wrap_all .av-social-link-facebook:hover  a{color:#fff; background-color:#621AAC!important;  }
#top #wrap_all .av-social-link-twitter:hover   a{color:#fff; background-color:#621AAC!important;  }
#top #wrap_all .av-social-link-instagram:hover a{color:#fff; background-color:#621AAC!important;  }

    Best regards,
    Mike

    March 11, 2018 at 4:54 am #925137
    buscoseo

    hello, thanks, I was referring to how to put two buttons vertically aligned like this image:
    img7

    Your partner, I commented, that this would be available in an update of the theme.

    Thank you.

    March 11, 2018 at 5:58 pm #925226
    Mike

    Hi,
    If you would like this today for the two buttons at the top of your page, please add this code in the General Styling > Quick CSS field:

    .avia-button-center.avia-builder-el-3,.avia-button-center.avia-builder-el-4 {
display: inline-block !important;
}
.avia-button-center.avia-builder-el-3 {
margin-left: 23%;
}

    Best regards,
    Mike

    March 12, 2018 at 1:04 am #925308
    buscoseo

    Thanks Mike, it has been very good, but there is a problem from the mobile devices, it looks decentered, can be centered when viewed from a mobile resolution?

    Now it looks like this from a cell phone:

    • This reply was modified 6 years, 9 months ago by buscoseo.
    March 12, 2018 at 1:03 pm #925488
    Mike

    Hi,
    Please update the code to this, so that the buttons will stay stacked on mobile devices.

    @media only screen and (min-width: 767px) {
.avia-button-center.avia-builder-el-3,.avia-button-center.avia-builder-el-4 {
display: inline-block !important;
}
.avia-button-center.avia-builder-el-3 {
margin-left: 23%;
}
}

    Best regards,
    Mike

    July 18, 2018 at 1:51 pm #986970
    Europroject

    Hello,
    I have the same problem. My customer wants the icon background it’s visible not only in hover effect.
    I added this code:
    #top #wrap_all .av-social-link-facebook a{color:#fff; background-color:#254399!important; }
    #top #wrap_all .av-social-link-twitter a{color:#fff; background-color:#159dff!important; }
    #top #wrap_all .av-social-link-youtube a{color:#fff; background-color:#e90c13!important; }
    #top #wrap_all .av-social-link-instagram a{color:#fff; background-color:#9c28a7!important; }
    but the icon have the same background. I’m doing something wrong, I think.

    July 18, 2018 at 1:54 pm #986972
    Europroject

    cache problem. Sorry :)

    July 19, 2018 at 4:01 am #987244
    Mike

    Hi,
    Glad to hear it is resolved.

    Best regards,
    Mike

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Buttons with rounded edge and color background icons’ is closed to new replies.