Style Kit 2

There are 2 paths you can take to set up Osaka 2 styling.
1 – Importing Demo Content and Style Kit Settings – this is good for a new website with no content
2 – Manual Setup – best to do the manual setup if you already have content on your site

Importing Demo

Importing our Style Kit and Demo is an easy process, just one click. However there can be quite a few adjustments that you will need to make afterwards to make sure the site is structured properly with the pages you need.
After importing our Demo and Style Kit Settings you will need to do the following:

  • Clean Up Pages – remove unnecessary ones
  • Confirm Navigation Menu
  • Check Permalinks and Page Titles

Please take the time to watch the Video below on the next steps you need to take after importing our Demo. This will make the process much easier for you.
Note: the video is based on Style Kit 1. The process for Style Kit 2 remains the same.

Manual Setup

Below we’ve listed out a step by step process and video guide on “How To” get the site looking like our Osaka 2 demo. Please keep in mind that certain options may need to be adjusted to work with your Brand Style.

STYLING

Header Colors
3.1.1. Elements Color: #000000
C.1. Dropdown Menu Background Color: #e1e1e1
C.2. Dropdown Menu Items Color: #000000

Footer Colors
7.2. Footer Background Color: #1f1f1f
7.3. Footer Elements Color: #ffffff
B.2.4.1. Menu Dropdown Background Color:#e1e1e1

Generics – Misc. Colors
5.5.2. Buttons Background Color: #000000
5.5.3. Buttons Text Color: #ffffff

Pagination – Color 3 – #e1e1e1

HOME 1

Sections Used:
4.4.2 Featured Item

4.3.3 Block with Links Color: #f9f9f9

4.3.4 Featured Items
B.2. Items Elements
B.3. Items on Hover Background Color: #000000
Adjust as needed.

4.3.5 Featured Slideshow

4.1.B About Block Type B
disable Display Links Area

HOME 2

Sections Used:
4.4.2 Featured Item

Text Block

4.4.3 Listing Block
Item Background Color on Hover: #000000
Item Text Color on Hover: #ffffff

4.3.5 Featured Slideshow

4.3.3 Block with Links
Background Color: #f9f9f9

4.1.A – About Block Type A
Background Color: #f9f9f9f9
Description Background Color: #f2f2f2

CHANGING FONTS

Download Osaka 2 Fonts by logging into your Flotheme account here: https://flothemes.com/my-account/my-downloads/

screenshot-demo.flothemes.com-2017-03-31-17-28-58

Call To Action 1 Settings
Change Font to Marcellus-Regular
Font Size: 12px
Letter Spacing: 0.2em
Screen Shot 2017-03-31 at 5.34.05 PM

Special Heading 3 Settings
Font size: 38px
Letter spacing: 0.1em
Screen Shot 2017-03-31 at 5.35.11 PM