I am writing a shiny application and I would like to customize the look of the header. I am able to add images and format the text, but what I would like to do is change the background color, but only for the header panel, not the rest of the ui. So far I have this for my
ui.r:
shinyUI(pageWithSidebar(
headerPanel(
list(tags$head(tags$style("body {background-color: black; }")),
"Graphs", HTML('<img src="ah_large_black.gif", height="200px"
style="float:right"/>','<p style="color:red"> test test </p>' ))
),
This has text of two different colors and puts an image on the right side, but it make the background color of everything black. Is there a way to limit the color this to just the header?
I’ve found the easiest way to change them especially if using a package like shiny dashboard is to open it up in a browser, right click the stuff you wanna change, then select “inspect element”. You can actually edit the css in that opened inspect element window to see if it works too. Yeah I currently have a www folder with the CSS theme in there.
To theme a Shiny app, also check out the bslib package. From the docs: " The bslib R package provides tools for customizing Bootstrap themes directly from R, making it much easier to customize the appearance of Shiny apps & R Markdown documents." Thank you so much @williaml !
@elphlord You change the text color and background color simultaneously by slightly changing your code to this: ui <- navbarPage (title = span ( "My Title", style = "background-color: #DEEBF7; color: red") However, I'm not sure on how to make the background color bigger!
Direction for gradient, by default to bottom . Possibles choices are bottom, top, right or left, two values can be used, e.g. c ("bottom", "right"). Set to TRUE if in a shinydasboard application.
Try something like
tags$style(".span12 {background-color: black;}")
instead of
tags$style("body {background-color: black;}")
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With