Customizing the Title and Adding Space in a Shiny App

In this article, we will explore how to customize the title of a Shiny app and add space between the title and other items. We will use R and Shiny for this example.

Introduction

Shiny apps are built using R and offer a wide range of features for creating interactive web applications. One of the key aspects of Shiny apps is their layout, which can be customized to suit your needs. In this article, we will focus on customizing the title of a Shiny app and adding space between the title and other items.

The navbar is a fundamental component of any Shiny app, providing a consistent navigation menu across all pages. The navbar typically includes the brand name or logo, which serves as the application’s identifier.

# Navbar Structure

A typical navbar consists of the following elements:

*   `navbarPage()`: This function creates the basic structure of the navbar.
*   `tabPanel()`: These panels are used to organize different sections of the app.
*   `sidebarLayout()` and `mainPanel()`: These functions create the layout for the sidebar and main content areas, respectively.

Adding Custom CSS

To customize the title and add space between the title and other items, we can use custom CSS. In Shiny apps, we can add CSS styles using the tags$style() function.

# Adding Custom CSS

We can add custom CSS to our Shiny app using the `tags$style()` function:

```r
tags$head(tags$style(
  HTML('.navbar-brand {width: 300px; font-size:35px; text-align:center;}')
))

This code adds a style to the .navbar-brand class, setting its width to 300 pixels, font size to 35 pixels, and centering the text.

Code Example

Here’s an updated version of the Shiny app that includes custom CSS for the title:

# Shiny App UI

ui <- function(input, output) {
  # Create a navbar with a custom title
  shinyApp(
    ui <- function() {
      # Create a navbar with a custom title
      navbarPage(
        "Intervals",
        tabPanel("Data Import", 
                 sidebarLayout(sidebarPanel(fileInput("file","Upload your CSV",multiple = FALSE),
                                               tags$hr(),
                                               h5(helpText("Select the read.table parameters below")),
                                               checkboxInput(inputId = 'header', label = 'Header', value = FALSE),
                                               checkboxInput(inputId = "stringAsFactors", "stringAsFactors", FALSE),
                                               radioButtons(inputId = 'sep', label = 'Separator', 
                                                            choices = c(Comma=',',Semicolon=';',Tab='\t', Space=''), selected = ',')),
                 mainPanel(uiOutput("tb1")) ),
        tabPanel("95% Continious RI", 
                 sidebarLayout(sidebarPanel(
                   uiOutput("model_select"),
                   uiOutput("var1_select"),
                   uiOutput("rest_var_select")),
                 mainPanel(helpText("Selected variables and Fitted values"), verbatimTextOutput("other_val_show")))),
        tabPanel("Model Summary", verbatimTextOutput("summary")), 
        tabPanel("Scatterplot", plotOutput("scatterplot")),
        # Add custom CSS
        tags$head(tags$style(
          HTML('.navbar-brand {width: 300px; font-size:35px; text-align:center;}')))
      )
    },
    
    server <- function(input, output) {
      # Server-side code goes here...
    }
  )
}

Conclusion

In this article, we explored how to customize the title of a Shiny app and add space between the title and other items. We used custom CSS to achieve these goals and provided an updated version of the Shiny app that demonstrates the usage of tags$style().

Last modified on 2024-07-26

Customizing the Title and Adding Space in a Shiny App

Introduction

Understanding the Navbar

Adding Custom CSS

Code Example

Conclusion