- 3 Minutes Wednesdays
- Posts
- 3MW (3 ways to style your Shiny apps)
3MW (3 ways to style your Shiny apps)
Guten Tag!
Many greetings from Ulm, Germany.
The default look of Shiny apps can sometimes feel a bit dated. So, let us talk about three ways to take control of your app’s appearance.
And remember: All of today’s free code can be found on GitHub.
Use a predefined theme
The easiest way to style your app is to use a predefined theme from {bslib}
. Just add theme = bs_theme(bootswatch = "flatly")
in your app’s fluidPage()
. For example, here’s a simple Shiny app using a default look.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6ab826ea-0ce8-4557-8fa2-a1b5dda4f0a4/image.png)
Now, take a look how the app is transformed if you add the bs_theme()
call.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c6a97b63-9d4f-4afe-80cb-c99c36b4e3f1/image.png)
If you want to try a different theme, check out the list of other themes online.
Create your own theme
You can easily create your own theme by calling bs_theme()
and specifying colors and fonts like so.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7b3199ab-d3d3-4deb-8aee-11ba7cdf1123/carbon_167_.png)
These changes do not sound like much but fonts and colors can go a long way to make your app “feel” different.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7f6aa5ac-69d3-4005-83a3-ba5aba0b3306/image.png)
Use CSS
CSS is the universal language to style things on the internet. CSS code looks like this:
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/968e6ca7-4237-49d6-b37f-1a70ce9fa938/carbon_168_.png)
This code will style objects like buttons or sections that are of the test_class
class. You see, most CSS code targets classes so that we can consistently style all objects of a given class. Here, the code causes all test_class
objects to use a red background and white text. Exciting, I know.
So, this begs two questions:
How do you find out the class of the element that you want to change?
Where do you put the CSS code in your R code?
The first question requires strolling through your app’s source code with your web browser’s developer mode (Yes, you will totally feel like a hacker). I’ve described how this works in my Quarto styling video.
Once you have the desired class, write the CSS code into your app using tags$style(‘CSS HERE‘)
. Here’s a code example that shows you how to style the sliders.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7927e011-cc70-495f-bd13-fbd2160cc451/carbon_166_.png)
If you did everything correctly, then your sliders should be green now. Yeah, I know. These are probably the most beautiful sliders you’ve ever seen.
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/7bb9175c-69db-4c97-840e-33d2758055f1/image.png)
This concludes this week’s 3MW. I hope you enjoyed this week’s issue and I wish you a great week! 🙃
In the subscribers-only part, I’ll share CSS resources and explain how to use CSS files to store CSS code neatly.
![](https://media.beehiiv.com/cdn-cgi/image/format=auto,onerror=redirect/uploads/publication/logo/dcd4eaf2-0a16-4f6e-a277-324841b39e98/thumb_Twitter_header_-_6.png)
Subscribe to 5 Minutes Wednesdays to read the rest.
Become a paying subscriber of 5 Minutes Wednesdays to get access to this post and other subscriber-only content.
Already a paying subscriber? Sign In
Reply