1

I'll explain the example through the following link. https://shiny.rstudio.com/gallery/tabsets.html

I want to put a different color on each tab.

ex) plot(background:red), summary(background:orange), table(background:green).

I thought of giving each tab an tag: class or id and putting a color in the corresponding tag: class or id. But I do not know what to do.

enter image description here

This is the example what I tried.

 mainPanel(
      tags$head(
        tags$style(HTML("
          .one {background-color: red;}
          ")),
        tags$style(HTML("
          .two {background-color: orange;}
          ")),
        tags$style(HTML("
          .three {background-color: green;}
          ")),
      ),
      tabsetPanel(
        tabPanel("plot", class = "one",
                 tags$div(
                   some code..
                 )
        ),

        tabPanel("summary", class = "one",
                 tags$div(
                  some code..
                 ) 
        ), 

        tabPanel("table", class = "one",
                 tags$div(
                  some code..
                 ) 
        )
    )
  )

But it's not worked. Can anyone help with this?

S.Kang
  • 581
  • 2
  • 10
  • 28
  • It's not worked. `mainPanel( tags$style(HTML(" .tabs-above > .nav > li > a { background-color: #000; color: #FFF; }")), tabsetPanel( tabPanel("Hello", ....)` Am I using `mainPanel` instead of `fluidPage`? – S.Kang Mar 31 '17 at 03:53
  • If it is not working for you, then make a small example and post the code for that. Figuring out code in a comment is really not very fun. – Mike Wise Mar 31 '17 at 09:24
  • I posted again edit using the example. – S.Kang Apr 03 '17 at 13:11
  • 1
    I respectfully submit that this is, and was never, a duplicate for two reasons. One: the original link is about setting the color of the active tab, not a background tab. There is a difference since it relies on the active attribute, which obviously the other tabs do not have. Two: the original link solution no longer works as the class hierarchy has changed. – Mike Wise Apr 03 '17 at 15:47
  • I have a correct answer too, one that I would like to post. – Mike Wise Apr 03 '17 at 15:56
  • library(shiny) ui <-shinyUI(fluidPage( tags$style(HTML(" .tabbable > .nav > li > a[data-value='summary'] {background-color: orange;} .tabbable > .nav > li > a[data-value='plot'] {background-color: red;} .tabbable > .nav > li > a[data-value='table'] {background-color: green;} .tabbable > .nav > li[class=active] > a {background-color: black;} ")), tabsetPanel( tabPanel("summary",h2("summary")), tabPanel("plot",h2("plot")), tabPanel("table" ,h2("table")) ) )) server <- function(input, output) {} shinyApp(ui=ui,server=server) – Mike Wise Apr 03 '17 at 16:12
  • Should I use `fluidPage`? Does `mainPanel` not work? – S.Kang Apr 04 '17 at 01:36
  • Nothing to do with it. – Mike Wise Apr 04 '17 at 08:15
  • Ok, seeing as I can't get Jaap's attention, I just posted the solution in the "duplicate" link. – Mike Wise Apr 04 '17 at 08:27

0 Answers0