DOCUMENTATION V.1.0.



COMMON ISSUE

 

1. Missing style sheet error when installing the theme

A common issue that can occur with users new to installing WordPress themes is a "Broken theme and/or stylesheets missing” error message being displayed when trying to upload or activate the theme.

This error message does not mean that the theme you have purchased is broken, it simply means it has been uploaded incorrectly.

Luckily, there is a very easy fix.

I. THEME & PLUGINS INSTALLATION

After purchasing the Hyani theme, it’s recommended to download “All files & documentation” from Themeforest. Extract the downloaded .zip and save on your local computer.

You can install the theme by one of two ways:

1. Install From WordPress.

2. Install From FTP.

After theme installation, continue with

3. Install Required Plugins.

 

I. 1. Install From WordPress
  1. Login to your admin page, navigate to Appearance > Themes.
  2. Click "Add New" button at the top.
  3. Click "Upload Theme" button, navigate and search the file name Hyani.zip (the file that download and extracted on the steps before.)
  4. Press the Install Now button to upload and install the theme.
  5. Activate the theme.

 

I. 2. Install From FTP
  1. Extract Hyani.zip archive on your local machine
  2. Log in to your FTP application.
  3. On your hosting, navigate to WordPress themes folder: wp-content/themes
  4. Upload extracted Hyani folder to that directory.
  5. Now log in to your WordPress dashboard, go to Appearance > Themes
  6. Now you’ll see Hyani theme in your themes list.
  7. Activate the theme.


 

I.3. Install Required Plugins

After activated your theme, make sure to install and activated all the necessary plugins.

  1. Click the "Begin Installing Plugin" button
  2. Installation proccess wiil start, wait till installation finish.
  3. Select all plugin and choose "activate" to activated all plugins.

 

II. ONE CLICK DEMO IMPORT

Next steps is import demo data. Do the following steps:

  1. On your admin page, navigate to the Appearence > Import Demo Data. Click the menu.
  2. On the Demo Import page, scrolling down and you will see the list of the Hyani demo.
  3. Hover your mouse to the frontpage layout you want to install, then click Import Demo button.

  4. On the new page, click Continue & Import button.

  5. It will take times, depend on your net conection. Just sit back and relax. Wait untill the proccess finish.
  6. When the proccess finish, refresh your frontpage.

III. TROUBLE SHOOTING AFTER DEMO IMPORT

The common problems after import the demo are:

III.1. Only Header and footer displayed.

III.2. Modules on your frontpage displayed blank area.

III. 3. Frontpage layout look weird

These problem ussually caused by lack of import proccesed. Don't worry, it's easy to fix with few steps. Follow this steps to fix the problem.

 

III.1. Only Header and footer displayed.

Follow this steps to fix the problem.

1. Switch your theme to WordPress default theme, for example Twenty Fifteen.

2. Do nothing.

3. Switch back your theme to Hyani.

4. Activate all the required plugins.

5. Refresh your browser.

 

III.2. Modules on your frontpage displayed blank area.

 

The category did not defined correctly. Don't worry, you just need to define the category manually.

Follow this steps to fix the problem.

  1. From your frontpage, click Edit button (the button only display if you login as administrator.)
  2. Make sure to edit your page with Elementor.
  3. On the Elementor editing, click on the module, then choose the category.
  4. The content will appear corrctly. Repeat these steps for other modules.
  5. Save your work, then refresh your frontpage.

The next steps is defines the menu location.

 

III. 3. Frontpage layout look weird

After import the demo data, your layout look weird like this:

By accident, import procces change the layout. Don't worry, that caused by the wrong page layout. You just need to setting bak the page layout with few simple steps.

  1. From your frontpage, click Edit button (the button only display if you login as administrator.)
  2. Click Edit with Elementor button.
  3. Scrolling down, on the left bottom of your page, click Setting icon.
  4. From the slide up menu, choose the template name Template: Custom Frontpage No Top Margin.
  5. Click Update button to save your change.
  6. Refresh your web frontpage.

Access the option panel by Navigate to Dashboard > Hyani Options. You can customize your web appearance trought Hyani option:

  1. Fav. icon
  2. Access from: Dashboard > Hyani Options> General Setting. Insert your own favorite icon as your web identity trough this section.

  3. Header area: Logo, navigation style etc.
  4. Access from: Dashboard > Hyani Options> Header Area. In this section you can setting up and modification of your header look.

  5. Footer area: style and customize
  6. Access from: Dashboard > Hyani Options> Footer Area. In this section you can setting up and modification of your header look.

  7. Typography
  8. Access from: Dashboard > Hyani Options> Typography. Setting up the typography style for general part of your theme (single post title, category, tag, widget title.) Remember, for the part build from Elementor modules, tou can setting up from that's module itself.

  9. Category style
  10. Access from: Dashboard > Hyani Options> Category Template. Setting up how your category will be displayed. 6 style available, you can displayed different category with different style.

  11. Tag Style
  12. Access from: Dashboard > Hyani Options> Category Template. Setting up how your Tag will be displayed. 6 style available, you can displayed different Tag with different style.

  13. 404 page
  14. Access from: Dashboard > Hyani Options> 404. Stylish your 404 page from this section. You can insert your own image and type tour own text.

Depend on the area, you can setting up the typography in 2 ways:

  1. Hyani option panel : typlography controling from Theme Option will affect to general location (single title, page title, widget title, body etc)
    Access from Dashboard > Hyani Option. Then click Typography tab.
  2. Elementor Editor. Typography on Elementor module handle directly from the Elementor editor page. Every module have their own typography setting. On the Elementor editor, click Style tab to setting the typography. Almost all typography on frontpage build by Elementor, handle from the module.:



Hyani theme provided Custom Elementor add on. You can easily choose, insert and start to build your home Layout. Follow this steps:


Hyani theme provided 4 single post style and 7 post format. You can easily choose your single post style. Follow this steps:

  1. Open or create a post
  2. On the post page editor, scrolling down untill you see Template section. Click and from the drop dow you can see some templates. 6 of the template you can use for your post (Default Template and Post style 2 - Post style 6.)
  3.  

     

  4. Choose one of the template you want.


Hyani theme provided 6 category layout and 6 tag layout. You can displayed your category and tag page with different style for each individually. Here how to setting up your category and tag layout

  1. Go to Dashboard> Hyani Option> Category Template (or Tag Template.)
  2. Choose the category (you can choose multiple categories) and choose the layout.
  3.  

     

  4. Click Save button.
  5. Open your category page on browser..


The list of required plugins, need for the theme to work perfectly.

  1. Hyani Custom function
  2. Hyani Elementor add-on
  3. Hyani Widget
  4. Mega Main Menu
  5. Elementor Free.
  6. Redux Framework
  7. CMB2
  8. One Click Demo Import
  9. Contact Form 7.
  10. Weather Atlas Widget

Two of them (Contact form 7 and weather Atlas widget) use in front of layout. You can insert both of the plugin using their shortcode trough the elementor module.

Note: The contact form 7 module already available after you import the data. You just need to copy the shortcode and place it everywhere you want.

It's easy to insert the shortcode, follow this steps (in this tutorial use Contact Form 7.

  1. Open your Contact Form 7 template. Go to Dashboard > Contact> Contact Form.
  2. Choose the form you want, then copy the shortcode.
  3.  

     

Now for the next steps

  1. Open your page that build with Elementor.
  2. Make sure you already open the Elementor editor page
  3. Click on General's tab
  4. Insert the Shortcode.
  5.  

  6. Paste your contact form's shortcode in the box.
  7.  

  8. Click Update button to save your work.
  9. Open your page on browser, the contact form will be appear.

You can create a blog page with the page template.

  1. Click Dashboard > Pages > Add new.
  2. Scroll down and you will see Template. Choose Template: Blog from the drop down.

  3. Click Save button.
  4. Preview your new page, you will have a new blog page.
  5. From your menu setting, insert a new menu for your new blog page.

Change your theme scheme

  1. Click Dashboard > Hyani Option.
  2. Click Scheme tab.
  3. Choose the color or pattern scheme.
  4. Preview your new page
  5. Clicl Save Change button.

Watch the video:

I've used the following images, icons or other files as listed.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme.
Contact Us here.

Tothetheme Team