Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 1, 2019 at 4:28 pm #1061602
    sonejder

    Hello,

    I want to change the css of a button with custom css ID like “button_new” but it´s not working, even not with an !important.
    Like that:
    .button_new {
    border-radius: 15px !important;
    }
    But If I change that quick css class below for that button, than it´s working.
    My problem is, that I need different style for the buttons with “button_new” class.
    What can I do?
    Thanks for response.

    #top .avia-button-fullwidth {
    font-size: 1em!important;
    border-radius: 0px 0px 10px 10px;
    padding: 17px 33px 17px!important;
    margin-bottom: 10px !important;
    -webkit-transition: all 0.5s ease-in-out !important;
    -moz-transition: all 0.5s ease-in-out !important;
    -o-transition: all 0.5s ease-in-out !important;
    transition: all 0.5s ease-in-out !important;
    }

    February 1, 2019 at 5:31 pm #1061622
    Guenni007

    Well Classes and IDs are two different things.
    A class in css code has a dot in front of it ( but do not insert in that ALB Inputfiled the class with that dot)
    so in your code as you did it the rule is f.e.:

    .button_new {
border-radius: 15px !important;
}

    but in the input field of your button you only fill in: button_new
    because this is a common mistake, I mention this in advance – because I can’t see a lifelink to check it.

    So if you can make it public it is easier to find the correct code.

    #top .button_new {
border-radius: 15px !important;
}

    Next is: The css works with a specifity calculator – that means if a rule is more specific than another one it has more weight.
    An additonal ID f.e. like #top can make the decission to show or not
    and on the fullwidth button the class goes to the wrapper of the button – this is one level above
    try:

    body .button_new .avia-button-fullwidth {
    border-radius: 15px;
}
    February 1, 2019 at 5:47 pm #1061636
    sonejder

    Hey Guenni007,

    thank you very much for your advice. That worked!!!!
    I tried wrong things, never thaught about to use body and I put wrongly .avia-button-fullwidth as first in that line.

    Thank you very much for your help.

    Best wishes,
    sonejder

    February 2, 2019 at 5:17 am #1061845
    Vinay

    Hi,

    Glad this is resolved

    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Custom CSS Class not working’ is closed to new replies.