Okay
  Public Ticket #2835446
Styling Tab Buttons
Closed

Comments

  •  1
    John started the conversation
    July 27, 2021 at 1:52pm

    How do I use CSS to style the colour of the icon and text on one particular Tab button (Where to Buy) on this tabbed section - https://hopeful-fermat.212-48-69-126.plesk.page/neve-genesys-black-console/#MoreInfo

  •  1,878
    Judith replied
    July 27, 2021 at 2:03pm

    Hi John,

    Thanks for keeping in touch.

    Please send in your admin login credentials so that we can look into this further.

    Thanks.

  •   John replied privately
  •  1,878
    Judith replied
    July 27, 2021 at 3:33pm

    Hi John,

    Please try this css:

    i.iconsmind-Map-Marker2 {
        color: green;
    }

    Thanks.


  •  8,847
    Tahir replied
    July 27, 2021 at 3:36pm

    Hey Again

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .tabbed[data-style="minimal_alt"] >ul li:not(.cta-button) a[href="#tab-1627398317907-1"] {
    color: #f00 !important;
}

    Thanks

    ThemeNectar Support Team 

  •  1
    John replied
    July 28, 2021 at 9:07am

    Thanks for this - is there any way to add this as a custom class that can be used on multiple tabs across similar pages?

    Just conscious that the CSS below references a unique tab id. 

    Regards

    John

  •  8,847
    Tahir replied
    July 28, 2021 at 9:23am

    Hey Again,

    I am afraid the Tab Elements do not allow for any extra class addition.

    Thanks 

    ThemeNectar Support Team 

  •  1
    John replied
    July 30, 2021 at 10:11am

    OK thanks, I have another question on tabs:

    Is it possible to increase the vertical spacing between tabs icons/titles on mobile view when they are stacked above one another - they just look rather bunch up and the red active tab bar nearly hits the icon of the tab stacked below. 

  •  8,847
    Tahir replied
    July 30, 2021 at 10:21am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
    .tabbed[data-style="minimal_alt"] > ul li:not(.cta-button) {
        margin: 15px 10px!important;
    }
}

    Thanks

    ThemeNectar Support Team