Изменить цвет шрифта в блестящей приборной панели - PullRequest
Новая
       6

Изменить цвет шрифта в блестящей приборной панели

1 голос
/ 26 марта 2020

В блестящей панели инструментов я нашел эту ссылку для изменения цвета на боковой панели и в заголовке. Но я не смог найти способ изменить цвет шрифта для элементов боковой панели! Цвет шрифта по умолчанию - белый, и он не читается, если вы выбрали светлый цвет для боковой панели. Буду признателен, если кто-нибудь сможет помочь с кодом css, чтобы исправить цвет шрифта!

enter image description here

ui = dashboardPage(
  dashboardHeader(
    title = "Example of a long title that needs more space",
    titleWidth = 450

  ),
  dashboardSidebar(
    br(),


    menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard"),
             checkboxGroupInput("selectVar", "",choices = c('A','B','C'),selected = 'A' )),

    menuItem("Widgets", icon = icon("th"), tabName = "widgets",
             selectInput("select1",label ="Select :",choices = c('A','B','C'),multiple = TRUE))
  ),
  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: #7E59A4;
                              }

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

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

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


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

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


)

server <- function(input, output, session) {}

shinyApp(ui = ui , server = server)

Ответы [ 3 ]

2 голосов
/ 26 марта 2020

Я думаю, это то, что вы ищете: 

.content-wrapper, .right-side {
background-color: #FFFFFF;
}
1 голос
/ 27 марта 2020

Нажав клавишу f12 в вашем блестящем браузере приложений, вы получите фоновый синтаксис HTML для своей страницы. После того, как можно прокрутить, чтобы найти название раздела, который должен быть изменен. В этом случае он называется .treeview-menu:

enter image description here

, поэтому все, что вам нужно сделать, это добавить: 

.skin-blue .treeview-menu {
                              background-color: #FFFFFF;
                              color: #000000;
                              }
0 голосов
/ 17 апреля 2020

Я следовал вашей инструкции по обновлению размера и цвета шрифта маркера, но это также привело к изменению размера и цвета шрифта моего menusubitem в боковой панели, пожалуйста, посоветуйте, как решить эту проблему. Я просмотрел все страницы Google, не нашел аналогичного решения, спасибо

Я пытался разместить стиль тегов сверху и внутри, а также не работал. 

 shinyUI<- ( dashboardPage( skin = "red",
                       dashboardHeader(title = "QCA", dropdownMenuOutput("msgoutput")),
                       dashboardSidebar(
                           textInput("text", "Text"),
                           sidebarMenu(

                               menuItem(" Induction", tabName = "Induction"),
                               menuItem(" QCA KPI", tabName = "summary"),
                               menuItem("Client Account Service-- Site", tabName = "cas_bsl"),
                               menuItem("Client Account Service-- Site", tabName = "cas_ba"     ),
                               menuItem("Debt Lodgement", tabName = "dl",badgeLabel = "coming soon", badgeColor = "green"),
                               menuItem("CBRS", tabName = "cbrs",badgeLabel = "Coming soon", badgeColor = "green")
                           )),

                       dashboardBody(
                           tabItems(
                               tabItem( tabName = "Induction", 
                                        fluidPage(
                                          h2(" QCA Dashboard", align = 'Center'),
                                          hr(),
                                          h4("QCA Dashboard is reporting tool specific to the Service Delivery enviroment. This is an online self-service 
                                            data visulization and discovery tool that is interactive and intuitive to the mind of the user. All important information 
                                            has been collated into a centralized database to provide instant information in the forms of charts and tables."),
                                          hr(),
                                           h4( "The dashboard is reporting tool for Business Units Directors, Leaders and Support Officers. The data is sourced from QA portal.
                                               Current is trial version. "),
                                          hr(),
                                          hr(),


                                           tags$div(tags$ul(
                                            tags$li(tags$span("Summary "), tags$style("{font-size:36px;}")),
                                            hr(),
                                            tags$li(tags$span("Client Account Service")),
                                            hr(),
                                            tags$li(tags$span("Debt Lodgement")),
                                            hr(),
                                            tags$li(tags$span("CBRS"))))
                                            ))
                                        ,
...