CSS style of selected tab

Forums Dynamic Forms for SharePoint CSS style of selected tab

Tagged: ,

Viewing 7 reply threads
  • 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 2 years, 9 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!

Viewing 7 reply threads
  • You must be logged in to reply to this topic.