0

My goal is to change the color of an actionButton in Shine sidebar. In my dashboard content is organized using navbarPage.

I found different solutions, for example:

  • Using the style argument in actionButton: See here
  • Using tags directly: See here

These both work great, but as soon as I add a navbar to the dashboard they stop working. The only thing changing color seems to be the border of the button instead of the whole background.

Below a reproducible example.

This works

library(shiny)

shinyApp(
ui = fluidPage(
          
  titlePanel("Styling Action Button"),
  sidebarLayout(
    sidebarPanel(
      h4("Default CSS styling"),
      # default styling
      actionButton('downloadData1', label= 'Download 1'), 
      tags$hr(),
    
      actionButton("download1", label="Download with style", class = "butt1"),
      # style font family as well in addition to background and font color
      tags$head(tags$style(".butt1{background-color:orange;} .butt1{color: black;} .butt1{font-family: Courier New}"))
      
      
    ),
    mainPanel()
  )
),

  server = function(input, output){}

)

This doesn't work

library(shiny)

shinyApp(
  ui = fluidPage(
    navbarPage("Test multi page", 
               tabPanel("test",           
                        titlePanel("Styling Action Button"),
                        sidebarLayout(
                          sidebarPanel(
                            h4("Default CSS styling"),
                            # default styling
                            actionButton('downloadData1', label= 'Download 1'), 
                            tags$hr(),
                            
                            actionButton("download1", label="Download with style", class = "butt1"),
                            # style font family as well in addition to background and font color
                            tags$head(tags$style(".butt1{background-color:orange;} .butt1{color: black;} .butt1{font-family: Courier New}"))
                            
                            
                          ),
                          mainPanel()
                        )
               ))),
  
  server = function(input, output){}
  
)

This doesn't work either

library(shiny)

shinyApp(
  ui = fluidPage(
    navbarPage("Test multi page",  theme = shinytheme("cerulean"), 
               tabPanel("test",   
    titlePanel("Styling Download Button"),
    sidebarLayout(
      sidebarPanel(
        h4("Default CSS styling"),
        # default styling
        actionButton('downloadData1', label= 'Download 1'), 
        
        
        actionButton("download1", label="Download with style",
                     style="color: #fff; background-color: #337ab7")
        
        
      ),
      mainPanel()
    )
  ))),
  
  server = function(input, output){})
Community
  • 1
  • 1
thepule
  • 1,721
  • 1
  • 12
  • 22

1 Answers1

1

Referring to your third example, the following works if you don't use shinythemes:

actionButton("download1", "Download with style", style = "color: white; background-color:#4682b4")

You can change color according to your choice. style will change button text color and background-color will change button color using HTML HEX code. You can get any HEX code here: http://htmlcolorcodes.com/

thepule
  • 1,721
  • 1
  • 12
  • 22
Santosh M.
  • 2,356
  • 1
  • 17
  • 29
  • Tried this before (point 1 in the bullet list above), still have the same problem. I updated the question to include the example. – thepule Oct 23 '17 at 13:26
  • 1
    Your second reproducible example is working. It doesn't work while using `shinytheme`. But works with `navbarPage`. – Santosh M. Oct 23 '17 at 14:19
  • I see. Interesting. Do you know why it doesn't work with `shinytheme`? – thepule Oct 23 '17 at 14:28
  • After looking into it, I think `shinytheme` overrides buttons coloring somehow. Not sure on the details, but there are pre-existing classes for buttons that allow for different colors, in line with the main theme chosen. I will accept your answer. – thepule Oct 23 '17 at 14:36
  • 1
    Thats what I found. Agree with you. Choosing suitable theme with preexisting button class would work in this case. Good luck!. – Santosh M. Oct 23 '17 at 14:42