CODEWITHSUNDEEP
htmlcssshiny
mansanto
mansanto

Reputation: 370

changing the font color of the sidebar in shiny dashboard

I have literally no html/css experience and hence I solicit your help with the following.

I am using a shiny dashboard with a default sidebar. I tried to change the background color and the font color of the sidebar using the following line of code inside the dashboardBody:

tags$head(tags$style(HTML('.skin-black .main-sidebar {color: #000000; background-color: #FFB6C1;}')))

What happened was that the new sidebar has a background color of #FFB6C1, which I intended to. But the font color in the sidebar didn't change into black and it is still white! Any suggestion?

Thanks a lot San

Upvotes: 2

Views: 5860

Answers (3)

Helene
Helene

Reputation: 959

Similar to @Kasper's answer, but to directly embed into shiny code:

 dashboardBody(
      tags$head(        
        #in line styling
        tags$style(HTML(

        #siderbar background
        '.skin-blue .main-sidebar {
          background-color: white;}',

        #siderbar text color
        '.skin-blue .main-sidebar .sidebar{
          color: #red;}'
        )
       )
      )

Note that

  1. although it changes the style of sidebar, the code is within dashboardBody().

  2. depending on your current dashboard skin color, you need to change the ".skin-blue" (blue is default) to e.g. ".skin-black" as needed

  3. for changing font color, it is essential to have ".sidebar" after ".main-sidebar". ".sidebar" basically is the ELEMENT mentioned by @Kasper. (To locate such elements, use Developer tools in your chrome browser, and inspect everything until you can locate the precise block of html code, and use the ELEMENTs after "class=" for this purpose.)

Upvotes: 0

mansanto
mansanto

Reputation: 370

I came across an example that helped me solving the issue. http://journocode.com/2016/04/04/r-first-web-application-shiny/

Accordingly, the problem was solved by used:

label = HTML('<p style="color:black;">Maximum number of suggestions</p>')

in order to depict the color of the label in black instead of white color obtained when using only:

label = "Maximum number of suggestions"

Of course both were arguments of the selectInput object.

Thanks KH for the help and of course thanks MARIE-LOUISE TIMCKE for your amazing post.

Ciao

Upvotes: 3

Kasper
Kasper

Reputation: 330

Your CSS selector may not be targeting text elements, rather a sidebar div. Assuming your text elements are under the .main-sidebar class, this should/may work. Just replace ELEMENT with whatever HTML tag your text is enclused in, like 

.skin-black .main-sidebar ELEMENT {
color: #000000;

.skin-black .main-sidebar {
background-color: #FFB6C1;
}

Whitespace does not matter.

Upvotes: 1

Related Questions