Version two – grid layout (B)

The interface that we just produced demonstrates a lot of the key concepts in layout, but it's horribly ugly. Let's produce a nice interface. Here's the finished product:

ui.R

Now we'll step through the ui.R file looking at all the changes made over the original version. The custom header is made as follows:

library(shiny)
shinyUI(fluidPage(
  title = "Google Analytics",
  h2("Google Analytics",
    style = "font-family: 'Impact';
    color: purple; font-size: 32px;"),

As we saw elsewhere, it's very easy to make your own headers using h1(), h2(), and so on and to pass style information into them as done in the preceding code. In this case, you can see also that we have passed title = "Google Analytics" to fluidPage() in order to give the window/tab a title on the web browser (equivalent to the HTML <title> tag).

The next chunk, the first fluidRow() layout with the input widgets, contains a few important changes:

fluidRow(
  column(4,
    wellPanel(
      dateRangeInput...