The hardware and bandwidth for this mirror is donated by METANET, the Webhosting and Full Service-Cloud Provider.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]metanet.ch.
This document presents a new method of customising Shinydashboard applications using themes.
The large amount of code required to change the application appearance has been wrapped into several convenient and easy-to-use R functions, removing the need for end-users to change the underlying CSS code manually.
The new functions are described below:
| Function | Description | Input | Output |
|---|---|---|---|
| shinyDashboardThemes | Calls a custom theme created using shinyDashboardThemeDIY | Theme name | Theme settings object |
| shinyDashboardLogo | Calls a custom logo created using shinyDashboardLogoDIY | Theme name and logo text | Logo settings object |
| shinyDashboardThemeDIY | Creates a custom theme object | Size, colour and other settings for each UI element. See separate tab for input options | Theme settings object |
| shinyDashboardLogoDIY | Creates a custom logo object. Inspired from here | Size and colour for the logo. See separate tab for input options | Logo settings object |
| cssGradientThreeColors | Creates a three colour gradient to be used in themes | Gradient direction, colours, position of middle colour | CSS gradient |
Examples of using each function are provided below:
Use by inserting into the dashboardBody part of an application.
...
### ui body
dashboardBody(
### changing theme
shinyDashboardThemes(
theme = "blue_gradient"
)
### ui tabs
,tabItems(
tabItem(
...Use by inserting into the title parameter within the dashboardHeader part of an application.
...
### ui
ui <- dashboardPage(
### ui header
dashboardHeader(
### changing logo
title = shinyDashboardLogo(
theme = "blue_gradient",
boldText = "Shiny",
mainText = "App",
badgeText = "v1.1"
)
...Example of creating a custom theme object. Each parameter can be changed as required.
### calling custom theme object in shinydashboard
...
### ui body
dashboardBody(
### changing theme
customTheme
### ui tabs
,tabItems(
tabItem(
...
### creating custom theme object
customTheme <- shinyDashboardThemeDIY(
### general
appFontFamily = "Arial"
,appFontColor = "rgb(0,0,0)"
,primaryFontColor = "rgb(0,0,0)"
,infoFontColor = "rgb(0,0,0)"
,successFontColor = "rgb(0,0,0)"
,warningFontColor = "rgb(0,0,0)"
,dangerFontColor = "rgb(0,0,0)"
,bodyBackColor = "rgb(248,248,248)"
### header
,logoBackColor = "rgb(23,103,124)"
,headerButtonBackColor = "rgb(238,238,238)"
,headerButtonIconColor = "rgb(75,75,75)"
,headerButtonBackColorHover = "rgb(210,210,210)"
,headerButtonIconColorHover = "rgb(0,0,0)"
,headerBackColor = "rgb(238,238,238)"
,headerBoxShadowColor = "#aaaaaa"
,headerBoxShadowSize = "2px 2px 2px"
### sidebar
,sidebarBackColor = cssGradientThreeColors(
direction = "down"
,colorStart = "rgb(20,97,117)"
,colorMiddle = "rgb(56,161,187)"
,colorEnd = "rgb(3,22,56)"
,colorStartPos = 0
,colorMiddlePos = 50
,colorEndPos = 100
)
,sidebarPadding = 0
,sidebarMenuBackColor = "transparent"
,sidebarMenuPadding = 0
,sidebarMenuBorderRadius = 0
,sidebarShadowRadius = "3px 5px 5px"
,sidebarShadowColor = "#aaaaaa"
,sidebarUserTextColor = "rgb(255,255,255)"
,sidebarSearchBackColor = "rgb(55,72,80)"
,sidebarSearchIconColor = "rgb(153,153,153)"
,sidebarSearchBorderColor = "rgb(55,72,80)"
,sidebarTabTextColor = "rgb(255,255,255)"
,sidebarTabTextSize = 13
,sidebarTabBorderStyle = "none none solid none"
,sidebarTabBorderColor = "rgb(35,106,135)"
,sidebarTabBorderWidth = 1
,sidebarTabBackColorSelected = cssGradientThreeColors(
direction = "right"
,colorStart = "rgba(44,222,235,1)"
,colorMiddle = "rgba(44,222,235,1)"
,colorEnd = "rgba(0,255,213,1)"
,colorStartPos = 0
,colorMiddlePos = 30
,colorEndPos = 100
)
,sidebarTabTextColorSelected = "rgb(0,0,0)"
,sidebarTabRadiusSelected = "0px 20px 20px 0px"
,sidebarTabBackColorHover = cssGradientThreeColors(
direction = "right"
,colorStart = "rgba(44,222,235,1)"
,colorMiddle = "rgba(44,222,235,1)"
,colorEnd = "rgba(0,255,213,1)"
,colorStartPos = 0
,colorMiddlePos = 30
,colorEndPos = 100
)
,sidebarTabTextColorHover = "rgb(50,50,50)"
,sidebarTabBorderStyleHover = "none none solid none"
,sidebarTabBorderColorHover = "rgb(75,126,151)"
,sidebarTabBorderWidthHover = 1
,sidebarTabRadiusHover = "0px 20px 20px 0px"
### boxes
,boxBackColor = "rgb(255,255,255)"
,boxBorderRadius = 5
,boxShadowSize = "0px 1px 1px"
,boxShadowColor = "rgba(0,0,0,.1)"
,boxTitleSize = 16
,boxDefaultColor = "rgb(210,214,220)"
,boxPrimaryColor = "rgba(44,222,235,1)"
,boxInfoColor = "rgb(210,214,220)"
,boxSuccessColor = "rgba(0,255,213,1)"
,boxWarningColor = "rgb(244,156,104)"
,boxDangerColor = "rgb(255,88,55)"
,tabBoxTabColor = "rgb(255,255,255)"
,tabBoxTabTextSize = 14
,tabBoxTabTextColor = "rgb(0,0,0)"
,tabBoxTabTextColorSelected = "rgb(0,0,0)"
,tabBoxBackColor = "rgb(255,255,255)"
,tabBoxHighlightColor = "rgba(44,222,235,1)"
,tabBoxBorderRadius = 5
### inputs
,buttonBackColor = "rgb(245,245,245)"
,buttonTextColor = "rgb(0,0,0)"
,buttonBorderColor = "rgb(200,200,200)"
,buttonBorderRadius = 5
,buttonBackColorHover = "rgb(235,235,235)"
,buttonTextColorHover = "rgb(100,100,100)"
,buttonBorderColorHover = "rgb(200,200,200)"
,textboxBackColor = "rgb(255,255,255)"
,textboxBorderColor = "rgb(200,200,200)"
,textboxBorderRadius = 5
,textboxBackColorSelect = "rgb(245,245,245)"
,textboxBorderColorSelect = "rgb(200,200,200)"
### tables
,tableBackColor = "rgb(255,255,255)"
,tableBorderColor = "rgb(240,240,240)"
,tableBorderTopSize = 1
,tableBorderRowSize = 1
)
Example of creating a custom logo object. Each parameter can be changed as required.
### calling custom logo object in shinydashboard
...
### ui
ui <- dashboardPage(
### ui header
dashboardHeader(
### changing logo
title = customLogo
...
### creating custom logo object
customLogo <- shinyDashboardLogoDIY(
boldText = "SD"
,mainText = "Themes"
,textSize = 16
,badgeText = "v1.1"
,badgeTextColor = "white"
,badgeTextSize = 2
,badgeBackColor = "#40E0D0"
,badgeBorderRadius = 3
)Several themes have been created using the new functionality:
| Theme | Code | Description |
|---|---|---|
| Blue gradient | blue_gradient | Demonstrates use of gradients, shadows and rounded corners |
| Flat Red | flat_red | Flat colour theme with red highlights. |
| Grey light | grey_light | Simple, light theme using a grey colour schemes |
| Grey dark | grey_dark | Demonstrates use of inverted dark colour schemes |
| OneNote | onenote | Styled similarly to the OneNote application |
| Poor man’s Flatly | poor_mans_flatly | Poor man’s version of the Flatly theme |
| Purple gradient | purple_gradient | Demonstrates high use of gradients and a smaller sidebar |
Some application components have not been fully customised:
Action button when pressed
Dropdown menu background
Popup menu and placeholder font colour in date inputs
Checkbox and radio buttons
These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.