Formatting shiny webapps đź’ˇ

Wes Raynbird-Tilbury
Userlevel 4
Badge +1

I’m looking for tips on how to best format shiny webapps and their linked components! 
 

Beyond a css file (Cascading Style Sheets), which describes how HTML elements are to be displayed, I can’t find a good way of applying formatting to shiny webapp elements. For instance, formatting a valuebox element by changing font sizes/styles, switching the output value with the descriptive text/title and moving anys symbols from the bottom left to the top right hand corner.

Does anyone have any tips on easily applying formatting, or some good go to resources on css files?

5 replies

J

So editing the CSS is the de-facto way of altering styling of both WebApps, and webpages in general. This is true for both Shiny and Python. 

For Shiny specifically, you can often embed in-line HTML into various tags to change the style; i.e., something like `title = “<b>my_title</b>”` will often work. Alternatively, you can wrap things in `div(style = “font-size: 24”, ...)` and apply styling inline.

Ultimately, there’s no avoiding CSS for styling if you want to get into the realm of padding and alignment. The best resource for Shiny specifically is probably: https://unleash-shiny.rinterface.com/index.html.

 

gareth_york
Userlevel 3
Badge +1

For reference I’m pretty sure you can do 90% of your value box examples via custom CSS (caveat: I haven’t implemented the below just threw it together quickly):

value-box .value{
font-size: 38px;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

value-box .text{
position: absolute;
bottom: 0;
left: 5px;
}
.small-box .icon-large {
top: 5px;
}

 

Wes Raynbird-Tilbury
Userlevel 4
Badge +1

So editing the CSS is the de-facto way of altering styling of both WebApps, and webpages in general. This is true for both Shiny and Python. 

Thank you Jason! Looks like I’ll have to get my head around CSS styling. Thanks for the resource 👍

Wes Raynbird-Tilbury
Userlevel 4
Badge +1

For reference I’m pretty sure you can do 90% of your value box examples via custom CSS

Thanks Gareth, this will be very useful! As a follow up question, can you define multiple value-box styles and call the formatting as and when needed? 

i.e. I have 4 variable factors, each plotted with a different colour. I want 4 value-boxes with a background colour that links to each variable colour

N
Userlevel 4
Badge +1

You could come up with a valuebox function that lets you dynamically generate html specifications for your value-boxes based on certain input parameters. E.g. add a colour tag. Maybe check out the htmltools package.

 

Reply


Terms & ConditionsCookie settings