resca


Created: 07/14/2015
Latest update: 07/14/2015
By: ThimPress
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this documentation, please feel free to request support at our Support Forum. Thanks so much!

Download Theme

Get the Theme installation package from your account download page and save it to your desktop.

Since required & recommended plugins are already packed in the download file, you won’t need to go download them individually.

Upload Theme

You can upload the Theme file in two ways:

I. Via WordPress – Log into your WordPress site.

15

II. Uploading Via Filezilla

(SKIP THIS STEP if you have already successfully uploaded  theme via WordPress) – Now you will learn how to upload your files using the Filezilla client.

16

System Requires

It is recommended using those limits to a minimum as follows in order for free-trouble while installing demo or saving customize.

max_execution_time 3000
memory_limit 256M
post_max_size 64M
upload_max_filesize 64M

Install Theme

For uploading Theme with Wordpress uploader:

 Wait for the notice below to appear and then click the link “Activate”.
17

For uploading Theme with FTP tool:

1. Open the WordPress Dashboard.

2. Go to Appearance > Themes.

3. Click activate Theme.

Install Required Plugin

A notice will appear asking you to install some required plugins after Active Theme.

1. Click on “Begin installing plugins” link.

image_13

2. Click on the box beside “Plugin” label to select all plugins in the list, choose “Install” from the drop-down list at the top and then click “Apply”.

39

When the notice “All installations have been completed” appears, click on Return to Required Plugins Installer link under it to turn back to the plugin list.

3. Click on the box beside “Plugin” label to select all plugins in the list, choose “Activate” from the drop-down list at the top and then click “Apply”.

42

The installing process status will be shown in your browser. It may takes a few minutes, so please be patient.

After completing the activation and no bug occurred, you will see status of all plugins is activated.

 

Import Demo Data

I. The first way: Importing by one click

This is priority to use for importing fully demo content.

48

The progressing will display on import status bars so you will know when it is finished and your data is ready.

image_9

 II. The second way is recommended to use if you have any trouble in the first way.

1. Import .xml file:

Where is file .xml to import?

There are 9 demo style file placed in folder adot\inc\admin\data and each style file contains “demodata.xml” file. Just click on one demo file then find file “demodata.xml” to import demo. If you choose any demo type then after importation process, your site will be styled accordingly.

Following these steps to import demo data via .xml file:

18

2. Set Up Front Page:

– Go to Setting >> Reading.
– select a static page (select below) >> Choose Front page is Home page.

3. Import Revolution Slider:

The download package contains the exported slider (Revolution Slider) that can be used as your slider template. Please follow the steps below to import it.

  • Go to “Revolution Slider
  • Click “Import Slider” button
  • Click “Browse” >> choose file themes\zoneshop\inc\admin\data\revslider >> select one file zip revolution slider >> Click “Import Slider” button to start import the selected slider.
  • Repeat the steps to import anothor revolution slider.

image_52

How to Edit a Revolution Slider When you can’t import image correctly?

You need to Edit revolution Slider.

You’re still on the main page of Revolution Slider, click Edit Slides.

19

Please note that these steps are to set up slider for homepage the same as in live demo. If you want to make your own slider, please follow the official Slider Revolution document.

4. Import Widget:

Install and Active Widget Importer Plugin.
– Go to Tool >> Widget Setting Imports >> Select a file >> Choose file themes\adot\inc\admin\data\widget\widget_data.json >> Click on “Show Widget Settings” >> Select all active widget >> Click on “Import Widget Setting“.

5. Import Setting:

Go to Appearance >> Customize >> Import/ Export Setting >> Import Setting >> choose file theme/inc/admin/data/setting.js >> click “Save & Publish” button.

6. Configure Menu:

Go to Appearance >> Menu >> select “Main Menu” >> choose “Primary Menu” >> click “Save Menu“.

This is video tutorial installation via xml file.

 

Customize

By clicking on the “Customize” menu under “Appearance”, you’ll be able to change all specific template settings.

image_46

There will appear:

1

Please note that, after configuring something in customize, you need to click blue button <<Save & Publish>> to apply changes.

1. Logo:

This is the section for you to set a Logo as your website identity. You can upload this Logo on your server, or just paste an URL into the Logo box.

image_22

The Logo will be displayed like this on your Header and will be sticky with menu when scrolling down your site:

2

The size of your Logo Section on Header Menu could be set with Width Logo option. Since the layout is built using Bootstrap Grid system for a responsive design, the width of your Header Menu is also divided into 12 sections. We recommend using value 2 or 3 (corresponding with 16.67% or 25%) to menu will be shown in a line. You can set logo size as you want then your site will automatically thumbnail size depending on the value of “logo width” to logo displayed balance with menu.

Favicon:

Similarly, the image indicated by the Favicon box will be your site logo favicon, which will appear on the status bar of the browser.

image_77

The favicon should be in one of the following formats: .ico, .png, .gif. Usually we should use .ico.

It will be shown in frontend:

3

2. Header Options:

Header

  • Drawer

Note that you need to Add a Widget to show Offcanvas Sidebar. The guideline to Add a Widget will be expressed in the Widget Section bellow.

There are options to control Drawer that can be used to insert widgets at the top of your page. Note that you need to Add a Widget to show Drawer. The guideline to Add a Widget will be expressed in the Widget Section bellow.

Drawer

– You can choose to Show or Hide Drawer.
– Or select a Drawer Background color.
Drawer Text Color: The text color in Drawer.
Drawer Style: Currently there are 2 styles of Drawer Style for you to choose.

  • Main Menu

Main Menu

 

– Select a Layout: there are 2 style for header main menu.

– Header Position: select type Header Position for main menu.

– Background color: select color for background main menu.

– Text color: select color for text of main menu.

– Text Hover color: select color for text when hover over main menu.

– Font Size: select font size for text main menu.

– Font Weight: select font weight for main menu text.

6

  • Sub Menu

Sub Menu

– Color Border Top: select color for border top of sub menu.

– Background Color: select color for background of sub menu.

– Color Border Bottom: select color for border bottom of sub menu.

– Text color: select color for text of sub menu.

– Text color hover: select color when hover over text sub menu.

7

  • Sticky Menu

Sticky Menu

– Config Sticky Menu: you can choose “custom” or let it “same with main menu” when sticky menu.

– Sticky Background color: If custom sticky menu, select background color for main menu when sticky.

– Text color: If custom sticky menu, select text color for main menu when sticky.

– Text Hover color: If custom sticky menu, select text hover color for main menu when sticky.

  • Mobile Menu

Mobile Menu

This option allows you to configure to see main menu in mobile.

– Background color: select background color for main menu when view on mobile.

– Text color: select text color for main menu when view on mobile.

– Text Hover color: select text hover color for main menu when view on mobile.

  • Offcanvas Sidebar

Note that you need to Add a Widget to show Offcanvas Sidebar. The guideline to Add a Widget will be expressed in the Widget Section bellow.

There are options help control every element on Offcanvas Sidebar:

Offcanvas Sidebar

Show or hide: Choose to show or hide Offcanvas Sidebar.
Background color: Select Background Color for Offcanvas Sidebar.
Text color: Text Color in offcanvas Sidebar.
Link color: Color for link on offcanvas Sidebar.
Icon: enter icon name.

3. F​ooter Options

Like the name indicated, it is the section to control the Footer part of your site.

Footer

  • Footer:

Footer1

– Background footer image: upload background image for footer.

– Text Color: select color for text in footer.

– Background Color: select background color for footer.

8

  • Copyright Options

Copyright Options

Text Color: Select color for text in copyright.

Copyright Text: allow you to input content for the tagline in your footer.

9

4. Styling Options

Styling

  •  Layout Section Option:

Layout

Select a layout: choose to display your site in full width, or in a boxed zone.

  • Patterns Section Option:

Pattern

Background Pattern: checking the box under this option title and you will be able to select one of ours.

Upload Background: select background to upload to use as your Background Pattern.

Background Repeat: to repeat the image in your background.

Background Position: to set the starting position of a background image.

Background Attachment: to set whether a background image is fixed/scroll/local/ initial or inherit with the rest of the page.

Background Size: to specify the size of the background images.

  • Background Color and Text Color

Backround Color & text color

 

: this option should only be used with the Boxed Layout. You can select a solid color for the background of your page.

: Each of our theme will have one major color called “Theme primary color”. The elements of the primary color are included with: Hover Text color of “Book a Table”, color of “View Detail” button, color of text “Book Menu” button,  hover social link icon… If you configure any color, it also will be applied similarly to these elements.

5. Display

Display

  • Front Page:

Frontpge

– Front Page Layout

This is the place for you to select an alignment for your frontpages, which is the first display page in your site. You can choose whether or not to use the sidebar, as well as positioning it in a layout with 1 or 2 columns.

image_14

1 – No side bar at all
2 – One sidebar, located on the left
3 – One sidebar, located on the right

– Top Image: upload top image for front page.

:

-Custom Title

Select Layout Default:

Custom Title: enter name of Tittle front page. If leave blank field, system will automatically display name of front page.

Background Heading: Select Background Heading color for front page.

Select Style Default: select style default for front page.

Select Columns: This configuration just works for style grid layout, select number columns displayed in front page.

Text Color Heading: text color heading in Front page.

Height Heading: adjust height heading of front page.

  • Archive:

Archive

 

-Archive Layout

-Top Image

-Excerpt Length

  • Post & Page:

Post & page

 

-Single & Page Layout

-Top Image

  • Sharing:

Sharing

  • Page 404:

Page 404

chú thích

6. WooCommerce

Woocommerce

  •  Category Products

Category Products

-Archive Layout

-Top Image

  •  Product Page

Product page

-Select Layout Default

-Top Image

  • Setting:

Setting

-Column

-Number of Products per Page

  •  Sharing

Sharing

7. Typography:

Typography

  •  Body Section Option:

Body

  • Font Sub Title

Font sub title

  •  Heading Section Option:

H1

H2 H3 H4 H5 H6

 8. Custom Css:

Custom CSS

 9. Widget:

Widgets

ảnh minh họa

  • Menu Right

Menu Right

  • Main Bottom

Main Bottom

  • Footer

Footer

 

10. Static Front Page:

Static Fron Page

-Front page displays

-Front page

-Posts page

11. Import/ Export Settings:

ImportExport Settings

To configure options under Customize section.

If you want to have a new site with similar settings as your created site. Use this function to export a file js in created site and import this file js into the new site.

 

 

 

 

 

 

 

 

 

 

WooCommerce Settings

Inside this panel you will find all core WooCommerce settings such as: catalog settings, pages, payment gateways, shipping methods and tax rates which are accessible via the tabs at the top of the screen.

To configure your shop go to “WooCommerce > Settings”, then browse through the tabs below to get more information on the WooCommerce Options and then click Save changes.

 

 

 

 

 

 

4

For more details, please follow the official docs.

Product Thumbnail Settings

The Product thumbnail size is decided by Product Image settings in WooCommerce. To customize, open WooCommerce Settings menu, then switch to the “Products” >> “Display” >>  “Product Image Sizes

5

If you change these options after the images are set for your product, please re-generate your thumbnails to match the new settings by accessing the Tools >> Regen. Thumbnails menu and click on the <<Regenerate All Thumbnails>> button.

 

1. Go to Appearance >> Menu

image_96

2. Select a menu to edit or click create a new menu.

Note: when you import our demo content, it will automatically create a Main menu for you, so select “Main Menu” if you want to have same menu as in preview.

3. Select pages or categories or links… from the left meta box and click Add to Menu

36

On the right, feel free to drag and drop menu items to organize them.

4. Check Primary Menu for theme locations at the bottom of the page.

5. Click “save menu” button.

 

 

1. Create a Blog page

  • Go to Pages >> Add New page.

15

  • Setting Blog page

Go to Setting >> Reading

2. Add new Category and Tags

  • To add new category for a blog, come to Posts > Categories and fill in fields then click Add New Category, there will appear:

11

  •  To Add New Tag, come to Posts > Tags and fill in the fields then click Add New Tag:

12

3. Create Menu for Blog page:

13

 

Footer

1. In Widgets

footer widget

 

2. In Customize

footer customize

 

footter

To configure this style header,  please do follow our instruction below:

1. Go to Appearance ->  Customize > Header and configure  the options for header.

2

2. Go to Appearance -> Widget:

1

It will be displayed as below:

aa

Siteorigin

Siteorigin is the fantastic plugin, that adds a drag & drop page builder to your WordPress theme. It gives you the tools you need to be able to create complex page layouts without touching a single line of code. Read more at here

When editing a widget, on the right of the interface always shows a Widget Styles column consisting of Attributes, Layout, Design to help you configure for this widget.

resca

When editing a widget, on the right of the interface always shows a Widget Styles column consisting of AttributesLayoutDesign to help you configure for this widget.

widget1

Widget Class: a CSS class.

CSS Styles: CSS Styles, given as one per row.

Padding: Padding around the entire row.

Background Color: select Background color of the row.

Background Image: select Background image of the row.

Background Image Display: how the background image is displayed.

Border Color: Border color of the row.

Font Color: Color of text inside this widget.

 

Widget built by ThimPress

Asides from the default elements that Siteorigin provides, we also offer some special elements that are designed especially for WordPress shops built with Thimpress.

1. Thim: Display Posts Slider

display

2. Thim: Filter Gallery

fiter gallery

 

3. Thim : Google Maps

google-map

 

4. Thim: Single Image

singleimge

 

5. Thim: Heading

heading

 

6. Thim : OpenTable Reservations

opene

 

7.  Thim: Tab Restaurant Menu

tab restaurrance

8. Thim: Tweets Feed

tweet