Formatting shiny webapps 💡


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

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.

 

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;
}

 

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 👍

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

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