Reply
Highlighted
Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31
Accepted Solution

UIKit Styled Responsive / Mobile UniFi Captive Portal Template

[ Edited ]

 UIKit-Styled UniFi Portal v0.1 - 06/07/2014

This is a responsive design for the UniFi Captive Portal. It is based on the UIKit framework available at http://www.getuikit.com/
The page will adapt to the device's display resolution, and features intuitive design elements that make it easier to read and input codes on a mobile device.
This portal code will be maintained at http://community.ubnt.com/t5/UniFi/a/td-p/905986

portal1.PNG portal2.PNGPhoto Jul 06, 12 50 38.pngPhoto Jul 06, 12 54 19.png

 

=== Main Features ===

- Tested (somewhat) with UniFi Controller v3.2.1
- Large text, buttons and input fields
- Stylized alert / error boxes
- No TOU checkbox, added note that says if you continue, you agree (not sure on legalities for this?)
- Modal popup to read TOU, makes it easier to read on mobile
- Commented HTML code
- Minified CSS
- Easy to stylize colors by generating a new CSS from http://www.getuikit.com/docs/customizer.html

Currently Supported Portal Modes:
- No Authorization
- Simple Password
- Voucher Authorization
Payment Gateway / PayPal has not beed customized and the related sample code has been removed. Enabling these requires hand-customizing the portal HTML anyways, so if you're going to do that, you will probably need to know enough to edit this design anyhow. This may be added in a future update.

 

=== To Customize ===

The portal is essentially the default portal, but all restyled to use UIKit's styles. Feel free to go in and edit any plain text as necessary. It's really easy to edit if you use Sublime Text with the autocomplete plugin: http://www.getuikit.com/docs/documentation_get-started.html#uikit-autocomplete-for-sublime. The page column width can be modified on or around line 24.

Images:
All images are automatically responsive, and will size according to the device display resolution.
- bg.jpg: The page background. This should be high resolution. By default it will cover the entire displayport, maintaining aspect ratio and usually won't scroll. The included image is from the I was unable to find the original author, so don't know what the license is.
- logo.png: The site's logo (hotel, business, etc). Should have a transparent background if using the default CSS.
- operator.png: This is the operator branding image that is shown at the bottom of the page.

Overall Style:
By default, the portal is styled with these two files:
- css/uikit.active.css: This is the main UIKit CSS file. The one included is based on uikit.gradient.css, but with an alpha transparency added to the uk-panel-box-secondary style.
You can change the entire look and feel of the portal by using UIKit's Customizer at http://www.getuikit.com/docs/customizer.html. This will let you generate new CSS files. Simply drop them into the /css/ folder and rename them to uikit.active.css and it will be applied. Don't forget to check the Minify CSS option in the customizer. You can also try any of the extra styles, uikit.min.css, uikit.gradient.min.css and uikit.almost-flat.min.css by renaming them to uikit.active.css
- css/custom.css: This is the CSS that contains the body background styling. Place any extra styling in here so it's not lost if you choose to change the UIKit style.

Operator Branding:
There is an optional Operator Branding (aka Shameless Plug) section at the bottom of the index.html file. It's there by default, but if you wish to use it, you should go in and edit the text and the URL it links to. Make sure you add the linked website's IP subnet to the Allowed Subnets section of the Guest Portal settings in the controller so that a user that doesn't get authorized can still get to your website via the link (ex, a hotel's competitor looking to see if the WiFi works and who installed it).

Terms of Use Text:
The TOU text is loaded as a Modal Popup. The code is in a hidden div at the very bottom of the index.html file and within the div is the default HTML that comes with the standard portal. Edit to your hearts content, but keep in mind that if you add much more text, it may not fit nicely on mobile screens.

 

=== Disclaimer ===
If you are going to use this code, you do so under the agreement that you will be willing to provide any bug fixes, enhancements or derivative works back to the community. I appreciate any comments, ideas, or feedback!

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
Attachment

Accepted Solutions
Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template

Posted! - Enjoy and let me know if you have any feedback or ideas on how to expand on this!

Be sure to share back anything you build or fix!  Those are the only terms to using this template!

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer

View solution in original post


All Replies
Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template

Posted! - Enjoy and let me know if you have any feedback or ideas on how to expand on this!

Be sure to share back anything you build or fix!  Those are the only terms to using this template!

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
Emerging Member
Posts: 41
Registered: ‎03-11-2013
Kudos: 73

Re: UIKit Styled UniFi Captive Portal Template

This looks really good and thanks for sharing with the community! Cant wait to give this a test and possibly migrate my portal's.

Thanks again!

New Member
Posts: 12
Registered: ‎04-06-2014
Kudos: 7

Re: UIKit Styled UniFi Captive Portal Template

Hi CodyLoco

 

Are you able to help with how to use GetUiKit please

i would like to learn how to use this as this is a fantastic portal you created

Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template


Mike_s911 wrote:

Hi CodyLoco

 

Are you able to help with how to use GetUiKit please

i would like to learn how to use this as this is a fantastic portal you created


I can try, but to be honest I mostly hacked the thing together, I'm not a coder.  The code is fairly easy to follow and I did my best to comment the blocks of code, you should be able to work out what does what.  The documentation at getuikit.com is pretty detailed as well and there's lots of code to copy and paste from there :-)

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
New Member
Posts: 12
Registered: ‎04-06-2014
Kudos: 7

Re: UIKit Styled UniFi Captive Portal Template


I downloaded the files but i am used to a system that is in a program and you load the files in and its saves the changes?
I am just looking to understand how to us the downloaded files from getuikit

Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template

All the files you need are included in the zip file in the original post...

You edit the index.html file, save and reupload to your UniFi Controller to see any changes.

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
New Member
Posts: 12
Registered: ‎04-06-2014
Kudos: 7

Re: UIKit Styled UniFi Captive Portal Template

ok but how do i change the fonts and the font colors

eg. the "Wireless Network by"is blue and i would like it black and the "Welcome to XXXX guest network" how do i change font size and color and type

 

sorry i am asking so many questions

Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template

You can either set the text styles: http://www.getuikit.com/docs/text.html

Or, generate a new CSS file at http://www.getuikit.com/docs/customizer.html to replace the uikit.active.css file with.  That will let you change everything to your heart's content.

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
New Member
Posts: 12
Registered: ‎04-06-2014
Kudos: 7

Re: UIKit Styled UniFi Captive Portal Template

ok thank you

but do i just open the css file and write the code or hwo does it work?

Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template

I'm sorry but you'll need a basic understanding of HTML and CSS in order to edit the files.  I'd suggest you look for some intro tutorials - you'll pick it up quick and easy!

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
New Member
Posts: 12
Registered: ‎04-06-2014
Kudos: 7

Re: UIKit Styled UniFi Captive Portal Template

thank you

appreciate your help and time

Regular Member
Posts: 431
Registered: ‎09-23-2013
Kudos: 329
Solutions: 9

Re: UIKit Styled UniFi Captive Portal Template

Nice mod, thanks for sharing.

Member
Posts: 191
Registered: ‎04-02-2013
Kudos: 138
Solutions: 2

Re: UIKit Styled UniFi Captive Portal Template

Very cool!  About 10 minutes and I have it up and running on 10 of my clients sites via Amazon AWS!  Thanks!preswifi.png

Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template

Very nice!!!  :-)

Glad it was of help! Man Very Happy

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
Member
Posts: 191
Registered: ‎04-02-2013
Kudos: 138
Solutions: 2

Re: UIKit Styled UniFi Captive Portal Template

There was a few setbacks to making it work on AWS - mainly since I wanted to do it via SFTP instead of SSH, but I haven't experienced any problems as of yet!

Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template

I have it running on my SoftLayer controller fine - someone needs to write up a quick little tutorial on how to get the files uploaded to the portal folder (and dealing with the permissions errors).  Let me know if you find anything weird - I wish someone with good html knowledge could look at my code and suggest any improvements - I'm sure it's not to spec lol

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
Member
Posts: 191
Registered: ‎04-02-2013
Kudos: 138
Solutions: 2

Re: UIKit Styled UniFi Captive Portal Template

[ Edited ]

Yep the permission errors were very annoying

 

By default root user is not allowed to login but you can use ec2-user (or "ubuntu" if you like) as indicated by others.

Once you login with ec2-user you switch to root and change the SSH configuration.

To become the root user you run:

sudo su -

Edit the SSH daemon configuration file /etc/ssh/sshd_config, e.g. by using vi, and replace the PermitRootLogin entry with the following:

PermitRootLogin without-password

Reload the SSH daemon configuration by running:

/etc/init.d/sshd reload

The message Please login as the ec2-user user rather than root user. is displayed because a command is executed when you login with the private key. To remove that command edit ~/.ssh/authorized_keys file and remove the command option. The line should start with the key type (Eg. ssh-rsa).

(*) Do at your own risk. I recommend you to leave always a console open just in case you're not able to login after you make the configuration changes.

Senior Member
Posts: 3,797
Registered: ‎09-12-2010
Kudos: 1323
Solutions: 31

Re: UIKit Styled UniFi Captive Portal Template

I think you can also just chown -r ubuntu the folder, can't you?

TicoBytes.com | www.ticobytes.com
Ubiquiti Solutions and English / Spanish IT Support in Costa Rica
UBRSS, UBWA, UEWA - Ubiquiti Certified Trainer
Member
Posts: 191
Registered: ‎04-02-2013
Kudos: 138
Solutions: 2

Re: UIKit Styled UniFi Captive Portal Template

You can if all you want to do is use SSH and "sudo" copy the files over... what i provided was how you can SFTP using a client like Cyberduck in my case into the AWS Server and edit the files which can only be done by root (sudo). 

Reply