7

How is it possible to change the font family in shiny dashboard for a box in tabItem?

I have already included some css coding in the dashboardBody changing the color and font-family, but this is linked only to the main header:

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;
  }
  
'))),

Help is much appreciated.

The tabItem has the following beginning:

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),
peterh
  • 11,875
  • 18
  • 85
  • 108
Daniel_D
  • 698
  • 1
  • 7
  • 13

1 Answers1

6

You can change css of main-sidebar, like this (i put a few options to make it easy for you)

Reproduceble example is below (it is for default skin, so if you use some other skin - you should change skin-blue to something else):

    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)

content of css file is below

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

Hope it will help!

  • 1
    Daniel! Glad you found the solution. I'm new at stackoverflow and steel not have reputation even to comment, so if you think my answer was correct - please mark it. – Konstantin Firsov Apr 04 '16 at 08:15