Theme User Guide

Thank you for purchasing our Theme. Please do not forget to rate the Theme and We'll be waiting for your Feedback. It would be nice to see your comments on our product, this documentation consists of several parts and shows you how to set up and administrate your WordPress site.

We did our best to make this documentation as clear as possible. However, if you have any difficulties with the our theme or any suggestions on improving the template or the documentation, feel free to contact us via our support link: support@it-rays.net

First of all what is WordPress CMS?

WordPress is a free and open source blogging tool and a content management system (CMS) based on PHP and MySQL. It enables you to build Websites and powerful on-line applications and requires almost no technical skills or knowledge to manage. Many aspects, including its ease of use and extensibility, have made WordPress the most popular Web site software available. Learn More

What is a WordPress Theme ?

A WordPress Theme is a skin for a website built with the WordPress CMS platform. In other words, you can easily change your WordPress Web site appearance by installing a new Theme in a few easy steps. With all its simplicity, a WordPress Theme is provided with all the necessary source files and you are free to edit or extend it the way you need.

The Theme package you have downloaded consists of several folders. Let's see what each folder contains:

Documentation

Licensing

Resources
  demo-data: inludes all demo data files such as: revslider folder , go_pricing.txt , essential_grid.json that will be explained below.
    
Theme
  superfine.zip
  superfine-child.zip
  

I'm using 5 Customizable CSS styling files in this theme.

The style.css is for the main styling, also Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

The light.css and dark.css for the light and dark skins

The style.php file contains all of the specific styling for the page that is customized by theme options, such as: custom title height, custom body background, etc...

The colors.php file contains all of the custom skin colors for the page, if you used a custom skin color in theme options page.

The main style.css file contains all of the specific styling for the page. The file is separated into sections using:

/*==============================================================================
    CONTENTS:
    
    1. CSS RESET.
    2. SITE PRELOADER.
    3. HEADER STYLE:
        3.1. Top bar.
        3.2. Main menu.
        3.3. Top Search.
        3.5. Header Styles.
    4. PAGE TITLES.
    5. FORM CONRTOLS.
    6. SHORTCODES.
    	6.1. Headings
    	6.2. Dividers
    	6.3. Icon Boxes
    	6.4. Tabs
    	6.5. Accordions
    	6.6. Progress Bars
    	6.7. Circliful Charts
    	6.8. CTA
    	6.9. Team Boxes
    	6.10. Pricing Tables
    	6.11. Testimonials
    	6.12. Pagination
    	6.13. Message Boxes
    7. PAGE SPECIFIC STYLES:
        widgets.
		coming soon.
		404 not found.
		portfolio.
		Blog.
    8. FOOTER.
    	8.1. Footer 1.
    	8.2. Footer 2.
    	8.3. Footer 3.
    	8.4. Footer 4.
    	8.5. Footer Light.
    	8.6. Footer Minimal.
    	8.7. Fixed Footer.
    9. HOME ELEMENTS.
    10. TYPOGRAPHY.
    11. IMPORTANT CLASSES.
    12. SHAPES.
    13. BOXED MODE.
    14. RESPONSIVE DESIGN.
   
============================================================================= */

Ex: If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

.top-bar {
	border-bottom: 1px #eee solid;
	background: #f4f4f4;
	text-transform: uppercase;
	font-size: 11px;
}

CSS Stylesheet files structure

this is the contents of css folder inside the theme folder.

File Name Description
assets/css/style.css This file contains all the necessary styling rules for the theme.
assets/css/light.css This file contains all the necessary styling for the light theme.
assets/css/light.css This file contains all the necessary styling for the Dark theme.
assets/css/assets.css All Assets needed for Animations, Magnific Popup, Counters, Slick Slider, Camera SlideShow, etc... compressed in this file to save performance.
assets/css/colors.php contains all of the custom skin colors for the page, if you used a custom skin color in theme options page.
assets/css/style.php contains all of specific styling for the page which customized by theme options, such as: custom title height, custom backgrounds, etc...
rtl.css RTL right to left support.

This theme imports 4 Javascript files.

File Name Description
assets/js/assets.js This file contains all the jquery plugins included in the theme compressed to save performance.
assets/js/html5.js fix HTML5 Support on Browsers Less Than IE9.
assets/js/post-like.min.js This file contains all functions responsible for post likes.
assets/js/script.js Responsible For The Main Custom jQuery Function In The Whole Site.

1) Download & Organize Files

After downloading the ZIP file from ThemeForest UNIZP that file, after unzipping you see various structure of theme.
  • Theme/superfine.zip (Root file to install wordpress theme)
  • Documentation (Directory which includes theme documentation file)
  • Licensing (File which include information about wordpress & theme under GPL liscense)
  • Resources (Directory which includes codecanyon plugins, xml dump, jquery files, etc...)

2) Installing Theme


A - Installing your theme via Wordpress
  1. Login to your wordpress dashboard, go to WordPress Appearance -> Themes section.
  2. Click on Install Themes tab.
  3. Click on Choose File button, and select .zip theme file and click Install Now button.
  4. If you uploading process fails due to theme broken issues, then you may refer here
Note : This method will only work if your server allows space greater than 5 MB. Usually hosting providers provides only 2 MB

B - Installing your theme via FTP
  1. Go to the downloaded package then select Theme/superfine.zip and extract it.
  2. Copy extracted files in superfine folder to /wp-content/themes/superfine via FTP Clients
  3. For example theme should be in wp-content/themes/superfine
  4. Follow the instruction below for activating the theme.

3) Activating Theme

  1. Log in to the WordPress Administration Panels.
  2. Select the Appearance panel, then Themes.
  3. From the Available Themes section, click on the SuperFine title (or SuperFine screenshot) to activate.
  4. A preview of the Theme will be shown.
  5. To activate the Theme click the Activate SuperFine link in the top right.

5) Theme Updates

If you want further notice about SuperFine Theme updates, then please follows us on twitter or constantly visit our support Team.

A - Import Demo Content via XML DUMP

  1. Go to your wodpress admin panel
  2. Under the Tools tab select Import
  3. In the new page appeared select the last item "WordPress"
  4. Find the Resources folder inside the root folder of SuperFine Theme.
  5. Inside resources folder open demo-data folder then choose content.xml

B - Import Demo Content via One-Click-Install Method

  1. Go to your wodpress admin panel
  2. Under Appearance tab click on SuperFine
  3. you will find an import Demo Data button, click it (this will import posts, categories, menus, widgets and Theme Options.), then you are about to finish

C - Import Plugins Data

  1. To Import sliders, Essential grid GRIDS and Go Pricing content, just go to these plugins in the left side of the Administration Panel and select import/export link in each plugin then import the corresponding content for each plugin from demo-data folder.

    Note: Please Import Revolution Sliders with the same order because every slider has it's ID that we work on it with javascript.
    You will see that we have 13 sliders numbered from 01-... to 13-...

  2. Go Pricing Plugin: We included a file (go_pricing.txt) in the demo-data folder that contains demo pricing tables data that is shown in our demo page: Here You can only import it.
  3. By Default the footer mailChimp Form is not active.

    Please Go to your WordPress Dashboard --> MailChimp for WordPress --> Forms and just Hit the SAVE CHANGES button and it will work.

When you need to create a page just go to administration panel, and under Pages tab click Add New, then you will get this screen:



1) Template

As you see in the Page Template, you can see that there are 5 custom templates:

2) Page Layout Mode

As you see in the Page Layout Mode, you can see that there are 4 Layout Modes:

  1. Full Width: This is for pages that has no sidebar, and takes the full content container width.
  2. Full Page: This is for pages that takes the full page width not centered content.
  3. Left Bar: Content with left sidebar pages.
  4. Right Bar: Content with left sidebar pages.

3) Page Menu

As you see in the Select Menu, you can Choose a different menu for this page only.


Page Editor:



----- When you select BACKEND EDITOR, this screen will appear:



To Navigate to the theme options and begin customizing the look and feel or your website, you can:

Let's discuss each element in our theme.

Top Right Buttons

Save Changes & Restore Defaults Buttons on the top right of the page.

  • Save Changes: After selecting your options from the theme options panel click this button to save the changes.
  • Restore Defaults: When you click this button, a message will appear to you, choose OK and hit the save changes button to reset the theme options to their default values or cancel this action by clicking on cancel button.

General Settings

Property Description
One-Click Install Demo Data By clicking this button a new message will appear to confirm if you want to import the demo data which will install some demo pages, posts, menus etc...
Custom CSS Here You can add Custom CSS Code that will be applied on the front page.
Custom Javascript Here You can add Custom JS Code that will be applied on the front page.
Tags Limit Control the Number of tags that will be displayed in tags widgets.
Twitter API Config Will be Explained Later in the configurations section.
Google Analytics - Tracking Code Copy and paste your google analytics code here and it will be inserted automatically in your page footer.
Search Page Settings Choose How you want to show Search results page (Without Side Bar Or Left, Right Side Bar).
Contact Details This block contains your address, Phone number and your Email that will be shown in: top bar contact or in footer contact widget.
Twitter API Config To change the twitter api to yours, you see 3 inputs: Twitter usename: put yours, Widget ID: you have to register a widget on twitter by going to This Link then after finishing, copy the output and paste it in a new text file, find "data-widget-id" copy it's value and paste it in Widget ID, Tweets Limit: type the number of tweets to be shown in this widget.
Authors Page Settings This setting is for the Author's details page that can be found in this link: http://YOUR-DOMAIN/author/USER-NAME/, You can show hide author information, posts by author, and the way to display the author's posts (Large image, Small image, Grid, Masonry and Timeline) and even add text or HTML to be shown before and after All authors' pages.

Notice: the text or HTML content before and after author's content will be applied on all authors pages not only one author's page.

Top Bar Settings

Property Description
Top Bar Settings

These settings let you Show / Hide top bar and also choose what to show on the left and right sides of the top bar on your site.

  • Top bar left content
    • Social Icons: Displays social icons with links to your social media pages on left side.
    • Contact Info: Address, email address will be shown on the left of top bar on left side.
    • Top Bar Menu Links: Displays a menu, to show it, go to Appearance, then menus and select Top bar menu then add menu items to it (this will be shown on left side).
    • Login / Register Links: Displays a login / register links and welcome to guest on left side.
    • Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language.
    • Text or HTML: Adds whatever text or HTML code you want that will appear on left side.
    • Empty ( No Content ):Leave left side empty without content.
  • Top bar Center content
    • Social Icons: Displays social icons with links to your social media pages on Center side.
    • Contact Info: Address, email address will be shown on the left of top bar on Center side.
    • Top Bar Menu Links: Displays a menu, to show it, go to Appearance, then menus and select Top bar menu then add menu items to it (this will be shown on Center side).
    • Login / Register Links: Displays a login / register links and welcome to guest on Center side.
    • Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language.
    • Text or HTML: Adds whatever text or HTML code you want that will appear on Center side.
    • Empty ( No Content ):Leave Center side empty without content.
  • Top bar Right content
    • Social Icons: Displays social icons with links to your social media pages on right side.
    • Contact Info: Address, email address will be shown on the left of top bar on right side.
    • Top Bar Menu Links: Displays a menu, to show it, go to Appearance, then menus and select Top bar menu then add menu items to it (this will be shown on right side).
    • Login / Register Links: Displays a login / register links and welcome to guest on right side.
    • Language Switcher (WPML): WPML language switcher menu enables user to choose his prefered language.
    • Text or HTML: Adds whatever text or HTML code you want that will appear on right side.
    • Empty ( No Content ):Leave right side empty without content.
  • Show Shopping Cart: Select this option to show the shopping cart in the top bar.
  • Cart Position: choose to put the shopping cart on left or right in the top bar.
Top Bar Styling
  • Top Bar background color: Choose your new custom background color from the color picker.
  • Background Image: Select an image from the uploader or insert an image url to use for the top bar background image.
  • 100% Background Image: This option lets you choose if the background will fit the container width and height or not.
  • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.
  • Top Bar color: Colorizing the text in the top bar.
  • Top Bar Icons color: Colorizing the icons in the top bar.

Header Settings

Property Description
Header Layouts This option enables you to select header style from the 17 available header styles, just click on the image of the header you want and then hit the save changes button.
Header Styling

These settings let you choose the header options on your site.

  • Main Menu Effect: Choose the animation that will show up the sub menu of the Main menu items.
  • Sub Menu Color: Choose from the 3 pre-defined sub menu colors.
  • Background color: Choose your new custom background color from the color picker.
  • Background Image: Select an image from the uploader or insert an image url to use for the header background image.
  • 100% Background Image: This option lets you choose if the background will fit the container width and height or not.
  • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.
  • Links color: Choose your new custom color for the menu links from the color picker.
  • Menu Icons color: Choose your new custom color for the menu icons from the color picker.
  • Show Search Box: Choose to show / hide the search box beside top menu.
  • Show Cart Box: Choose to show / hide the cart box beside top menu.
  • Header Banner Image: This option is only available in bannered header, and lets you upload Ads image to be shown in the top of the page (baside the logo).
  • Header Banner Link: Ads link to be set on the header bannered banner image.
Logo settings
  • Site Title: Choose your new custom background color from the color picker.
  • Logo Font Family: Select an image from the uploader or insert an image url to use for the top bar background image.
  • Logo Font Size: This option lets you choose if the background will fit the container width and height or not.
  • Logo Font Weight: Colorizing the line separators between texts or links in the top bar.
  • Logo image: Colorizing the text in the top bar.
Slogan settings
  • Site Slogan: Choose your new custom background color from the color picker.
  • Slogan Font Family: Select an image from the uploader or insert an image url to use for the top bar background image.
  • Slogan Font Size: This option lets you choose if the background will fit the container width and height or not.
  • Slogan Font Weight: Colorizing the line separators between texts or links in the top bar.
Sticky Header settings
  • Enable Sticky Header: Lets you choose Enable / Disable Sticky header.
  • Background color: Choose your new custom background color from the color picker.
  • Background Opacity: Range fron 0 to 1 to the background transparency.
  • Text Color: Choose your new custom color for the sticky header links from the color picker.

Appearance

Property Description
General options
  • Responsive Layout: if Enabled the responsive design features will be activated. If unselected then the fixed layout is used.
  • Content Width: if not responsive layout type here the main container width in (px) or (%) etc... and this will apply the fixed layout.
  • Favicon This is the Favicon site identity that appears on the top left of the browser's address bar, it is preferred to upload a file with .ico extension with size 16pxx16px. Learn more.
  • Page Transitions Enable / disable Page Transitions.
  • animation In: choose how the page transition (IN) animation.
  • animation Out: choose how the page transition (Out) animation.
Layout options
  • Choose layout: Choose the Wide or Boxed Layout of your site.
  • Choose Shape: Choose your prefered shape from 8 available shapes.
  • Body Background color: Choose your new body custom background color from the color picker.
  • Body Font color: Choose your new custom body font (text) color from the color picker.
  • Use patterns ?: if enabled a Custom body pattern background image will be used.
  • Pattern Background Image: Select an image from the available 10 patterns to use for the body background image.
  • Upload Background Image: Select an image from the uploader or insert an image url to use for the body background image.
  • Fixed Background: if enabled the body background image will be fixed with page scroll down.
  • 100% Background Image: This option lets you choose if the background will fit the container width and height or not.
  • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.

Page Titles

Property Description
  • Page Title Style: Choose from the available 10 page title styles.
  • Custom Height: type the custom page title height in px or em.
  • Page Title icon: Select page title icon from the popup to be shown in the page title block.
Custom Page Title Background
  • Custom Page Title Background?: if enabled the page title will display a custom background image from below.
  • Background Image: Select an image from the uploader or insert an image url to use for the page title background image.
  • Parallax Background: if enabled the body background image will be in parallax effect with page scroll down.
  • 100% Background Image: This option lets you choose if the background will fit the container width and height or not.
  • Background repeat: This option lets you choose if the background will repeat horizontally or vertically or both or no repeat at all.

Colors

Property Description
Theme Color

Select the theme color that will be applied on all elements of your site. (Light & Dark theme colors)

Predefined Color Schemes
  • 13 Predefined skin colors choose the one from existing skin files to be applied on all colored elements on your site.
  • Last choice is CUSTOM COLORS: Choose your new custom skin color from the color picker..

Typography

Property Description
Body Typography

Select the BODY font family from the font selector and also select font size, font weight and line height of all body elements EXCEPT:

The Menu typography and The Headings typography are not affected by this option because they have their own settings.

Menu Typography

Select the Menu font family from the font selector and also select font size, font weight and line height of menu items EXCEPT:

Headings Typography

Select the Headings font family from the font selector and also select font size, font weight and line height of all Headings elements EXCEPT:

Blog options

Property Description
Blog listing page settings
  • Blog Listing Style: Select your prefered blog posts listing style and they are:
    1. Large image.
    2. Small image.
    3. Timeline.
    4. Masonry.
    5. Grid.
  • Blog Sidebar: Select how the layout will look (With right sidebar or left sidebar or witout sidebar).
  • Blog Featured Image Size: Select what size you prefere from the pre-defined sizes.
  • Excerpt Length: the text length that appears in the posts list description.
  • Pager Type: We have 3 pager types (Numeric + Navigation pager and Older Newer page or Load more pager).
  • Pager Style: Numeric pager have 6 styles that you can choose from them the one suits you.
  • Pager Position: control the pager position (Left, Right and Center position).
Single blog post page settings
  • Single Post Sidebar: Select how the layout will look (With right sidebar or left sidebar or witout sidebar).
  • Show Post Image: if enabled the post details page will show the post image.
  • Show Title: if enabled the post details page will show the title.
  • Show Post Icon: if enabled the post details page will show the Post Icon.
  • Blog Single Featured Image Size: Select what size you prefere from the pre-defined sizes.
  • Show Date: if enabled the post details page will show the date.
  • Show By Author: if enabled the post details page will show the author.
  • Show Category: if enabled the post details page will show the post category.
  • Show Post Content: if enabled the post details page will show the post content.
  • Show Tags: if enabled the post details page will show the tags.
  • Show Post navigation: if enabled the post details page will show the next post, previous post links navigation.
  • Show Comments: if enabled the post details page will show the post comments.
  • Show Related Posts: if enabled the post details page will show the related posts block.
Share post settings
  • Show Social Sharing options: if enabled the post details page will show the share buttons.
  • Show Facebook: if enabled the post details page will show the facebook button.
  • Show Twitter: if enabled the post details page will show the Twitter button.
  • Show Google Plus: if enabled the post details page will show the Google Plus button.
  • Show LinkedIn: if enabled the post details page will show the LinkedIn button.
  • Show Pinterest: if enabled the post details page will show the Pinterest button.
  • Show Xing: if enabled the post details page will show the Xing button.
Authors Page Settings
  • This setting is for the Author's details page that can be found in this link: http://YOUR-DOMAIN/author/USER-NAME/, You can show hide author information, posts by author, and the way to display the author's posts (Large image, Small image, Grid, Masonry and Timeline) and even add text or HTML to be shown before and after All authors' pages.

    Notice: the text or HTML content before and after author's content will be applied on all authors pages not only one author's page.

Sidebars

SuperFine Comes with Unlimited SideBars Feature that enables you to add unlimited numbers of side bars in your wordpress site.

to do this click on add sidebar, a new textbox will appear, then add your sidebar name and hit save changes button.

Social icons

SuperFine Comes with Unlimited SOCIAL ICONS Feature that enables you to add unlimited numbers of social icons in your wordpress site.

to do this click on add Social Icon, a new icon select, textbox for title and link will appear, Also you can drag and drop social icons to re-order them as you wish, then hit save changes button.

Project Page Settings

Property Description
  • Show Project Image: if enabled the project details page will show the project image.
  • Show Date: if enabled the project details page will show the date.
  • Show By Author: if enabled the project details page will show the author.
  • Show Category: if enabled the project details page will show the project category.
  • Show Post Content: if enabled the project details page will show the project content.
  • Show Tags: if enabled the project details page will show the tags.
  • Show Related Projects: if enabled the project details page will show the related projects block.
Share Project settings
  • Show Social Sharing options: if enabled the project details page will show the share buttons.
  • Show Facebook: if enabled the project details page will show the facebook button.
  • Show Twitter: if enabled the project details page will show the Twitter button.
  • Show Google Plus: if enabled the project details page will show the Google Plus button.
  • Show LinkedIn: if enabled the project details page will show the LinkedIn button.
  • Show Pinterest: if enabled the project details page will show the Pinterest button.
  • Show Xing: if enabled the project details page will show the Xing button.
Archive settings
  • Archive & Tags Style: Choose the way that the projects archive and tags listing page will appear (Grid or List view).

WooCommerce

Property Description
  • Show Side Bar: In the shop pages select to show / hide the shop sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
  • Products Columns: Number of products columns per row.
  • Pager Style: Select from 6 available styles the one suits you.
  • Pager Position: control the pager position (Left, Right and Center position).
Single Product page settings
  • Show Side Bar ? In the product page select to show / hide the shop sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
Related Products settings
  • Show Related Products ? In the product page select to show / hide the Related Products block.
  • Related Products Per Page: How many related products will be shown in the single product page.
  • Related Products Columns: Number of Related Products columns per row.

BBPress (Forums)

  • Show Side Bar: In the shop pages select to show / hide the forums sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .
  • Pager Style: Select from 6 available styles the one suits you.
  • Pager Position: control the pager position (Left, Right and Center position).
  • Show Welcome message: Show / Hide welcome message on the top of the forum index page.
  • Welcome Message: Type the text that appears in the welcome message on the top of the forum index page.

BuddyPress

  • Show Side Bar: In the shop pages select to show / hide the buddypress sidebar.
  • Sidebar Position: select sidebar position ( Right sidebar or left sidebar or witout sidebar) .

Contact Details

Property Description
  • Address Title: Type here the address title that will appear at the right side of the Address field.
  • Address: Type here your address.
  • Show Address on top bar info: Show / Hide address on the top bar info.
  • Phone Title: Type here the phone title that will appear at the right side of the Phone field.
  • Phone Number: Show / Hide Phone Number on the top bar info.
  • Show Phone on top bar info: Show / Hide Phone on the top bar info.
  • Email Title: Type here the Email title that will appear at the right side of the Email field.
  • Email Address: Show / Hide Email on the top bar info.
  • Show Email on top bar info: Show / Hide Email on the top bar info.

Coming Soon Settings

Property Description
Page Settings
  • Enable Maintenace Mode: If YES the site will be closed except for admins (Maintainace Mode Enabled).
  • Large Heading : Large Welcome heading text will that will be shown on the top of the content.
  • Large Heading Color : Choose a solid color for the coming soon Large Heading color.
  • Large Heading 2 : Large Welcome heading 2 text will that will be shown below large heading.
  • Large Heading 2 Color : Choose a solid color for the coming soon Large Heading 2 color.
  • Description: Enter here your description text to tell visitors about your site or any other info.
  • Description Color : Choose a solid color for the coming soon Description color.
  • Show Counter: Show / Hide Count-down timer that tells the visitors about the opening time.
  • Date: Choose your date from the date picker that open by clicking the textbox.
  • Digits Background Image: Select an image or insert an image url to use for the coming soon main digits background.
  • Digits color: Choose a solid color for the coming soon Digits color.
  • Digits Bottom text color: Choose a solid color for the coming soon Digits Bottom text color.
Social icons
  • Show Social Links: Show / Hide the social links under the Counter.
  • Social Links textboxes: In each textbox type your social pages links.
  • Social icons Background color: Choose a solid color for the coming soon Social icons Background color.
  • Social icons Hover Background color: Choose a solid color for the coming soon Social icons Hover Background color.
  • Social icons color: Choose a solid color for the coming soon Social icons color.
  • Social icons Border color: Choose a solid color for the coming soon Social icons Border color.
Coming Soon Styling
  • background color: Choose a solid color for the coming soon main container background.
  • Background Image: Select an image or insert an image url to use for the coming soon main container background..
  • 100% Background Image: Check this box to have the top bar background image display at 100% in width and height and scale according to the browser size..
  • Background repeat: Select how the background image repeats.
  • Fixed Background: Please choose parallax effect for the backgroud.

Import / Export options

Property Description
Export Theme Options
  • Theme options textarea: Here you will find all current theme options saved in this textarea.
  • Download File: By clicking this button you will save the current theme options as a (.txt) file - you will use it in future if you need to return this backup.
Import Theme Options
  • Upload a saved .txt file then click on Import file then all new theme options will be applied.

SuperFine comes with 19 custom shortcodes + the default shortcodes from Visual composer.

to see how to use the default visual composer shortcodes just go to visual composer documentation and follow the steps.

Now we'll see how to use the custom shortcodes

Add New Row

Row Shortcode is default visual composer shortcode but we made some modifications to suit our new design, let's see how to configure it:

When you click add new element, Click on Row then a new element will be now seen in the content area.

Let's Explain the Row Properties in visual composer: As you see the following image , the numbers on each item describes what it do.

Edit the row properties.
Copy row.
Delete row.
Row columns.
Add new element in the row
Edit existing column in this row.
Delete existing column in this row.
Add new element in the row

1) Gereral Row Properties




If Checked the row will take the full page height.
If Checked the row will take full width of the container.
If Checked the row content will be stretched to full width not centered in the page container.
if Checked the row columns will have the same height.
Select the gap between columns.
Select the padding values Top and Bottom for this row. (Normal: 80px, Small: 30px, Medium: 60px, Large: 120px, X-large: 170px,No Padding: 0px )
Assign ID to this Row, This will be required in ONE-PAGE Creation.
Add Extra class name to style this row individually.


2) Design Options




Row Background Color.
Row Background Image.
Row Background repeat options (No repeat, Repeat vertically or horizontally).
Choose if you need the background will be fixed or scroll with mousewheel.
Choose the background position.
This option lets you choose if the background will fit the container width and height or not.
Enable Row Background Image Parallax Effect.
Create Layer over the background image.
The background color of the overlay layer. 
The Overlay transparency level, Value from 0 to 1.


3) Video Background




Upload An Image for video poster cover.
Video in mp4 format you can upload it or type an external link from other url.
Video in webm format you can upload it or type an external link from other url.
Video in ogv format you can upload it or type an external link from other url.
Enable this option to use a YouTube Video.
Type Here the YouTube Video URL.

Column Settings

Column Shortcode is default visual composer shortcode but we made some modifications to suit our new design, let's see how to configure it:

When you click edit element, a popup window will appear (like the next screenshot), check the next image:




Choose the way to animate this column.
Animation duration in milliseconds.
Animation Delay in milliseconds till this column appears.

Heading 2

When you click add new Heading 2, a popup window will appear (like the next screenshot), check the next image:




Choose Heading Style from 11 predefined styles.
If checked a new tab with icons select will be shown and this will Show an icon with your heading element.
Choose the way to animate this heading.
Add Extra class name to style this Heading individually.
Heading Title Text.
Heading Custom Color from color chooser.
Heading Font weight.
Heading Font Size.
Heading Font Style, If check the Heading will be in uppercase style (Ex: HEADING).
Sub Heading Text.
Sub Heading Font weight.
Sub Heading Font Style, If check the Heading will be in uppercase style (Ex: SUB HEADING).
Sub Heading Font Size.

Icon Box

When you click add new icon box, a popup window will appear and have some properties that can be:

1) General
  1. Box Style: Select box style from available 10 box styles.
  2. Use Icon ?: If checked a new tab with icons select will be shown and this will Show an icon with your Icon box element.
  3. Box Title: Enter text for box title.
  4. Title Color: Choose a color for box title from color picker.
  5. Box Content: Enter description text for box content.
  6. CSS Animation: Select animation type, delay and duration.
2) Icon
  • Icon Library: Select your icon from 6 icons Libraries.
  • Icon: Select your icon from icons chooser.
  • Icon Color: Choose a color for box icon from color picker.
  • Icon Background Color: Choose a Background color for box icon from color picker.
  • Icon Text: This Will replace the icon with your new text.
3) More Link
  1. Show Read More Link ? Show / Hide Read More Link in the icon box element.
  2. Read More Text Enter text for read more box content.
  3. Box Link Enter libk for read more box content.
  4. Background Color: Choose a Background color for read more link.
  5. Color: Choose a color for read more font color.

Testimonials

When you click add new Testimonials, a popup window will appear (like the next screenshot), check the next image:

Click Add element and a new popup will appear with only one child element in it ( Testimonial BlockQuote ), click it and the properties will appear:



Author name
Slogan or Company name for this author
Upload or select an existing image for this author.
Text (BlockQuote) by this author

Fun Staff

When you click add new Fun Staff Row, a popup window will appear (like the next screenshot), check the next image:

Click Add element and a new popup will appear with only one child element in it ( Fun Staff ), click it and the properties will appear:




Title for this fun staff item.
Fun Staff item Fone Color.
Use Icon: If checked a new tab with icons select will be shown and this will Show an icon with your Fun staff element..
Item Value in numbers that will be aniamted.
Enabling This option will apply animation on numbers.
Item Value font color.
Icon Library: Select your icon from 6 icons Libraries.
Icon: Select your icon from icons chooser.
Type Here Icon font Size (Ex: 20px).
Choose Icon Style (Circle Or Shape).
Responsibe for the Circle Icon Styling.
Also Responsibe for the Circle Icon Styling.
Icon Font Color.

Breaking News

  1. Title: Enter the title for this widget.
  2. Category: Select the posts category that will be shown.

Blog Shortcode

  1. Category: Select the posts category that will be shown.
  2. Blog Style: Select how the blog listing style would be : (Large Image, Small Image, Grid, Masonry and TimeLine).
  3. Pager Type: Select the pager type (Numeric, Older-Newer and Load More).
  4. Pager Style: Select the pager style from the 7 predefined styles.

Recent Posts

  1. Style: Select the recent posts style from 5 predefined styles available.
  2. Category: Select the posts category that will be shown.
  3. Carousel ?: If selected a new tab with Carusel will appear to select the carousel option from.
  4. Number of posts: The max. Number of posts that will be retrieved from database and shown in this shortcode.
  5. Non Carousel Columns: Select the Number of columns per row in case it is not carousel.

Posts From Category

Hint This shortcode is specially designed for the news magazine page, but if you need to use it in other page or for other purpose it is Ok.

When you click add Posts From Category, a popup window will appear and have some properties that can be:

  • Category: Select the posts category that will be shown.
  • Number of posts: The max. Number of posts that will be retrieved from database and shown in this shortcode.

News In Pictures

Hint This shortcode is specially designed for the news magazine page, but if you need to use it in other page or for other purpose it is Ok.

When you click add News In Pictures, a popup window will appear and have some properties that can be:

  1. Item Title: Enter the title for this box.
  2. Category: Select the posts category that will be shown.

Clients

When you click add new Clients, a popup window will appear (like the next screenshot), check the next image:

Click Add element and a new popup will appear with only one child element in it ( Client ), click it and the properties will appear:



Upload or select an existing Client image.
Link for the client page

Team Member

When you click add new Team Member, a popup window will appear (like the next screenshot), check the next image:




Team Box Style: Select style from 5 predefined styles.
Upload or select an existing Member image.
Type Member name.
Type Member position.
Type Member Description text.

Features

  1. Style: Select the feature style from 3 predefined styles available.
  2. Image: Upload or select an existing Feature image.
  3. Title: Enter feature title.
  4. Content: Enter feature content.
  5. Show Read More Link ? Show / Hide Read more link
  6. Box Link Enter Read more link

Vertical Carousel

  1. As in Testimonials and clients We'll Add a new Carousel Container then add inside it New Slides and the slide fields Are:
  2. Image: Upload or select an existing Slide image.
  3. Content: Enter Slide content.

Google Map

  1. Zoom: Select the zoom value for google map.
  2. Height: Select the height of the map.
  3. Disable Mouse Wheel: If selected This will disable mouse scroll zoom in on the google map.
  4. Latitude: The Latitude value.
  5. Longitude: The Longitude value.
  6. Headquarter: Type here more details about the location on google map.

Counter

When you click add new Counter, a popup window will appear and have some properties that can be:

1) General
  1. Item Title: Enter text for item title.
  2. Title Color: select title color from color chooser.
  3. Title Size: Type title font size in px or em.
  4. Description: Enter item description text.
  5. Description Color: Choose description color from color picker.
  6. Use Icon ? If checked a new tab with icons select will be shown and this will Show an icon with your counter element.
2) Counter Values
  1. From: start number.
  2. To: end number.
  3. Start After: Enter the delay time that the numbers begin counting after it ( in milliseconds ).
  4. Numbers Color: select numbers color from color chooser.
  5. Numbers Size: Type numbers font size in px or em.
3) Icon
  1. Icon Library: Select your icon from 6 icons Libraries.
  2. Icon: Select your icon from icons chooser.
  3. Icon Size: Type icon size in px or em.
  4. Icon Color: Select your icon color from color chooser.
4) General
  1. Box Shape: Select your prefered box shape from the 9 available shapes.
  2. Box Background Color: Choose box background color from color picker.
  3. CSS Animation: Select how the box will animate.

Counter 2

When you click add new Counter 2 without icon, a popup window will appear and have some properties that can be:

1) General
  1. Text Before: Enter text before the numbers.
  2. Text After: Enter text for after the numbers.
  3. Text Color: select text color from color chooser.
  4. Text Size: Type Text font size in px or em.
2) Counter Values
  1. From: start number.
  2. To: end number.
  3. Start After: Enter the delay time that the numbers begin counting after it ( in milliseconds ).
  4. Numbers Color: select numbers color from color chooser.
  5. Numbers Size: Type numbers font size in px or em.

Dividers

When you click add new Divider, a popup window will appear and have some properties that can be:

  • Divider Style: Select the divider style from 10 available styles.
  • Use Icon ? If checked a new tab with icons select will be shown and this will Show an icon with your counter element.
  • CSS Animation: Select animation type, delay and duration.

Camera Slideshow

When you click add new Camer Slideshow, a popup window will appear (like the next screenshot), check the next image:




Height: Set Slider Height in px Ex: 200px.
Select Slide Animation.
Select Preloader Style.
If Preloader is BAR -- This indicates the bar direction animation.
If Preloader is BAR -- This indicates the bar position.
Enable Bullets pagination.
If Enabled the thumbnails will be shown below the slider.
Right and left arrows navigation.
Play and Pause buttons for slideshow.


When you click add new SLIDE, a popup window will appear (like the next screenshot), check the next image:




Slide Title that will be shown in the black backgrounded caption.
This is the slide link.
Upload or Select an existing Thumbnail (Prefered to be in 100px wide x 75px height).
Upload or Select an existing Large Image for the main slide image.

Social Icons

  1. As in Testimonials, Vertical Slider and clients We'll Add a new Social Icons Container then add inside it New Social Icon and the fields Are:
  2. Use Icon ? If checked a new tab with icons select will be shown and this will Show an icon with your Social Icon element.
  3. Icon Title: This is the title of the new added icon.
  4. Icon Link: Link for the icon.

Notic: These options are applied individually on the page you are editing only, so this can give the page a custom options such as hiding header, footer, customizing the page title for this page only. As a result for that, you can build all your site pages and posts with different styles.

Option Description
Page Title Settings As Explained in the theme options you can do all above steps in this section, you can hide page title, add custom background image, custom icon, set different page title style from the 10 available, set custom height, custon colors and also set custom video background, and too many other options.
Header Settings Show / Hide header and top bar, set different header style.
Footer Settings Show / Hide Footer, set different footer style.

To Create a One Page you have two important tasks :

1) Menu configuration

Important: All links you created in this menu we'll create a Rows in the page with number equals to these menu items number.




2) Page configuration