2

This must be a simple question, but I haven't managed to find any script or advice regarding changing the size, font and colour of text in shinyDashboard boxes. Say for example, I want to make this box display 14px Arial grey text:

  box(width = 4, title = "sample", "this is a test")

I would imagine this requires css, but is there any way I can achieve this using built-in functions from Shiny?

Many thanks.

LyzandeR
  • 37,047
  • 12
  • 77
  • 87
Pryore
  • 510
  • 9
  • 22

1 Answers1

6

You would need to change the box's CSS for this to work. You could pass the CSS directly in the ui, using tableHTML::make_css. Function box creates an HTML class called "box" which you can use to change the box's CSS:

library(shiny)
library(tableHTML)

ui <- fluidPage(
 tags$style(make_css(list('.box', 
                          c('font-size', 'font-family', 'color'), 
                          c('14px', 'arial', 'red')))),
 box(width = 4, title = "sample", "this is a test")
)

server <- function(input, output) {}

shinyApp(ui = ui, server = server)

Output:

I made the text red so you can tell the difference from black easily. You can replace that with grey or whichever colour you want.

enter image description here

LyzandeR
  • 37,047
  • 12
  • 77
  • 87
  • Thank you. The only problem is that I can't install the tableHTML package as it's not available for my version of R - which I can't update because of working restrictions. Is there any alternative to this package? – Pryore Aug 15 '17 at 10:55
  • I don't know of any alternatives to that package, but you should be able to just copy-paste the function `make_css` to your environment and use it outside of `tableHTML`. You can find it [here](https://github.com/LyzandeR/tableHTML/blob/master/R/make_css.R) (it only depends on `htmltools` which you should have if you are using shiny). – LyzandeR Aug 15 '17 at 11:00
  • So I found a workaround using the following code: tags$p(tags$style(HTML('.box { font-family: "Georgia", Times, "Times New Roman", serif; font-size: 14px; }'))), – Pryore Aug 15 '17 at 11:01
  • 1
    Run the function after you copy-paste it so that it gets defined in your environment. Your code works fine though too. (The CSS you used directly is what `make_css` creates anyway). – LyzandeR Aug 15 '17 at 11:04
  • Thank you LyzandeR! That's really helpful... One last thing, is there any way I can source a list of all the css IDs used to alter the various components within shiny? For example, I also want to adjust the font for the title of my box. Cheers – Pryore Aug 15 '17 at 13:34
  • 1
    Run your shiny code without any CSS and then use ctr+U on your browser to see the HTML source code. Then you can see all the HTML IDs or classes that surround your boxes, divs and so on. Then use those in your CSS. – LyzandeR Aug 15 '17 at 15:46