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
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
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; }
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. |
Theme/superfine.zip
(Root file to install wordpress theme)Theme/superfine.zip
and extract it.If you want further notice about SuperFine Theme updates, then please follows us on twitter or constantly visit our support Team.
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-...
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:
As you see in the Page Template, you can see that there are 5 custom templates:
As you see in the Page Layout Mode, you can see that there are 4 Layout Modes:
As you see in the Select Menu, you can Choose a different menu for this page only.
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.
Save Changes & Restore Defaults Buttons on the top right of the page.
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. |
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 Styling |
|
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.
|
Logo settings |
|
Slogan settings |
|
Sticky Header settings |
|
Property | Description |
---|---|
General options |
|
Layout options |
|
Property | Description |
---|---|
|
|
Custom Page Title Background |
|
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 |
|
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: |
Property | Description |
---|---|
Blog listing page settings |
|
Single blog post page settings |
|
Share post settings |
|
Authors Page Settings |
|
to do this click on add sidebar, a new textbox will appear, then add your sidebar name and hit save changes button.
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.
Property | Description |
---|---|
|
|
Share Project settings |
|
Archive settings |
|
Property | Description |
---|---|
|
|
Single Product page settings |
|
Related Products settings |
|
Property | Description |
---|---|
|
Property | Description |
---|---|
Page Settings |
|
Social icons |
|
Coming Soon Styling |
|
Property | Description |
---|---|
Export Theme Options |
|
Import Theme Options |
|
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
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
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.
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.
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 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.
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.
When you click add new icon box, a popup window will appear and have some properties that can be:
Box Style:
Select box style from available 10 box styles.Use Icon ?:
If checked a new tab with icons select will be shown and this will Show an icon with your Icon box element.Box Title:
Enter text for box title.Title Color:
Choose a color for box title from color picker.Box Content:
Enter description text for box content.CSS Animation:
Select animation type, delay and duration.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.Show Read More Link ?
Show / Hide Read More Link in the icon box element.Read More Text
Enter text for read more box content.Box Link
Enter libk for read more box content.Background Color:
Choose a Background color for read more link.Color:
Choose a color for read more font color.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
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.
Title:
Enter the title for this widget.Category:
Select the posts category that will be shown.Category:
Select the posts category that will be shown.Blog Style:
Select how the blog listing style would be : (Large Image, Small Image, Grid, Masonry and TimeLine).Pager Type:
Select the pager type (Numeric, Older-Newer and Load More).Pager Style:
Select the pager style from the 7 predefined styles.Style:
Select the recent posts style from 5 predefined styles available.Category:
Select the posts category that will be shown.Carousel ?:
If selected a new tab with Carusel will appear to select the carousel option from.Number of posts:
The max. Number of posts that will be retrieved from database and shown in this shortcode.Non Carousel Columns:
Select the Number of columns per row in case it is not carousel.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.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:
Item Title:
Enter the title for this box.Category:
Select the posts category that will be shown.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
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.
Style:
Select the feature style from 3 predefined styles available.Image:
Upload or select an existing Feature image.Title:
Enter feature title.Content:
Enter feature content.Show Read More Link ?
Show / Hide Read more linkBox Link
Enter Read more linkImage:
Upload or select an existing Slide image.Content:
Enter Slide content.Zoom:
Select the zoom value for google map.Height:
Select the height of the map.Disable Mouse Wheel:
If selected This will disable mouse scroll zoom in on the google map.Latitude:
The Latitude value.Longitude:
The Longitude value.Headquarter:
Type here more details about the location on google map.When you click add new Counter, a popup window will appear and have some properties that can be:
Item Title:
Enter text for item title.Title Color:
select title color from color chooser.Title Size:
Type title font size in px or em.Description:
Enter item description text.Description Color:
Choose description color from color picker.Use Icon ?
If checked a new tab with icons select will be shown and this will Show an icon with your counter element.From:
start number.To:
end number.Start After:
Enter the delay time that the numbers begin counting after it ( in milliseconds ).Numbers Color:
select numbers color from color chooser.Numbers Size:
Type numbers font size in px or em.Icon Library:
Select your icon from 6 icons Libraries.Icon:
Select your icon from icons chooser.Icon Size:
Type icon size in px or em.Icon Color:
Select your icon color from color chooser.Box Shape:
Select your prefered box shape from the 9 available shapes.Box Background Color:
Choose box background color from color picker.CSS Animation:
Select how the box will animate.When you click add new Counter 2 without icon, a popup window will appear and have some properties that can be:
Text Before:
Enter text before the numbers.Text After:
Enter text for after the numbers.Text Color:
select text color from color chooser.Text Size:
Type Text font size in px or em.From:
start number.To:
end number.Start After:
Enter the delay time that the numbers begin counting after it ( in milliseconds ).Numbers Color:
select numbers color from color chooser.Numbers Size:
Type numbers font size in px or em.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.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.
Use Icon ?
If checked a new tab with icons select will be shown and this will Show an icon with your Social Icon element.Icon Title:
This is the title of the new added icon.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 :
Important: All links you created in this menu we'll create a Rows in the page with number equals to these menu items number.