Updating custom CSS files after upgrade

If you are using a CSS file for a custom theme, back up the CSS file before upgrading to FortiPortal6.0.3.

This section focuses on significant changes in FortiPortal6.0.3 that affect using a custom CSS file as the color scheme when upgrading to version 6.0.3 and later.

The following CSS classes have been removed and will no longer be used:

• .pub-temp-body.footerText
• .pub-temp-body.footerText a
• .login-page a
• #sidemenu ul a
• .form-control,label

The following table describes major changes in CSS class names in the place_holder_custom.css file:

CSS class (before FortiPortal 6.0.0)	CSS class in FortiPortal 6.0.0 and later
.headerTopClass	.fpc-header
.header .btn-link	.fpc-header a, .fpc-header .brand-title, .fpc-header .btn-link
.footerTopClass	.fpc-footer
.footerText, .footerText a	.fpc-footer, .fpc-footer a
#sidemenu	.side-nav .nav, .popover-submenu .popover .popover-body
#sidemenu ul a.active	.side-nav .nav .lv1:hover, .side-nav .nav .active
.nav-tabs .nav-link.active:before	.nav-tabs .nav-link.active:before, .nav-tabs .nav-link:hover:before
.btn-primary.fpc-btn	.btn-primary
.btn-primary.fpc-btn:hover, .btn-primary.fpc-btn:active	.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary:not(:disabled):active
.btn-outline-secondary.fpc-btn	.btn-outline-primary
a, a:hover	set color as body's color
.text-primary	set color as body's color
login-page .login-modal-form .input-group .input-icon	set background as .login-page
.login-page .login-modal-form .input-group input, .login-page .login-modal-form .input-group input:focus	set border-color as .login-page
.login-page .login-modal-header, .login-page .login-modal-header .login-service-name	set color as body's color
.modal .modal-content:before	set background color on modal's top bar
.sweet-alert:before	set background color on modal's top bar
.ui-dialog .ui-dialog-titlebar > span:first-child::before	set background color on modal's top bar
.nav-tabs .nav-link.active	set border color on nav

The following table identifies renamed items in the place_holder_custom.css file:

Name (before FortiPortal 6.0.0)	Name in FortiPortal 6.0.0 and later
.headerTopClass	.fpc-header
.header .btn-link	.fpc-header a, .fpc-header .brand-title, .fpc-header .btn-link
.footerTopClass	.fpc-footer
.footerText, .footerText a	.fpc-footer, .fpc-footer a
#sidemenu	.side-nav .nav, .popover-submenu .popover .popover-body
#sidemenu ul a.active	.side-nav .nav .lv1:hover, .side-nav .nav .active
.nav-tabs .nav-link.active:before	.nav-tabs .nav-link.active:before, .nav-tabs .nav-link:hover:before
.btn-primary.fpc-btn	.btn-primary
.btn-primary.fpc-btn:hover .btn-primary.fpc-btn:active	.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary:not(:disabled):active
.btn-outline-secondary.fpc-btn	.btn-outline-primary