英文:
R Shiny App : override button background color while using a shinytheme
问题
在R Shiny App中使用shinythemes覆盖按钮的背景颜色，我尝试了很多小时的CSS，但没有成功，非常感谢任何人能够帮助。
以下是我尝试的示例代码，它只在按钮被按下时更改颜色，但我想要颜色保持"永久"：
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) {
}
)
注意：我看过这个答案，但没有帮助。
英文:
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.
答案1
得分: 2
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) {
}
)
英文:
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) {
}
)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论