ISE 1.3 portal customization - background image

Question

With all the simplicity to adjust the look and feel of portals in the new ISE 1.3 comes (albeit small for some) a price: I no longer see a way to configure a custom adjustments like a background image, not simply a top banner. This was doable in 1.2 via Cisco ISE Portal Builder or custom editing of html files and custom image uploading. Migrated portal still works fine. But since is not editable it's almost unusable.  Is there still a way to do full customization of the portals?

Answer 1

Here are some steps on how to reference a background image using CSS and ISE 1.3
If needing help on doing other modification to the portal outside of the basics (like moving elements or resizing) after making the change then please work with web developer experienced in javascript and CSS.
Export default CSS from ISE:
Click Guest Access > Configure
Choose any Portal and click “Edit”.
Click Portal Page Customization > Advanced Customization
Choose “Default Blue theme” and click “Export”.
Open file with editor (for example:Coda,Notepad etc.).
Edit file:
Copy and paste
(Don’t forget to put your picture instead of http://www.your-picture.jpg):
Add this code AFTER the Defaults theme code
body .cisco-ise-content {
    background-color: white ;  
body{ 
background-image: url("http://www.your-picture.jpg")!important;
    background-size: cover;}
.ui-dialog-contain > .ui-content {
    background: none repeat scroll 0 0 white;
body .ui-dialog .ui-dialog-contain .ui-header {
    background: none repeat scroll 0 0 #0a569c;
.progressWizard .ui-bar-a.step-inner {
background: linear-gradient(#4da2f1, #4ea5f6) repeat scroll 0 0 #4ea4f4;
Replace from the code
.ui-body-a,
.ui-overlay-a {
    border: 1px solid #d3d3d3 /*{a-body-border}*/;
    color: #666 /*{a-body-color}*/;
    text-shadow: 0 /*{a-body-shadow-x}*/ 0 /*{a-body-shadow-y}*/ 0 /*{a-body-shadow-radius}*/ #ffffff /*{a-body-shadow-color}*/;
    background: #ffffff /*{a-body-background-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #ffffff /*{a-body-background-start}*/), to( #ffffff /*{a-body-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #ffffff /*{a-body-background-start}*/, #ffffff /*{a-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #ffffff /*{a-body-background-start}*/, #ffffff /*{a-body-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #ffffff /*{a-body-background-start}*/, #ffffff /*{a-body-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #ffffff /*{a-body-background-start}*/, #ffffff /*{a-body-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #ffffff /*{a-body-background-start}*/, #ffffff /*{a-body-background-end}*/);
With:
.ui-body-a,
.ui-overlay-a {
    border: 1px solid #d3d3d3 /*{a-body-border}*/;
    color: #666 /*{a-body-color}*/;
Replace from the code
.ui-bar-a {
    border: 1px solid #d3d3d3 /*{a-bar-border}*/;
    background: #4ea4f4 /*{a-bar-background-color}*/;
    color: #ffffff /*{a-bar-color}*/;
    font-weight: bold;
    text-shadow: 0 /*{a-bar-shadow-x}*/ 0 /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #0a569c /*{a-bar-shadow-color}*/;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #4da2f1 /*{a-bar-background-start}*/), to( #4ea5f6 /*{a-bar-background-end}*/)); /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient( #4da2f1 /*{a-bar-background-start}*/, #4ea5f6 /*{a-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
    background-image:    -moz-linear-gradient( #4da2f1 /*{a-bar-background-start}*/, #4ea5f6 /*{a-bar-background-end}*/); /* FF3.6 */
    background-image:     -ms-linear-gradient( #4da2f1 /*{a-bar-background-start}*/, #4ea5f6 /*{a-bar-background-end}*/); /* IE10 */
    background-image:      -o-linear-gradient( #4da2f1 /*{a-bar-background-start}*/, #4ea5f6 /*{a-bar-background-end}*/); /* Opera 11.10+ */
    background-image:         linear-gradient( #4da2f1 /*{a-bar-background-start}*/, #4ea5f6 /*{a-bar-background-end}*/);
with 
.ui-bar-a {
    border: 1px solid #d3d3d3 /*{a-bar-border}*/;
    color: #ffffff /*{a-bar-color}*/;
    font-weight: bold;
    text-shadow: 0 /*{a-bar-shadow-x}*/ 0 /*{a-bar-shadow-y}*/ 0 /*{a-bar-shadow-radius}*/ #0a569c /*{a-bar-shadow-color}*/;
Save file.
Import back into ISE
Get back to ISE.
Open Advanced Customization/Export/Import Themes…
Choose your file.
Input your theme name.
Click “Save”.
Click “Save” theme (upon the “Language file”).
Click “Portal test URL”.
Enjoy your new background..
Example of the CSS file, see attachments
It is possible to upload portal files to the Posture Remediation repository and reference these files in custom javascript or CSS files.
Recommendation is to use the relative path so you're not referencing a specific PSN
Path to the uploaded files at Policy > Policy Elements > Results > Posture > Remediation Actions > File Remediation
Relative: /auth/packages/<Package_Name>/<File_Name>Example: /auth/packages/Custom_Portal2/my-background3.jpg
Absolute: https://psn_fqdn:portal_port/auth/packages/<Package_Name>/<File_Name>Example: https://ise13-psn1.cts.local:8443/auth/packages/Custom_Portal2/my-background.jpg