How to change color in shiny dashboard?
Solution 1
Based on the example you posted a link to you can try:
ui.R
dashboardPage(
dashboardHeader(
title = "Example of a long title that needs more space",
titleWidth = 450
),
dashboardSidebar( sidebarMenu(
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Widgets", icon = icon("th"), tabName = "widgets",
badgeLabel = "new", badgeColor = "green")
)),
dashboardBody(
# Also add some custom CSS to make the title background area the same
# color as the rest of the header.
tags$head(tags$style(HTML('
/* logo */
.skin-blue .main-header .logo {
background-color: #f4b943;
}
/* logo when hovered */
.skin-blue .main-header .logo:hover {
background-color: #f4b943;
}
/* navbar (rest of the header) */
.skin-blue .main-header .navbar {
background-color: #f4b943;
}
/* main sidebar */
.skin-blue .main-sidebar {
background-color: #f4b943;
}
/* active selected tab in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
background-color: #ff0000;
}
/* other links in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
background-color: #00ff00;
color: #000000;
}
/* other links in the sidebarmenu when hovered */
.skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
background-color: #ff69b4;
}
/* toggle button when hovered */
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color: #ff69b4;
}
')))
)
)
I commented the CSS to point out what it modifies.
Solution 2
Thanks for post. I think you should add "toggle button when hovered" to make it complete. Sample code is below:
/* toggle button when hovered */
.skin-blue .main-header .navbar .sidebar-toggle:hover{
background-color: #ff69b4;
}
Solution 3
Thank you @NicE for the answer. An addition: if someone wants to control the color accent of the left border of the sidebar menu selection, the border-left
property works:
/* active selected tab in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu .active a{
background-color: #2e6984;
border-left: 3px solid #254264;
}
/* other links in the sidebarmenu */
.skin-blue .main-sidebar .sidebar .sidebar-menu a{
background-color: #3E8CB0;
color: #FFFFFF;
}
/* other links in the sidebarmenu when hovered */
.skin-blue .main-sidebar .sidebar .sidebar-menu a:hover{
background-color: #2e6984;
border-left: 3px solid #254264;
}
Related videos on Youtube
Iain
Updated on June 08, 2021Comments
-
Iain almost 3 years
(cross post from shiny google groups)
Could some one point me to the tag names that I have to modify the color of a shiny dashboard?
Modified from http://rstudio.github.io/shinydashboard/appearance.html#long-titles this will change the top left corner of my dashboard to orange
tags$head(tags$style(HTML(' .skin-blue .main-header .logo { background-color: #f4b943; } .skin-blue .main-header .logo:hover { background-color: #f4b943; } ')))
It is unclear to me how to change the rest of the header and sidebar to orange, and how I can change the color when an item on the "SideBarMenu" is selected / highlighted.
-
Iain almost 9 yearsThat is great, thanks. Any ideas on how I could change the text color in the sidebar?
-
NicE almost 9 yearsYou can set the
color
argument in the CSS for.skin-blue .main-sidebar .sidebar .sidebar-menu a
. For ex,color: #000000;
will make the text black (I added that to the code I posted) -
Iain almost 9 yearsThanks! Just discovered the developer tools in chrome which make process very straightforward as I can easily see what elements are present in the page. developer.chrome.com/devtools
-
Skumin about 6 yearsHow could one change the left border colour of a treeview menu when one of the items in that menu is selected and the user is hovering in the treeview menu?