Bootstrap theme

Bootstrap framework:

https://getbootstrap.com/docs/4.1/getting-started/introduction/

The bootstrap theme is using the bootstrap grid

Styling:

To create a new skin its probably easiest to start with a copy of the default skin

If you know SASS, there is a SASS file for the default skin in the same location as the CSS (C:\cng\cng-webapp-designer\cng-webapp-designer\src\main\webapp\_theme\bootstrap\skins\default)

Logos / hero images:

The following example shows how to add a full with background hero image and a logo over it

/* full width background */

header {
background:linear-gradient(to right, #1d2858 30%, #10069f, #009fdf);
height:80px;
}

/* logo */
header.hero .container-fluid {
background-image: url("img/logo.png");
background-repeat: no-repeat;
background-position: 20px center;
height:80px;
padding:0;
}

Buttons:

The following sections must be updated to change the colors of buttons

.btn.btn-link.material-icons {
color: <your color here>;
padding:0;
font-size:22px;
}

.btn.btn-primary {
background-color: <your color here>;
border-color: <your color her;
}

.btn.btn-outline-primary {
color:<your color here>;
border-color:<your color here>;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:not([disabled]):not(.disabled):active,
.btn.btn-outline-primary:not([disabled]):not(.disabled):active {
background-color: <your color here>;
color:<your text color here>;
text-decoration:none;
border-color:<your color here>;
}

Jumbotrons:

Jumbotrons are the big colored fields on the front-, continue later and receipt page

To change the color update the following

div.jumbotron {
background-color:<your color here>;
}

Groups:

There are ways to style groups including or excluding the group title

The following will set the background color on the content only

.question-group.show-layout .question-group-content {
background-color: <your color here>;
border-color: <your color here> !important;
}

Whilst this will set the background color and make the corners rounded including the group title (if the show layout setting for the group is selected)

.question-group.show-layout {
background-color: $jumbotron;
border-radius:3px;
}

/* for nested groups */
.question-group .question-group.show-layout {
border:1px solid $light-gray;

}