Stylekits in Osaka

TLDR:
New Osaka Users: Apply any style kit with one simple click.
Existing Osaka Users: If you love your current website’s colors & font settings, just ignore the new stylekits, until you have a new vision & redesign plan for your website. If you do want to give it a try – Backup your full site or use FloLaunch to test everything on a virtual copy of your website (instructions below).

—–

The ability to apply style kits in one single click is a new option for Osaka. This functionality was not available previously, when the theme was released. The color settings had to be setup individually for each block. Starting with Osaka 1.0.0, we are introducing a global color setting system for all your blocks, which dictates that certain blocks have default colors defined by a style kit (don’t worry, you can still overwrite it for each block manually).

This new functionality will simplify the process of trying out new style kits, as well as applying your own branding colors to your website. You will find the Global Color Settings inside your dashboard, under Flotheme -> Style -> Colors.

After you update to Osaka 1.0.0, you will get 2 new stylekits – Belle & Serene, as well as the original 2 stylekits – Classic & Dark, available at a one click apply.
Check all 4 stylkits and choose the one that works best for your brand.

Osaka Classic
Osaka Dark
Osaka Serene
Osaka Belle

If you currently have a lot of custom code, custom fonts or colors on your website that you are happy with – you can either ignore the pre-designed style kits or follow our recommendation before giving them a try (to avoid losing current settings in case you’ll want to revert back to them).
If you’re a new user, only starting off with Osaka –  skip this article and enjoy playing with these style kits, as this will not affect you.

1.Use FloLaunch

The FloLaunch plugin will allow you to safely test out the new style kits without actually tweaking your current website. All you’ll need to do is enable the test mode and play with the style kits on a virtual copy of your website. This allows you to preview how the new style will look on your site before applying it.

Steps
1. Install the FloLaunch plugin.
2. Enable test mode.
3. Select the style kit you like from Flotheme -> Style -> Stylekits and click apply.
4. After applying the new style kit, the fonts will be overwritten to the default fonts inside that stylekit. However the colors that are selected in blocks initially will remain unaffected, until you “erase” the current color settings by enabling the option “Overwrite Custom Colors with Stylkit Colors” (see image below). If you prefer to keep current colors, do not touch this option.

If after testing the stylekit with FloLaunch you realize that your current site styling works better for you, just delete the test mode and your site is back unaffected.  if you do like the new changes, just publish your new site with the new style kit.

2. Manual Backups

Start with a backup to be able to revert to your style options in case you don’t like the update. How to create a backup – read here and here.

When the backup is ready, you are safe to start playing with the new stylekits.

Select the style kit you like from Flotheme -> Style -> Stylekits and click apply.
After applying the new style kit, the fonts will be overwritten to the default fonts inside that stylekit. However the colors that are selected in blocks initially will remain unaffected, until you “erase” the current color settings by enabling the option “Overwrite Custom Colors with Stylkit Colors” (see image below). If you prefer to keep current colors, do not touch this option.

If you made a backup before applying a stylekit and you would like to revert to your initial styling configuration, just restore the backup and get your initial site back.

Conclusion

Existing Osaka users may wonder “What’s the benefit of going through all the extra work and integrating the stylekits on my website?”. Instead of managing the colors for each block separately, now they will all be connected in one global system that dictates the color styling, hence making it easy and quick for you to add changes, apply new colors (including your custom branding colors) and whole style kits to your website in one single click.