Customizing Clearpass Guest Web Logins forms (custom login form)

[Csimborasszó]

Hi Airheads Experts,

One of our customers wants to use a fully customized ClearPass Guest Web Login. We have successfully created a customized skin, but we stucked at customzing the login form. The customer wants rounded input box, custom submit button, own font style etc.

The HTML part is okay, but how can we exactly define the tag id's to preserve the behaviour of the original login form? What is the normal way to do this?

Could you provide us an example of how to create a custom login form?

Thank you for your reply.

Regards,

Zsolt

[hdehal · Accepted solution]

Hey Zsolt,

Here is the sample code we use at Aruba to overwrite the default form/button styling for whenever we want something custom.

Please also see these links for more in-depth documentation on DIY skinning with ClearPass Guest (you'll need partner access, although they are customer-safe):

https://afp.arubanetworks.com/afp/index.php/How-To:_Custom_Skin_ClearPass_Guest

https://afp.arubanetworks.com/afp/index.php/ClearPass_Guest_HTML_Cheatsheet

Note:

1. Keep in mind you should be putting this into your Custom Skin plugin in the HTML/Header area;
2. CPGuest > Admin > Plugin Manager > Custom Skin 1 (or 2) > Edit/config
3. You'll have to insert this code in <style>...</style> tags
4. You'll have to wrap your <style>...</style> tags in {literal}...{/literal} tags to get them to parse.

Adding style code in skins example:

{literal}
<style>
/* Your style code should go here */
</style>
{/literal}

Button code:

button, input[type=submit] {
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    text-align: center;
    -webkit-text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    cursor: pointer;
    background-color: #F5F5F5;
    background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#FFF),to(#E6E6E6));
    background-image: -webkit-linear-gradient(top,#FFF,#E6E6E6);
    background-image: -o-linear-gradient(top,#fff,#e6e6e6);
    background-image: linear-gradient(to bottom,#FFF,#E6E6E6);
    background-repeat: repeat-x;
    border: 1px solid #BBB;
    border-color: #E6E6E6 #E6E6E6 #BFBFBF;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-bottom-color: #A2A2A2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);
}

button:hover, button:active, button.active, button.disabled, button[disabled], input[type=submit]:hover {
    color: #FFF;
    background-color: #2F96B4;
    -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-image: -moz-linear-gradient(top,#5bc0de,#2f96b4);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#5BC0DE),to(#2F96B4));
    background-image: -webkit-linear-gradient(top,#5BC0DE,#2F96B4);
    background-image: -o-linear-gradient(top,#5bc0de,#2f96b4);
    background-image: linear-gradient(to bottom,#5BC0DE,#2F96B4);
    background-repeat: repeat-x;
    border-color: #2F96B4 #2F96B4 #1F6377;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de',endColorstr='#ff2f96b4',GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

button.disabled, button[disabled], button[disabled="disabled"], input[type="submit"]:disabled, input[type="button"]:disabled {
    opacity: 0.4;
    filter:alpha(opacity=40);
    cursor: default;
}

Form code:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
        display: inline-block;
        padding: 4px 6px;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 20px;
        color: #555;
        vertical-align: middle;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background-color: #FFF;
        border: 1px solid #CCC;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border linear .2s,box-shadow linear .2s;
        -moz-transition: border linear .2s,box-shadow linear .2s;
        -o-transition: border linear .2s,box-shadow linear .2s;
        transition: border linear .2s,box-shadow linear .2s;
    }

    textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus {
        border-color: rgba(82, 168, 236, 0.8);
        outline: 0;
        outline: thin dotted \9;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82, 168, 236, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
    }

    select {
        height: auto;
    }

Let me know if you run into any issues!

-Harry

[hdehal]

P.S. If any of that code above is parsing as smilies (!), try the raw text file, attached.

[Csimborasszó]

Apologies for the delay.

You helped me a lot!

THX!

[frank.maguire@o2.networks.com.au]

Just a tip: If you enable a custom skin on the Guest Manger, it applies to all pages, including the admin pages.

To get back to the normal skin - Click enable on the original "ClearPass Guest Skin"

--f