How to change tab background color on draft page

  • Resolved techwriter729

    (@techwriter729)


    1 year, 9 months ago

    I have a draft sandbox page in which I try out various things before I try them on a published page. I have a series of three vertical tabs I created using the SiteOrigin Tabs widget. I can’t find a way to change the background color of each tab to a different color (for example, I’d like to make tab 1 red, tab 2 blue, and tab 3 yellow). I’ve tried doing that in the widget’s Widget Styles/Attributes/CSS Declarations field, but it hasn’t worked so far. I’m probably entering the wrong content. My theme is Vantage.

    Here are my questions:

    1. Can custom CSS be applied to a draft page or will the custom CSS not appear until the page is published?

    2. If it is possible to change individual tab background colors in the Widget Styles/Attributes/CSS Declarations field, what CSS content/code/syntax should I enter to do that?

    3. If it is possible to change individual tab background colors in the Appearance/Custom CSS editor, what CSS content/code/syntax should I enter to do that?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Andrew Misplon

    (@misplon)

    Hi

    Thanks for getting in touch.

    It would require Custom CSS to set individual tab or tab background colors.

    Sure, you can use Custom CSS rules in draft posts or pages.

    Our SiteOrigin CSS, free support scope, focuses on the settings and features of the plugin. As you might imagine, there would be no scope limit if we had to directly assist with writing Custom CSS rules. One method of targeting tabs and tab backgrounds is nth-of-type. You can find out more about nth-of-type at the below URL:

    https://www.w3schools.com/cssref/sel_nth-of-type.php

    Changing tab background colors isn’t possible using widget or row CSS Declaration fields, it would need to be done using a Custom CSS rule.

    SiteOrigin CSS, unfortunately, doesn’t have an nth-of-type setting at the moment. I’ve forwarded your request for individual tab color settings to Alex at SiteOrigin so he can log the request.

    Thread Starter techwriter729

    (@techwriter729)

    Thanks so much for that information and for forwarding my request, Andrew.

    Plugin Support Andrew Misplon

    (@misplon)

    Thanks for your understanding and support; much appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change tab background color on draft page’ is closed to new replies.