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