Upgrading to FortiPortal 5.3.8 and later if you are using a custom CSS file

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

This section focuses on significant changes in FortiPortal5.3.8 that affect using a custom CSS file as the color scheme when upgrading to version 5.3.8 and later. The following changes were made to the FortiPortal CSS:

• FortiPortal5.3.8 uses Bootstrap 4 style naming, grid system, table, button, and other styles.
• FortiPortal5.3.8 uses Font Awesome as the font for the entire web interface.
  

  The Fontello font family is not supported.

• The button style has been changed and renamed. The previous .flat_button class will be deprecated in the future. Two new buttons, solid and hollow, have been added. Use .fpc-btn with .btn.btn-primary and .btn.btn-outline-secondary.
• Fortinet recommends using the .btn.btn-primary.fpc-btn class for general function buttons (such as Submit, Save, OK, Yes, and Add) and using the .btn.btn-outline-secondary.fpc-btn class for negative buttons (such as Cancel and No).

• The following CSS classes have been removed and will no longer be used:
  .device_box_progress
.login-footer-text
.login-info-header
.login-header
.header-user-info
.ui-widget textarea
.ui-widget button
.menu_button_on_c
.menu_button_off_c
.sbHolder
.sbOptions
.settingsHeaderDiv
.myNavigation
• The header height has been reduced. The header logo ratio is the same, which prevents the image from overlapping the menu.

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

CSS class (before FortiPortal5.3.8)	CSS class in FortiPortal5.3.8 and later
.login-header	.pub-temp-body .headerTopClass
.footerText	.footerText .footerText a
.login-footer-text	.pub-temp-body .footerText, .pub-temp-body .footerText a
#fpcfooterDiv a	.footerText a
.flat_button	.btn-primary.fpc-btn
.widget-header	.ui-dialog .ui-widget-header .modal-header
.ui-button	.btn-primary.fpc-btn
.ui-widget-content	.ui-state-default .ui-widget-content .ui-state-default:not('.fpc-btn')