Styling, Branding, Look-and-Feel, CSS

Applying custom styling to the page is possible using CSS.

We have included a template SASS file to allow you to customize your page's color theme easily:

template.scss (github)

// This is a helper file to allow easily generating custom css that overrides the primary bootstrap color for text, buttons, dropdowns, lists.

//$base: hsl(351, 70%, 36%); // SoNaR
// $base: hsl(345, 90%, 36%); // Zeebrieven
$base: #337ab7 !default; // bootstrap blue;

$sat-range: 100% - saturation($base);
$light-range: lightness($base) * 0.5;

$text: $base;
$block-bg-1: $base;
$block-bg-2: hsl(hue($base), saturation($base) + $sat-range / 4 * 1, lightness($base) - $light-range / 4 * 1);
$block-bg-3: hsl(hue($base), saturation($base) + $sat-range / 4 * 2, lightness($base) - $light-range / 4 * 2);
$block-bg-4: hsl(hue($base), saturation($base) + $sat-range / 4 * 3, lightness($base) - $light-range / 4 * 3);
$block-border-1: $block-bg-2;
$block-border-2: $block-bg-3;
$block-border-3: $block-bg-4;
$block-border-4: hsl(hue($base), saturation($base) + $sat-range / 4 * 4, lightness($base) - $light-range / 4 * 4);

/** Below css was generated from style-template.scss */
a,
.btn-link,
.text-primary {
	&,
	&:hover,
	&:focus,
	&:active {
		// Don't !important here, <a> is very multifuctional and we don't want to always override it everywhere
		color: $text;
	}
}

.pagination > li {

	&:not(.disabled) {
		>span,
		>a {
			color: $text!important;
		}
	}

	&.active,
	&.current {
		>span,
		>a {
			color: white!important;
			background: $block-bg-1!important;
			border-color: $block-bg-1!important;
		}

		>input {
			color: $text!important;
			border-color: $block-bg-1!important;
		}
		> .fa {
			color: $text!important;
			background: none!important;
		}
	}
}


.dropdown-menu > .active > a,
.combobox-menu .menu-option.active {
	background-color: $block-bg-2!important;
}

ul.nav-tabs.cf-panel-tab-header {
	background-color: $block-bg-1!important;
	border-top-color: $block-bg-1!important;
	border-bottom-color: $block-bg-1!important;

	>li.active > a,
	>li:not(.active):hover > a {
		border-right-color: $block-bg-1!important;
		border-left-color: $block-bg-1!important;
	}
}

.group-size-indicator > .progress-bar {
	background-color: $block-bg-1!important;
}

.panel-primary {
	border-color: $block-border-1;
	>.panel-heading {
		background-color: $block-bg-1;
		border-color: $block-border-1;
	}
}

.btn-primary,
.open>.dropdown-toggle.btn-primary {
	&,
	&[disabled],
	&.disabled {
		background-color: $block-bg-1!important;
		border-color: $block-border-1!important;
	}

	&:not([disabled]):not(.disabled) {
		&:hover,
		&:focus {
			background-color: $block-bg-2!important;
			border-color: $block-border-2!important;
		}

		&:active {
			background-color: $block-bg-3!important;
			border-color: $block-border-3!important;
		}

		&:active:focus {
			background-color: $block-bg-4!important;
			border-color: $block-border-4!important;
		}
	}
}

.list-group-item.active {
	&,&:focus,&:hover {
		background-color: $block-bg-1;
		border-color: $block-bg-1
	}
}

.groupby-editor-slider > .vue-slider  {

	background: #ccc;

	&:hover,
	&:focus {
		background: #bbb;
	}
	&:active {
		background: #aaa;
	}

	> .vue-slider-process {
		background: $block-bg-1;

		&:hover,
		&:focus {
			background: $block-bg-2;
		}
		&:active {
			background: $block-bg-3;
		}
	}

}
.groupby-editor-slider-handle {
	background-color: $block-bg-1;
	border-color: $block-border-1;

	&:hover,
	&:focus {
		background-color: $block-bg-2;
		border-color: $block-border-2;
	}
	&:active {
		background-color: $block-bg-3;
		border-color: $block-bg-3;
	}

}

/** End style-template.scss */

From there you can then add your own customizations on top.

Using the template

Create a file with the following contents

custom.scss

// Defines the base color of the theme, this can be any css color
$base: hsl(351, 70%, 36%); 
// the absolute or relative path to our template file
@import 'template.scss'; 

// Your own styles & overrides here ...

Now compile this file by following the following steps:

• Install Node.js
• Compile the file by running the following command in the directory of the file:

  npx sass --quiet --embed-source-map .

• You will now have a custom.css file you can include in your install through search.xml.