Cisco Support Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Announcements

Welcome to Cisco Support Community. We would love to have your feedback.

For an introduction to the new site, click here. If you'd prefer to explore, try our test area to get started. And see here for current known issues.

New Member

ISE 1.3 portal customization - background image

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?

  • AAA Identity and NAC
1 ACCEPTED SOLUTION

Accepted Solutions
Cisco Employee

Here are some steps on how to

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:

  1. Click Guest Access > Configure
  2. Choose any Portal and click “Edit”.
  3. Click Portal Page Customization > Advanced Customization
  4. Choose “Default Blue theme” and click “Export”.
  5. Open file with editor (for example:Coda,Notepad etc.).

Edit file:

  1. 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

  1. Get back to ISE.
  2. Open Advanced Customization/Export/Import Themes…
  3. Choose your file.
  4. Input your theme name.
  5. Click “Save”.
  6. Click “Save” theme (upon the “Language file”).
  7. 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

  

This is what this package will look like.

12 REPLIES
Cisco Employee

You can wait for the new

You can wait for the new version of the GPB, or you can use the Advanced Customization option to upload your own CSS theme.

Go Guest Access > Configure  Choose Guest Portals from the Left Menu.  Click on the Guest Portal you want to configure.

Select Portal Page Customization.  Choose the Advanced Customization... dropdown

Click Export/Import Themes...

 

Follow the directions on the pop up

 

That should do it for you.

 

Please Rate Helpful posts and mark this question as answered if, in fact, this does answer your question.  Otherwise, feel free to post follow-up questions.

Charles Moreton

New Member

Thanks Charles. I saw this

Thanks Charles. I saw this option to modify portal CSS file. But this still doesn't give an ability to upload custom images/files that would be referenced by this CSS. Again, example is ability to change portal background image (not just colour).

Cisco Employee

You have only one other

You have only one other option until the new GPB come out:

Customer modification of the properties and CSS files

I wish there was a better answer.

Cisco Employee

I hear your pain here as well

I hear your pain here as well. I have deployed many ISE instances and finally got "intimate" enough with HTML where I could actually do some pretty cool stuff with the portals. Unfortunately for you and I and fortunately for the general users this functionality was removed and replaced with a basic customization.

Cisco Employee

Even though direct HTML was

Even though direct HTML was removed, the power to inject javascript and CSS into the page where it is bound by a page structure makes it easier to change and manipulate but is easier to support and test for future compatibility.

Cisco Employee

You can upload your files to

You can upload your files to file remediation path as noted in the example, this location is only visible to those with an advanced or apex license, otherwise you need your own server to host them, please get this info to your account team as we are trying to bring back asap but need your feedback to help prioritize

New Member

Hello,

Hello,

Even still, many customers just want to do guest with ISE, and for that they only buy BASE license.

Not having an alternative way to upload images to a folder in ISE that gets replicated to all nodes is very limiting.

Guest portal builder is also not really that interesting from an operational point of view, as for the simple change of an registration code or hotspot code you need to upload the new portal.

Would be nice to have a simple file upload repository in ISE.

My .02$

Gustavo

Cisco Employee

Understood, we are working to

Understood, we are working to bring this back, please get this info to ISE feedback mechanism (built-in to the product) or bring up to your account team with customer name

its not recommended to use portal builder just to upload files images, it's really only recommended for major layout changes and would be recommended that you stand up your own server for web page elements if possible until we get a repository built in

for portal builder issues this is not the forum to use, please reach out to their faq site

New Member

Hi Jason,

Hi Jason,

I'm aware of the web customisation doc you've written. It is definitely an excellent start, but we need some more flexibility. Comparing to competitive products, ISE out of the box solutions are great, but more flexibility is still required.

I've taken your advice and submitted a few feedback points... let's see what happens now.

Thanks and keep the great work!

Regards

1404
Views
0
Helpful
12
Replies
This widget could not be displayed.