It seems that this question applies to all shiny UI Inputs.
Specifically, I am trying to find a way to format selectInput. For example, how could I change the blue color which highlights the selection and the light blue shadow surrounding the box when selectInput is active.
The problem I am facing is that I am trying to format my shiny application via a css file which has a completely different colorset and that does not sit very well with the standard blue of all UI Inputs.
You can change the various attributes with CSS:
library(shiny)
runApp(list(
ui = bootstrapPage(
selectInput("variable", "Variable:",
c("Cylinders" = "cyl",
"Transmission" = "am",
"Gears" = "gear")),
tags$head(
tags$style(HTML(".selectize-input.input-active, .selectize-input.input-active:hover, .selectize-control.multi .selectize-input.focus {border-color: red !important;}
.selectize-dropdown .active {background: yellow !important;}"))
)
),
server = function(input, output) {
}
))
Related
Hello.
I would like to change the color of this dropdown box which appears for numeric filters.
Sample code:
library(DT)
library(shiny)
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable")
)
server <- function(input, output) {
output$mytable = DT::renderDataTable({
DT::datatable(mtcars,filter="top")
})
}
shinyApp(ui, server)
Thanks
You only have to modify the suitable CSS on the ui function:
ui <- basicPage(
h2("The mtcars data"),
DT::dataTableOutput("mytable"),
tags$style(type = "text/css",
".noUi-connect {background: red;}")
)
Update
As explained in the comments, you can see in the next image (open it to see larger) where is the CSS modified to get a dark red where you want (in the right column of left window above is the element.style to which my comment below refers). The issue I am not able to solve is how to modify that tag (the shadowed one at the left) ` without a class or an id, with CSS or Shiny.
I have the following css above a selectizeInput so that selected items are coloured alternatively making for better readability.
tags$style(HTML(".item:nth-child(odd) {background: #F4F4F4 !important;
width: 100% !important;}
.item:nth-child(even) {background: white !important;
width: 100% !important;}"))
Unfortunately it is affect all other selectizeInputs and selectInputs no matter where on the dashboard they appear.
How can I have the above css only apply to the one selectizeInput.
Thanks
I think getting the CSS to select the proper <div> is the trick. Here's a reproducible example of the functionality using the default Shiny scaffolding:
library(shiny)
# Define UI for application that draws a histogram
ui <- fluidPage(
# Application title
titlePanel("Control CSS of Singl Selectize Input"),
# Sidebar with a slider input for number of bins
sidebarLayout(
sidebarPanel(
tags$style(HTML("#bins+ .selectize-control.multi .selectize-input > .item:nth-child(odd) {background: #F4F4F4 ;
width: 100% !important;}
#bins+ .selectize-control.multi .selectize-input > .item:nth-child(even) {background: white ;
width: 100% !important;}")),
selectizeInput("bins",
"Number of bins:",
choices = c(1:50),
selected = 30,
multiple = TRUE),
selectizeInput("newbins",
"Number of bins:",
choices = c(1:50),
selected = 30,
multiple = TRUE)
),
# Show a plot of the generated distribution
mainPanel(
)
)
)
# Define server logic required to draw a histogram
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
The CSS first finds the right id then finds the correct div below that using class. More info on the + sign in CSS: https://www.w3schools.com/cssref/sel_element_pluss.asp
I have a Shiny app which has two types of well panels depending on what is contained within them, and I would like to set the background of one type to light green, and the other type to light blue. At the moment I do this by setting:
tags$head(tags$style(type = 'text/css',".well{background-color: #EFF8CD;}))
wellPanel("My first type of well panel")
which gives me the green background for all panels,
and then using
wellPanel(style = "background-color:#c9d7e8;")
for the second type of panel.
Is it possible to give these different well panels a name or ID so that I can set the colour in a central place?
You can pass named parameters to wellPanel, in your case it is better to use a class I think :
library(shiny)
ui <- fluidPage(
tags$head(
tags$style(type = 'text/css',".myclass1 {background-color: #EFF8CD;}"),
tags$style(type = 'text/css',".myclass2 {background-color: #c9d7e8;}")
),
wellPanel("My first type of well panel", class = "myclass1", id = "myid1"),
wellPanel("My second type of well panel", class = "myclass2", id = "myid2")
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
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){})
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/
Is there a way to color fileInput button in R shiny? It looks like it is possible as shown here on this page on github. However I cannot find the code for this to be done.
This is the simple application that I would like to modify to have the button and progress bar colored red.
In ui.R:
library(shiny)
shinyUI(fluidPage(
titlePanel("Test"),
fileInput("Test","")
))
and server.R
library(shiny)
shinyServer(
function(input, output) {
}
)
Thanks for any advice.
You can use standard Bootstrap classes to style action buttons:
library(shiny)
shinyApp(
ui=shinyUI(bootstrapPage(
actionButton("infoButton", "Info", class="btn-info"),
actionButton("warningButton", "Warning", class="btn-warning"),
actionButton("successButton", "Success", class="btn-success"),
actionButton("dangerButton", "Danger", class="btn-danger"),
actionButton("defaultButton", "Default", class="btn-default"),
actionButton("primaryButton", "Primary", class="btn-primary")
)),
server=shinyServer(function(input, output, session){
})
)
Regarding file inputs as far as I know it is not possible without using CSS directly. Page you've linked is an opened pull-request and it doesn't look like it will be merged soon.
This answer provides a good description how to create fancy upload buttons with bootstrap. It should work just fine in Shiny as well.
CSS could be used in shiny to custom your fileInput widget !
Use the following code in order to color it in red.
NB - Any browser you're using to view the app should have developer tools that let you inspect elements and see styles applied to any element. You have to right click on the relevant element and choose inspect !
library(shiny)
ui <- fluidPage(
fileInput(inputId = "Test",label = ""),
tags$style("
.btn-file {
background-color:red;
border-color: red;
}
.progress-bar {
background-color: red;
}
")
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)