Cisco Ise 13 User Guide

							Procedure
Step 1ExportanexistingthemfromtheportalyouwishtochangebyclickingtheConfigurationtabontheportal,
thenAdvancedCustomization>Export/ImportThemes.
Step 2IntheCustomThemingdialog,exportthethemeyouwanttoupdate.
Step 3Openthatthemeinatexteditor,selectall,andcopy.
Step 4Pastethattext(CSS)intothejQuerywebsite'sImportThemebox.
Step 5MakeyourchangesinthejQueryMobilweb-basedapplication.
Step 6ExporttheupdatedthemefromthejQuerywebsite(theexportformatisZIP).
Step 7Unziptheupdatedtheme,andextracttheupdatedthemeinthemesfoldertoyourPC.Thenameofthetheme
istheoneyouprovidedonthejQuerywebsite.
Step 8ImporttheextractedCSSthemefileintoyourportalintheportalconfigurationpage'sCustomThemingdialog.
YoucanswitchbackandforthbetweentheoldthemeandthenewthemebyclickingthePortalTheme
drop-downontheportalconfigurationpage.
Location Based Customization
Whenguestaccountsarecreated,youcanassociatethemwithalocationandspecifyaServiceSetIdentifier
(SSID)attribute.BoththelocationandSSIDareavailableasCSSclassesthatyoucanusetoapplydifferent
CSSstylestoportalpages,basedontheguest'slocationandSSID.
ThisinformationappliesonlytothecredentialedGuestportalsaftertheguestslogin.Note
Forexample:
•Guestlocation—WhenguestswithaccountsthathaveSanJoseorBostonastheirlocationslogintoa
credentialedGuestportal,oneoftheseclassesisavailableoneveryportalpage:guest-location-san-jose
orguest-location-boston.
Cisco Identity Services Engine Administrator Guide, Release 1.3    
375
Advanced Customization of Portals 
						

							•GuestSSID—ForanSSIDnamedCoffeeShopWireless,thefollowingCSSclassisavailableonevery
portalpage:guest-ssid-coffee-shop-wireless.ThisSSIDistheoneyouspecifiedontheguestaccount
andnottheSSIDthattheguestsconnectedtowhentheyloggedin.
YoucanalsospecifylocationswhenyouadddevicessuchasswitchesandWirelessLANControllers(WLCs)
toanetwork.ThislocationisalsoavailableasaCSSclassthatyoucanusetoapplydifferentCSSstylesto
portalpagesdependingonthenetworkdevice'slocation.
Forexample,ifaWLCisassignedtoSeattleandguestsareredirectedtoCiscoISEfromtheSeattle-WLC,
thefollowingCSSclassisavailableoneveryportalpage:device-location-my-locations-usa-seattle.
Related Topics
CustomizeGreetingsBasedonGuestLocation,onpage384
User Device Type Based Customization
CiscoISEdetectsthetypeofclientdevice(guest,sponsor,oremployee)toaccessyourcompany’snetwork
orend-userwebportals(Guest,Sponsor,andDevice).Itisdetectedeitherasamobiledevice(Android,iOS,
andsoon)oradesktopdevice(Windows,MacOS,andsoon).ThedevicetypeisavailableasaCSSclass
thatyoucanusetoapplydifferentCSSstylestoportalpagesbasedontheuser’sdevicetype.
WhenauserlogsintoanyoftheCiscoISEend-userwebportals,thefollowingclassisavailableontheir
portalpages:cisco-ise-mobileorcisco-ise-desktop.
Related Topics
CustomizeGreetingsBasedonUserDeviceType,onpage385
Export a Portal’s Default Theme CSS File
YoucandownloadadefaultportalthemeprovidedbyCiscoandcustomizeittosuityourneeds.Youcanuse
itasabaseforperformingadvancedcustomization.
Procedure
Step 1Navigatetotheseportals:
•ForGuestportals,chooseGuestAccess>Configure>GuestPortals>Edit>PortalPage
Customization>Pages.
•ForSponsorportals,chooseGuestAccess>Configure>SponsorPortals>Edit>PortalPage
Customization>Pages.
•ForDeviceportals,chooseAdministration>DevicePortalManagement>(anyPortals)>Edit
>PortalPageCustomization>Pages.
Step 2FromtheAdvancedCustomizationdrop-downlist,chooseExport/ImportThemes.
Step 3IntheCustomThemingdialogbox,usethedrop-downlisttoselectthethemethatyouwanttocustomize.
Step 4ClickExportThemeCSStodownloadadefaulttheme.cssfiletocustomize.
Step 5ClickSavetosavethefiletoyourdesktop.
   Cisco Identity Services Engine Administrator Guide, Release 1.3
376
Advanced Customization of Portals 
						

							Create a Custom Portal Theme CSS File
Youcancreateacustomportalthemebycustomizinganexistingdefaultportalthemeandsavingthechanges
inanewportaltheme.cssfile.Youcanmodifythedefaultthemesettingsandtheswatchestomakeglobal
changestotheselectedportal.
Before You Begin
•Downloadtoyourdesktopthetheme.cssfilefromtheportalthatyouwanttocustomize.
•ThistaskrequiresexperienceworkingwithHTML,CSS,andJavascriptcode.
•UseRelease1.3.2ofjQueryMobileThemeRoller.
Procedure
Step 1Importthedownloadedportaltheme.cssfilecontentsintothejQueryMobileThemeRollertool.
YoucanViewYourCustomization,onpage390asyoumakeyourchanges.Tip
Step 2(Optional)EmbedLinksinPortalContent,onpage377
Step 3(Optional)InsertVariablesforDynamicTextUpdates,onpage378
Step 4(Optional)UseSourceCodetoFormatTextandIncludeLinks,onpage379
Step 5(Optional)AddanImageasanAdvertisement,onpage380
Step 6(Optional)CustomizeGreetingsBasedonGuestLocation,onpage384
Step 7(Optional)CustomizeGreetingsBasedonUserDeviceType,onpage385
Step 8(Optional)SetUpCarouselAdvertising,onpage381
Step 9(Optional)ModifythePortalPageLayout,onpage386
Step 10Savethecustomizedfileasanewtheme.cssfile.
YoucannotsavetheeditstothedefaultCSSthemefiles.Youcanonlycreatenewcustomfileswith
anyeditsyouhavemade.
Note
Step 11Whenyournewtheme.cssfileisready,youcanimportitintoCiscoISE.
Embed Links in Portal Content
Youcanaddlinkstoenablegueststoaccessvariouswebsitesfromtheportalpages.Thesechangesapply
onlytothespecificportalpagethatyouarecustomizing.
UsetheToggleFullScreenbuttontoincreaseanddecreasethesizeofthetextboxesasyouworkinthem.
Procedure
Step 1Navigatetotheseportals:
Cisco Identity Services Engine Administrator Guide, Release 1.3    
377
Advanced Customization of Portals 
						

							•ForGuestportals,chooseGuestAccess>Configure>GuestPortals>Edit>PortalPage
Customization.
•ForSponsorportals,chooseGuestAccess>Configure>SponsorPortals>Edit>PortalPage
Customization.
•ForDeviceportals,chooseAdministration>DevicePortalManagement>(anyPortals)>Edit
>PortalPageCustomization.
Step 2UnderPages,choosethepagethatyouwanttoupdate.
Step 3UnderPageCustomizations,usethemini-editorprovidedwiththeOptionalContenttextblockstoadd
linkstoportalpages.
Step 4ClicktheCreateLinkbutton.
ALinkPropertiesdialogboxdisplays.
Step 5EntertheURLandthetextyouwanttohyperlinkintheDescriptionwindowfortheURL.
Forthelinktoworkcorrectly,includetheprotocolidentifierintheURL.Forexample,use
http://www.cisco.cominsteadofwww.cisco.com.
Step 6ClickSetandthenSave.
YoucanusetheToggleHTMLSourcebuttontoviewtheHTMLtagsthatwereappliedtothetextthatyou
formattedusingthemini-editor.
Insert Variables for Dynamic Text Updates
Youcanalsocreatetemplatesfortextdisplayedontheportalbysubstitutingpredefinedvariables($variable$)
thatdynamicallyupdatethecontent.Thisenablesconsistencyinthetextandinformationthatyoudisplayto
guests.Thesechangesapplyonlytothespecificportalpagesthatyouarecustomizing.
UsetheToggleFullScreenbuttontoincreaseanddecreasethesizeofthetextboxesasyouworkinthem.
Procedure
Step 1Navigatetotheseportals:
•ForGuestportals,chooseGuestAccess>Configure>GuestPortals>Edit>PortalPage
Customization.
•ForSponsorportals,chooseGuestAccess>Configure>SponsorPortals>Edit>PortalPage
Customization.
•ForDeviceportals,chooseAdministration>DevicePortalManagement>(anyPortals)>Edit
>PortalPageCustomization.
Step 2UnderPages,choosethepageyouwanttoupdate.
Step 3UnderPageCustomizations,usethemini-editorprovidedwiththeInstructionalText,OptionalContent
1,andOptionalContent2textboxestocreatetexttemplatesfortheportalpages.
Forexample,youcancreateasinglewelcomemessagetemplateformultipleguests,butpersonalizethe
messagethatdisplaystotheguestsaftertheysuccessfullyloginandconnecttothenetwork.
   Cisco Identity Services Engine Administrator Guide, Release 1.3
378
Advanced Customization of Portals 
						

							Step 4Entertheinformationinthetextboxesasyounormallywould.
Forexample,youcouldenterawelcomemessageforyourportal:
Welcometoourcompany’sGuestportal,
Step 5Atthepointwhereyouwanttosubstituteavariableforthetext,clicktheInsertVariablebutton.
Alistofvariablesappearsinthepop-upmenu.
Step 6Selectthevariablethatyouwanttosubstituteinyourtext.
Inthisexample,chooseFirstnametodisplayeachguest’sfirstnameinthewelcomemessage.Thevariable
$ui_first_name$isinsertedatyourcursorposition:
Welcometoourcompany’sGuestportal,$ui_first_name$.
Thisisthewelcomemessagethatwouldappearontheportalwelcomepageforguestswhosefirstnameis
John:Welcometoourcompany’sGuestportal,John.
Step 7Continuetousethelistofvariablesasneededuntilyouhavecompletedenteringtheinformationinthetext
boxes.
Step 8ClickSave.
YoucanusetheToggleHTMLSourcebuttontoviewtheHTMLtagsthatwereappliedtothetextthatyou
formattedusingthemini-editor.
Use Source Code to Format Text and Include Links
Besidesusingthemini-editor’sformattingandlinkiconswithplaintext,youcanalsouseHTML,CSS,and
Javascriptcodetocustomizetextthatdisplaysontheportalpages.Thesechangesapplyonlytothespecific
portalpagesthatyouarecustomizing.
UsetheToggleFullScreenbuttontoincreaseanddecreasethesizeofthetextboxesasyouworkinthem.
Before You Begin
EnsurethatEnableportalcustomizationwithHTMLisenabledbydefaultinAdministration>System
>AdminAccess>Settings>PortalCustomization.
Procedure
Step 1Navigatetotheseportals:
•ForGuestportals,chooseGuestAccess>Configure>GuestPortals>Edit>PortalPage
Customization.
•ForSponsorportals,chooseGuestAccess>Configure>SponsorPortals>Edit>PortalPage
Customization.
Cisco Identity Services Engine Administrator Guide, Release 1.3    
379
Advanced Customization of Portals 
						

							•ForDeviceportals,chooseAdministration>DevicePortalManagement>(anyPortals)>Edit
>PortalPageCustomization.
Step 2UnderPages,choosethepagethatyouwanttoupdate.
Step 3UnderPageCustomizations,usethemini-editorprovidedwiththeInstructionalText,OptionalContent
1,andOptionalContent2textboxestoenterandviewsourcecode.
Step 4ClicktheToggleHTMLSourcebutton.
Step 5Enteryoursourcecode.
Forexample,tounderlineyourtext,enter:
WelcometoCisco!
Forexample,toincludealinkusingHTMLcode,enter:
Cisco
WheninsertinganexternalURLintheHTMLcode,makesurethatyouentertheabsolute(entire)
URLpath,including“http”or“https”.
Important
Step 6ClickSave.
Related Topics
ConfigurePortalCustomization,onpage371
Add an Image as an Advertisement
Youcanincludeimagesandadvertisementstoappearinspecificareasoftheportalpages.
UsetheToggleFullScreenbuttontoincreaseanddecreasethesizeofthetextboxesasyouworkinthem.
Before You Begin
EnsurethatEnableportalcustomizationwithHTMLisenabledinAdministration>System>Admin
Access>Settings>PortalCustomization.
Procedure
Step 1Navigatetotheseportals:
•ForGuestportals,chooseGuestAccess>Configure>GuestPortals>Edit>PortalPage
Customization.
•ForSponsorportals,chooseGuestAccess>Configure>SponsorPortals>Edit>PortalPage
Customization.
   Cisco Identity Services Engine Administrator Guide, Release 1.3
380
Advanced Customization of Portals 
						

							•ForDeviceportals,chooseAdministration>DevicePortalManagement>(anyPortals)>Edit
>PortalPageCustomization.
Step 2UnderPages,choosethepagethatyouwanttoupdate.
Step 3UnderPageCustomizations,usethemini-editorprovidedwiththeInstructionalText,OptionalContent
1,andOptionalContent2textboxestoenterandviewsourcecode.
Step 4ClicktheToggleHTMLSourcebutton.
Step 5Enteryoursourcecode.
Forexample,toincludeaproductadvertisementanditsimageusingHTMLcodeontheHotspotGuestportal
post-accessbanner,enterthiscodeintheOptionalContent1textboxonthePost-AccessBannerpage:
Optimizedfor10/40/100CampusServices!

WheninsertinganexternalURLintheHTMLcode,makesurethatyouentertheabsolute(entire)
URLpath,including“http”or“https”.
Note
Figure 25: Sample Image for an Advertisement
Step 6ClickSave.
Set Up Carousel Advertising
Carouseladvertisingisanadvertisementformatinwhichseveralproductimagesortextdescriptionsare
displayedandrotateinarepeatingloopwithinabanner.Usecarouseladvertisingonyourguestportalsto
promoteseveralrelatedproductsoravarietyofdifferentproductsofferedbyyourcompany.
UsetheToggleFullScreenbuttontoincreaseanddecreasethesizeofthetextboxesasyouworkinthem.
Before You Begin
ChooseAdministration>System>AdminAccess>Settings>PortalCustomizationandcheckEnable
portalcustomizationwithHTMLandJavascript.
Cisco Identity Services Engine Administrator Guide, Release 1.3    
381
Advanced Customization of Portals 
						

							Procedure
Step 1Navigatetotheseportals:
•ForGuestportals,chooseGuestAccess>Configure>GuestPortals>Edit>PortalPage
Customization.
•ForSponsorportals,chooseGuestAccess>Configure>SponsorPortals>Edit>PortalPage
Customization.
•ForDeviceportals,chooseAdministration>DevicePortalManagement>(anyPortals)>Edit
>PortalPageCustomization.
Step 2UnderPages,choosethepagethatyouwanttoupdate.
Step 3UnderPageCustomizations,usethemini-editorprovidedwiththeInstructionalText,OptionalContent
1,andOptionalContent2textboxestoenterandviewsourcecode.
Step 4ClicktheToggleHTMLSourcebutton.
Step 5Enteryoursourcecode.
Forexample,toimplementcarouseladvertisingusingproductimagesontheGuestportals,enterthefollowing
HTMLandJavascriptcodeintheOptionalContent1textboxonthePost-AccessBanner(forHotspot
portals)orPostLoginBanner(forcredentialedGuestportals)pages:

varcurrentIndex=0;
setInterval(changeBanner,5000);
functionchangeBanner(){
varbannersArray=["",
"",
""
];
vardiv=document.getElementById("image-ads");
if(div){
currentIndex=(currentIndex
						

							


Forexample,toimplementcarouseladvertisingusingtextproductdescriptionsontheGuestportals,enter
thefollowingHTMLandJavascriptcodeintheOptionalContent2textboxonthePost-AccessBanner(for
Hotspotportals)orPostLoginBanner(forcredentialedGuestportals)pages:

varcurrentIndex=0;
setInterval(changeBanner,2000);
functionchangeBanner(){
varbannersArray=["Optimizebranchservicesonasingleplatformwhiledeliveringan
optimal
applicationexperienceacrossbranchandWANinfrastructure","TransformyourNetworkEdge
to
deliverhigh-performance,highlysecure,andreliableservicestounitecampus,datacenter,
andbranchnetworks","Differentiateyourserviceportfolioandincreaserevenuesby
delivering
end-to-endscalablesolutionsandsubscriber-awareservices"];
varcolorsArray=["grey","blue","green"];
vardiv=document.getElementById("text-ads");
if(div){
currentIndex=(currentIndex
						

							Step 6ClickSave.
Customize Greetings Based on Guest Location
Thisexampleshowshowtocustomizethesuccessfulloginmessagethatyourguestsseeaftertheylogintoa
credentialedGuestportal(notHotspot),basedonthelocationsconfiguredintheirguesttype.
UsetheToggleFullScreenbuttontoincreaseanddecreasethesizeofthetextboxesasyouworkinthem.
Procedure
Step 1Navigatetooneoftheseportals:
•ForGuestportals,chooseGuestAccess>Configure>GuestPortals>Edit>PortalPage
Customization.
•ForSponsorportals,chooseGuestAccess>Configure>SponsorPortals>Edit>PortalPage
Customization.
Step 2UnderPages,choosetheAuthenticationSuccesspage.
Step 3UnderPageCustomizations,usethemini-editorprovidedwiththeOptionalContent1textboxtoenter
andviewHTMLsourcecode.
Step 4ClicktheToggleHTMLSourcebutton.
Step 5Enteryoursourcecode.
Forexample,toincludealocation-basedgreeting,enterthiscodeintheOptionalContent1:

.custom-greeting{
display:none;
}
.guest-location-san-jose.custom-san-jose-greeting{
display:block;
}
.guest-location-boston.custom-boston-greeting{
display:block;
}


WelcometoTheGoldenState!


WelcometoTheBayState!

Guestswillseeadifferentmessageaftersuccessfullogon,dependingontheirspecificlocation.
   Cisco Identity Services Engine Administrator Guide, Release 1.3
384
Advanced Customization of Portals