Customising the header-bar with Shinydashboard: two bars possible?

[Felix Klose]

Hi together,

Perhaps you can help me:
I want the header-bar of a shiny dashboard to have the following look: two bars, on top of each other, with two differenct colors: http://i.stack.imgur.com/1HKv3.jpg

So far, I have succeeded in putting those bars into the dashboard-body, but how to put them into the header remains unclear.

Below is the code that I have used. You find the "bar-relevant" code in the ui-code, below "body <- dashboardBody", and in the CSS-code.

ui.R

library(shinydashboard)
library(DT)

sidebar <- dashboardSidebar(
  width = 250,
  selectInput('xcol', 'X Variable', names(iris)),
  selectInput('ycol', 'Y Variable', names(iris),
              selected=names(iris)[[2]]),
  numericInput('clusters', 'Cluster count', 3,
               min = 1, max = 9)
 
)




body <- dashboardBody( disable=FALSE,
 
  tags$head(
  tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
  ),
 
  tags$div(class="frameheader1 vertical-align",
           tags$div(class="vertical-align full-width")),
  tags$div(class="frameheader2"),
 
  plotOutput('plot1')

 
               )
         

shinyUI(dashboardPage(
  dashboardHeader(
                   #                   ,
                  # tags$div(class="frameheader1 vertical-align",
                  #          tags$div(class="vertical-align full-width")),
                  # tags$div(class="frameheader2")
                  ),

 
  dashboardSidebar(sidebar),
  body
))

server.R

library(shiny)
library(shinydashboard)




palette(c("#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",
          "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999"))

shinyServer(function(input, output, session) {
 
  # Combine the selected variables into a new data frame
  selectedData <- reactive({
    iris[, c(input$xcol, input$ycol)]
  })
 
  clusters <- reactive({
    kmeans(selectedData(), input$clusters)
  })
 
  output$plot1 <- renderPlot({
    par(mar = c(5.1, 4.1, 0, 1))
    plot(selectedData(),
         col = clusters()$cluster,
         pch = 20, cex = 3)
    points(clusters()$centers, pch = 4, cex = 4, lwd = 4)
  })
 
})

custom.css

/*This is the layout for the single header*/
 .skin-blue .main-header .navbar {
    background-color: #323232;
                                   }

.skin-blue .main-header .logo {
    background-color: #323232;
        }                      
   
    .main-header {
    background-color: #323232;
    border-top: #97BF0D solid 2px;
    border-bottom: #97BF0D solid 2px;
}

.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: #97BF0D;
    width: 250px;
}


   
/*This is the layout for the two bars*/
.frameheader1 {
    color: #ffffff;
    background-color: #000000;
    border-bottom-width: 1px;
    border-bottom-color: #97BF0D;
    border-bottom-style: solid;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    height: 27px;
    width: 100%;
    padding-left: 15px;
    margin-top: 0px;
}

.vertical-align {
    display: flex;
    align-items: center;
    flex-direction: row;
}


.frameheader2 {
    background-color: #323232;
    color: #C4C7C7;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    height:40px;
    width: 100%;
    margin-top: 0px;
}

.full-width{
    width: 100%;
}