- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
08-06-2014 08:08 AM
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
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Alert a Moderator
08-06-2014 03:38 PM - edited 08-06-2014 11:01 PM
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:
- Keep in mind you should be putting this into your Custom Skin plugin in the HTML/Header area;
- CPGuest > Admin > Plugin Manager > Custom Skin 1 (or 2) > Edit/config
- You'll have to insert this code in <style>...</style> tags
- 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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Alert a Moderator
Re: Customizing Clearpass Guest Web Logins forms (custom login form)
Re: Customizing Clearpass Guest Web Logins forms (custom login form)
08-06-2014 03:41 PM
P.S. If any of that code above is parsing as smilies (!), try the raw text file, attached.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Alert a Moderator
Re: Customizing Clearpass Guest Web Logins forms (custom login form)
Re: Customizing Clearpass Guest Web Logins forms (custom login form)
09-13-2014 04:43 AM
Apologies for the delay.
You helped me a lot!
THX!
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Alert a Moderator
Re: Customizing Clearpass Guest Web Logins forms (custom login form)
Re: Customizing Clearpass Guest Web Logins forms (custom login form)
12-11-2014 07:02 PM
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Alert a Moderator