Styling the Cards

We still need to style the cards and make sure they link to the right content.

What we want to achieve

For the cards, we will implement the following requirements:

• Center the text in the cards
• A large icon should be displayed in the card header
• The cards should link to the appropriate page in Self Service
• The card should ‘light up’ when you hover the mouse over it
• The counter in the card body should be highlighted in blue when it is larger than 0

This will transform the cards from this:

to this:

Initial Style

First add the following CSS to the Homepage CSS field:



By now, you should know how this will change the styling of the cards.

Center the Text in the Cards

We will start by centering the text in the cards. You have the choice now to use the standard css text-align property or to use the Bootstrap Text Utility.

Exercise:

Adding the Icons

Throughout the 4me application, an icon font is used to display icons. An icon font is just like a regular font (such as Arial or Times New Roman), only it contains icons instead of letters. Icon fonts have several advantages over using images, some of which are:

• The icons in an icon font look nice and sharp, regardless of their size
• You can change their color and other attributes using CSS (no need for a different image per color)

4me has created a complete library of icons that you can use in your Self Service Design. You can find them in the 4me icon library. Look up the Inbox icon and use the Element Inspector of the Developer Tools to inspect the HTML. It looks like this:

<i class="ii icon-inbox"></i>

Exercise:

A font is a collection of characters. The font in the 4me system is called ‘itrp-icons’. itrp is the technical name of the 4me system (it still refers to the original branding that was used when the 4me system was built). Each character (and in this case each icon) has a unique number or identifier within the font.

To fully understand how this works, open the Self Service Portal and inspect the Inbox icon.The relevant parts of the CSS look like this:


The :before part of the second rule is called a pseudo-element. It is used to insert some content inside the element with the class icon-inbox. In this case, we insert the 58112th character of the itrp-icons font, which happens to look like an inbox.

Link the Cards

The user will expect to open the Inbox when she clicks on the Inbox Card. So we need to turn the entire card into a link, so that clicking anywhere on the card brings you to the correct self service page. In HTML this means that we need to turn the div.card elements in a.card elements according to the HTML Links syntax.

Exercise:

When you test the linked cards, you will see that the cards’ color turned into blue. That’s the standard color for <a .>... </a> elements. To have our grey color again, you will need to apply CSS rules for the color and border-color properties of the cards. But you must take into account CSS Specificity, the algorithm by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. The basic principle is that by indicating one or more elements before the element you’re selecting, the rule becomes more specific and gets higher priority.

Exercise:

Highlight on Hover

Next, when you hover over the cards with the mouse,



we want it to turn into this:



We can make use of the CSS Pseudo-classes. A pseudo-class is used to specify a special state of an element and based on that state, style it. It can be used to:

• Change the color of this element when the mouse is hovered over it
• Change the shadow effect when the cursor is in this input field
• Change the background of this button when the mouse is pressed down on it
  
  

The syntax is straightforward:

selector:pseudo-class { property:value; }

The hover pseudo-class is one of the available pseudo-classes. To set the background color of a div element in blue when you hover over it, you can style it with:

div:hover { background-color: blue; }

Exercise:

Highlight Counts Higher than 0

Finally, we want to highlight counts higher than 0, by making the number blue and bold:

How could we do this? It seems we have to apply a CSS rule based on the text inside a HTML element: If the text is not 0, make it blue and bold. Unfortunately this is not possible with CSS: CSS is based on HTML elements and classes. Could we somehow encode the necessary information in the class attribute?

This is indeed possible: the text that displays the counter inside the card body is rendered with a widget. We could use the same widget to build our own class attribute count-. For the Inbox card this would become:



For the css rule to be only applied when the counter is not zero, we can use the CSS ‘:not’ Selector.

Exercise:

Next Exercise