Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review
Information
Print

Color schemes

Information
Latest News Enhanced

Starting with v6.0, Latest News Enhanced offers the ability to load specific color schemes, helping you jumpstart your design. 5 color schemes are available out-of-the-box, with more downloadable if you own the PRO version.

All colors can be replaced in the Theme overrides section of the Theming tab.

A couple specific CSS classes are also provided so you can match the colors of your labels and buttons:

  • bg-theme can be used in conjunction with the 'label' or 'badge' Bootstrap classes
  • btn-theme can be used in conjunction with the 'btn' Bootstrap class

This functionality does not support Internet Explorer 11 and under (color schemes use CSS variables). Older browsers will get the colors inherited from the general template of the site.

The available CSS variables you can use in your CSS overrides:

  • --primaryColor : the main color (used for the background)
  • --secondaryColor : the secondary color
  • --textColor : the text color
  • --textOverColor : the text color over the head
  • --iconColor : the icon color
  • --iconOverColor : the icon color over the head
  • --linkColor : the link color
  • --linkHoverColor : the link color on hover
  • --buttonColor : the button color
  • --buttonHoverColor : the button color on hover
  • --labelColor : the label color

Usage example

#lnee_116 .newshead { background-color: var(--secondaryColor); }

Starting with v6.0, Latest News Enhanced offers the ability to load specific color schemes, helping you jumpstart your design. 5 color schemes are available out-of-the-box, with more downloadable if you own the PRO version.

All colors can be replaced in the Theme overrides section of the Theming tab.

A couple specific CSS classes are also provided so you can match the colors of your labels and buttons:

  • bg-theme can be used in conjunction with the 'label' or 'badge' Bootstrap classes
  • btn-theme can be used in conjunction with the 'btn' Bootstrap class

This functionality does not support Internet Explorer 11 and under (color schemes use CSS variables). Older browsers will get the colors inherited from the general template of the site.

The available CSS variables you can use in your CSS overrides:

  • --primaryColor : the main color (used for the background)
  • --secondaryColor : the secondary color
  • --textColor : the text color
  • --textOverColor : the text color over the head
  • --iconColor : the icon color
  • --iconOverColor : the icon color over the head
  • --linkColor : the link color
  • --linkHoverColor : the link color on hover
  • --buttonColor : the button color
  • --buttonHoverColor : the button color on hover
  • --labelColor : the label color

Usage example

#lnee_116 .newshead { background-color: var(--secondaryColor); }

Denim

The Denim color scheme
The Denim color scheme
Sample with Denim color scheme
An example of a card using the Denim color scheme

Earth

The Earth color scheme
The Earth color scheme
Sample with Earth color scheme
An example of a card using the Earth color scheme

Marine

The Marine color scheme
The Marine color scheme
Sample with Marine color scheme
An example of a card using the Marine color scheme

Pastels

The Pastels color scheme
The Pastels color scheme
Sample with Pastels color scheme
An example of a card using the Pastels color scheme

Portfolio

The Portfolio color scheme
The Portfolio color scheme
Sample with Portfolio color scheme
An example of a card using the Portfolio color scheme

Related tutorials and topics