The purpose of this article is to explain and expand on background image support with ISE. This article will go over the different ways to work with backgrounds. Examples are adding a simple background or rotating images as well.
Please familiarize yourself with some basic portal customization information before working with this or any customization.
The ISE Portal Builder allows you to add a background to ISE 1.3 or higher.
Rotating background images
Use the following code to rotate background images. It is recommended that you upload your images to the Custom Portal Files location on ISE 2.2+. To use ISE as a repository to store files prior to 2.2 please refer to the ISE customization guide noted above. This was tested on ISE 2.4 but should also work with prior releases.
Insert the following script for login pages:
<script>
var images = [
"/portal/customFiles/test1.png",
"/portal/customFiles/test2.png",
"/portal/customFiles/test3.png"
]
var link = location.origin;
var count = images.length;
setTimeout(function(){
var index = Math.floor(Math.random() * count); // random selection of image
var image = 'url('+ link + images[index] + ')';
sessionStorage.setItem('image', image);
// You should remove useless string depends of ISEPB or ISE layout
// document.getElementById("page-login").setAttribute('style', 'background-image:' + image +'!important'); //For ISE default layout
document.querySelector('.t-root').setAttribute('style', 'background-image:' + image +'!important'); // For ISEPB layout
}, 1000);
</script>
For other pages (all pages from flow should contains this script):
<script>
setTimeout(function(){
var image = sessionStorage.getItem('image');
// document.querySelector('[data-role="page"]').setAttribute('style', 'background-image:' + image +'!important'); //For ISE default layout
document.querySelector('.t-root').setAttribute('style', 'background-image:' + image +'!important'); // For ISEPB layout
}, 1000);
</script>
ISE 2.2+
ISE has built in support for background images added in 2.2. From the Portal customization screen simply add a background.
ISE 1.3 & 1.4
Here are some steps on how to reference a background image using CSS and ISE 1.3/1.4
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>;
This is what this package will look like.
