Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create Custom Shinydashboard skin

I am working on shiny dashboard and want some different color on skin than colors which are available in shiny documentation (skins available in shiny)

I want ('#2666cc','rgb(38, 102, 204)') this color on skin. is it possible in shiny dashboard?

Dashboard

Want new color in highlighted area.

like image 418
Gaurav Chaudhari Avatar asked May 22 '18 11:05

Gaurav Chaudhari


People also ask

What is bs4Dash?

bs4Dash: A 'Bootstrap 4' Version of 'shinydashboard'Make 'Bootstrap 4' Shiny dashboards. Use the full power of 'AdminLTE3', a dashboard template built on top of 'Bootstrap 4' <https://github.com/ColorlibHQ/AdminLTE>.

How do I customize the appearance of the shinydashboard?

Customizing dashboard appearance. shinydashboard is built using AdminLTE, which in turn uses Bootstrap 3. Skins. There are a number of color themes, or skins. The default is blue, but there are also black, purple, green, red, and yellow. You can choose which theme to use with dashboardPage(skin = "blue"), dashboardPage(skin = "black"), and so on.

How to override shiny dashboard with a custom blue color?

I used the following style () statement at the beginning of the dashboardBody () tag to override every instance where color = "aqua" with your custom blue: The key is the "!important" after the color, which overrides the shinydashboard preset.

How do I add custom CSS to a shiny app?

To do this, first create a file named www/custom.css with the following: Then refer to that CSS file from the UI of your app: A second way to include CSS is to put it directly in the UI code for your app: There other ways to add custom CSS to a Shiny application. See Shiny’s CSS article for more information.

What are the icons used in shiny dashboard?

Icons are used liberally in shinydashboard. The icons used in Shiny and shinydashboard are really just characters from special font sets, and they’re created with Shiny’s icon() function.


Video Answer


1 Answers

In the link you posted, there is a CSS section, which explains everything. But for a start this should be fine :)

library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Custom font"),
  dashboardSidebar(
    # Custom CSS to hide the default logout panel
    tags$head(tags$style(HTML('.logo {
                              background-color: #2666cc !important;
                              }
                              .navbar {
                              background-color: #2666cc !important;
                              }
                              '))),

    # The dynamically-generated user panel
    uiOutput("userpanel")
  ),
  dashboardBody()
)

server <- function(input, output, session) {
  output$userpanel <- renderUI({
    # session$user is non-NULL only in authenticated sessions
    if (!is.null(session$user)) {
      sidebarUserPanel(
        span("Logged in as ", session$user),
        subtitle = a(icon("sign-out"), "Logout", href="__logout__"))
    }
  })
}

shinyApp(ui, server)
like image 186
SeGa Avatar answered Oct 09 '22 12:10

SeGa