Remove bold in a shiny sidebar in R

Question

I'm new to Shiny and can't figure out how to "unbold" labels (feed rate and operation in the screenshot attached). Here's my code for the UI part:

ui <- fluidPage(titlePanel(""),
                sidebarLayout(
                  sidebarPanel(
                    # adding the new div tag to the sidebar            
                    tags$div(class="header", checked=NA,
                             tags$h4(strong("Duty"))),
                    selectInput('id1', 'Feed rate (m^3/h)', c("All", main$metric[1:3])),
                    selectInput('id2', 'Operation', c("All", main$metric[4:5])),
                  mainPanel(DT::dataTableOutput("table"))
                ))

And here's the screenshot:

score 4 · Accepted Answer · answered Jun 28 '18 at 17:54

4

You can do this by adding your own style sheet to your Shiny app. First we give the sidebar panel a class sidebar so we can refer to it. Then we can add the following to a file www/style.css:

.sidebar label {
  font-weight: 400;
}

Finally we set the theme parameter of your fluidPage to "style.css".

ui <- fluidPage(theme="style.css", titlePanel(""),
   # content here
))

The result should look like this:

answered Jun 28 '18 at 17:54

Simon Larsen

712
3
9

Thanks, Simon! Sorry for the dumb question but I'm not sure where to find my Shiny's folder :| – Misha Jun 28 '18 at 18:08
You should look for the folder where your app.R (or ui.R and server.R) file is. If you're using RStudio you should be able to hover over the name of the tab with the file open to see the full path of the file. – Simon Larsen Jun 28 '18 at 18:26
So in the folder where my R script is, I just need to add the www folder and save the style.css file there? I tried that, but it didn't work. – Misha Jun 28 '18 at 19:08
Remember to also set theme="style.css" in fluidPage() – Simon Larsen Jun 29 '18 at 10:44

emr2 · Answer 2 · 2021-12-14T12:59:35.540

This is another option (you don't have to create a file)

library(shiny)

remove_bold <-"
#expr-container label {
  font-weight: 400;
}
"

ui <- fluidPage(
  
  titlePanel("My app"),
  
  sidebarLayout(
    sidebarPanel(
      tags$style(remove_bold), ####### NEW CODE
      tags$div(id = "expr-container", ####### NEW CODE
      textInput(inputId = "data2", "Data1", value = "data"))
    ),
    
    mainPanel(
    )
  )
)


server <- function(input, output) {
}

shinyApp(ui = ui, server = server)

Inspired in this post: How to change the pickerinput label to fine instead of bold

Remove bold in a shiny sidebar in R

2 Answers2