If you have experience
with working with CSS files, you can customize the default portal theme CSS
files to alter the portal presentation and manipulate elements such as the page
layout, colors, and fonts. Customizing the CSS files provides you with
flexibility and control in specifying the presentation characteristics, it
enables you to share formatting across multiple pages, and it reduces the
complexity and repetition in the structural content.
Cisco ISE end-user
portals use two distinct types of CSS files: structure.css and
theme.css. Every portal theme has its own
theme.css file, but there is only one structure.css
file per portal type; for example guest.structure.css for Guest portals,
sponsor.structure.css for Sponsor Portals, and mydevices.structure.css for My
Devices portals.
The structure.css
provides the styling for the page layout and structure. It defines the
positioning of elements on each page and also includes jQuery Mobile structure
styles. You can only view the structure.css file, but you cannot edit it.
However, when you change the page layout within
theme.css files, import these files into the portal,
and apply them, the most recent changes take priority over the structure.css
styles.
The
theme.css files specify styles such as fonts, button
colors, and header background. You can export the
theme.css files, change the theme settings, and import
them to use as custom themes for your portal. Any page layout style changes
made to the
theme.css files take priority over the styles that are
defined in the structure.css file.
You cannot alter any
of the Cisco provided default portal
theme.css files. However, you can edit the settings in
the files and save them to a new custom
theme.csstheme.css file. You can
make further edits to the custom
theme.css file, but when you import it back into Cisco
ISE, remember to use the same theme name you originally used for it. You cannot
use two different theme names for the same
theme.css file.
For example, you can
use a default
green theme.css
file to create a new custom
blue theme.css
file and name it as
Blue. You can
then edit the
blue theme.css
file, but when you import it again, you must reuse the same
Blue theme name.
You cannot call it
Red, since Cisco
ISE checks for the relationship between a filename and its name and the
uniqueness of the theme’s name. You can however edit the
blue theme.css
file, save it as
red theme.css,
import the new file, and name it as
Red.