FANDOM


  • I'm making a custom tabber, and for some reason there's a border around the tabber content even though I specifically put no border in my code. What am I doing wrong?

    .custom-tabber-1 .tabberlive,
    .custom-tabber-1 .tabbertab,
    .custom-tabber-1 .tabbernav {
        margin: 0px;
        padding: 0px;
        border: 0px solid transparent;
        background: #fff;
    }
    .custom-tabber-1 .tabbernav li {
        border: 3px solid transparent;
    }
    .custom-tabber-1 .tabbernav li a,
    .custom-tabber-1 .tabbernav li a:hover,
    .custom-tabber-1 .tabbernav li a:link,
    .custom-tabber-1 .tabbernav li a:visited,
    .custom-tabber-1 ul.tabbernav li.tabberactive a {
        border:none !important;
        border-radius: 3px;
        background: linear-gradient(to bottom right, #89d1d9 0%, #3e8991 50%, #025159 100%) !important;
        font-family: Abeezee !important;
        font-size: 20px !important;
        color: #f8f8f8 !important;
        font-weight: 300 !important;
        margin:0 !important;
        padding:2px 12px !important;
        cursor:default;
    }
    .custom-tabber-1 ul.tabbernav li.tabberactive a {
        color: #89d1d9;
    }
    
      Loading editor
    • I am guessing it is because the default CSS uses ".tabberlive .tabbertab". Try using ".custom-tabber-1 .tabberlive .tabbertab". FYI, in general, you should try to get your selectors so that you don't need to use "!important".

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.