Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change font-family with CSS in dashboardBody shinydashboard

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),
like image 381
Daniel_D Avatar asked Sep 08 '15 09:09

Daniel_D


People also ask

Which property is used to change the font in CSS?

Definition and Usage The font-family property specifies the font for an element.

How do you change the color of the font-family in HTML?

You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag.


1 Answers

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!

like image 186
Konstantin Firsov Avatar answered Oct 09 '22 20:10

Konstantin Firsov