LiquidFiles Documentation
On This Page

Home Page Branding


A key feature with LiquidFiles is that you can make it look like your own system. The first step in doing that is to modify your home page with your own logo, or at least your own name.

The Branding configuration can be found in Admin → Branding. The absolute simplest branding would include something like this:


This will give the result


To create the drop shadow effect as in the default setup, you can enclose the home page text in a <div class="well"> like this:

<div class="well">
<h1>Black Falcon Filetransfer</h1>

That will look like this:


Logo image

When using images, it's important to add the class="img-fluid" section to the img tag. This will make the interface automatically scale the image to match the viewing device, so that the logo will look great regardless of screen size.

The "well" div is what creates the greyish background section. You can leave this out if you want. If you plan to use the "well", you probably want to use a png image with a transparent background for best result.

The logo image can be uploaded at the bottom of the Admin → Branding page, in the assets section. Lets say that you've added a logo called 'front_logo.png', this can be added to the home page like this:

<div class="well">
<img src="/img/front_logo.png" alt="LiquidFiles Files Transfer" class="img-fluid" style="margin: 0 auto;">

to give the result:


Combining Logo Images and text

Lets just dive straight into another example:

<div class="well">
 <div style="margin: 20px 0">
   <img src="/img/front_logo.png" alt="LiquidFiles Files Transfer" class="img-fluid" style="margin: 0 auto;">
 <p><strong>For Internal Use only!</strong><p>

That gives the result:


At this point you probably realize that you can make this quite complex beyond these simple examples and they should serve as a good starting point.