• Trainer Sagar Dhawan
• Posted on September 4, 2025
• No Comments

[Day 67] Cisco ISE Mastery Training: Guest Portal Branding Customization

---

Introduction

Your guest portal is the front door to your network. If it looks generic, slow, or untrustworthy, users drop off, sponsors get frustrated, and security teams lose visibility. Branding customization in Cisco ISE lets you deliver a fast, mobile-first, compliant captive portal that looks like your company, carries the right legal copy, and still enforces NAC policy (VLAN/DACL/Session timeouts). Today, you’ll turn the stock ISE portal into a polished, on-brand experience with responsive layout, logos, fonts, colors, AUPs, localized text, and custom CSS—then validate it end-to-end on WLC and ISE.

---

Problem Statement

Common issues without proper branding & hygiene:

• Low trust & conversions: stock portal + cert warnings → users bail.
• Accessibility gaps: poor contrast, tiny fonts, no language support.
• Legal/compliance risk: outdated AUP, missing privacy links or consent.
• Asset failures: fonts/images blocked by pre-auth ACL; broken captive flow.
• Inconsistent UX: different SSIDs/locations show mismatched portals.

We need a repeatable method to brand once, test on mobile, guarantee assets load pre-auth, and log every acceptance.

---

Solution Overview

Cisco ISE (3.x) provides:

• Portals & Components → Portal Themes for logo/colors/fonts/background.
• Guest Portals (Hotspot, Self-Registration, Sponsored) with Page Customization (header/footer HTML, custom CSS, banners).
• Localization/Text Resources to translate and standardize all strings.
• File uploads for logos, favicons, backgrounds (served by ISE).
• Authorization Profiles + URL-Redirect to steer unauthenticated clients, then CoA to elevate access after acceptance.
• Reports/Live Logs proving user consent and session details.

---

Sample Lab Topology

Platform: VMware Workstation or EVE-NG
Nodes:

• Cisco ISE 3.x (Admin + PSN in one VM for lab)
• WLC 9800-CL + lightweight AP
• Catalyst L2/L3 switch
• DNS/NTP (can be on ISE/AD or separate)
• Endpoints: iPhone/Android + Windows/macOS laptop
• Internet (optional if using external font/CDN)

Flow (diagram description):

• Pre-auth: WLC URL-redirects to ISE portal; pre-auth ACL allows DNS/DHCP/ISE (and any external asset hosts if used).
• Post-auth: ISE CoA → WLC applies DACL/VLAN.

---

Step-by-Step GUI Configuration Guide

A) Prep & Hygiene (5 minutes)

1. Certificates: ISE GUI → Administration → System → Certificates → ensure public CA-signed cert bound to Portal usage.
   [Screenshot: ISE Portal Certificate Mapping]

1. FQDN/DNS/NTP: FQDN resolves from guest network; clocks in sync.
   [Screenshot: ISE DNS/NTP]
2. Brand kit: collect logo (PNG, transparent), favicon (ICO/PNG), primary/secondary hex colors, background image (optimized < 300 KB).

---

B) Create a Reusable Theme

1. Work Centers → Guest Access → Portals & Components → Portal Themes → Add.
2. Base Theme: duplicate “Modern” (keeps responsive layout).
3. Header Logo → Upload PNG; set max height (e.g., 48px).
4. Colors: set Primary/Accent/Contrast using your brand hex codes.
5. Background: Upload optimized JPG/PNG; enable cover.
6. Favicon: Upload ICO/PNG.
7. Save theme as Corp-Guest-v1.
   [Screenshot: Portal Theme Editor]

---

C) Upload Files (Serve Assets from ISE)

1. Portals & Components → Portal Files (or Portal Resources) → Upload logos/backgrounds/fonts if self-hosted.
2. Copy each file’s served URL (ISE will host it).
   [Screenshot: Portal Files Listing]

Why: Serving from ISE ensures assets are reachable pre-auth (your pre-auth ACL already permits the ISE PSN). Avoid external CDNs unless you allow them in the pre-auth ACL.

---

D) Customize the Guest Portal (Hotspot example)

1. Work Centers → Guest Access → Portals & Components → Guest Portals → Add → Hotspot Portal (or edit existing Self-Reg/Sponsored portal).
2. Portal Settings → Theme: select Corp-Guest-v1.
3. Login Page → Layout:
   • Header: enable Company Name and Logo.
   • Message: concise welcome + support contact.
   • Buttons: rename to match policy (“Accept & Connect”).
     [Screenshot: Portal Login Page]

1. AUP/Consent:
   • Show AUP with checkbox (must accept).
   • Add Privacy/Terms links (hosted on your site or ISE).
     [Screenshot: AUP Settings]
2. Footer: Add HTML fragment with contact + copyright.
3. Brand-safe Fonts: If using custom fonts hosted on ISE, reference them in Custom CSS (next step).
4. Preview to check responsiveness.
   [Screenshot: Portal Preview Mobile/Desktop]

---

E) Custom CSS (Keep it lightweight)

1. Portal → Page Customization → Advanced → Custom CSS.
2. Paste minimal CSS tweaks (example):

/* Buttons */
.btn-primary { 
  border-radius: 12px; 
  font-weight: 600; 
  padding: 12px 18px;
}
/* Header height + logo sizing */
.header .logo img { max-height: 48px; }
/* AUP panel */
.aup-panel { 
  max-height: 220px; 
  overflow-y: auto; 
  border: 1px solid rgba(0,0,0,.1);
}
/* Improve contrast for accessibility */
body { color: #222; }
a { text-decoration: underline; }
/* Custom font (hosted on ISE Portal Files) */
@font-face {
  font-family: 'CorpSans';
  src: url('/portalresources/corpsans-regular.woff2') format('woff2');
}
body, .btn, input, label { font-family: 'CorpSans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

3. Save & Preview.
   [Screenshot: Custom CSS Editor]

Guideline: Avoid custom JavaScript; CSP may block it and it complicates upgrades. CSS is safe, upgrade-friendly, and enough for 95% of styling work.

---

F) Localization / Text Resources

1. Portals & Components → Localization / Text Resources.
2. Select your portal → Export strings (CSV), translate, and Import.
3. Enable Language Selector on the login page (optional).
   [Screenshot: Localization Editor]

---

G) Policy Integration (Redirect & Post-Auth)

1. Policy → Policy Sets → (Guest-WiFi)
2. Authentication: MAB/WebAuth pre-auth pass.
3. Authorization:
   • IF Wireless_MAB and not accepted AUP → Authorization Profile: REDIRECT_GUEST_PORTAL.
   • IF AUP_Accepted = True → **Authorization Profile: INTERNET_ONLY (DACL/VLAN)`.
     [Screenshot: ISE Policy Set Screen]

GUI Validation:

• Operations → RADIUS → Live Logs: confirm URL-Redirect then Access-Accept with DACL/VLAN after AUP.
  [Screenshot: Live Logs – AUP Accepted]

ISE CLI Validation:

show application status ise
show logging application ise-psc.log | include portal|page|aup|file
show logging application ise-radius.log | include <client-mac>

---

H) WLC 9800-CL Pre-Auth ACL & Parameter-Map (ensure assets load)

conf t
ip access-list extended GUEST_PREAUTH
  remark DHCP/DNS
  permit udp any any eq 67
  permit udp any any eq 68
  permit udp any any eq 53
  remark ISE PSN (portal + CoA)
  permit tcp any host <ISE_PSNUIP> eq 443
  permit tcp any host <ISE_PSNUIP> eq 8443
  remark If using external CDN (avoid if possible):
  ! permit tcp any host <cdn.example.com> eq 443
  deny ip any any
!
parameter-map type web-auth guest-brand
 type webauth
 redirect exclude acl GUEST_PREAUTH
!
wlan GUEST 30 GUEST
 client vlan <guest-vlan>
 security web-auth
 security web-auth parameter-map guest-brand
 no shutdown
end
wr mem

WLC Validation:

show wlan summary
show access-list name GUEST_PREAUTH
show client detail <MAC>     ! check URL-Redirect, AAA-Override, DACL/VLAN changes

---

I) End-to-End Test (Engineer Playbook)

1. Connect a phone to Guest-WiFi → captive portal pops.
2. Inspect UI: logo, colors, font, AUP scroll, buttons (mobile + desktop).
3. Accept AUP → observe CoA; verify Internet-only access.
4. ISE Live Logs show Pre-Auth Redirect → AUP accepted → AuthZ profile applied.
5. Switch to a laptop; test different language; download speed is not blocked beyond policy.
6. If assets fail to load, add the host to the pre-auth ACL (or re-host on ISE).

---

J) Versioning & Export (Change Control)

• Duplicate theme for changes (e.g., Corp-Guest-v2).
• Export portal theme and portal config for backup/migration.
• Maintain AUP version & date inside the portal footer.

---

FAQs

Q1. What branding elements can I customize in a Cisco ISE Guest Portal?
A1. You can customize:

• Logos (top banner, favicon, background image)
• Color themes (buttons, text, hyperlinks, backgrounds)
• Custom CSS/HTML for advanced branding
• Page texts (welcome messages, error texts, disclaimers)
• Fonts & Layout

---

Q2. Can I apply different branding for different guest portals?
A2. Yes. Cisco ISE allows you to create multiple guest portals, each with its own branding profile. For example:

• Corporate guests → Branded with company logo
• Event guests → Branded with event-specific colors and logos

---

Q3. How do I add a company logo or favicon to the guest portal?
A3.

1. Navigate to Administration > Web Portal Management > Settings > Portal Themes.
2. Create or edit a portal theme.
3. Upload logo and favicon under the Images tab.
4. Save and apply to the guest portal.
   Validation: Open the portal URL in a browser and check if the logo/favicon appears.

---

Q4. Can I modify the CSS for advanced customization?
A4. Yes. In the Portal Theme editor, you can upload a custom CSS file.

• Example: Change button color to match brand guidelines.
• Always validate CSS syntax before uploading, otherwise ISE may render incorrectly.

---

Q5. Is it possible to customize the mobile view separately?
A5. Cisco ISE portals are responsive by default, but you can apply CSS media queries to optimize branding for mobile devices (e.g., smaller logos, simplified layout).

---

Q6. How do I ensure that customized branding applies only to one SSID or location?
A6. By mapping different Guest Portals to different WLC WLANs or NAD profiles. Example:

• SSID: Corporate-Guest → Portal Theme: Blue corporate design
• SSID: Event-Guest → Portal Theme: Event banner & sponsor logos

---

Q7. Can I insert dynamic banners, like event countdown timers or scrolling messages?
A7. Yes. You can embed JavaScript or HTML snippets in the Guest Portal pages (under Portal Theme > Customization). But ensure:

• Scripts are lightweight (to avoid latency).
• They don’t interfere with authentication flow.

---

Q8. What is the recommended image format and size for logos/backgrounds?
A8.

• Logo: PNG/JPG, transparent background preferred.
• Favicon: 16×16 or 32×32 pixels, ICO format recommended.
• Background: JPG/PNG, optimized for web (under 1MB for faster load).

---

Q9. How can I preview my portal before publishing?
A9.

1. Go to Guest Access > Portals & Components > Guest Portals.
2. Select your portal and click Preview Portal.
3. Test across multiple devices (desktop, tablet, smartphone).

---

Q10. If my branding changes don’t appear, how do I troubleshoot?
A10.

• Clear browser cache (branding assets may be cached).
• Check if correct portal theme is applied to the portal.
• Use CLI to verify if portal service is running: show application status ise
• Confirm that portal URL in WLC redirect matches the portal being edited.

---

YouTube Link

For more in-depth Cisco ISE Mastery Training, subscribe to my YouTube channel Network Journey and join my instructor-led classes for hands-on, real-world ISE experience

---

Closing Notes

Great branding isn’t vanity—it’s conversion, trust, and compliance. By hosting assets on ISE, tightening pre-auth ACLs, and using themes + CSS + localization, you deliver a portal that’s fast, accessible, and auditable. Always validate the full sequence: Redirect → Page Render → AUP → CoA → DACL/VLAN on both mobile and laptop.

---

Fast-Track to Cisco ISE Mastery Pro

Ready to ship production-grade portals with brand packs, multi-site mapping, and audit-ready AUP workflows?

Join 4-Month, instructor-led CCIE Security program — a practical, scenario-driven journey where you’ll:

• Build 25+ ISE labs: Guest (Hotspot/Self-Reg/Sponsor), BYOD, Posture, pxGrid.
• Master branding pipelines: themes, localization, asset hosting, versioning.
• Integrate with WLC 9800/Catalyst (URL-Redirect, DACL, CoA) and write validation runbooks (GUI + CLI + logs).
• Leave with exportable templates you can deploy at work day one.

Course outline & waitlist: https://course.networkjourney.com/ccie-security/
Subscribe to Network Journey on YouTube for weekly ISE deep-dives & lab builds.

Enroll Now & Future‑Proof Your Career
Email: info@networkjourney.com
WhatsApp / Call: +91 97395 21088

---