LiquidFiles Documentation

Customizing the Header

This section covers the main navigation bar at the top of each page. There will be different color examples that you will need to change to match your intended look and feel.

Page Title and Branding Title

A key feature with LiquidFiles is that you can make it look like your own system. One thing that a lot of companies want to do is to change the header and the page title.

The configuration can be found in Admin → Branding. To change the Page Title and Branding name, please see this example:


That will result in the following change:


Not a very useful example perhaps and it illustrates what change will happen.

The only caveat to be aware of is if you make the Branding Name too long, the menu items to the right will be pushed down to a second row:


An alternative if you have a long company name is to use something shorter or an abbreviation, and include the full name in the footer.

Black (Inverse) Header Color

If you prefer your header color to be dark/inversed to better match your color scheme, you can add the following JavaScript override override to change this:

$(function() {
$('header .navbar').addClass('navbar-inverse');

Custom Header Background Color

To change the background color of the header bar at the top. Please add a custom stylesheet, something like this:

header .navbar {
background-image: none;
filter: none;
background-color: #BDE3F4;

This will change the background color to a light blue colour. Change #BDE3F4 to the color that you want in this example. The filter is an Internet Explorer function that will override the color change if not disabled.

Header Menu Items Color

If you change the background color to a bright color, you probably want to change the menu items color as well to something darker. A stylesheet override like this:

header .navbar .nav > li > a {
  color: #647880;
  text-shadow: none;
header .navbar .nav > li > a:hover {
  color: #000;

This will change the header font color to a darker color (#647880) with a different hover color (#fff). Disabling the text-shadow is not strictly needed, but it doesn't look that great on a some backgrounds, like the light blue in the example.


Adding a logo in the menubar

To add a logo in the menubar, please begin by uploading the image you want to use as an asset. In this example, this image is called: menu_logo.png.

You can then replace the current image (or text) with the following javascript override:

$(function() {
$('header .navbar-brand').html('<img src="/img/menu_logo.png" style="height: 22px; width: 150px;">');

The height and width should match the size of your image. About 25px is good size height for the logo. Please don't make it too wide is the rest of the menu items will get squashed.

Here's the final result, with the new colorscheme and the new logo: