Tab Box CSS для shinydashboard

Question

Я пытаюсь изменить стиль вкладки для tabBox в shinydashboard. Мне удалось изменить фон выбранных вкладок, но я не могу изменить фон выбранной вкладки или текст, который появляется на каждой вкладке. Это то, что я добавил в файл custom.css изменить невыбранные вкладки фоны:

.nav-tabs { 
    background-color: #006747; 
} 

Я пробовал такие вещи, как .nav-tabs .active, но я не мог получить что-нибудь работать.

Также, если кто-нибудь знает, как изменить небольшую цветную ленту, которая появляется рядом с выбранной вами вкладкой, это также было бы оценено.

Answer 1

Инструмент разработки и «элемент проверки» очень полезны, чтобы выяснить, из каких классов вы должны изменить css.

Чтобы изменить щепку и цвет выбранной вкладки, вы можете сделать:

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a { 
    background-color: transparent; 
    border-color: transparent; 
} 

.nav-tabs-custom .nav-tabs li.active { 
    border-top-color: #FFF; 
} 

Вот пример (магистральный код из here):

library(shiny) 
library(shinydashboard) 
body <- dashboardBody(
     fluidRow(tags$style(".nav-tabs { 
    background-color: #006747; 
} 

.nav-tabs-custom .nav-tabs li.active:hover a, .nav-tabs-custom .nav-tabs li.active a { 
background-color: transparent; 
border-color: transparent; 
} 

.nav-tabs-custom .nav-tabs li.active { 
    border-top-color: #FFF; 
}"), 
       tabBox(
         title = "First tabBox", 
         # The id lets us use input$tabset1 on the server to find the current tab 
         id = "tabset1", height = "250px", 
         tabPanel("Tab1", "First tab content"), 
         tabPanel("Tab2", "Tab content 2") 
       ) 

)) 

shinyApp(
     ui = dashboardPage(
       dashboardHeader(title = "tabBoxes"), 
       dashboardSidebar(), 
       body 
     ), 
     server = function(input, output) { 
     } 
)