Comment changer la couleur dans le brillant tableau de bord?

(cross post de brillant google groupes)

Peut-on m'indiquer les noms de balise que j'ai modifier la couleur d'un brillant tableau de bord?

Modifié à partir de http://rstudio.github.io/shinydashboard/appearance.html#long-titles
cela va changer l'angle supérieur gauche de mon tableau de bord pour orange

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

Il est clair pour moi comment faire pour changer le reste de l'en-tête et la barre latérale, à l'orange, et comment je peux changer la couleur quand un article sur la "SideBarMenu" est sélectionné /mis en évidence.

OriginalL'auteur Iain | 2015-07-29

  1. 42

    S'appuyant sur l'exemple que vous avez posté un lien pour vous pouvez essayer:

    de l'interface utilisateur.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 signaler ce qu'il modifie.

    C'est super, merci. Des idées sur comment je pourrais changer la couleur du texte dans la barre latérale?
    Vous pouvez définir la color argument dans le CSS pour .skin-blue .main-sidebar .sidebar .sidebar-menu a. Pour ex, color: #000000; fera le texte en noir (j'ai ajouté que le code que j'ai posté)
    Merci! Viens de découvrir les outils de développement de chrome qui rend le processus très simple que je peux facilement voir quels éléments sont présents dans la page. developer.chrome.com/devtools
    Comment pourrait-on changer la couleur de la bordure gauche de l'arborescence de menu lorsque l'un des éléments de ce menu est sélectionné et que l'utilisateur est en vol stationnaire dans le menu arborescence?

    OriginalL'auteur

  2. 3

    Merci pour le post. Je pense que vous devriez ajouter "bouton à bascule lors de son survol" pour le rendre complet. Exemple de code ci-dessous:

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

    OriginalL'auteur