New version of Itonga WordPress Theme

A few days ago, we finished updating our latest WordPress Theme. Below are a few words about what has changed in it.

The goal of this release was to add functionality for customizing theme colors and adding color schemes. To do this, we rewritten all the theme styles and replaced all the color and typographic variables with CSS variables. This is done in order to make it easier to work with color settings later and to cause fewer problems when adding new functionality or changing the theme.

Below is a list of all the variables that are put in the pseudo-class :root. If you change the value of any of them, this change will be automatically applied to the entire theme, or to the element to which it is applied.

:root {
  // Main colors
  --body__BackgroundColor:         #{$body__BackgroundColor};
  --secondary__BackgroundColor:    #{$secondary__BackgroundColor};
  --text--primary__Color:          #{$text--primary__Color};
  --text--secondary__Color:        #{$text--secondary__Color};
  --text--secondary--hover__Color: #{$text--secondary--hover__Color};
  --accent__Color:                 #{$accent__Color};
  --accent--hover__Color:          #{$accent--hover__Color};
  --success__Color:                #{$success__Color};
  --info__Color:                   #{$info__Color};
  --warning__Color:                #{$warning__Color};
  --danger__Color:                 #{$danger__Color};
  --border__Color:                 #{$border__Color};

  // Page Preloader
  --page-preloader__BackgroundColor: #{$page-preloader__BackgroundColor};

  // Header colors
  --header__BackgroundColor:        #{$header__BackgroundColor};
  --header-site-title__Color:       #{$header-site-title__Color};
  --header-menu-link__Color:        #{$header-menu-link__Color};
  --header-menu-link--hover__Color: #{$header-menu-link--hover__Color};

  // Main navigation colors
  --main-nav-overlay__BackgroundColor:    #{$main-nav-overlay__BackgroundColor};
  --main-nav-overlay__BorderColor:        #{$main-nav-overlay__BorderColor};
  --main-nav-close-button__Color:         #{$main-nav-close-button__Color};
  --main-nav-close-button--hover__Color:  #{$main-nav-close-button--hover__Color};
  --main-nav-link__Color:                 #{$main-nav-link__Color};
  --main-nav-link--hover__Color:          #{$main-nav-link--hover__Color};
  --main-nav-sub-menu-link__Color:        #{$main-nav-sub-menu-link__Color};
  --main-nav-sub-menu-link--hover__Color: #{$main-nav-sub-menu-link--hover__Color};

  // Content colors
  --content-text__Color:           #{$content-text__Color};

  // Footer colors
  --footer__BackgroundColor:       #{$footer__BackgroundColor};
  --footer-text--primary__Color:   #{$footer-text--primary__Color};
  --footer-text--secondary__Color: #{$footer-text--secondary__Color};

  // Sidebar colors
  --sidebar-overlay__BackgroundColor: #{$sidebar-overlay__BackgroundColor};
  --sidebar__BackgroundColor:         #{$sidebar__BackgroundColor};
  --sidebar-opener__BackgroundColor:  #{$sidebar-opener__BackgroundColor};
  --sidebar__BorderColor:             #{$sidebar__BorderColor};
  --sidebar-widget-title__Color:      #{$sidebar-widget-title__Color};
  --sidebar-text--primary__Color:     #{$sidebar-text--primary__Color};
  --sidebar-text--secondary__Color:   #{$sidebar-text--secondary__Color};
  --sidebar-link__Color:              #{$sidebar-link__Color};
  --sidebar-link--hover__Color:       #{$sidebar-link--hover__Color};

  // Typography
  --font-family--base:           #{$font-family--base};
  --font-family--headings:       #{$font-family--headings};
  --font-family--content:        #{$font-family--content};
  --font-family--entry-headings: #{$font-family--entry-headings};
  --font-family--monospace:      #{$font-family--monospace};

  --font-size--base:     #{$font-size--base};
  --font-size--xs:       #{$font-size--xs};
  --font-size--sm:       #{$font-size--sm};
  --font-size--md:       #{$font-size--md};
  --font-size--lg:       #{$font-size--lg};
  --font-size--xl:       #{$font-size--xl};
  --font-size--xxl:      #{$font-size--xxl};
  --font-size--xxxl:     #{$font-size--xxxl};
  --font-size--xxxxl:    #{$font-size--xxxxl};
  --font-size--xxxxxl:   #{$font-size--xxxxxl};
  --font-size--xxxxxxl:  #{$font-size--xxxxxxl};
  --font-size--xxxxxxxl: #{$font-size--xxxxxxxl};

  --font-weight--light:     #{$font-weight--light};
  --font-weight--normal:    #{$font-weight--normal};
  --font-weight--medium:    #{$font-weight--medium};
  --font-weight--semi-bold: #{$font-weight--semi-bold};
  --font-weight--bold:      #{$font-weight--bold};

  --line-height--base:      #{$line-height--base};
  --line-height--headings:  #{$line-height--headings};
}

For example, to change the accent color of all links and buttons, just add the following code to the style file of the child theme:

body {
  --accent__Color: #ff0047;
  --accent--hover__Color: #d3003b;
}

But this is just an example of how CSS variables work. For your convenience, we have added the appropriate settings to the WordPress Customizer for all variables that relate to color. So to change a particular color, you don’t need to edit the code, just open the “Colors” panel of the Customizer and configure it as you like. You can also change the theme’s color scheme there. Only one new theme has been added so far (“Light”), but new ones are planned for the future.

Adding CSS variables also made it easier to work with the extension of the site’s functionality. For example, you add a third-party plugin to your site. The plugin has its own page and some minimal design. It is enough to replace the color numbers in the style file with the corresponding variables and all the plugin pages will be recolored in the theme colors. Moreover, their colors will change along with changing the color scheme or individual colors in the Customizer panel.

Typographic CSS variables are added for the future – we plan to add settings for changing fonts to the theme. While we are thinking about how to do this better.

The main changes to the theme are described above. In addition, small improvements and bug fixes were carried out:

UPDATED: Vendor libraries.
FIXED: An empty page when click the Back button in the browser.
FIXED: The number of posts per page for portfolio archive pages.
ADDED: Add animations for masonry posts list layouts.

We are grateful to you for informing us about the found errors and making your suggestions! Enjoy your use! 🙂