I've deployed a shiny app on my company's AWS servers. The shiny app is running on an EC2 instance, so I have access to the folder structure. I managed to drop a reference file for connectivity in the folder the shiny app is in, an I can succesfully call elements from that file.
I recently created a custom css styling file, which I tested on an online RStudio version. It's supposed to customise the header, sidebar, some buttons and the content boxes. It works almost perfectly on RStudio, but when I copied it to the EC2 instance and call it the same way in the shiny app, it seems to not make use of the elements at all.
Here's an exerpt of the css file:
/* Get a fancy font from Google Fonts */
#import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
/* header title font */
.main-header .logo {
font-family: "Lato", normal;
font-weight: normal;
font-size: 24px;
}
/* background color of header (logo part) */
.skin-blue .main-header .logo {
background-color: #7f308a;
}
/* change the background color of header (logo part) when mouse hover */
.skin-blue .main-header .logo:hover {
background-color: #7f308a;
}
/* background color for remaining part of the header */
.skin-blue .main-header .navbar {
background-color: #772583;
}
/* main sidebar */
.skin-blue .main-sidebar {
background-color: #504f54;
color: white ;
}
/* active sidebar menu item */
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
background-color: #ED9128;
color: white;
}
/* sidebar menuitems */
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
background-color: #504f54;
color: white;
}
/* sidebar menuitems when mouse hover */
.skin-blue .main-sidebar .sidebar .sidebar-menu a:hover {
background-color: #f2ab5a!important;
color: #ffffff!important;
}
I reference the file in the shiny app code as follows:
ui <- dashboardPage(
dashboardHeader(title = "mytitle"),
dashboardSidebar(
sidebarMenu(
menuItem("tab1", tabName = "dashboard", icon = icon("clock")),
menuItem("tab2", tabName = "ehl", icon = icon("graduation-cap"))
)
),
dashboardBody(
tags$style(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")),
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")),
tags$header(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css"))
))
I can post more code if necessary, but I'm quite puzzled as to why it just seems to ignore the file or its elements completely on the app I deployed.
Turns out in my case that I had to create the 'www' directory/folder where my app.R was, and drop the .css file in there. Now it works
Related
In my shinydashboard below Im tryin to change the color of my sidebar and my controlbar to grey but it seems not to work when I combine bs4Dash package. Also my controlBar does not open,
## app.R ##
library(shiny)
library(shinydashboard)
library(bs4Dash)
ui <- dashboardPage(
dashboardHeader(
titleWidth = 0,
controlbarIcon = shiny::icon("filter")
),
dashboardSidebar(
collapsed = TRUE,
),
dashboardBody(
tags$head(tags$style(HTML('
/* logo */
.skin-blue .main-header .logo {
background-color: white;
}
/* logo when hovered */
.skin-blue .main-header .logo:hover {
background-color: white;
}
/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
background-color: white;
}
/* body */
.content-wrapper, .right-side {
background-color: white;
}
/* main sidebar */
.skin-blue .main-sidebar {
background-color: grey;
}
/* toggle button when hovered */
.skin-blue .main-header .navbar .sidebar-toggle{
background-color: black;
}
/* toggle button when hovered */
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color: black;
}
')))
),
controlbar = dashboardControlbar(id = "dashboardControlbarID", collapsed = TRUE,skin = "grey",icon = icon("filter"))
)
server <- function(input, output) {
}
shinyApp(ui, server)
While it is possible to get the grey color for the main sidebar ("left sidebar") I am not sure if this is possible with the controlbar ("right sidebar"), here you can toggle the appearance with skin. After many try and errors I come to the end to use skinSelector().
Beside even after getting the desired color it interferes with hovering effects with strange behaviour.
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(),
body = dashboardBody(),
controlbar = dashboardControlbar(collapsed = FALSE, skinSelector()),
title = "Skin Selector"
),
server = function(input, output) { }
)
Together with this site How to change the background color of the Shiny Dashboard Body which I suppose you already know, you may come to the conclusion to invest some time to https://rinterface.github.io/shinydashboardPlus/articles/more-skins.html
I have the following webapp in R (Shiny). I'm trying to change the background color of the header, however the background color in the title corner remains as the default. Is there a way to fix this?
Also, what is the best way to go about changing the background colors of the sidebar and selectizeInput boxes to custom colors as well?
ibrary(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = 'Hello'),
dashboardSidebar(sidebarMenu
(menuItem(tabName = 'Panel1', text = ' Growth Heatmap'),
dateInput("Start_Date", "Start Date", min = '2000-01-01', max = Sys.Date(), value = '2020-01-01',format = "yyyy-mm-dd")
)
),
dashboardBody(tags$head(tags$style(HTML('.skin-blue .main-header .navbar {background-color: #22313f;}'))),
tabItems(tabItem(tabName = 'Panel1',
fluidRow(box(selectizeInput('select_mean', 'Select Number', choices = c(12,24,36,48,60,120)),height=80,width=4)),
fluidRow(box(width = 13, height = 655))
)
)
)
)
server <- function(input, output) {
}
shinyApp(ui, server)
.skin-blue .main-header .logo {
background-color: black;
color: white;
border-bottom: 0 solid transparent;
}
.skin-blue .main-header .logo:hover {
background-color: black;
}
adding this to css file should change the header logo background color to black and text white.
Here is the link for css file see line (1-139) for blue skin-
shinydashboard_blue_skin
I think you have to play around little bit with color (search sidebar in the above css file and you will find where to change)
I have a shinydashboard application. I want to have two radio buttons - say labelled "green" and "red" and for the header/navbar to change colour to either green or red to reflect the users selection. Is this possible?
I know you can use CSS to make the header/navbar a different colour and there are some packages (like fresh) that can a similar thing, but I don't know any way of changing it reactively.
Thanks!
Edit: my code is here. All the elements that are currently coloured #D55E00 I would like to change colour when the button is switched
library(shinydashboard)
library(shiny)
ui <- dashboardPage(
dashboardHeader(title="Title"),
dashboardSidebar(
radioButtons(
inputId = "colourswitch",
label = "Click here!",
choices = c("red", "green")
)
),
dashboardBody(
tags$head(tags$style(HTML('
/* logo */
.skin-blue .main-header .logo {background-color: #D55E00;}
/* logo when hovered */
.skin-blue .main-header .logo:hover {background-color: #D55E00;}
/* toggle button when hovered */
.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color: #D55E00;}
/* navbar (rest of the header) */
.skin-blue .main-header .navbar {background-color: #D55E00;}'))),
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Here is a cheap way to change the color from server without using any Javascript, purely with CSS.
library(shinydashboard)
library(shiny)
library(glue)
ui <- dashboardPage(
dashboardHeader(title="Title"),
dashboardSidebar(
radioButtons(
inputId = "colourswitch",
label = "Click here!",
choices = c("orange"="#D55E00","red"="red", "green"="green")
)
),
dashboardBody(
uiOutput("navcolor"),
tags$head(tags$style(HTML('
/* logo */
.skin-blue .main-header .logo {background-color: var(--nav-color);}
/* logo when hovered */
.skin-blue .main-header .logo:hover {background-color: var(--nav-color);}
/* toggle button when hovered */
.skin-blue .main-header .navbar .sidebar-toggle:hover{background-color: var(--nav-color);}
/* navbar (rest of the header) */
.skin-blue .main-header .navbar {background-color: var(--nav-color);}'))),
)
)
server <- function(input, output, session) {
output$navcolor <- renderUI({
tags$style(HTML(glue(
"
:root {
--nav-color: #{input$colourswitch}#
}
",
.open = "#{", .close = "}#"
)))
})
}
shinyApp(ui, server)
I would like to know hot to change the default white background of a navbar Page menu and also the font type and color of all its elements in a shiny dashboard.
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
navbarPage("Title",
navbarMenu("More",
tabPanel("Table"
),
tabPanel("About"
)
)
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Add CSS to your app: https://shiny.rstudio.com/articles/css.html
For the text (from How to specify font attributes for all elements on an html web page?):
* {
font-size: 100%;
font-family: Arial;
color: black;
}
For the background color:
.content-wrapper, .right-side {
background-color: rgb(255,0,0);
}
EDIT: For Navbar try (Change background colour of navbarPage menubar in R shiny):
.navbar-default {
background-color: #b1b1b3 !important;
}
I tried to customize the colors of a Shiny app. The minimal example with this code
library(shinydashboard)
library(shiny)
header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
tags$head(
tags$style(
HTML(
'.skin-black .main-sidebar {color: #FFFFFF; background-color: #9A373C;}
.skin-black .main-header .navbar { background-color: #ffffff;}
.skin-black .span12 { background-color: #ffffff;}'
)
)
)
)
ui <- dashboardPage(header, sidebar, body,skin = "black")
server <- function(input, output) {}
shinyApp(ui, server)
generates an App that has a white header when the browser windows is large and a black/white header when the browser window is small.
What can I do in order to get it always white?
I am asking because I place a logo in the top left rectangular it looks awful when the background color gets black just because someone is looking at the app in a smaller window.
I think this gets you where you want, but I did all of it by inspecting the styles of the relevant elements, and I'm afraid that's what you need to do to in these situations - there isn't a better answer than just trial and error...
Hope it helps!
library(shinydashboard)
library(shiny)
header <- dashboardHeader()
sidebar <- dashboardSidebar()
body <- dashboardBody(
tags$head(
tags$style(
HTML(
'.skin-black .main-sidebar {color: #FFFFFF; background-color: #9A373C;}
.skin-black .span12 { background-color: #ffffff;}
.skin-black .main-header .navbar { background-color: #ffffff;}
.skin-black .main-header > .logo { background-color: #ffffff;}
.skin-black .main-header > .logo:hover { background-color: #ffffff;}
.skin-black .main-header .logo, .skin-black .main-header .navbar { transition: color 0s; }'
)
)
)
)
ui <- dashboardPage(header, sidebar, body,skin = "black")
server <- function(input, output) {}
shinyApp(ui, server)