Skip to content

Change navbar color

This feature allows you to change the color of your navigation bar.

1
2
3
4
5
6
<!-- file: hooks/header-extras.php -->
<script>
    // default office theme: office blue
    let theme = AppGiniNavbarColors.officeBlue();
    AppGiniHelper.getNavbar().setColor(theme);
</script>

Built in themes

Office Blue

1
2
let theme = AppGiniNavbarColors.officeBlue();
AppGiniHelper.getNavbar().setColor(theme);

Office Red

1
2
let theme = AppGiniNavbarColors.officeRed();
AppGiniHelper.getNavbar().setColor(theme);

Office Dark Red

1
2
let theme = AppGiniNavbarColors.officeDarkRed();
AppGiniHelper.getNavbar().setColor(theme);

Office Green

1
2
let theme = AppGiniNavbarColors.officeGreen();
AppGiniHelper.getNavbar().setColor(theme);

Office Purple

1
2
let theme = AppGiniNavbarColors.officePurple();
AppGiniHelper.getNavbar().setColor(theme);

Custom Themes

Custom Office Theme

1
2
3
// custom office theme
let theme = AppGiniNavbarColors.office("indigo");
AppGiniHelper.getNavbar().setColor(theme);
Attention

Dark colors recommended

Custom Theme

Custom theme With custom background- and text-color. 

1
2
let theme = new AppGiniNavbarColors("firebrick", "gold");
AppGiniHelper.getNavbar().setColor(theme);
Tip

High contrast recommended.

Tips

Tip

All possible HTML-colors are listed here

Tip

This website allows you to pick a HEX-color code

See also