Unifi Portal - Responsive Design

unifi Nov 6, 2017

By Default the Unifi Guest/Hotspot portal is a fixed webpage. Todays standards call for a responsive webpage design and with a little tweaking we can achieve it.

First we need to browse to the location of our Unifi Controller.

for Windows OS, normally located

C:\Users\Swynol\Ubiquiti UniFi

Head deeper into the folder at the path below

C:\Users\Swynol\Ubiquiti UniFi\data\sites\default\app-unifi-hotspot-portal

we now need to add a new css file

Open notepad or notepad++ and paste the following contents

    html {
  background: url(/guest/s/default/portalfile/58b4ac1420c21de2551c3c24?portalfile=true) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Save it and call the document 'background.css' save it to the CSS folder in the above location.

We now need to edit the index.html file (right click open with notepad)

We need to add the line below to the header section of the file

<link href="css/background.css" rel="stylesheet">

it should now look like this

    <!DOCTYPE html>
<html lang="en" ng-controller="MainController as mainCtrl">
  <head>
    <meta charset="utf-8">
    <title unifi-portal-custom-title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon-precomposed" href="images/favicons/favicon-152.png">
    <meta name="msapplication-TileColor" content="#0193d7">
    <meta name="msapplication-TileImage" content="images/favicons/favicon-144.png">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="images/favicons/favicon-152.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/favicons/favicon-144.png">
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="images/favicons/favicon-120.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/favicons/favicon-72.png">
    <link rel="apple-touch-icon-precomposed" href="images/favicons/favicon-57.png">
    <link rel="icon" href="images/favicons/favicon-32.png" sizes="32x32">
    <link href="fonts/1.3.2/lato/style.css" rel="stylesheet">
    <link href="fonts/1.3.2/ubnt-icon/style.css" rel="stylesheet">
    <link href="css/app.css?v=1.3.2" rel="stylesheet">
    <link href="css/background.css" rel="stylesheet"> 
    <script src="config/config.js?v=1.3.2"></script>
    <script src="js/vendor.js?v=1.3.2"></script>
    <script src="js/components.js?v=1.3.2"></script>
    <script src="js/main.js?v=1.3.2"></script>
  </head>

Save it.

And that's it. all done