6. Styling

A veteran web developer knows that there are multiple ways to style HTML elements. For example, this can be done statically by including a <link rel="stylesheet" href="style.css">, or dynamically via JavaScript with element.style.backgroundColor = "tomato", to name a few. Yes! "Tomato" is, unironically, the best red color there is, in my personal opinion!

One way to style widgets is by using the Less editor under the Styles tab. Less is a CSS preprocessor that provides additional functionality on top of CSS. If you prefer not to write in Less, you can still write standard CSS without using any Less features.

If you do want to write in Less, you will also have access to built-in variables from Bootstrap 3, which can be very handy if you want to customize some of their components in a widget. You can find these variables in the right-side panel of the screen.

In this chapter, we are going to write a simple message box. If you are familiar with Bootstrap 3, you know they have an Alert component available out of the box, and we provide that as one of our base components. However, for the sake of this exercise, we will write one from scratch.

Creating the Message Widget

1. Create a new widget called "Message" in the "Widget Academy" library.

2. Copy and paste the following script:

<div class="message <?attr @Style ?>"><?= @Text ?></div>

1. Create a Literal Text Property called "Text" and place it in the General section.

2. Create a Dropdown Property called "Style" and place it in the Appearance section, with the following labels: "Info," "Success," and "Danger," and the corresponding values: "info," "success," and "danger." Note that the values are case-sensitive and should be in lowercase!

3. Finally, click on the Styles tab and copy and paste the following Less code:

.message {
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 15px;

	&.danger {
		background: lighten(@brand-danger, 25%);
		border-color: lighten(@brand-danger, 10%);
		color: darken(@brand-danger, 23%);
	}

	&.info {
		background: lighten(@brand-info, 25%);
		border-color: lighten(@brand-info, 10%);
		color: darken(@brand-info, 23%);
	}

	&.success {
		background: lighten(@brand-success, 25%);
		border-color: lighten(@brand-success, 10%);
		color: darken(@brand-success, 23%);
	}
}

Note that we are using the predefined Bootstrap branding color variables to ensure this widget adopts the color styles of the selected design template in a portal, making it look nice across various design templates. Additionally, we use two Less color functions: lighten() and darken() to differentiate the branding colors from the background, border, and text color of the message box.