Changing colour of Shiny titlePanel using CSS

Question

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.

Answer 1

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>