I am using bs4Dash (version >2.0) in a shiny app but I am unable to change the navbar color (change permanently irrespective of the dark/light theme) to yellow (#ffc107).
You can check the minimal example given in ?bs4Dash::skinSelector(). While the colour can be changed to yellow from 'Navbar themer' menu in the right control bar but I need to fix or default the header colour to yellow.
Here this is the minimal example given in skinselecter(). please use bs4dash version > 2.0 from github.
if (interactive()) {
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(
sidebarMenu(
menuItem(
text = "Item 1"
),
menuItem(
text = "Item 2"
)
)
),
body = dashboardBody(),
controlbar = dashboardControlbar(skinSelector(), pinned = TRUE),
title = "Skin Selector"
),
server = function(input, output) { }
)
}
By including below css, i was able to solve this.
.navbar-gray-dark {
background-color: #ffc107;
}
.navbar-white {
background-color: #ffc107;
}
Related
I'm trying to modify Shiny dashboard apperance by using CSS.
I've first used internal CSS as below and it works as expected.
library(shiny)
library(shinydashboard)
# Internal CSS - works fine
ui <- shinydashboard::dashboardPage(
shinydashboard::dashboardHeader(title = "MyDashboard"),
shinydashboard::dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "Main", icon = icon("home"), startExpanded = TRUE,
menuSubItem("Tab1", tabName = "Tab1", icon = icon("chart-line")),
menuSubItem("Tab2", tabName = "Tab2", icon = icon("chart-line")),
menuSubItem("Tab3", tabName = "Tab3", icon = icon("dashboard"))
)
)
),
shinydashboard::dashboardBody(
tags$head(tags$style(HTML('
.skin-blue .main-header .logo {
background-color: #193807;
}
.skin-blue .main-header .navbar {
background-color: #193807;
}
.skin-blue .main-sidebar {
background-color: #193807;
}
'
))),
fluidPage(
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Now I want to do the same by refering to an external CSS file. So I create a mystyle.css file inside www directory, which is located insise the folder, in which I have the file with dashboard app (so, if the app is in C:\Documents\Myapp, then the css file is in C:\Documents\Myapp\www).
The css file looks as follows:
.skin-blue .main-header .logo {
background-color: #193807;
}
.skin-blue .main-header .navbar {
background-color: #193807;
}
.skin-blue .main-sidebar {
background-color: #193807;
}
I refer to the css file with a tags$head and tags$link as shown below. But it's not working. What's wrong?
# External CSS - not working
ui <- shinydashboard::dashboardPage(
shinydashboard::dashboardHeader(title = "MyDashboard"),
shinydashboard::dashboardSidebar(
sidebarMenu(
menuItem("Main", tabName = "Main", icon = icon("home"), startExpanded = TRUE,
menuSubItem("Tab1", tabName = "Tab1", icon = icon("chart-line")),
menuSubItem("Tab2", tabName = "Tab2", icon = icon("chart-line")),
menuSubItem("Tab3", tabName = "Tab3", icon = icon("dashboard"))
)
)
),
shinydashboard::dashboardBody(
tags$head(tags$link(rel = "stylesheet", type="text/css", href="mystyle.css")),
fluidPage(
)
)
)
server <- function(input, output) { }
shinyApp(ui, server)
I know this is a very late reply to your question, however I feel I must answer as I too struggled linking my external CSS to my Shiny dashboard.
The method that worked for me was to use the function includeCSS("www/style.css") which I read about in this Shiny post.
Below is an example of how I used this function in my Shiny app.R UI. Note that the includeCSS() function is placed within the dashboardBody() section. I also use icons in my dashboard which does not prevent the CSS from linking for me.
ui <- dashboardPage(
dashboardHeader(title = "Text Analysis"),
dashboardSidebar(
sidebarMenu(
menuItem("Home",
tabName = "home",
icon = icon("home")
)
),
dashboardBody(
includeCSS("www/style.css"), # Link to style sheet
tabItems(
tabItem(tabName = "home",
homeUI("home")
),
)
)
)
Feel free to ignore this if you have not yet explored modules in Shiny apps yet...
My Shiny app uses modules, hence the homeUI() call in the tab item, and the CSS still renders on child and adjacent modules too. I am yet to explore whether CSS linked on child modules is rendered in parent modules. In the meantime, it is handy that the CSS is passed down for anyone wondering if they need to make an includeCSS() call in every module - you don't!
so what if you launch the app in external browser and the open the Developer Tool. Do you have the css file linked to the app successfully? something like below the screenshot:
weirdly, the first time I ran the app, the css file is empty but I tried one more time, it is ok now
After some more checking, the root casue for this might be:
below this warning is causing some issues for the browser to link the CSS file, so please use icon = icon("dashboard", verify_fa = FALSE) in the code to see if it works
1. Color issue using only the bs4Dash package
I am starting to use the package bs4Dash and I am facing a problem with the background color of the left sidebar bs4Dash::dashboardSidebar(). I observe that when I start the app the background color of the left sidebar is always in gray, but when I switch to dark mode and back to light mode the color render with a white color background.
You can observe this behavior using the code below that was taken from help webpage of bs4Dash
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody()
),
server = function(input, output) {}
)
2. Color problem using fresh and bs4Dash package
Using the package fresh when I open the app for the first time It is still with the grey background color, but when I switch from dark mode to light It renders the color according to fresh::create_theme().
Here is an example
# library
library(shiny)
library(bs4Dash)
library(fresh)
# theme creator with fresh::
mytheme <- create_theme(
bs4dash_sidebar_light(
bg = "#FFFF00")
)
#shinyApp
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody(use_theme(mytheme)),
freshTheme = TRUE
),
server = function(input, output) {}
)
I found out this issue in the Github but can't figure out how to solve this problem.
This problem was mentioned in this issue. You can fix it by adding skin = "light" in dashboardSidebar(), as below:
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(skin = "light"),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody()
),
server = function(input, output) {}
)
It seems that changing the main background color and also header (navbar) background color in dark mode is not possible. per this link:
Not able to change bs4Dash "dark" skin theme background in Shiny.
We can always change the sidebar background color in dark (or light using the function for light) mode with this function:
bs4dash_sidebar_dark(
bg = "",
),
However, there is no similar function for header.
Therefore, it would be useful to be able to remove or deactivate the dark/light skin switch from the header.
I could not find any option to remove this toggle switch. If anyone knows how to do that, it would be highly appreciated.
Here is a simple example code:
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody()
),
server = function(input, output) {}
)
Set the argument dark = NULL in dashboardPage():
library(shiny)
library(bs4Dash)
shinyApp(
ui = dashboardPage(
dark = NULL,
title = "Basic Dashboard",
header = dashboardHeader(),
sidebar = dashboardSidebar(),
controlbar = dashboardControlbar(),
footer = dashboardFooter(),
body = dashboardBody()
),
server = function(input, output) {}
)
I have a Shiny app built with shinydashboard and I've just discovered shinydashboardPlus. One nice option is to have the sidebarMenu "minified", or when minimized it doesn't go away completely, but just displays the icons for each menuItem. However, with shinydashboardPlus, when minified, the title gets chopped off. With shinydashboard, the title stays intact, but the sidebar goes away completely.
Example code:
library(shiny)
library(shinydashboard)
#library(shinydashboardPlus)
# Basic dashboard page template
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(#minified = TRUE,
sidebarMenu(
menuItem('Menu1', tabName = 'Menu1',
icon = icon('folder-open')),
menuItem('Menu2', tabName = 'Menu2',
icon = icon('code-branch'))
)
),
dashboardBody()
),
server = function(input, output) { }
)
Leaving the comment marks in place and running it uses shinydashboard, and gives this initially:
And when the hamburger is clicked to minimize the sidebar, the whole sidebar disappears:
If the comment marks are removed so that it runs using shinydashboardPlus, minimizing it gives this, where I have the icons in the sidebar, but the title is chopped:
Is there a way to get the shinydashboardPlus minification that shows just the icons, but doesn't chop off the title?
Here you go
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
# Basic dashboard page template
shinyApp(
ui = dashboardPage(
dashboardHeader(title = "Example"),
dashboardSidebar(#minified = TRUE,
sidebarMenu(
menuItem('Menu1', tabName = 'Menu1',
icon = icon('folder-open')),
menuItem('Menu2', tabName = 'Menu2',
icon = icon('code-branch'))
)
),
dashboardBody(
tags$style(
'
#media (min-width: 768px){
.sidebar-mini.sidebar-collapse .main-header .logo {
width: 230px;
}
.sidebar-mini.sidebar-collapse .main-header .navbar {
margin-left: 230px;
}
}
'
)
)
),
server = function(input, output) { }
)
change the width and margin-left numbers if you have extreme long titles.
I'm using {shinydashboard} and {shinydashboardPlus} to display a carousel. When I click on the carousel indicators they are displayed with a shaded background and a blue border (this wasn't the case in an earlier version of shinydashboardPlus::carousel, I added the used package versions in the code below). I checked this in Firefox and EDGE Chromium. I want to remove both (box and border) and can't figure out how to tweek the CSS. I did already manage to hide the .carousel-caption, but after playing around some time with the DOM inspector, I've not managed to do the same for the small box around the carousel indicators.
My problem is to identify the class of the object that has the shaded background and the blue border as attributes. Once I figure that out, it should be easy to change it.
Any help appreciated.
# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3
shinyApp(ui = dashboardPage(
title = "Test",
header = dashboardHeader(),
sidebar = dashboardSidebar(disable = TRUE,
width = "0px",
collapsed = TRUE),
body = dashboardBody(
tags$head(
tags$style(HTML("
.carousel-caption {
display: none !important;
}
"))
),
carousel(
id = "mycarousel",
carouselItem(
caption = "Item 1",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
),
carouselItem(
caption = "Item 2",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
)
)
) # close dashboardBody
), # close dashboardPage
server = function(input, output) {}
)
This is due to the accessibility plugin from bootstrap that the shiny people decided to add in since 1.6. There was no problem before. This is annoying. I tried to ask them to have an option choose load or not to load this plugin on start, but they refused. You can read from this issue.
To fix your problems, I have added some CSS styles:
# Windows 10 64bit, R 4.1.0
library(shiny) # 1.6
library(shinydashboard) # 0.7.1
library(shinydashboardPlus) # 2.0.3
shinyApp(ui = dashboardPage(
title = "Test",
header = dashboardHeader(),
sidebar = dashboardSidebar(disable = TRUE,
width = "0px",
collapsed = TRUE),
body = dashboardBody(
tags$head(
tags$style(HTML("
.carousel-caption {
display: none !important;
}
a.carousel-control:focus {
outline: none;
/*change background-image to none if want to remove black bars on right*/
background-image: linear-gradient(to right, transparent 0px, rgba(0,0,0,0.5) 100%);;
box-shadow: none;
}
a.carousel-control.left:focus {
/*change background-image to none if want to remove black bars on left*/
background-image: linear-gradient(to right,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);
}
.carousel-tablist-highlight.focus {
outline: none;
background-color: transparent;
}
"))
),
carousel(
id = "mycarousel",
carouselItem(
caption = "Item 1",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
),
carouselItem(
caption = "Item 2",
tags$img(src = "https://getbootstrap.com/docs/5.1/assets/img/bootstrap-icons.png")
)
)
) # close dashboardBody
), # close dashboardPage
server = function(input, output) {}
)
The first rule was added by you. The second and third rules are to remove the ugly box when you click left and right bar, but I didn't remove the black shadows around. You can remove them following the instructions I leave as comments. The last rule is what you really want. Only leave the last one if you don't care about left and right bars.