web-dev-qa-db-fra.com

Comment changer de couleur dans un tableau de bord brillant?

(publication croisée de groupes Google brillants)

Quelqu'un pourrait-il m'indiquer les noms de balises que je dois modifier la couleur d'un tableau de bord brillant?

Modifié depuis http://rstudio.github.io/shinydashboard/appearance.html#long-titles cela changera le coin supérieur gauche de mon tableau de bord en orange

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

Il n'est pas clair pour moi comment changer le reste de l'en-tête et de la barre latérale en orange, et comment je peux changer la couleur lorsqu'un élément du "SideBarMenu" est sélectionné/mis en évidence.

rshinyshinydashboard
19
Iain

Sur la base de l'exemple sur lequel vous avez publié un lien, vous pouvez essayer:

i.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;
                              }
                              ')))
                )


)

J'ai commenté le CSS pour souligner ce qu'il modifie.

52
NicE

Merci pour le post. Je pense que vous devriez ajouter "bouton bascule en survolant" pour le compléter. Un exemple de code est ci-dessous:

/* toggle button when hovered  */                    
.skin-blue .main-header .navbar .sidebar-toggle:hover{
  background-color: #ff69b4;
}
4
Konstantin Firsov