Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

R Shiny: How do you change the background color of the Header?

Tags:

r

shiny

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?

like image 400
John Paul Avatar asked Nov 05 '13 20:11

John Paul


People also ask

How do I change the default CSS styles in shiny dashboard?

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.

How to theme a shiny app in R?

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 !

How to change the text color and background color simultaneously?

@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!

What is the default direction of gradient in shinydasboard?

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.


1 Answers

Try something like

tags$style(".span12 {background-color: black;}")

instead of

tags$style("body {background-color: black;}")
like image 89
rcs Avatar answered Sep 28 '22 02:09

rcs