Skip to main content
Version: v11.6.0

Customizing Theme


note

Before trying to customize the app Theme, it is recommended that you familiarise with the Theme Implementation Process regarding the build and How to Import and Apply theme in a WaveMaker app.

Changing the background of an application

  • Edit variables.less and update the value for @body-bg.

Using web fonts in a theme

  • To use the web fonts in the theme, copy the web fonts(.ttf, .eot, woff) in the font folder and include the font definition in variable.less.
@font-face 
{
font-family: 'robotoregular';
src: url('fonts/Roboto-Regular-webfont.eot');
src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Roboto-Regular-webfont.woff') format('woff'),
url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
}
  • Once the font definitions are added the same need to be applied. For this change the font family specifications in the variable.less to point to the above-defined font family name (robotoregular, in this case). Note the second font family name (Arial, in this case) will be the fallback option.
//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

@font-family-sans-serif: 'robotoregular', 'Arial', sans-serif;
@font-family-serif: 'robotoregular', 'Arial', sans-serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace: 'robotoregular', 'Arial', sans-serif;
@font-family-base: @font-family-sans-serif;

Style the Components of WaveMaker App

WaveMaker app (Web & Mobile) theme is based on the BootStrap CSS markup. The various components can be styled using the corresponding Bootstrap classes defined in the LESS files. In the following sections the various app components and the style properties are listed along with the class name and the file where the class is defined. Use these to make styling changes. Remember to build, import and re-apply the theme to enforce the changes.

note

Some of Bootswatch themes might not have all these variables defined.

Style Header Element

PropertyFile NameClass NameVariable NameExample
Header.app-header
Background Colorstyle.less@wm-header-bg-color#2196f3
Border Colorstyle.less@wm-header-border-color#ffeb3b
Heightstyle.less@wm-header-heightauto
Text Colorstyle.less@wm-header-text-color#fff
PropertyFile NameClass NameVariable NameExample
Footer.app-footer
Background Colorstyle.less@wm-footer-bg-color#F5F7FA
Border Colorstyle.less@wm-footer-border-color#ccc
Heightstyle.less@wm-footer-heightauto
Text Colorstyle.less@wm-footer-text-color#F5F7FA

Style topnav Element

PropertyFile NameClass NameVariable NameExample
TopNav.app-top-nav
Background Colorvariables.less@navbar-default-bg#2090EA
Background Hover Colorvariables.less@navbar-default-hover-bgtransparent
Border Colorvariables.less@navbar-default-bordertransparent
Text Colorvariables.less@navbar-default-color#000

Style leftnav Element

PropertyFile NameClass NameVariable NameExample
Left Navigation.app-left-panel
Background Colorstyle.less@wm-left-panel-bg#fff
Background Hover colorstyle.less@wm-left-panel-link-hover-bg#F4F4F4
Border Colorstyle.less@wm-left-panel-border-color#CFDBE2
Link Borderstyle.less@wm-left-panel-list-border#e6e5e5
Link Hover Borderstyle.less@wm-left-panel-link-hover-border-colortransparent
Link Text Colorstyle.less@wm-left-panel-link-color#4f5256
Link Hover Textstyle.less@wm-left-panel-link-hover-text-colorinherit
Active Link Background Colorstyle.less@wm-left-panel-link-active-bg#f7f7f7
Dropdown Background Colorstyle.less@wm-left-panel-dropdown-menu-bgtransparent

Style rightnav element

PropertyFile NameClass NameVariable NameExample
Right Navigation.app-right-panel
Background Colorstyle.less@wm-right-panel-bg#fff
Border Colorstyle.less@wm-right-panel-border-color#CFDBE2
Link Text Colorstyle.less@wm-right-panel-btn-color#515253
Link Borderstyle.less@wm-right-panel-list-border#e6e5e5

Style Cards Widget

PropertyFile NameClass NameVariable NameExample
Cards.app-card
Header Background Colorstyle.less.app-card-header-transparent
Text Colorstyle.less.card-title-#333

Style Data Table Widget

PropertyFile NameClass NameVariable NameExample
Data tables.table
Background Colorvariables.less@table-bg#fff
Border Colorvariables.less@table-border-color#eee
Background Hover Colorvariables.less@table-bg-hover#eee
Background Active Colorvariables.less@table-bg-active#eee
Header Background Colorstyle.less@table-header-bg#fff

Style List Widget

PropertyFile NameClass NameVariable NameExample
List.app-livelist-container
Background Colorvariables.less.list-group-item@list-group-bg#fff
Border Colorvariables.less.list-group-item@list-group-border#ddd
Border Radiusvariables.less.list-group-item@list-group-border-radius2px
Background Hover Colorvariables.less.list-group-item@list-group-hover-bg#f5f5f5
Active Text Colorvariables.less.list-group-item@list-group-active-color#fff
Active Background Colorvariables.less.list-group-item@list-group-active-bg#fff
Active Border Colorvariables.less.list-group-item@list-group-active-border#448AFF
Content Items Active Text Colorvariables.less.list-group-item@list-group-active-text-color#448AFF
Disabled Text Colorvariables.less.list-group-item@list-group-disabled-color#777
Disabled Background Colorvariables.less.list-group-item@list-group-disabled-bg#ddd
Content Items Disabled Text Colorvariables.less.list-group-item@list-group-disabled-text-color#777
Link Text Colorvariables.less@list-group-link-color#555
Link Hover Colorvariables.less@list-group-link-hover-color#555
Heading Text Colorvariables.less@list-group-link-heading-color#333

Style Pagination of Live Widgets

PropertyFile NameClass NameVariable NameExample
Pagination.app-datanavigator
Text Colorvariables.less.basic@pagination-color#333
Background Colorvariables.less@pagination-bg#fff
Border Colorvariables.less@pagination-border#ddd
Hover Text Colorvariables.less@pagination-hover-color#448AFF
Hover Background Colorvariables.less@pagination-hover-bg#ddd
Hover Border Colorvariables.less@pagination-hover-border#ddd
Active Text Colorvariables.less@pagination-active-color#fff
Active Background Colorvariables.less@pagination-active-bg#448AFF
Active Border Colorvariables.less@pagination-active-border#fff
Disabled Text Colorvariables.less@pagination-disabled-color#777
Disabled Background Colorvariables.less@pagination-disabled-bg#fff
Disabled Border Colorvariables.less@pagination-disabled-border#ddd
.pager
Background Colorvariables.less@pager-bg#fff
Border Colorvariables.less@pager-border#ddd
Border Radiusvariables.less@pager-border-radius30px
Hover Background Colorvariables.less@pager-hover-bg#ddd
Active Background Colorvariables.less@pager-active-bg#448AFF
Active Border Colorvariables.less@pager-active-color#fff
Disabled Text Colorvariables.less@pager-disabled-color#777

Style Accordion Widget

PropertyFile NameClass NameVariable NameExample
Accordion.app-accordion
Background Colorstyle.less.app-accordion-panel-#fff
Heading Background Colorstyle.less.panel-headingtransparent

Style Panel Widget

PropertyFile NameClass NameVariable NameExample
Panel.panel
Background Colorvariables.less@panel-bg#fff
Body Paddingvariables.less@panel-body-padding10px
Border Colorvariables.less@panel-inner-border#f0f0f0
Footer Background Colorvariables.less@panel-footer-bg#fff
Footer Paddingvariables.less@panel-footer-padding5px

Style Tabs Widget

PropertyFile NameClass NameVariable NameExample
Tabs.app-tabs
Background Colorvariables.less.nav-tabs@nav-tabs-bg#fff
Text Colorvariables.less@nav-tabs-color#7a7a7a
Border Colorvariables.less@nav-tabs-border-color#ddd
Link Paddingvariables.less@nav-link-padding12px
Link Active Hover Background Colorvariables.less@nav-tabs-active-link-hover-bgtransparent
Link Active Hover Text Colorvariables.less@nav-tabs-active-link-hover-color#333
Link Active Hover Border Colorvariables.less@nav-tabs-active-link-hover-border-color#ddd
Disabled Link colorvariables.less@nav-disabled-link-color#777
Disabled Link Hover Colorvariables.less@nav-disabled-link-hover-color#777

Style Wizard Widget

PropertyFile NameClass NameVariable NameExample
Wizard.app-wizard
Background Colorstyle.less-#fff
Heading Background Colorstyle.less.app-wizard-heading-transparent
Current Step Title Colorstyle.less.step-title-#448AFF
Active Step Background Colorstyle.less.app-wizard-step.active a-#448AFF
Active Step Text Colorstyle.less.app-wizard-step.active a-#fff

Style Button Widget

PropertyFile NameClass NameVariable NameExample
Buttons.btn
Text Colorvariable.less.btn-default@btn-default-color#5e5e5e
Background Colorvariable.less@btn-default-bg#fff
Border Colorvariable.less@btn-default-border#ECEFF1
Primary Button Text Colorvariable.less.btn-primary@btn-primary-color#fff
Primary Button Background Colorvariable.less@btn-primary-bg#448AFF
Primary Button Border Colorvariable.less@btn-primary-border#448AFF
Text Colorvariable.less.btn-success@btn-success-color#fff
Background Colorvariable.less@btn-success-bg#4CAF50
Border Colorvariable.less@btn-success-border#4CAF50
Text Colorvariable.less.btn-info@btn-info-color#fff
Background Colorvariable.less@btn-info-bg#03A9F4
Border Colorvariable.less@btn-info-border#03A9F4
Text Colorvariable.less.btn-warning@btn-warning-color#fff
Background Colorvariable.less@btn-warning-bg#FFB300
Border Colorvariable.less@btn-warning-border#FFB300
Text Colorvariable.less.btn-danger@btn-danger-color#fff
Background Colorvariable.less@btn-danger-bg#F44336
Border Colorvariable.less@btn-danger-border#F44336
Disabled Text Colorvariable.less@btn-link-disabled-colortransparent

Style Calendar Widget

PropertyFile NameClass NameVariable NameExample
Calendar
Text Colorstyle.less.app-calendar@wm-calendar-text-color#ccc
Current Date Text Colorstyle.less.fc-today-#448AFF

Style Date Widget

PropertyFile NameClass NameVariable NameExample
Date Picker.app-date
Text Colorstyle.lessthead@wm-datepicker-text-color#000
Header Background Colorstyle.lessthead@wm-datepicker-header-bg#128ff2
Date Text Hover Background Colorstyle.less.btn@wm-datepicker-btn-hover-bg#f0f0f0

Style Switch & Toggle Widget

PropertyFile NameClass NameVariable NameExample
Switch.app-switch
Border Colorstyle.less.btn-#ddd
Active Background Colorstyle.less.app-switch-overlay-#448AFF

Style Text Widget

PropertyFile NameClass NameVariable NameExample
Text
heading 1variables.less.h1@font-size-h136px
heading 2.h2@font-size-h230px
heading 3.h3@font-size-h324px
heading 4.h4@font-size-h418px
heading 5.h5@font-size-h513px
heading 6.h6@font-size-h612px
Default Background Colorvariables.less.label-default@label-default-bg#777
Primary Background Colorvariables.less.label-primary@label-primary-bg#448AFF
Success Background Colorvariables.less.label-success@label-success-bg#4CAF50
Info Background Colorvariables.less.label-info@label-info-bg#03A9F4
Warning Background Colorvariables.less.label-warning@label-warning-bg#FFB300
Danger Background Colorvariables.less.label-danger@label-danger-bg#F44336
Default Text Colorvariables.less@label-color#fff
Muted Textvariables.less.text-muted@text-muted#777
Label Link Hover Text Colorvariables.less@label-link-hover-color#fff

Style Message Widget

This is the widget used to display the Notification messages in WaveMaker Apps.

PropertyFile NameClass NameVariable NameExample
Alert.alert
Paddingvariables.less@alert-padding8px
Border Radiusvariables.less@alert-border-radius2px
Font Weightvariables.less@alert-link-font-weightbold
Success Alert Backgorund Colorvariables.less.alert-success@alert-success-bg#4CAF50
Success Alert Text Colorvariables.less@alert-success-text#fff
Success Alert Border Colorvariables.less@alert-success-border#4CAF50
Info Alert Backgorund Colorvariables.less.alert-info@alert-info-bg#03A9F4
Info Alert Text Colorvariables.less@alert-info-text#fff
Info Alert Border Colorvariables.less@alert-info-border#03A9F4
Warning Alert Backgorund Colorvariables.less.alert-warning@alert-warning-bg:#FFB300
Warning Alert Text Colorvariables.less@alert-warning-text#fff
Warning Alert Border Colorvariables.less@alert-warning-border#FFB300
Danger Alert Backgorund Colorvariables.less.alert-danger@alert-danger-bg#F44336
Danger Alert Text Colorvariables.less@alert-danger-text#fff
Danger Alert Border Colorvariables.less@alert-danger-border#F44336

Style Progress Bar Widget

PropertyFile NameClass NameVariable NameExample
Progress Bar.app-progress
Background Colorvariables.less@progress-bg#f5f5f5
Text Colorvariables.less@progress-bar-color#fff
Border Radiusvariables.less@progress-border-radius2px
Default Progress Barvariables.less@progress-bar-bg#448AFF
Success Progress Barvariables.less@progress-bar-success-bg#4CAF50
Warning Progress Barvariables.less@progress-bar-warning-bg#FFB300
Danger Progress Barvariables.less@progress-bar-danger-bg#F44336
Info Progress Barvariables.less@progress-bar-info-bg#03A9F4

Style Spinner Widget

PropertyFile NameClass NameVariable NameExample
Spinner.app-spinner
Background Colorstyle.less-transparent
Text Colorstyle.less.spinner-text-#448AFF
Icon Colorstyle.less.spinner-image-#448AFF

Style Dropdown Menu Widget

PropertyFile NameClass NameVariable NameExample
Menu.dropdown
Dropdown Menuvariables.less@dropdown-bg#fff
Border Colorvariables.less@dropdown-border#ECEFF1
Caret colorvariables.less@dropdown-caret-color#000
Link Colorvariables.less@dropdown-link-color#333
Link Hover Colorvariables.less@dropdown-link-hover-color#000
Link Hover Background Colorvariables.less@dropdown-link-hover-bg#f5f5f5
Link Active Colorvariables.less@dropdown-link-active-color#fff
Link Active Background Colorvariables.less@dropdown-link-active-bg#448AFF
Link Disabled Colorvariables.less@dropdown-link-disabled-color#777

Style Navbar Widget

PropertyFile NameClass NameVariable NameExample
Navbar.app-navbar
Background Colorvariables.less@navbar-default-bg#2090EA
Text Colorvariables.less@navbar-default-color#777
Border Colorvariables.less@navbar-default-bordertransparent
Heightvariables.less@navbar-height50px
Marginvariables.less@navbar-margin-bottom0px
Border Radiusvariables.less@navbar-border-radius2px
Padding Horizontalvariables.less@navbar-padding-horizontal8px
Padding Verticalvariables.less@navbar-padding-vertical4px
Brand Text Colorvariables.less@navbar-default-brand-color
Brand Hover Colorvariables.less@navbar-default-brand-hover-color
Brand Hover Background Colorvariables.less@navbar-default-brand-hover-bg
Inverse Navbar Text Colorvariables.less.navbar-inverse@navbar-inverse-color#ccc
Inverse Navbar Background Colorvariables.less@navbar-inverse-bg#222
Inverse Navbar Border Colorvariables.less@navbar-inverse-border#000
Inverse Navbar Link Text Colorvariables.less@navbar-inverse-link-color#ccc
Inverse Navbar Link Hover Text Colorvariables.less@navbar-inverse-link-hover-color#fff
Inverse Navbar Link Hover Background Colorvariables.less@navbar-inverse-link-hover-bgtransparent
Inverse Navbar Link Active Text Colorvariables.less@navbar-inverse-link-active-color#fff
Inverse Navbar Link Active Background Colorvariables.less@navbar-inverse-link-active-bg#222
Inverse Navbar Link Disabled Text Colorvariables.less@navbar-inverse-link-disabled-color#444
Inverse Navbar Link Disabled Background Colorvariables.less@navbar-inverse-link-disabled-bgtransparent
Inverse Brand Text Colorvariables.less@navbar-inverse-brand-color#ccc
Inverse Brand Hover Colorvariables.less@navbar-inverse-brand-hover-color#fff
Inverse Brand Hover Background Colorvariables.less@navbar-inverse-brand-hover-bgtransparent

Style Popover Widget

PropertyFile NameClass NameVariable NameExample
Popover.app-popover
Background Colorvariables.less@popover-bg#fff
Widthvariables.less@popover-max-width300px
Border Colorvariables.less@popover-border-color#ddd
Title Background Colorvariables.less@popover-title-bg#ddd
Arrow Widthvariables.less@popover-arrow-width10px
Arrow Colorvariables.less@popover-arrow-color#fff

Style Carousel Widget

PropertyFile NameClass NameVariable NameExample
Carousel.app-carousel
Caption Text Shadowvariables.less.carousel-caption@carousel-text-shadow0 1px 2px #ddd
Caption Text Colorvariables.less.carousel-caption@carousel-caption-color#fff
Control Arrows Colorvariables.less.carousel-control@carousel-control-color#808080
Control Arrows Widthvariables.less.carousel-control@carousel-control-width20px
Control Arrows Transparencyvariables.less.carousel-control@carousel-control-opacity0.5
Control Arrows Font Sizevariables.less.carousel-control@carousel-control-font-size20px
Indicator Active Background Colorvariables.less.carousel-indicators@carousel-indicator-active-bg#fff
Indicator Border Colorvariables.less.carousel-indicators@carousel-indicator-border-color#fff

Style Modal Dialog/Dialog Widget

PropertyFile NameClass NameVariable NameExample
Dialog.modal
Content Background Colorvariables.less.modal-content@modal-content-bg#fff
Content Border Colorvariables.less@modal-content-border-colorrgba(0,0,0,.2)
Header Background Colorstyle.less.modal-header@modal-header-bg#2090EA
Header Text Colorstyle.less@modal-header-color#fff
Header Border Colorvariables.less@modal-header-border-colortransparent
Backdrop Colorvariables.less.modal-backdrop@modal-backdrop-bg#000
Footer Border Colorvariables.less.modal-footer@modal-footer-border-colortransparent
Inner Paddingvariables.less@modal-inner-padding1em
Title Paddingvariables.less@modal-title-padding1em 2em
Modal largevariables.less.modal-lg@modal-lg900px
Modal Mediumvariables.less.modal-md@modal-md500px
Modal Smallvariables.less.modal-sm@modal-sm300px

Style Badge available for certain Widgets

PropertyFile NameClass NameVariable NameExample
Badge.badge
Text Colorvariables.less@badge-color#fff
Font Weightvariables.less@badge-font-weightbold
Line Heightvariables.less@badge-line-height1
Border Radiusvariables.less@badge-border-radius2px
Link Hover Colorvariables.less@badge-link-hover-color#fff
Background Colorvariables.less@badge-bg#ddd
Active Text Colorvariables.less@badge-active-color#448AFF
Active Background Colorvariables.less@badge-active-bg#fff

Style Segmented Control (Mobile) Widget

PropertyFile NameClass NameVariable NameExample
Mobile Segmented Control.app-segmented-control
Background Colorstyle.less.btn-group-#448AFF
Text Colorstyle.less.btn-#f5f5f5
Active border Colorstyle.less.btn.active-#fff
Active Text Colorstyle.less.btn.active-#fff

Style Tab Bar (Mobile)

PropertyFile NameClass NameVariable NameExample
Tab bar mobile.app-tabbar
Background Colorvariables.less@navbar-default-bg#448AFF
Background Hover Colorvariables.less@navbar-default-hover-bgtransparent
Border Colorvariables.less@navbar-default-bordertransparent
Text Colorvariables.less@navbar-default-color#000

See Also

Creating Themes using the Manual Setup
How to customize existing theme
How to customize leftnav width