Overview of Woo360 Theme 1.7 alpha

Version 1.7-alpha of the Woo360 Theme contains the following new and enhanced features.

Version 1.7-alpha.2

  • Added support for system-ui font stack to system font choices.

Version 1.7-alpha.1

System-ui font support in Customizer

As of Woo360 Theme 1.2-alpha.2, when you select a font in Customizer, such as for General > Headings, in the System fonts section of the fonts list there's a system-ui option. This option uses the system font of the user's operating system (or the operating system plus browser). The main advantages are a performance improvement in page load time, because there's no font to load, and a display that's potentially better for the user because it's a font they're used to.

Here's a great article on the system font stack. As noted in that article, the WordPress dashboard also implements a system font stack. In the Woo360 Theme, the system font stack is implemented with the following fallbacks:

'system-ui' => array( 'fallback' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif", 'weights' => array( '300', '400', '700', ),),

Note: When you use a system font stack, you give up some control over the style of your site, in that the font is controlled by the user's system. You should test your site carefully on a number of platforms, particularly languages with non-Latin scripts.

Off-canvas responsive menu flyouts

Woo360 Theme 1.7 has some new flyout animations for how the menu appears when you click the hamburger icon or the MENU button. See the Related Article below for more information about these flyout animations.

Set custom global button styles

As of Woo360 Theme 1.7, you can set a custom global button style in Customizer. See the Related Article below for more details.

Set a unique global H1 heading style

In previous versions of the Woo360 Theme, the heading color, font family, font weight, and font format could be set globally in the Woo360 Theme but the settings applied to all headings, H1 - H6.

As of Woo360 Theme 1.7, you can set global H1 heading that's different from the H2 - H6 headings. As before, you can set font size, line height, and letter spacing independently for each heading level.

In Customize > Header > Header logo, you can add a different header logo for mobile devices. By default, the max-width breakpoint for mobile devices is 768px.

Gutenberg Support

Gutenberg blocks display type as formatted in Customizer settings with the Woo360 Theme Version 1.7.

Choose Bootstrap 3 or 4

Woo360 Theme is built on the Bootstrap framework, and Bootstrap is transitioning from Version 3 to Version 4. Here's a good technical summary of the changes in Bootstrap 4. Note in particular the change in browser support.

In Customize > General > Layout, there's a new Framework field with settings to help in the eventual transition to the new version or to choose which version of Bootstrap you want. You can choose from the following settings:

  • None
    The default setting, and the one to keep if you're not sure. It loads a minimal version of Bootstrap 3 with the functionality required to ensure that the theme works as it does now.
  • Bootstrap 3
    Loads the full version of Bootstrap 3.
  • Bootstrap 4
    Loads the full version of Bootstrap 4.

If you have a new site and want to use Bootstrap 4 features and don't mind the loss of support for older systems, you can try choosing Bootstrap 4. If you have existing customizations using Bootstrap 3 or Bootstrap 4 and need to ensure your layouts are not broken, you choose the appropriate version.

New responsive menu collapse option

In Customize > Header > Nav layout, you can choose whether to allow only one responsive submeu to be open at a time on mobile devices. If set to Yes, if you choose a submenu when another submenu is open, the other submenu will automatically be hidden.

Support for Font Awesome 5

Font Awesome Version 5 is not backwards-compatible with Font Awesome 4, so Version 1.7 of the Woo360 Theme has a new Font Awesome field on the Customize > General > Layout tab to aid the transition by letting you control whether Font Awesome loads on your website pages and which version loads.

You can choose from the following settings.

  • None
    This setting minimizes page load time and can be used when you're only using Font Awesome icons in the theme and Woo360 plugin, not in additional plugins such as megamenus. It loads Font Awesome 5 when it's needed in areas of the page controlled by the theme, for example when there are social icons in the top bar or footer. With this setting, the Woo360 plugin loads the appropriate version of Font Awesome for icons that appear in modules, as determined by the plugin settings at Settings > Woo360 > Icons. If you try this setting and see missing icons in the theme areas of the page, switch to one of the other settings.
  • Font Awesome 4 (the default prior to Woo360 plugin Version 2.1)
    This is the default setting, for now. It loads Font Awesome 4 on every page of your site, whether it's needed or not.
  • Font Awesome 5
    This setting loads Font Awesome 5 on every page of your site, whether it's needed or not. For example, you might want to use this setting when you're using icons in HTML modules on a majority of pages on your site and so want to load the icons on every page.

Note: Choosing different versions of Font Awesome in the Woo360 Theme and Woo360 plugin settings should work, but it's recommended that you keep the two settings consistent.

Set featured image size in archives

Prior to Version 1.7, a global featured image size in archives could only be set when the featured image location was set to Beside posts. As of Version 1.7, the featured image size can be set for all archive featured image locations: Above titles, Above posts, and Beside posts. This setting is at Customize > Content > Archive layout.

Note: For single posts, the featured image size can only be set when the featured image is set to Beside posts at Customize > Content > Post layout.

As of Woo360 Theme 1.7, the theme's lightbox is applied to Woo360 layouts when images are added to the Text Editor module. When you click the image on the published page, the image opens in a lightbox instead of by itself on an unformatted page with a white background. See the animated image below for an example of the lightbox effect.