在dashboardBody shinydashboard中使用CSS更改font-family

时间:2015-09-08 09:38:37

标签: css r shiny shinydashboard

大家好,如何在tabItem中为一个框更改闪亮仪表板中的字体系列? 我已经在dashboardBody中添加了一些css编码,更改了颜色和字体系列,但这只链接到主标题:

body <- dashboardBody(
 tags$head(tags$style(HTML('
  .skin-blue .main-header .logo {
    font-family: "Calibri";
    font-weight: bold;
    font-size: 28px;
    background-color: #003D76;
  }
  .skin-blue .main-header .navbar {
    background-color: #0082D1;
  }

'))),

非常感谢帮助。 tabItem具有以下开头:

tabItems(
tabItem(tabName = "dashboard",
        fluidRow(
          box(
            title = strong("GPIM Liquidity Risk"), status = "primary", solidHeader = TRUE, width = 8,
            img(src = "gpim-signet.png", height = 80, width = 130),

谢谢!

1 个答案:

答案 0 :(得分:2)

您可以更改主侧边栏的CSS,就像这样(我提供了一些选项让您轻松)

下面是可重现的示例(它适用于默认皮肤,因此如果您使用其他皮肤 - 您应该将 skin-blue 更改为其他皮肤):

    library(shiny)
library(shinydashboard)
## ui
    ui <- dashboardPage(
      dashboardHeader(title="MPG Data"),
      dashboardSidebar(
        sidebarMenu(
          menuItem("MPG",tabName="mpg")
        )
      ),
      dashboardBody(
        #here's where you throw the css into the header
        tags$head(
          includeCSS(path = "www/style.css")
        ),
        tabItems(
          tabItem(tabName="mpg",
                  fluidRow(tableOutput("mpgTable"))
          )
        )
      )
    )

    ## server
    server <- function(input, output) {
      output$mpgTable <- renderTable({mpg})
    }

    ## launch dashboard 
    shinyApp(ui, server)

css文件的内容在

之下
/* main sidebar */
        .skin-blue .main-sidebar {
                              background-color: #f4b943;
                              font-family: "Calibri";
                              font-size:25px;
                              line-height:1.42857143;
                              color:#ebebeb;
                              }

希望它会有所帮助!