changing the unifi captive portal through the amazon web server
In this chapter we'll be going through how to remote into your AWS, and edit the HTML and CSS coding that runs the portal. This is important to know so you you may learn to make more professional changes and combine your advertisements with the CP to start making money.
1. Start by navigating to your AWS instances window. From here right click on your recently created Unifi controller instance, then select connect.
2. Next to "I would like to connect with," select "A Java SSH Client directly from my browser." This requires an updated version of Java installed on your system. The user name in the box below can stay as "ubuntu," but the "Private Key path" needs to have our information entered in.
Remembering back to the first AWS tutorial when we saved our ".pem" file to our PC, now is the time to finally use that ".pem" file. There is no browse button, so you'll need to manually enter the file path into the box. Our pem file was saved in a separate hard drive (F:) in the "Kingdom Keys" folder. Enter your file path then click Launch SSH Client.
3. If you clicked connect and this screen popped up with similar text, then you've correctly connected to your AWS via SSH. Congrats.
4. To elevate our editing privledges, type in "sudo -i" followed by enter/return.
5. Click back over to your Web portal controller, check the URL for your site name. In this example our site name is ek06uvwc. Make a note of it.
6. Navigate to the site's file location with the linux "cd" command. Type "cd /var/lib/unifi/sites/(yoursitenamehere)..... then press enter. Like we have shown above, follow that command with an "ls" command to list the files in the folder we've just navigated to. In the picture above, the blue colored names are the files/folders in the folder we've navigated to.
7. Navigate again with "cd" into the app-unifi-hotspot-portal folder like above. Follow that navigation with another "ls" command to list the files in the new folder. This folder location is where all of our captive portal files are stored. This little spot is pretty much your new home if you're going to be the person manipulating the ads on your portal. Do yourself a favor and become familiar with the different kinds of linux commands. The better you are at manipulating the ubuntu terminal, the better your experience you'll have working on your systems. Use the clear command ( CTRL + L ) to tidy up the screen.
8. Now its time to transfer some new files onto your web controller. We'll do this by hitting the plugins drop down at the top and selecting SFTP File Transfer.
9. The SFTP file transfer will only allow you to transfer files into your "ubuntu" folder. Lets make a folder to use from now on to transfer everything we need into. Click the MkDir button on the right side under Remote System.
10. Name it whatever is easiest for you to remember to use in the future, we'll use "CPimages."
11. Navigate on the left side column to the img, video or gif you'll want to be shown on your captive portal. Make sure the Remote System column on the right side is inside of our newly created folder. When you've selected your file to transfer, click the _> button in the center on the two columns. This will initiate the file transfer, when its finished click the done button in the file transfer window. Then close the SFTP box.
Tip: For easiest sizing for your image to the multitude of device screens, we recommend using a file size around the dimensions of 150x150. This allows it to be big enough to be visible but small enough to easily scale with our upcoming CSS to fit more ads next to it.
12. Now its time to execute a move file command or "mv." As you can see above, after the move command, type the file location to the file we just transferred like shown below
"/home/ubuntu/CPimages/(yourfilename.img)"
Then follow the image location with the location you're moving it to, which in our case is our images folder inside the captive portal location/.
"/var/lib/unifi/sites/ek06uvwe/app-unifi-hotspot-portal/images/"
If the command line returns an empty line, the command was accepted and the file was moved.
13. Navigate to the images folder inside the app-unifi-hotspot-portal folder, and use the "ls" command to check if our file made the journey. In our case as shown above, it did successfully move.
14. Back up out of the images folder with the command "cd" with a space and two periods following it. like "cd .." , this will back up your location a single folder directory.
15. This part can get a little hairy if you're not fluent with HTML and CSS programming, but if you hang on tight and stay close we'll be ok. Typing the word "nano" and then a file, will open the file in an ubuntu text editor. However, unlike notepad on your pc, this version is much less forgiving. If you mess something up, and can't see what happened for whatever reason you'll need to start entirely over. So change small portions, save frequently and be careful. You can always take a backup of your "index.html" file by using the SFTP file transfer from before. Simply navigate to the file location and use the <_ button in the center instead. This index file is the captive portal's central controlling file, so take care of it.
When you're ready, type "nano index.html" into the command line.
16. If successful, you should see something similar to this. Maximizing your window will definitely help. Use the directional arrow keys on your keyboard to navigate around the index file. Navigate downwards to find the </head> tag. We're going to be working in between the last <script> tag and the </head> tag. Use the return key to make some space.
17. At this point, we're adding in custom CSS programming to our index file. If you're new to this kind of programming, just copy ours for now. There will always be better ways of programming anything, until you figure out what works for you, experiment with what others have made. You cannot use keyboard's ctrl+c command, so you'll have to type it all manually. shown in the picture and below. The symbols used are very important, so make sure its perfect.
<style>
#bottombox {
position:absolute;
bottom:0px;
width:100%;
}
#topbox {
position:absolute;
top:0px;
width:100%;
}
img {
display:block;
position:relative;
margin:auto;
max-width:50%;
max-height:50%;
}
</style>
18. Now its time to add our images to the index file. Find the <body> tag and make a few spaces between it and the next line of code. Again, you can directly copy our code, but replace the "milli.gif" with whatever file name you transferred into your images folder. There are two sections of code to note here, the top bar and bottom bar.
<div id="topbox">
<img src="images/milli.gif" style="float:left"> <img src="images/milli.gif" style="float:right">
</div>
<div id="bottombox">
<img src="images/milli.gif" style="float:left"> <img src="images/milli.gif" style="float:right">
</div>
19. After we've entered our images and css code, we can exit our work and inspect it. Exit by presing CTRL+X on your keyboard. Nano will notify you that you've changed things and wants to know if you want to save, answer yes by hitting Y on your keyboard.
20. Nano will then ask you if you want to change the name to make a new file, or leave the name the same to replace the old on. We want to replace the old file, so we just need to hit ENTER on the keyboard, and we're finished here for now.
21. Navigate back to your Unifi web controller, and check the guest portal settings. You should see your new images posted to the corners of your captive portal! If yours isn't perfect, try adjusting your % on the image height/width and check or misspelling or missed punctuation and symbols.
22. Your captive portal is now set up to run a few ads. This is just a basic introduction to how to use the corner space of the captive portal for advertising. In the coming tutorials we'll show you how to make moving and visually appealing ads, as well as how to use the rest of the space with videos and a countdown timer on the connect button, to force them to stay for a few seconds before they can proceed.
Never forget to check out the mobile preview to make sure it works on all platform screen sizes. Now the only thing left to do before we can move on, is change the text that says "Or try it out for free." Navigate back your your Ubuntu command terminal.
23. From the app-unifi-hotspot-potal directory, issue an LS command to show the "locales" folder. Use the CD command to navigate into the folder.
24. Find the "en" folder, then use CD to get into it.
25. Use LS to show your "portal.json" file. Use "nano portal.json" to display the contents of the portal file.
26. We need to edit the free trial header, so find it at the top like we have boxed around above.
27. Use the direction keys again to navigate towards the text, then replace it with similar text or make it personal with your own. When you're finished use CTRL+X to exit, and don't forget to save with pressing Y and ENTER after you go to exit.
28. Navigate your browser window, then guest control to see our new text. If yours is different like ours is, then you've succeeded! Great job getting this far.