How to style Ui of shiny app. (Change background colour, font style, etc.)


#1

I created a shiny UI

ui<-fluidPage(
  
fluidRow(
 
  column(2,selectInput("table Type","Table",choices = c("Component Task","FitList","PartList"))),
  column(2,selectInput("partID","PartID",choices = Fitlist$CompID)),
  column(4,selectInput("partname","Name",choices= levels(factor(Fitlist$Description)))),
  column(2,selectInput("Condition","status",choices = c("All")))
  # put all these inputs in one grey box and change their font style and colour
),

fluidRow(
  
  tags$h4("Parts Data",style="color:red"),
  column(5,dataTableOutput("table1"))  # change background colour and font style

),

fluidRow(
  tags$h4("Parts Condition",style="color:red"),
  column(5,dataTableOutput("Condition"),offset = 2)  # change background colour and font style
)
  
)

I want to style the UI. I am using

library(tableHTML)
tags$style(make_css(list("table",c('font-size','background-color'),c('20px','yellow')))),

if I put table as first argument in the list, both output tables get affected.

How can I able to style the inputs and outputs of the Ui interface.

Like, I want to put all the selectInputs in one grey box.
Edit output tables font style, and colour.

What methods can I employ to style the shiny app UI.
Any tutorials and guides are appreciated.:slightly_smiling_face:

Thank you for your time and concern.:hugs:


#2

Have you read over this article? It is a little old, but the basics of applying CSS to a shiny application are there.

https://shiny.rstudio.com/articles/css.html

If you have further questions after looking over the article I will be happy to discuss more.


closed #3

This topic was automatically closed 21 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.