1. Customization with CSS formatting
We will now customize the dashboard with greater control using CSS formatting.
2. How to further customize a shinydashboard?
Let's choose a dark theme which we may achieve quickly by choosing a black skin, though its effect is limited.
What if we want to change the appearance of individual objects?
This can be achieved by using CSS code, short for cascading style sheets. Let's look at some CSS codes, but don't worry too much about the finer details.
3. Introduction to CSS: adding comments
The first important thing to note is that CSS is not a programming language but a styling language. It tells the program how each feature of a rendered object will appear.
Structurally, a CSS code is made up of chunks of selectors, each with properties, subproperties, and so on. This forms a dictionary of sorts, which keeps track of the design of each feature.
We shall save CSS code as a string. Since we may need quotation marks in a CSS code, let us use single quotation marks here.
Comments can be inserted into CSS code to provide descriptions of what the code does. These comments are ignored when the program is executed.
In CSS, this is achieved by using the slash star notation.
4. Introduction to CSS: selectors
In a chunk, there is a selector, which corresponds to a feature of our dashboard.
In this dummy code, we have a feature called "selector" and there are two properties which have been given different values. See that the properties are encased in curly braces, and each property appears in a new line, where each property is given a value via the colon syntax, and ends off with a semicolon.
A dotted selector, like dot-selector, represents a CSS class.
5. Introduction to CSS: selector combinations
Two selectors dot-class1 and dot-class2 can be combined by placing a space in between them. This means that within class1, we would want to select a subclass called class2.
The space is important. If a space is not provided, the code will not work correctly.
6. A more concrete example
To change the font settings in a shinydashboard header, we will need dot-main-header, followed by dot-logo. This means we are selecting the main-header class, and then looking for a logo subclass.
Let's set the font-family to "Times New Roman", the font-weight to bold, and the font-size to 24 pixels.
We can also set the background color to black.
This is done by looking for the skin-blue class, which corresponds to the default blue skin in a shinydashboard. Within this class, look for a subclass called main-header, and then a sub-subclass called logo.
Let's set the background-color property to the hexcode comprising six zeroes for black.
7. A full example
Here, we have a set of selectors with specified properties in the following code which we have stored as a string called css_code.
We have already seen the two selector combinations from before.
We can add more, like one that will change the hover-over color in the header.
Or one that changes the navigation panel color.
There are many more selector combinations, but they are too numerous to list.
8. Applying CSS formatting to a shinydashboard
To apply these settings to our shinydashboard, this css code ought to be inserted in dashboardBody. First convert the css_code to HTML using HTML. Then, the style of the dashboard is updated by placing the HTML in tags$style. Finally, this is all encapsulated in tags$head which will update the necessary HTML tags when the shinydashboard is rendered.
In doing so, the desired styles are applied to our shinydashboard.
9. Let's practice!
Now it's time for you to practice working with CSS codes in a shinydashboard!