R Shiny App : override button background color while using a shinytheme

Question

Does anyone know how I can override background color of buttons in a R Shiny App while using shinythemes ?

I have tried tons of css since hours without success... I am getting crazy... I would be very grateful if anyone could help.

Here below an example of what I tried : it colors only the button when it is pressed, but I would like to have the colour ''permanently''

library(shiny)
library(shinythemes)
shinyApp(
  ui = 
    navbarPage(id = "intabset", 
               title = "HOME",
               windowTitle = "Data cleaning", 
               theme = shinytheme("cerulean"), 
               collapsible = TRUE, 
               header=tags$style(
                 "#actButt{
     background-color:red !important;
      color: black;
      -webkit-box-shadow: 0px;
      box-shadow: 0px;
           border:0px;
                 }
    #dwdButt{
     background-color:green !important;
      color: black;
      -webkit-box-shadow: 0px;
      box-shadow: 0px;
           border:0px;
                 }"),
               tabPanel(
                 title = " Home", icon = icon("home"),
                 mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
                           fluidRow(h3("Home page data cleaning")),
                           downloadButton('dwdButt',
                                          'Download data'),
                           actionButton('actButt',
                                          'Generate data'),
                             actionButton('actButt2',
                                        'Generate data 2',
                                        style = "background-color: red !important; color: black")
                           )
                 )# end tabpanel
    ), # end navbarpage
  server = function(input, output) {
  }
)

NB : I have seen this answer, but it does not help.

TimTeaFan · Accepted Answer · 2023-02-27T11:41:31.513

You need to set background-image: none; either for a single button id or for the whole class.

For one button id:

library(shiny)
library(shinythemes)

shinyApp(
  ui = 
    navbarPage(id = "intabset", 
               title = "HOME",
               windowTitle = "Data cleaning", 
               theme = shinytheme("cerulean"), 
               collapsible = TRUE, 
               header=tags$style(
                 "#actButt{
    background-image: none;
     background-color:red !important;
      color: black;
      -webkit-box-shadow: 0px;
      box-shadow: 0px;
           border:0px;
                 }
    #dwdButt{
     background-color:green !important;
      color: black;
      -webkit-box-shadow: 0px;
      box-shadow: 0px;
           border:0px;
                 }"),
    tabPanel(
      title = " Home", icon = icon("home"),
      mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
                fluidRow(h3("Home page data cleaning")),
                downloadButton('dwdButt',
                               'Download data'),
                actionButton('actButt',
                             'Generate data'),
                actionButton('actButt2',
                             'Generate data 2',
                             style = "background-color: red !important; color: black")
      )
    )# end tabpanel
    ), # end navbarpage
  server = function(input, output) {
  }
)

For all buttons:


library(shiny)
library(shinythemes)
shinyApp(
  ui = 
    navbarPage(id = "intabset", 
               title = "HOME",
               windowTitle = "Data cleaning", 
               theme = shinytheme("cerulean"), 
               collapsible = TRUE, 
               header=tags$style(
                 ".btn-default{
                 background-image: none;
                 }
                 
                 #actButt{
     background-color:red !important;
      color: black;
      -webkit-box-shadow: 0px;
      box-shadow: 0px;
           border:0px;
                 }
    #dwdButt{
     background-color:green !important;
      color: black;
      -webkit-box-shadow: 0px;
      box-shadow: 0px;
           border:0px;
                 }"),
    tabPanel(
      title = " Home", icon = icon("home"),
      mainPanel(width = 11, style="margin-left:4%; margin-right:4%",
                fluidRow(h3("Home page data cleaning")),
                downloadButton('dwdButt',
                               'Download data'),
                actionButton('actButt',
                             'Generate data'),
                actionButton('actButt2',
                             'Generate data 2',
                             style = "background-color: red !important; color: black")
      )
    )# end tabpanel
    ), # end navbarpage
  server = function(input, output) {
  }
)

R Shiny App : override button background color while using a shinytheme

1 Answers1