change appearance of text outputs in shiny app with tab panels

Question

I'm making a Shiny app with multiple panels and tabs. Here is a mini version of my UI:

shinyUI(pageWithSidebar(
headerPanel("TrackAware Data Summary"),

sidebarPanel(
fileInput('file1', 'Choose CSV File',
          accept=c('text/csv', 'text/comma-separated-values,text/plain', '.csv')),
tags$hr(),
checkboxInput('header', 'Header', TRUE),
width = 2,
selectInput("graph", "Choose a graph to view:", 
            choices = c("Best Times to Depart",
                        "Fastest Hour vs. Slowest Hour",
                        "Average Delivery Times per Driver",
                        "Fastest Driver vs. Slowest Driver",
                        "Deliveries per Driver", 
                        "Deliveries per Day", 
                        "Drivers per Day", 
                        "Daily Average Delivery Times",
                        "Driver Consistency"
            )),
submitButton("Update View")
),#end of sidebar panel

mainPanel(
width = 10,
tabsetPanel(
  tabPanel("Dashboard", textOutput("text1"), textOutput("text2")),
  tabPanel("Graph Switcher", plotOutput("selected_graph"))
)
))
)

On the server side I have the code to create the text outputs text1 and text2:

output$text1 <- renderText({
"this is text1"
})

output$text2 <- renderText({
"this is text2"
})

Is it possible to change the appearance of text1 and text2 in terms of font style, font size, color, underlining? I tried inserting css both after the line "width = 10" and after "textOutput("text2")" but it failed to change anything.

tags$head(tags$style("#text1{color: red;
                             font-size: 20px;
                             font-style: italic;
                             }"
                     )
          )

),

Any help is appreciated.

Answer 1

The following code works fine for me, but I am not sure why it is not working for you. Does the code below work for you? Did you insert the tags in a similar fashion?

ui<- shinyUI(pageWithSidebar(
  headerPanel("TrackAware Data Summary"),

  sidebarPanel(
    tags$head(tags$style("#text1{color: red;
                             font-size: 20px;
                         font-style: italic;
                         }"
                     )
    ),
    tags$head(tags$style("#text2{color: blue;
                             font-size: 20px;
                         font-style: italic;
                         }"
    )
    ),
    fileInput('file1', 'Choose CSV File',
              accept=c('text/csv', 'text/comma-separated-values,text/plain', '.csv')),
    tags$hr(),
    checkboxInput('header', 'Header', TRUE),
    width = 2,
    selectInput("graph", "Choose a graph to view:", 
                choices = c("Best Times to Depart",
                            "Fastest Hour vs. Slowest Hour",
                            "Average Delivery Times per Driver",
                            "Fastest Driver vs. Slowest Driver",
                            "Deliveries per Driver", 
                            "Deliveries per Day", 
                            "Drivers per Day", 
                            "Daily Average Delivery Times",
                            "Driver Consistency"
                )),
    submitButton("Update View")
  ),#end of sidebar panel

  mainPanel(
    width = 10,
    tabsetPanel(
      tabPanel("Dashboard", textOutput("text1"), textOutput("text2")),
      tabPanel("Graph Switcher", plotOutput("selected_graph"))
    )
  ))
)

server <- function(input,output)
{
  output$text1 <- renderText({
    "this is text1"
  })

  output$text2 <- renderText({
    "this is text2"
  })
}

shinyApp(ui,server)