Tagged: 

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • August 3, 2018 at 4:45 am #993078
    B

    Hello, is there a way I can easily change the colour of the dark translucent button? It’s currently a dark grey and I’m wanting to change it to red #ec0928

    August 3, 2018 at 10:51 am #993165
    Rikard

    Hey B,

    Could you post a link to where we can see the element in question please?

    Best regards,
    Rikard

    August 16, 2018 at 1:32 am #997730
    B

    Hi Rikard, see link below – also is there a way to centre the text in the button?

    The button is just over half way down the page on the left.

    Also is there a way to disable the image effect on the gallery at the bottom of the page, for some reason all the images look dark until I hover over them and then they are the normal colours, I just want them to look at their normal colours regardless of where the mouse is

    August 16, 2018 at 6:23 am #997789
    Mike

    Hi,
    Please try this code in the General Styling > Quick CSS field:

    #top.page-id-4359 .avia-button.avia-color-dark {
    border: 0px !important; 
    color: #fff !important; 
    border-color: #ec0928 !important; 
    background: #ec0928 !important; 
}

    Best regards,
    Mike

    August 16, 2018 at 10:25 pm #998185
    B

    Hi Mike,
    I added this but its now showing as fully red, I was wanting the button to still be translucent but with a red border. Also how do centre the text in the button vertically?

    August 17, 2018 at 5:35 am #998256
    Mike

    Hi,
    For the border, please remove the css I gave you and replace it with this css:

    #top.page-id-4359 .avia-button.avia-color-dark {
    border-color: #ec0928 !important; 
}

    To center the text on the buttons, please try this:

    #top.page-id-4359 .avia-button.avia-size-x-large {
    padding: 11px 50px !important; 
}

    If this doesn’t help Can you please include a admin login in the private content area so we can take a closer look.

    Best regards,
    Mike

    August 17, 2018 at 5:38 am #998257
    B

    Hi Mike,

    Yes that has changed the colour of the border thank you, how do i also change the colour of the text to red? And centre the text? Its centered horizontally but not vertically.

    Thanks!

    August 17, 2018 at 5:41 am #998258
    B

    Will that code only affect the page that its currently published on? I’d like it to be sitewide if possible

    August 17, 2018 at 6:19 am #998263
    Mike

    Hi,
    Did you find the second code snippet to help with centering the text vertical after clearing your cache? I just took a look and it seems to be working.
    To make it site-wide, please remove the page ID from the code (.page-id-4359)

    Best regards,
    Mike

    August 17, 2018 at 6:24 am #998266
    B

    Hi yes it has thank you. It has only centred the button text on the button that has the border though, is there a way to centre the text for all buttons? I tried to add font-color: #ec0928 !important; but that didn’t work

    August 17, 2018 at 7:01 am #998279
    Mike

    Hi,
    To change the font color of the button with the boarder, try this:

    #top .avia-button.avia-color-dark {
color: #ec0928 !important
}

    As for vertically centering the text on the buttons site wide, we will need to make them more uniform, on the one page there are 3 different buttons, with 3 different heights.
    Please try this css:

    .avia-button.avia-size-x-large,.avia-button.avia-button-fullwidth,.avia-button.avia-size-large {
    padding-top: 12px !important; 
}
.avia-button-wrap.avia-button-center,.avia-button-wrap.avia-button-left {
height: 45px !important;
max-height: 45px !important;
}

    Best regards,
    Mike

    August 19, 2018 at 10:34 pm #999113
    B

    Hi Mike,

    Thanks, the css to change the colour of the button text worked but the other css to centre the button text vertically hasn’t worked, I’ve cleared my cache.

    August 20, 2018 at 3:37 pm #999417
    Nikko

    Hi B,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top #wrap_all .avia-button .avia_iconbox_title {
    position: relative;
    top: 3px;
}

#top #wrap_all .avia-button.avia-color-dark .avia_iconbox_title {
    top: 0;
}

    Hope it helps.

    Best regards,
    Nikko

    August 20, 2018 at 10:21 pm #999616
    B

    Hi Nikko,

    Thanks, that has worked for the X-large button but not for the large or full width buttons

    August 21, 2018 at 11:48 am #999771
    Mike

    Hi,
    Please try adding this css:

    #top #wrap_all .avia-button-fullwidth .avia_iconbox_title {
    position: relative;
    top: -3px !important; 
}

    It seemed the full width button was the only one that was off on the ASX page, I tried looking at some other pages for a button that was off centered, but didn’t find any. Please point to any that you find.

    Best regards,
    Mike

    August 21, 2018 at 10:39 pm #1000069
    B

    Hi Mike,
    Thanks for your help, I think it’s pretty much centered now, its definitely not noticeably off centered like it was before anyway!

    August 21, 2018 at 11:02 pm #1000079
    Mike

    Hi,
    That is great news, unless there is anything else we can assist with, shall we close this then?

    Best regards,
    Mike

    August 21, 2018 at 11:05 pm #1000082
    B

    Hi Mike, I have another question related to the gallery, is it best to open a new thread as its a different topic?

    August 21, 2018 at 11:18 pm #1000085
    Mike

    Hi,
    Please do open a new thread, as it’s a different topic and this one is long, thanks.

    Best regards,
    Mike

    August 21, 2018 at 11:19 pm #1000086
    B

    Will do. Thanks again for your help with this!

    August 22, 2018 at 1:18 am #1000094
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Change the default colour of the dark translucent button’ is closed to new replies.