CODEWITHSUNDEEP
cssrshiny
elliot
elliot

Reputation: 1944

More easily identify css selectors in R Shiny Apps

I"m building a few Shiny apps, and I've opted to do a totally custom css style sheet (instead of using a predefined template).

I'm spending way too much time trial-and-erroring my way through the css stylesheet, trying to identify which selectors control which aspect of the Shiny app.

I've learned to use Google Chrome's inspect functionality to look at the background code but still don't know what copy/adapt.

Can someone point me into the right direction with workflows related to css and Shiny in R?

Thanks

Upvotes: 0

Views: 423

Answers (1)

DanWaters
DanWaters

Reputation: 536

This doesn't answer your question directly, but as you are creating your shiny apps, you can wrap each object in a div and give each object a class. That way rather than fighting with a predefined style, you can code css only for the objects you want via your defined classes.

For example, you can wrap a datatable in class = 'table' and manipulate the components of the table and even create a 'box' around it using borders, shadow and border-radius.

r:

tags$div(class = 'table', DT::dataTableOutput(ns("your_table")))

css:

.table{
box-shadow: 0 5px 5px hsla(0,0%,0%,.2), inset 0 5px 0 var(--tab_color);
border-radius: 5px;
border-color: var(--bg-border);
background-color: var(--bg-dark);

padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
margin-top: 20px;
margin-left:10px;
margin-right: 10px;
margin-bottom: 30px;
}

Upvotes: 2

Related Questions