Avoid Smart Quote Errors
See here what they are, why you should care, and how to avoid them How-To: Get Rid of Smart Quotes
External Resources
General HTML and CSS tutorials and code examples (http://www.w3schools.com)
HTML Table Generator (http://www.tablesgenerator.com/html_tables)
CSS Button Generator (http://www.cssbuttongenerator.com) will generate two items for you:
(1) The style (which you should put in your actual skin plugin HEADER area: Admin > Plugin Manager > Edit configuration > Header area
{literal}
<style type="text/css">
.classname {
blahblahblah styles are here
</style>
{/literal}
(2) This is your actual button. Once your <style> tags are in your plugin HEADER area, the following code will transform to a button. Note the "#" should be your URL, class="classname" should be defined in your <style> tags above, etc.
<a href="#" class="classname">my button</a>
So you don’t want to use a custom form. But you want to use the button that already exists and just apply the style you generated to that button. Here is how..:
When you generated your button, you probably got code that looks like:
.classname { blah blah }
.classname:hover { blah blah }
.classname:active { blah blah }
You need to change all instances of “.classname” to “button”
button { blah blah }
button:hover { blah blah }
button:active { blah blah }
Make sure you wrap everything in {literal} <style>stuff goes here></style> {/literal} and put this in the HEADER of your skin plugin (CPGuest > Admin > Plugin Manager > Skin you’re using > Edit > Header area).
Tips and Tricks
Use literal tags to execute code When putting Javascript, CSS, or HTML into ClearPass, you'll often get an error and the page won't submit--so use {literal} tags!
{literal} Your html or css or javascript code would go here... {/literal}
Proper way to include jQuery So you think the proper way to include jQuery is the traditional way? Not here. ClearPass comes with its own version of jQuery, so lets use that instead of uploading your own and possibly running into bugs:
{nwa_script src=jquery.min}
How-to differentiate smallscreen vs. largescreen on skins
{if $_wpl.browser.small_screen}
SMALL SCREEN STUFF HERE
{else}
NORMAL SCREEN STUFF HERE
{/if}
Differentiate between device type (iOS vs. Android, etc.) First look at your variables. You can delete this after you know what you're looking at:
{dump var=$_wpl export=html}
That code yields:
array (
'browser' =>
array (
'user_agent' => 'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0',
'is_ios' => false,
'is_ipad' => false,
'is_iphone' => false,
'is_iphone_os' => false,
'is_ipod' => false,
'is_mobile' => false,
'is_android' => false,
'is_macosx' => false,
'is_windows_nt' => true,
'small_screen' => false,
'touch_screen' => false,
'no_download' => false,
'no_printing' => false,
'no_flash' => false,
'platform' =>
array (
'os' => 'windows_nt',
'os_label' => 'Windows 7 (NT 6.1)',
'raw_version' => '6.1',
'clean_version' => '6.1',
'major_version' => '6',
'minor_version' => '1',
),
),
'nav' =>
array (
'ui' => 'list',
),
'form' =>
array (
'use_tables' => true,
'labels' => 'inline',
),
)
So now you can try to target iPhones only by using the is_iphone from above:
{if $_wpl.browser.is_iphone}
This is an iPhone!
{else}
This is NOT an iPhone!
{/if}
Another set of variables that can be leveraged in 6.3 and above can be found using:
{dump var=$_wpl.browser.uaparser export=html}
This will result in the following variables that can be used:
array (
'ua' =>
array (
'family' => 'Chrome',
'major' => '32',
'minor' => '0',
'patch' => '1700',
'toString' => 'Chrome 32.0.1700',
'toVersionString' => '32.0.1700',
),
'os' =>
array (
'family' => 'Mac OS X',
'major' => '10',
'minor' => '9',
'patch' => '1',
'patch_minor' => NULL,
'toString' => 'Mac OS X 10.9.1',
'toVersionString' => '10.9.1',
),
'device' =>
array (
'family' => 'Other',
),
'toFullString' => 'Chrome 32.0.1700/Mac OS X 10.9.1',
'uaOriginal' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.102 Safari/537.36',
)
So, for example, you can use the following to determine OS ad Browser:
<p>
OS: <b>{$_wpl.browser.uaparser.os.family}</b> <br/>
Browser: <b>{$_wpl.browser.uaparser.ua.family}</b>
</p>
This will result in something that looks like this:
OS: Mac OS X
Browser: Chrome
Google Store or Apple App Store Buttons: Using the lesson above to differentiate between iOS and Android, we can show buttons (for Meridian in the following example). Download the images here:
{literal}
<style>
#apple_store img, #google_store img {
width: 130px;
height: 50px;
}
#apple_store, #google_store {
background-color: #000;
border-radius: 4px;
-webkit-border-radius: 4px;
border: 0px;
width: 130px;
height: 50px;
padding: 2px;
}
</style>
{/literal}
{if $_wpl.browser.is_ios}
<h3>Download the Meridian App:</h3>
<div id="apple_store">
<a href="http://itunes.apple.com/us/app/meridian/id404946736"><img src="public/apple_store.png" /></a>
</div>
{/if}
{if $_wpl.browser.is_android}
<h3>Download the Meridian App:</h3>
<div id="google_store">
<a href="https://play.google.com/store/apps/details?id=meridian.app"><img src="public/google_store.png" /></a>
</div>
{/if}
Flush your web session for your client Append "?_clear=1" to your URL (e.g. blahblah.php?_clear=1)
?_clear=1
Make my TERMS look like my SKIN?
Here's a little trick to get your terms looking like they're part of your skin template:
CREATE A WEB LOGIN: CPGuest > Web Logins > Create New > name it "terms" (so the URL will be /guest/terms.php)
EDIT YOUR WEB LOGIN: Now Edit it, and check “Will provide a custom login form” (this will hide the built-in form in the web login and give you an empty page) SKIN DROPDOWN: Make sure your skin is selected in the drop down HEADER AREA: Paste in your properly-formatted terms
(e.g. <h1> tags for headings </h1>, <p> for paragraphs </p>, etc.)
DEFINE YOUR TERMS URL: CPGuest > Config > Guest Manager and paste in your terms URL (should be /guest/terms.php)
Auto placeholders in input forms: This will automatically detect your labels and place the label inside the form as well as a placeholder:
<script>
$(function() {
$('form .nwaContent tr, form .nwaContent div[id^="TR_"]').each(function() {
var label = $('label', this).text().replace(':', '');
$('input[type=text], input[type=email], input[type=password]', this).prop('placeholder', label);
});
});
</script>
Detect nav (aka admin-facing only) pages on ClearPass Guest
{if $nav_top}...{/if}
Redirect to a new page
<script type="text/javascript"><!--{literal}
window.location.replace("yourloginpage.php");
//-->
{/literal}</script>
Auto-redirect based on language detection You may want to create a page that detects the language and redirects to certain pages depending on language--make sure you have all scenarios covered. E.g. the following example will detect "Arabic" as the language, but if it does not detect "Arabic" it will just sit there!! {if $current_lang == 'ar'} PASTE YOUR REDIRECT CODE HERE -- SEE EXAMPLES ABOVE {/if}
And for reference, here are the language codes:
- ar, da, de, en, es, fr, ja, ko, nl, zh
Append @domain.com to forms via dropdown
Paste into Web Login > Header HTML:
<select id="location">
<option value="">Select Location</option>
<option value="@location.com">Location 1</option>
<option value="@location2.com">Location 2</option>
</select>
Paste into Web Login > Footer HTML:
{nwa_script src=jquery.min}
{literal}
<script>
jQuery(document).ready(function() {
jQuery('#location').change(function() {
var selection = jQuery(this).val();
var userName = jQuery('input[name=user]').val();
// if the username has a domain, remove it.
if(userName.indexOf('@') > -1) {
userName = userName.replace(/@[A-Z0-9\.-]+/gi, "");
}
jQuery('input[name=user]').val(userName + selection);
});
});
</script>
{/literal}
Page Detection using PHP Smarty
{if $script_name == 'duh'}
BLAH BLAH BLAH for EXACT PAGE NAMES
{/if}
{if substr($script_name, -8) == '_receipt'}
BLAH BLAH BLAH for ALL _receipt PAGES
{/if}
Where the -8 is minus the length of your ends with text (_receipt is 8 characters)
{if substr($script_name, -6) == '_login'}
BLAH BLAH BLAH for all _login PAGES
{/if}
Where the -8 is minus the length of your ends with text (_login is 6 characters)
Redirect code: two methods
Meta-redirect, old school (0 = 0 seconds)
<meta http-equiv="refresh" content="0;url=http://google.com"/>
Involves Javascript (5 seconds = 5000 ms):
{nwa_script src=jquery.min}
{literal}
<script>
$(document).ready(function () {
// Handler for .ready() called.
window.setTimeout(function () {
location.href = "http://www.google.com";
}, 5000)
});
</script>
{/literal}
IF/ELSE depending on time of day (or time range)
And now we can do a fancy time range. See also: http://www.smarty.net/docsv2/en/language.function.if.tplhttp://www.smarty.net/docsv2/en/language.modifier.date.format
This will show the hour and minute on the 24-hour clock:
{$smarty.now|date_format:"%k%M"}
{$smarty.now|date_format:"%u"}
{assign var=hour value=$smarty.now|date_format:"%k%M"}
{assign var=day value=$smarty.now|date_format:"%u"}
{if $day < 6 && $hour > 1700 && $hour < 2300}
WEEKDAYS BETWEEN 5pm to 11pm
{/if}
{if $day <= 7 && $day > 5 && $hour > 700 && $hour < 2300}
WEEKENDS 7am to 11pm
{/if}
Status bar or loading bar with % countdown and timed redirect That was a mouthful. 15000 below = 15 seconds below:
Paste this into your HEADER HTML:
<div id="pbar_outerdiv" style="margin: 0 auto; width: 200px; height: 20px; border: 1px solid grey; z-index: 1; position: relative;">
<div id="nwaInteractiveProgressBar" style="background-color: lightblue; z-index: 2; height: 100%; width: 0%;"></div>
<div id="pbar_innertext" style="z-index: 3; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: black; font-weight: bold; text-align: center;">0%</div>
</div>
<center>
<p>Loading, please wait...</p>
</center>
Paste this into your FOOTER HTML:
{nwa_script src=jquery.min}
{literal}
<script>
var start = new Date();
var maxTime = 15000;
var timeoutVal = Math.floor(maxTime/100);
animateUpdate();
function updateProgress(percentage) {
$('#nwaInteractiveProgressBar').css("width", percentage + "%");
$('#pbar_innertext').text(percentage + "%");
}
function animateUpdate() {
var now = new Date();
var timeDiff = now.getTime() - start.getTime();
var perc = Math.round((timeDiff/maxTime)*100);
console.log(perc);
if (perc <= 100) {
updateProgress(perc);
setTimeout(animateUpdate, timeoutVal);
}
}
$(document).ready(function () {
// Handler for .ready() called.
window.setTimeout(function () {
location.href = "http://www.google.com";
}, maxTime)
});
</script>
{/literal}
Use a link to submit a form on the page I use this script when I hide the form/make it invisible and only want a simple click-to-accept button:
<a href="#" onclick="document.forms[0].submit(); return false;">Blah blah text for the link</a>
And along those lines, hiding the form (but keeping it invisible, so the form still gets loaded behind the scenes:
{literal}
<style>
.nwaForm {
display: none;
}
</style>
{/literal}
Randomize words using PHP smarty Or in this case, random 6-digit hex colors. Edit as you wish.
{* default color *}
{assign var=color value="A200FF"}
{* get a random number between 1 and 9 *}
{assign var=rnum value=1|rand:9}
{* pick the color *}
{if $rnum == 1}{assign var=color value="A200FF"}
{elseif $rnum == 2}{assign var=color value="FF0097"}
{elseif $rnum == 3}{assign var=color value="00ABA9"}
{elseif $rnum == 4}{assign var=color value="8CBF26"}
{elseif $rnum == 5}{assign var=color value="E671B8"}
{elseif $rnum == 6}{assign var=color value="F09609"}
{elseif $rnum == 7}{assign var=color value="1BA1E2"}
{elseif $rnum == 8}{assign var=color value="E51400"}
{elseif $rnum == 9}{assign var=color value="339933"}
{/if}
And you call on it by using the $color variable. This will spit out one of our colors "randomly:"
{$color}