CODEWITHSUNDEEP
cssrshiny
ClintWeathers
ClintWeathers

Reputation: 586

Data Tables in tabPanel output from navPanel in Shiny: How to change background colors using CSS

What I'm hoping is that it's possible to get different background colors for each different datatable output.

Just to clarify, I don't want to change the color of the tabs on the navbar. I actually want each datatable brought up by each different tab to have a different background color.

This answer looks pretty close and works if I only want one data table (and there are straight CSS solutions for that, as well like just using the { body } stuff) but I can't get it to work for the different outputs of a tabPanel.

When I try something like this:

tabPanel(h2('Super Cool Tab'), dataTableOutput('ex2'), {background-color: #000000;}),

it throws an error of "ERROR: object 'background' not found."

Adding in a theme attribute didn't seem to change anything at all.

tabPanel(h2('Super Cool Tab'), dataTableOutput('ex2'), theme="bootstrap.min.css")

Basically, I'm trying to make it impossible (as I can) to keep from getting confused between tabs given the UI constraints I have to work with (use different tabs, keep the pagination the way it is).

Here's the code I'm using:

library(shiny)

shinyUI(fluidPage
    (titlePanel = "Wobegon App",
     tags$head(
         tags$style(HTML("
                    @import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
                    @import url(http://fonts.googleapis.com/css?family=Raleway:300,700);
                    @import url(http://fonts.googleapis.com/css?family=Josefin+Slab);

                    h2 {
                    font-family: 'Raleway';
                    font-size: 25px;
                    }

                    h3 {
                    font-family: 'Josefin Slab';
                    font-size: 40px;
                    color: #840D0D;
                    }

                    body {
                    font-family: 'Open Sans Condensed';
                    font-size: 22px;
                    background-color: #F5B8B8;
                    #a:visited {text-decoration: underline; color: #0A6A0A;} <- this doesn't work either. 
                    }
                    "))
     ),

    navbarPage(
    title=h3("Awesome App Title"),
    tabPanel(h2('Super Cool Tab'), dataTableOutput('ex2')),
    tabPanel(h2('Pretty Good Tab'), dataTableOutput('ex3')),
    tabPanel(h2('Just Plain Nifty Tab'), dataTableOutput('ex4'))

        )
    )
)

Edited to add: I think a solution from this question gets me pretty darn close to what I want. It colors the individual tables themselves, although not the whole tabPanel output. It's workable, so I'll close this one out.

Upvotes: 2

Views: 1892

Answers (1)

ClintWeathers
ClintWeathers

Reputation: 586

After some consultation with The Rubber Duck, I found something that while not the exact answer I want, is pretty workable.

The solution I came up with uses the "style = " attribute found in this answer.

So here's the code I have, using this on the tabPanel output itself:

navbarPage(
    title=h3("Awesome App Title"),
    tabPanel(h2('Super Cool Tab'), dataTableOutput('ex2'), style = "background-color: #123123;"),
    tabPanel(h2('Pretty Good Tab'), dataTableOutput('ex3'), style = "background-color: #ADBADB;"),
    tabPanel(h2('Just Plain Nifty Tab'), dataTableOutput('ex4'), style = "background-color: #F0F0F0;")

This gives me different background-colored-in tables floating on the background-color specified by the {body} css, and meets the user specs.

Big props to JDHarrison for reaching into the future and providing an answer.
If I stand at all, it's on the shoulders of giants.

Upvotes: 2

Related Questions