CODEWITHSUNDEEP
cssrshiny
Pryore
Pryore

Reputation: 520

Changing colour of Shiny titlePanel using CSS

Hi

This is undoubtebly a simple question, but I'm finding CSS styling slightly tedious in Shiny.

I'm trying to change the colour of my Shiny app title to red using the following code (see below). However, I'm having trouble figuring out which tag and ID I should use to make the changes. 

 titlePanel(h1("Shiny App Test")),
    tags$h1(tags$style(".titlePanel{ 
                         color: red;
                         font-size: 20px;
                         font-style: italic;
                         }"))

In order to learn from this, I'd like to understand (1) how can I make my code work and (2) for template features like the titlePanel and tabPanels should I generate an ID to reference (i.e. '#titleID') or should I stick to the existing referencing (i.e '.titlePanel')?

Many thanks.

Upvotes: 3

Views: 10200

Answers (2)

Eugene Brown
Eugene Brown

Reputation: 4362

You can lose the call titlePanel, add an ID to your h1 & access that element through your css via the ID, like so:

h1(id="big-heading", "Shiny App Test"),
tags$style(HTML("#big-heading{color: red;}"))

That creates this HTML:

<h1 id="big-heading">Shiny App Test</h1>
<style>#big-heading{color: red;}</style>

Upvotes: 10

Pryore
Pryore

Reputation: 520

I generated an ID for the titlePanel and it worked:

    tags$head(tags$style(
     HTML('#title {
           color: black;
           font-size: 40px;
           font-style: bold;
          }'))),

Upvotes: 1

Related Questions