Fortinet white logo
Fortinet white logo

Updating custom CSS files after upgrade

Updating custom CSS files after upgrade

Note

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

This section focuses on significant changes in FortiPortal6.0.14 that affect using a custom CSS file as the color scheme when upgrading to version 6.0.14 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

Updating custom CSS files after upgrade

Updating custom CSS files after upgrade

Note

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

This section focuses on significant changes in FortiPortal6.0.14 that affect using a custom CSS file as the color scheme when upgrading to version 6.0.14 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