Изменить цвет и размер шрифта в заголовке tabBox - PullRequest
Новая
       8

Изменить цвет и размер шрифта в заголовке tabBox

0 голосов
/ 11 января 2019

Хотя я не очень знаком с CSS, я смог включить его в мой код R, чтобы изменить различные элементы моего блестящего приложения. Тем не менее, я не могу определить, какой элемент мне нужно изменить, чтобы изменить цвет и размер шрифта в заголовке моего tabBox, который поставляется из пакета Shinydashboard.

В других полях моего приложения есть заголовки с темным фоном и светлыми шрифтами. Мне удалось изменить фон заголовка tabBox, чтобы он был темным (см. Код ниже), но я не вижу ни одного элемента, который бы влиял на шрифт.

Я могу изменить размер шрифта надписей на вкладках, используя font-size в body, или я могу изменить цвет текста в поле, используя color. Но я не могу найти ничего, что относится к атрибутам заголовка самого заголовка!

Спасибо за вашу помощь.

Пример кода: 

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tabBox(title = "Title of box", 
           tabPanel("Tab A"),
           tabPanel("Tab B")),
    tags$head(tags$style(HTML('
                              /* tabBox background */                    
                              .nav-tabs-custom>.nav-tabs {
                              background-color: #2F4858;
                              }
                             '
    )
    )
    )
  )
)

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

}

shinyApp(ui, server)

1 Ответ

0 голосов
/ 11 января 2019

Чтобы найти такие вещи, используйте правый элемент меню «Проверка элемента» (в Firefox аналогичные имена в других браузерах, но встроенный браузер в RStudio не так хорош, как автономные). ). Нажмите, где должен быть заголовок, и он будет выделен, с множеством свойств CSS, отображаемых на панели в правой части экрана. Мои шоу

screenshot

с заголовком, выделенным на главном дисплее. Начиная сверху, ищите свойства, которые вас интересуют. Я вижу font-size и color в третьей группе. Верхняя строка немного сбивает с толку: часть, в которой говорится AdminLTE.min.css:7, говорит, где было найдено это определение, а остальные .nav-tabs-custom > .nav-tabs > li.header - это селектор, который активен для этого элемента.

Таким образом, чтобы изменить размер и цвет, используйте этот селектор, например, поместите это в свой tabBox: 

tags$head(tags$style(HTML('
 /* tabBox background */                    
 .nav-tabs-custom>.nav-tabs {
     background-color: #2F4858;
 }
 .nav-tabs-custom > .nav-tabs > li.header {
     font-size: 40px;
     color: white; 
 }')
...