Preface
This article describes how to apply highly customizable styling to Screens, from changing colors and adding borders to putting in visual effects like shadows or gradients. If it is a visual adjustment to something displayed on the screen, chances are it can be fine-tuned as desired.
This is an intermediate-to-advanced topic that is not intended for all audiences; it will generally involve entering the browser debugging mode to review the Screens' HTML code and writing Cascading Style Sheet (CSS) definitions. However, for those comfortable with these things, it may prove very useful in adding personal touches to the DAKboard!
That said, there are a few ways to use the Custom-CSS feature for some basic adjustments by carefully following this tutorial. For this, skip down to the "For the Novice" section, below.
See the end of this article for links to resources and reference materials for CSS.
Please note that as we apply updates to DAKboard over time, while we do our best to keep things backward compatible, there is a chance that some things may change that will affect any custom CSS that has been applied, particularly when the underlying page structure is modified. When experiencing any sudden changes in Screen display, please review the custom CSS rules to see that they are still working as intended.
For The Intermediate/Advanced
Analyze the Screen Content
- Login to your DAKboard account.
- Navigate to the "Screens" setup.
- On the Screen to customize, select the "..." menu
- Then choose "View"
Now that the screen is displayed, enter the browsers "Page Inspector" or "Debugger" mode (see the Resources section below for links to information regarding these). In the Inspector, begin looking through the HTML of the Screen. For example, here is a simple "News" (RSS) Screen:
An example Page Inspector/Debugger session might look like this:
When inspecting this Screen around where the "My RSS Feed" displays, the following HTML is visible:
<div class="block rss block-rss block--MyRSSFeed align-left text-left "
id="6074b3bd7cfb8664c104b176"
style="top:8.186669921875%;left:2.0592380099826%;width:95.169888888889%;height:58.24%;color: #ffffff;font-size:36pt;z-index:121;">
<div class="rss rss-6074b3bd7cfb8664c104b176" style="display: block;">
<div class="block-name ">My RSS Feed</div>
<marquee class="rss-scroll hide" scrollamount="10"></marquee>
<div class="rss-title"><a href="https://blogs.ei.columbia.edu/2021/04/12/amazing-planet-slideshow-2021/" target="_blank" title="View this article on State of the Planet">Earth Institute Photos of Our Amazing Planet</a></div>
<div class="rss-timestamp ">State of the Planet • 1 days ago</div>
<div class="rss-description ">Throughout Earth Month, we'll be sharing some of the incredible photos that our researchers have captured during field work. Enjoy!</div>
</div>
</div>
Upon reviewing this HTML, there are several nested DIV containers, and each has various id and class values associated with them, such as:
- id's for:
- 6074b3bd7cfb8664c104b176
- classes for:
- block--MyRSSFeed
- rss-title
- rss-timestamp
- rss-description
Make note of these things, as they will all help target specific areas to customize, as shown in the next section.
Determine the CSS Selector to Use
Analyzing the Screen content reveals the id and class attributes that can be used to target elements for customization. For more complex targeting, review the information on CSS Selectors, here: https://www.w3schools.com/cssref/css_selectors.asp
In the following example, the appearance of the RSS block has been changed by adding some interesting borders, a shadow, and a more vibrant title. This is done by adding these Custom CSS Rules:
.block--MyRSSFeed {
border: 3px solid black;
border-radius: 25px;
background: rgb(0,100,100, 0.5);
box-shadow: 0px 0px 20px;
height: auto !important;
-webkit-mask-image: unset !important;
}
.block--MyRSSFeed .rss {
padding:30px;
}
.rss-title {
font-variant: small-caps;
color: #aef;
text-shadow: -1px 1px 15px #3af, 1px 1px 15px #3af, 1px -1px 0 #3af, -1px -1px 0 #3af;
}The first rule applies to any blocks named "My RSS Feed", and adds a black border with rounded corners and a glow around it. It also turns off the gradient shading that normally applies to the block, and overrides the height to collapse to its content.
In the second rule, any block with a class value that has "rss" in it and is contained within a block entitled "My RSS Feed" is targeted. This rule also introduces some space between the border area of the container block and the textual content.
And, finally, the third rule targets any elements with "rss-title" in its class list, giving the HTML element more vibrant font styling. Noting that, with the ".block--MyRSSFeed " left off in its selector, this changes all elements with that class, not just ones contained within the "My RSS Feed" block. So, if there are any other RSS blocks on the Screen, they would also be affected.
For The Novice
Add the Custom CSS Configuration to the Screen
- Login to your DAKboard account.
- Navigate to the "Screens" setup.
- Select the Screen to customize.
- Click on the "Styles" button in the upper-left.
- Select the "Add Custom CSS Rules" button.
Now, a text area becomes visible for entering any CSS style definitions to use on this Screen. Multiple rule definitions are permitted. The rule definitions will look something like this:
.block--TitleOfTheBlockIWantToModify {
font-variant: small-caps;
border: 3px outset blue;
}
.block--AnotherBlockTitle {
border-radius: 25px;
}Each block in a DAKboard Screen has a CSS class name that matches the title typed into it. Use this feature to easily isolate customizations to a given block. Keep in mind that for the same-named blocks, the customization will apply to all of them. This can be a quick way to apply the same style to multiple blocks at once, or it can have unexpected results if that were not intended.
The CSS class name in the Custom CSS Rules will have the format of:
- A period (".")
- The string "block"
- Two dashes ("--")
- The title of the block, with any spaces and non-alphanumeric characters, removed
The class name is then followed by the definition that applies to it, in the following format:
- Open brace ("{")
- Semi-colon (";") delimited CSS properties each having the format:
- Property name
- Colon (":")
- Property value
- Close brace ("}")
Taking advantage of this will allow several basic customizations of Screens. To target more specific pieces of a DAKboard block, more complex CSS selectors are required to narrow down which HTML elements that customization applies to. Details on writing CSS selectors may be found here: https://www.w3schools.com/cssref/css_selectors.asp
Once changes to the Custom CSS Rules are complete, make sure to select "Save Changes", then click the "Preview" button or reload the Screen and see them take effect.
Tips
- When writing CSS selectors, be as specific as possible! The more broad the selector is, the longer it will take the browser to "find" the element, which will hurt the performance of the Screen (and may also touch more things than intended!). Example guidelines:
- Use the "#{id here}" whenever possible.
- Beyond that, using a class selector, ".{class name here}" will work. Restricting it to a specific tag name can be beneficial, too.
- Avoid using only an HTML tag name
- Remove any CSS rules that are not being used
- Experimenting with changes in the browsers Page Inspector/Debugger before applying them in the Screen Settings can save time and hassle
- When custom styles seem to have no effect, sometimes adding the string " !important" to the end of the property value can force it; but, take caution to use this technique sparingly
Resources
- HTML
- CSS
- Browser Page Inspectors / Debuggers: