Menu
I want to change the style of my Shiny app. I went here https://bootswatch.com/solar/ and downloaded the style .css file: "Solar A spin on Solarized".
library(shiny)
ui <- fluidPage(
titlePanel(tags$i(h1(strong("My Panel Title"),style = "font-family: 'times'; font-size: 82px"))),align="center",
navbarPage(theme="bootstrap.min.css",title = 'Methods',
tabPanel('One'),
tabPanel('Two'),
tabPanel('Three'),
tabPanel('Four'))
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
But as you can see the navigation bar looks weird:
How can I fix it?
621
The quickest way to use a Bootswatch theme is to use the BootstrapCDN. The CDN hosts Bootstrap as well as Bootswatch. Instead of having to download and store a copy of Bootstrap locally, you can use the CDN to host the CSS.
If you want to quickly test out different themes with an application, you can simply add themeSelector() somewhere to the UI. This will add a select box which lets you choose the theme. It will change the theme without having to reload or restart your app. You can see the theme selector in action here.
So, R Shiny provides scalability, fast prototyping, and power, but without CSS, it looks like this: Are you convinced? Good! Let’s take a look at the possibilities. So what is CSS? It’s basically as old as HTML itself.
You can give your Shiny app a special look with cascading style sheets (CSS). CSS is a style language which gives HTML documents a sophisticated look. Since the Shiny app user-interface (UI) is an HTML document, you can use CSS to control how you want your Shiny app to look.
That context may be your current RStudio theme, an RMarkdown document, or a Shiny app. All that’s needed to enable this themeing is adding thematic_shiny () to our app… Note that we’re using the theme “darkly” here so difference is more obvious.
When dealing with plain tag objects in Shiny, such as is we had declared the title of the app with an h2 () instead of titlePanel () you can place any custom CSS you want in the style argument. These styles just apply to that specific element. ...
The theme that you link to is a Bootstrap 4 theme, but Shiny uses Bootstrap 3. For compatible Bootswatch themes, see their v3 collection: https://bootswatch.com/3/.
For example, using the v3 Flatly theme via a CDN:
library(shiny)
ui <- fluidPage(
titlePanel(tags$i(
h1(strong("My Panel Title"), style = "font-family: 'times'; font-size: 82px")
)),
align = "center",
navbarPage(
theme = "https://stackpath.bootstrapcdn.com/bootswatch/3.4.1/flatly/bootstrap.min.css",
title = 'Methods',
tabPanel('One'),
tabPanel('Two'),
tabPanel('Three'),
tabPanel('Four')
)
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
