CSS style of selected tab

Forums Dynamic Forms for SharePoint CSS style of selected tab

Tagged: ,

This topic contains 7 replies, has 3 voices, and was last updated by  Craig Campbell 3 months, 3 weeks ago.

  • Author
    Posts
  • #19828

    Phil Grant
    Participant

    Hi,
    I would like to change the colour of the selected tab (different to the default), I assume I can use the custom CSS box but Can someone give me guidance of how to do it, I’ve used “inspect element” but I can’t figure it out.

    Thanks,
    Phil

  • #19834

    Phil Grant
    Participant

    OK found it in another post 🙂

    but if I use this in the Custom CSS it doesn’t change the colour of the font to white?

    ul.tabRowLast li.tabSelected a{
        background-color: red!important;
    	color: white!important;
    	font-size:14px;
    	font-weight: bold;
    }
    • This reply was modified 5 months ago by  Phil Grant.
  • #19840

    Alexander Bautz
    Keymaster

    I tried this in my Custom CSS and it sets the background color to red and the forms color to white. Could it be that you have other CSS that overrides it?

    Alexander

  • #19846

    Phil Grant
    Participant

    I want to set the font in the selected tab to white against the red background, doesn’t the “Color: white” do that?

  • #19850

    Alexander Bautz
    Keymaster

    Yes, and when I tested it it looks like the attached image. If it doesn’t work in your setup you might have another CSS snippet that overrides it?

    Alexander

  • #20266

    Craig Campbell
    Participant

    Hi alex, is there a way to change the size and color of the other tabs that are not selected?

  • #20293

    Alexander Bautz
    Keymaster

    Here is an example to use in Custom CSS:

    /* Style base tab */
    li.tabBase a{
        background-color:gray!important;
        padding:0 2px!important;
    }
    li.tabBase span{
        color:black!important;
    }
    /* Style selected tab */
    li.tabSelected a{
        background-color:green!important;
        padding:2px!important;
    }
    li.tabSelected a span{
        color:yellow!important;
    }

    Alexander

  • #20355

    Craig Campbell
    Participant

    Thank you Alexander that works great!

You must be logged in to reply to this topic.