Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change color in shiny dashboard?

(cross post from shiny google groups)

Could some one point me to the tag names that I have to modify the color of a shiny dashboard?

Modified from http://rstudio.github.io/shinydashboard/appearance.html#long-titles this will change the top left corner of my dashboard to orange

tags$head(tags$style(HTML('
        .skin-blue .main-header .logo {
                              background-color: #f4b943;
                              }
                              .skin-blue .main-header .logo:hover {
                              background-color: #f4b943;
                              }
                              ')))

It is unclear to me how to change the rest of the header and sidebar to orange, and how I can change the color when an item on the "SideBarMenu" is selected / highlighted.

like image 759
Iain Avatar asked Jul 29 '15 21:07

Iain


3 Answers

Based on the example you posted a link to you can try:

ui.R

dashboardPage(
                dashboardHeader(
                        title = "Example of a long title that needs more space",
                        titleWidth = 450
                ),
                dashboardSidebar( sidebarMenu(
                        menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
                        menuItem("Widgets", icon = icon("th"), tabName = "widgets",
                                 badgeLabel = "new", badgeColor = "green")
                )),
                dashboardBody(
                        # Also add some custom CSS to make the title background area the same
                        # color as the rest of the header.
                        tags$head(tags$style(HTML('
        /* logo */
        .skin-blue .main-header .logo {
                              background-color: #f4b943;
                              }

        /* logo when hovered */
        .skin-blue .main-header .logo:hover {
                              background-color: #f4b943;
                              }

        /* navbar (rest of the header) */
        .skin-blue .main-header .navbar {
                              background-color: #f4b943;
                              }        

        /* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: #f4b943;
                              }

        /* active selected tab in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                              background-color: #ff0000;
                              }

        /* other links in the sidebarmenu */
        .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                              background-color: #00ff00;
                              color: #000000;
                              }

        /* other links in the sidebarmenu when hovered */
         .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                              background-color: #ff69b4;
                              }
        /* toggle button when hovered  */                    
         .skin-blue .main-header .navbar .sidebar-toggle:hover{
                              background-color: #ff69b4;
                              }
                              ')))
                )


)

I commented the CSS to point out what it modifies.

like image 127
NicE Avatar answered Nov 11 '22 04:11

NicE


Thanks for post. I think you should add "toggle button when hovered" to make it complete. Sample code is below:

/* toggle button when hovered  */                    
.skin-blue .main-header .navbar .sidebar-toggle:hover{
  background-color: #ff69b4;
}
like image 26
Konstantin Firsov Avatar answered Nov 11 '22 03:11

Konstantin Firsov


Thank you @NicE for the answer. An addition: if someone wants to control the color accent of the left border of the sidebar menu selection, the border-left property works:

            /* active selected tab in the sidebarmenu */
            .skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
                                  background-color: #2e6984;
                                  border-left: 3px solid #254264;
                                  }

            /* other links in the sidebarmenu */
            .skin-blue .main-sidebar .sidebar .sidebar-menu a{
                                  background-color: #3E8CB0;
                                  color: #FFFFFF;
                                  }

            /* other links in the sidebarmenu when hovered */
             .skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
                                  background-color: #2e6984;
                                  border-left: 3px solid #254264;
                                  }

like image 34
AleG Avatar answered Nov 11 '22 03:11

AleG