Custom Style Sheets (CSS) Examples

Liberty Create - Build Advice
1

We have had a number of questions around applying styling using CSS. One of our Gurus came up with these examples. Anyone got any more gems to add?

/*** --- VARIABLES --- ***/
        $t_light: #F2BCC2 !important;
        $t_dark: #AF3F4A;
        $t_vdark: #99212D !important;
        $t_white: #FFFFFF !important;
 
/*** --- LOGIN PAGE --- ***/ 
    
    /* This changes the login page */ 
        body#page-login {
            background-color: $t_dark;
        }
 
    /* This changes the colour of the login page */ 
        #page-login .main {
            background-color: $t_dark;
        }
 
    /* This changes the gradient colour on the login page */ 
        body#page-login {
             -webkit-box-shadow: inherit;
             padding-top:5%;
        }
 
    /* This changes the colour of the login page */ 
        #page-login div#mats_content_wrapper {
            background-color: $t_dark;
        }
 
    /* This changes the submit button colour on login page */ 
        .pl-4, .px-4 {
            background-color: $t_vdark;
            border-color: $t_vdark;
            width: 100%;
        }
 
/*** --- LAYOUT AND WRAPPERS --- ***/ 
 
    /* This changes the body */ 
        body {
            color: $t_vdark;
        }
        
    /* This changes the background colour behind content wrapper */ 
        .app-body .main {
            background-color: $t_light;
            border-color: $t_light;
        }
        
    /* This changes the colour of the content area (where all fields are displayed) */ 
        div#mats_content_wrapper {
            background-color: $t_white;   
        }
 
    /* This changes the colour of the content area (where all fields are displayed) */ 
        .matssoft-workspace {
            background-color: $t_white;
        }
        
    /* This changes the colour of background behind content wrapper */ 
        .app, .app-dashboard, .app-root {
            background-color: $t_dark;
        }
        
    /* This changes the interface selector text */ 
        h1.interface-name {
            color: $t_white;
            font-size: 1.4rem !important;
        }
 
    /* This changes header text */ 
        h1 {
            color: $t_dark;
        }
 
 
    /* This changes header text */ 
        h2 {
            color: $t_dark;
        }
 
   /* This changes header text */ 
        h4 {
            color: $t_dark;
        }
        
    /* This changes the background colour of light */
        .bg-light {
            background-color: $t_light;
        }
 
/*** --- NAVIGATION MENU --- ***/ 
 
    /* This changes the colours on the navigation menu */ 
        li.nav-item.open {
            background-color: $t_dark;
            color: $t_white;
        }
 
    /* This changes the colours on the navigation menu */ 
        .sidebar-top .sidebar .nav .nav-item .nav-link.active, .sidebar-top .sidebar .nav .nav-item .navbar .active.dropdown-toggle, .navbar .sidebar-top .sidebar .nav .nav-item .active.dropdown-toggle, .sidebar-top .sidebar .nav .nav-item .navbar .active.dropdown-toggle, .sidebar-top .navbar .sidebar .nav .nav-item .active.dropdown-toggle, .sidebar-top .sidebar .nav .nav-item .navbar .active.dropdown-toggle {
            background-color: $t_dark;
            color: $t_white;
        }
 
    /* This changes the colours on the navigation menu */ 
        .sidebar-top .sidebar .nav .nav-item .nav-link.active, .sidebar-top .sidebar .nav .nav-item .navbar .active.dropdown-toggle, .navbar .sidebar-top .sidebar .nav .nav-item .active.dropdown-toggle, .sidebar-top .sidebar .nav .nav-item .nav-link.active i, .sidebar-top .sidebar .nav .nav-item .navbar .active.dropdown-toggle i, .navbar .sidebar-top .sidebar .nav .nav-item .active.dropdown-toggle i {
            color: $t_white;
        }
        
    /* This changes the padding on the navigation menu */ 
        .app-header.navbar {
            padding-top: 85px;
            padding-bottom: 85px;
        }
 
    /* This changes the padding on the navigation menu */ 
        .sidebar-top .sidebar {
            padding-top: 115px;
        }
 
    /* This changes the colours on the sub tab navigation */ 
        .SUBTABS .nav-link, .SUBTABS .navbar .dropdown-toggle, .navbar .SUBTABS .dropdown-toggle, .PAGETABS .nav-link, .PAGETABS .navbar .dropdown-toggle, .navbar .PAGETABS .dropdown-toggle {
            color: $t_white;
            font-weight: 600;
        }
 
    /* This changes the colours on the sub tab navigation */ 
        .SUBTABS .nav-link:hover, .SUBTABS .navbar .dropdown-toggle:hover, .navbar .SUBTABS .dropdown-toggle:hover, .PAGETABS .nav-link:hover, .PAGETABS .navbar .dropdown-toggle:hover, .navbar .PAGETABS .dropdown-toggle:hover, .SUBTABS .nav-link.active:hover, .SUBTABS .navbar .active.dropdown-toggle:hover, .navbar .SUBTABS .active.dropdown-toggle:hover, .PAGETABS .nav-link.active:hover, .PAGETABS .navbar .active.dropdown-toggle:hover, .navbar .PAGETABS .active.dropdown-toggle:hover {
            color: $t_white;
            font-weight: 600;
        }
 
    /* This changes the colours on the sub tab navigation */ 
        .flex-sm-row {
            background-color: $t_dark;
        }
 
    /* This changes the padding on the sub tab navigation */ 
        .SUBTABS.matssoft-menu.noprint {
            padding-bottom: 20px;
        }
        
    /* This changes the positioning of the Logo */
        .app-header.navbar .navbar-brand {
            height: 105px;
            background-position: 2rem center !important;
            width: 220px;
        }
        
    /* This sets a gradient colour on the navigation menu */
        .app-header.navbar {
            background: linear-gradient(to right, #4376b5 , #305582);
        }
        
/*** --- BREADCRUMBS --- ***/ 
 
    /* This changes the colour of breadcrumb icons */ 
        .breadcrumb-menu .btn {
            color: $t_dark;
        }
        
    /* This changes the colour of breadcrumb icons */ 
        .breadcrumb-menu .btn:hover, .breadcrumb-menu .btn.active {
            color: $t_dark;
        }
 
    /* This changes the padding of the breadcrumb */ 
        .breadcrumb {
            padding-top: 135px;
        }
 
/*** --- LISTING WIDGET --- ***/ 
 
    /* This changes the grey strip colour on list tables*/ 
        .table-striped tbody tr {
            background-color: $t_light;
        }
 
    /* This changes the titles on listing tables */ 
        .table thead th {
            color: $t_dark;
        }
 
    /* This changes the titles on listing tables */ 
        .table thead th {
            color: $t_dark;
        }
 
/*** --- CALENDAR WIDGET --- ***/ 
 
    /* This changes the colour on a calendar widget */ 
        .widget_calendar_cell.today {
            background-color: $t_dark;
            color: $t_white;
            border-bottom: $t_dark;
        }
 
    /* This changes the colour on a calendar widget */ 
        a.widget_calendar_next_month {
            color: $t_dark;
        }
 
    /* This changes the colour on a calendar widget */ 
        a.widget_calendar_prev_month {
            color: $t_dark;
        }
 
    /* This changes the colour on a calendar widget */ 
        .widget_calendar_cell.active {
            border-color: $t_dark;
        }
        
    /* This changes the pagination colour */ 
        .page-link {
            color: $t_dark;
        }
 
   /* This changes the text colour of pagination */ 
        .pagination li.disabled a {
            color: $t_dark;
            background-color: $t_light;
        }
 
    /* This changes the text colour of pagination */ 
        .pagination-datatables li a, .pagination li a {
            color: $t_white;
            background-color: $t_dark;
        }
 
    /* This changes the text colour of pagination */ 
        .pagination li a:hover {
            color: $t_white;
            background-color: $t_dark;
        }
 
/*** --- COLLAPSABLE HEADER --- ***/ 
 
    /* This changes the icons on the collapsable headers */ 
        h4.collapsible.expanded::before {
            color: $t_dark;
        }
 
    /* This changes the icons on the collapsable headers */ 
        h4.collapsible::before {
            color: $t_dark;
        }
        
    /* This changes the background colour of collapsable headers */
        .system_presenter_element_collapsible_heading {
            background-color: $t_light;
        }
 
/*** --- LAUNCHPAD --- ***/
 
    /* This changes the colour of the launchpad widget */ 
        .bg-primary {
            background-color: $t_dark;
        }
 
/*** --- FIELDS AND INFORMATION --- ***/ 
 
    /* This changes fields from side-to-side to nuggets */ 
        .col-sm-4 {
            flex: inherit;
            max-width: none;
        }
 
    /* This changes fields from side-to-side to nuggets */ 
        .col-sm-7 {
            flex: inherit;
            max-width: none;
        }
 
/*** --- BUTTONS --- ***/ 
 
    /* This changes the color on the reset button */ 
        input.btn[value="Reset"] {
            float: left;
            margin-right: 0.5rem;
            background-color: $t_light;
        }
 
    /* This changes the colour of no access button */ 
        .btn-warning.disabled, .btn-warning:disabled {
            background-color: #eeeeee;
            border-color: #eeeeee;
            color: #999999;
        }
 
/*** --- FOOTER --- ***/ 
 
    /* This changes the footer */ 
        .app-footer {
            background-color: $t_dark;
            color: $t_white;
            }
        
        .dropdown-menu.show {
            transform: translate3d(-60px, 35px, 0px) !important;
            background-color: $t_light;
        }
1 Like
2

You can also apply classes using Code Studio with Fragment Callbacks and Validators to any presenter. Use ‘fragment_presenter.add_input_class()’ to add a css class directly to the field or ‘fragment_presenter.add_class()’ to add a css class to the fields parent.

var field = fragment_presenter.get_value(); //Get value from field
if (field == 'warning')
{
	fragment_presenter.add_input_class('badge-warning'); //Orange
}
else if (field == 'danger')
{
	fragment_presenter.add_input_class('badge-danger'); //Red
}
else if (field == 'success')
{
	fragment_presenter.add_input_class('badge-success'); //Green 	
}
else {
	fragment_presenter.add_input_class('badge-info'); //Blue
}
3

Interesting stuff, many thanks for posting. On a related note, the tooltip for our logo on the default login page is the version number of Build Studio - how can we amend this to something more meaningful for customers?