Introduction

Dear customer,

Thank you for purchasing Spotlight! We are really glad that you chose our theme for your website, and we’ll do our best for you to be satisfied with your choice. Before you get started with Spotlight, please read the Documentation first. We have done our best to include all you need for easy and successful work with Spotlight.

Please, note that Spotlight can be used with WordPress only. We assume you have up and running WordPress installation. To learn more about WordPress and how to use it, read this article.

Also, one of the fist things I suggest for you to explore is a very useful tool called Firebug.

If this one doesn’t help too, you can always contact our technical support; our support operators are always glad to help you. We hope you’ll like our Spotlight theme.

WordPress Information

To install the theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in WordPress Codex or you can watch the Instructional Video created by Woo Themes. Below are all the useful links where you can get WordPress information.

Requirements for Spotlight

To use this theme you must be running WordPress 4.0 or higher, PHP5 or higher, and mysql 5 or higher. Please contact your web hosting service provider to be sure your server complies with the requirements above. To safeguard your website always use secure passwords and the latest version of Wordpress and plugins.

We have tested the theme in all popular browsers, such as Safari, Mozilla Firefox, Chrome etc. Spotlight is fully compatible with different operating systems, such as Mac, Linux, and Windows, as well as popular mobile gadgets with iOS, Android, and BlackBerry OS.

Be sure to check php upload_max_filesize and post_max_size is 32M or higher. If you are running shared web hosting you should contact your web hosting service provider to find more information about that. If you are running unmanaged dedicated server or VPS you should check your php.ini file. Alternatively you can edit .htaccess file in the root of your website and add the following values:

php_value post_max_size 32M
php_value upload_max_filesize 32M
Setting these values will ensure you wont get an error reporting that your upload and post memmory limit is too low.

For Spotlight, we recommend to use services of such hosting companies, as Mediatemple, WpEngine.com, and A Small Orange.

What’s included

Downloading The Main Files Gives You All The Content Listed Below.

  • spotlight.zip – contains Greko WordPress theme
  • Documentation Folder – contains the theme documentation.
  • Plugins - contains the plugins what included to the theme.
  • Demo-content folder - contains files for import demo data to our theme after installation.

Downloading the Installable WordPress Theme Only Gives You The spotlight.zip File, you can install them without unpacking.

  • spotlight.zip – this is the parent WordPress theme, install this via WordPress. If you wish to install it via FTP, you need to unzip it first and then use the extracted folder.

Free Support

We offer free technical support for all our themes. It should be mentioned that the service is limited by issues of theme’s use, settings, problems, and bugs etc. However, we do not provide any support for the theme’s code customization, as well as for third party plug-ins.

Our support operators respond to customers’ queries everyday, from Mon till Fri, 10.00 – 19.00 (CET).

How to use our Support System:

  • Follow the link to our Support System;
  • Enter your purchase key and register in the system;
  • To avoid confusing, please use your own ThemeForest login for Support System;
  • Fill the ticket form out;
  • For correct work of system, you should not switch cookies in your browser off.
  • We may also need temporary admin access to your Wordpress installation and FTP server access, please prepare it beforehand to get faster response

How to find a purchase key:

  • Open the ‘downloads’ tab in your ThemeForest account;
  • Find our theme in the list of products;
  • Click ‘download’ button, and select “license sertificate & purchase code” in the drop-down menu.

Support Policy:

We do our best to respond to your questions within 5-10 hours. However, if any delay occurs it doesn’t mean that we forgot about you. Some of the issues require extra testing and analyzing. We may also need temporary admin access to your Wordpress installation and FTP server access, please prepare the beforehand to get faster response.

  • Please, note! We do not process queries if you do not have a purchase key.
  • Item support does not include:
    • Customization and installation services,
    • Support for third party software and plug-ins.

If you have complaints about the work of our support staff, please inform us about your issue on our email address support@themerex.net.

Installation

Getting Started

To install "Spotlight" theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - http://codex.wordpress.org/Installing_WordPress

Update WordPress: To ensure a positive user experience, we highly recommend you update your WordPress to version 3.9+. This will help to ensure that you are able to utilize all of the latest features of WordPress.

Extract the zipped package downloaded from ThemeForest to your desktop, in the extracted package you will find spotlight.zip file.

You can install the theme in two ways:

  • via FTP:
    1. Log into your web server with FTP client software
    2. Unzip the spotlight.zip file and ONLY use the extracted /Spotlight theme folder
    3. Upload the extracted /Spotlight theme folder into /wp-content/themes/ folder
    4. Activate the newly installed theme. Go to Appearance > Themes and activate it.
  • via WordPress:
    1. Login to admin panel.
    2. Go to Appearance - Themes and click on the Add New button.
    3. Choose Upload theme option. Click on Browse...(Choose file in Safari/Chrome), select the "spotlight.zip" and click in Install Now button.
    4. After successfull installation click on Activate or go to Appearance - Themes and click on Activate to activate the newly installed theme.
    5. After the theme's activation you will be prompted to install recommended plugins: Visual Composer, Revolution Slider, WPML.( All these plugins are included into the theme's archive or optionally can be installed from the WordPress.org repository. The theme can function without any of these plugins. But if you want your website look precisely as at demo page you have to install all recommended plugins and import demo content. This is a good idea if you are building your website from the scratch. However, if you have existing website you should be very careful with plugin installation and importing dummy data, this may affect your site content and structure. Please read the Demo Content article for details.)
    6. A new menu item Appearance -> ThemeRex Options. will appear.

If you try to install the wrong files you will get missing styles.css file error. This is the most frequent error meaning you are trying to install incorrect package.

Plugins Installation

In order to make the theme looks exactly as at demo page you need to install recommended plugins. Click on Begin installing plugins link.

You will be redirected to plugins installation page. Check all listed plugins, select Install option and click on Apply button. Installation may take few minutes, please ba patient and do not refresh the page.

Theme Update

IMPORTANT: Before you go ahead with the update please check theme changelog and make sure you backup your old theme folder. Download it to your computer locally.

It is the best practice to backup both your files and database regulary and especially before making some serious updates. We recommend using free backup plugins for WordPress like WPOnlineBackup

Update Option 1. Update using WordPress uploader

  1. Log into your Themeforest account and navigate to your downloads tab. Find the theme and download “Installable WordPress file”.

  2. Log into your wordPress website and go to Appearance -> Themes
  3. Activate a different theme. Delete the previous version of Spotlight and re-upload the new Wordpress Installable files that you have downloaded from Themeforest in the 1st step.
  4. Once it uploads, choose to activate the theme.
  5. Update the included plugins if you see a notification message letting you know the plugins have a new version.

Update Option 2. Update using FTP client

  1. Log into your Themeforest account and get the last version of the theme as described above.
  2. Connect to your server using desktop client software(we recommend CyberDuck and Filezilla)
  3. Change directory to /wp-content/themes
  4. Remove existing folder with old theme files
  5. Unpack theme installable files downloaded from themeforest and upload to themes folder
  6. Update the included plugins if you see a notification message letting you know the plugins have a new version.

What you start from

Now, you have installed and activated the theme 'Spotlight'. What's next?

After theme activation and demo content import we are ready to get started with basic theme settings like site title, tagline, logo, favicon etc.

To change your site title and tagline go to Settings -> General Please notice, these parameters are important for search engines. For advanced SEO management we recommend installing 3rd parties plugins like All In One SEO pack

Another great idea may be setting custom permalinks structure to make them more SEO friendly and human readable. Go to Settings -> Permalinks and make changes according to example below.

Now let's navigate to Appearance -> Theme Options. It gives you control over most of theme settings from one place. There are quite a lot of parameters here, but luckily the majority of them have default values that suit most of the users. We will take a really closer look at them a bit later. Now just a few words about how it all works to give you an idea of our Settings Inheritance System

IMPORTANT: One of the most important theme features is Settings Inheritance System. You can flexibly control the appearance and behaviour of the whole website and individual pages, posts and categories. You can set individual display styles, sliders, output settings of page components (posts), and many more for the required category or for each post separately. In a couple of words you can set global styles and then change them for each page/post/category individually. These changes will override global styles affecting selected elements and their descendant elements.

Then let's configure the parametres required, in the menu Appearance -> ThemeRex Options. There are quite a lot of them, but almost all of the parameters have default settings that will suit most of the users. Therefore, you can start with uploading a logo and favicon for your website, entering your personal data and saving the settings. All other parameters can be set up later on.

How is works

First, you specify the desired options in the menu Appearance -> ThemeRex Options. These settings will be default for all categories, pages, and posts of the theme:

Most of the theme settings are available for overriding in the categories, pages, and posts. For example, you need to change style of blog stream page for category that contains Portfolio type posts:

Now all the posts in this category and its subcategories will be displayed in the style of "Blog portfolio". Posts of the rest of categories (unless of course they did not ask for individual parameters) will be displayed as shown in ThemeRex Options. By the way, the remaining settings of the category that were not changed (overridden) will also be inherited from the parent ones. If the settings were not changed here too - then from ThemeRex Options.

The inheritance (override) is being completed with configuration of post and / or page. At the bottom of the post editing window (page), in section "Post Options" you can set individual parameters to display the current post (page) to override the settings of the category, to which the post and global settings of the ThemeRex Options belong:

Revolution Slider

The theme comes with premium Revolution slider. For fast start we included sample data, you can find it in /DemoContent folder. To create a copy of original theme slides install Revolution Slider plugin, navigate to Revolution Slider menu, click on Import Slider and select "homepage_slider.zip" file licated in /DemoContent folder. Check this video guiding through dummy data import - Import Video

Homepage

Now, let's proceed to creating our home page. Yes, you got me correctly - creating. You can create as many variants of the main page for your website, as your imagination allows you.

The basic building brick to create the homepage is a shortcode [blogger].

We will offer you our own variant of Homepage in the style of "Spotlight" (like on our demo server). If you like, you may continue designing, and create a lot of your own variants.

Homepage Style "Standard"

The picture below demonstrates the variant of the page we are aiming at:

The algorithm of our actions would be as follows:

  1. Select Pages - Add New and create a new page.
  2. Specify a name for it (e.g. Homepage Standard)
  3. Set the parameters for page display in the Page Options secton:
    • On the tab "General" please set the following parameters:

      - in section "General parameters", find the field "Custom Page Header" and add there the following content:

      [slider engine="swiper" count="3" offset="0" orderby="date" order="desc" controls="yes" pagination="yes" progressbar="yes" caption="yes" height="496"]
      
      [section content_wrap='yes' background_repeat="no-repeat" background_pos_x="center" background_pos_y="center" align="center" text_align="center"]
      	[columns count="3" top='97' bottom='94']
      		[column_item]
      			[title type="4" font_size="20" bottom="3" weight="300" align="center" style="iconed" icon="icon-chat-1" size="large" position="top" background="circle" bd_color="#4f99bc"]Customer Support[	/title]
      			Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.
      		[/column_item]
      		[column_item]
      			[title type="4" font_size="20" bottom="3" weight="300" align="center" style="iconed" icon="icon-doc-inv" size="large" position="top" background="circle" bd_color="#4f99bc"]Well Documented[	/title]
      			Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.
      		[/column_item]
      		[column_item]
      			[title bottom="3" type="4" font_size="20" weight="300" align="center" style="iconed" icon="icon-square19" size="large" position="top" background="circle" bd_color="#4f99bc"]Custom 		Shortcodes[/title]
      			Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.
      		[/column_item]
      	[/columns]
      [/section]
      [section class='responsive_indent' content_wrap='yes' text_align="left" background_color="#dee3eb" background_repeat="repeat" background_pos_x="left" background_pos_y="top"]
      	[title type="2" font_size="42" bottom='46' top='58' weight="100" style="regular" size="medium" position="left" color='#4e5762']About SpotLight[/title]
      	[image align='left' url="http://your_website_url/wp-content/uploads/2014/07/homepage_img_1.png" left="-5" top='10' bottom='81' right='40']
      	
      	[block style="overflow:hidden; width:auto;" text_align="left"]
      	
      		[title type="3" font_size="24" weight="300" style="regular" size="medium" bottom='8' position="left"]Multifunctional theme with many options[/title]
      		
      		<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit.</p>
      		
      		[columns count='2' top='12']
      			[column_item]
      				[title type="4" font_size="20" weight="300" style="iconed" icon="icon-columns" size="medium" position="left"]5 Header Layouts[/title]Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.
      				[title top='15' type="4" font_size="20" weight="300" style="iconed" icon="icon-menu" size="medium" position="left"]5 Header Layouts[/title]Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.
      			[/column_item]
      			[column_item]
      				[title type="4" font_size="20" weight="300" style="iconed" icon="icon-globe-1" size="medium" position="left"]SEO Friendly[/title]Proin gravida nibh vel velit auctor aliquet. Aenean 	sollicitudin, lorem quis bibendum auctor.
      				[title top='15' type="4" font_size="20" weight="300" style="iconed" icon="icon-star-1" size="medium" position="left"]SEO Friendly[/title]Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor.
      			[/column_item]
      		[/columns]
      	[/block]
      [/section]
      
    • The following contents should be added to the section "Custom Page Footer":
      
      [section style='border-top:2px solid #afd4e5; border-bottom:2px solid #afd4e5;' content_wrap="yes" text_align="center" background_color="#4f99bc" background_image="http://your_website_url/wp-content/uploads/2014/07/pattern_1.png" background_repeat="repeat" background_pos_x="left" background_pos_y="top"]
      	[testimonials top='51' bottom='82' height='242' title="Our Happy Customers" style="2" width="817" left="auto" right="auto"]
      		[testimonials_item name="Matt Jefferson" photo="http://your_website_url/wp-content/uploads/2014/06/sc_team_item_1.png"]“No alia tota laboramus quo, pri sale noster offendit ei, agam dolorem conclusionemque quo ut. Natum homero mei ex, eran t erroribus ne est, te velit graeci vivendum vel. Cu eam efficiantur itatem, dipisicing elit, sed do eiusmod tempor incididunt ut labore ”
      		[/testimonials_item]
      	
      		[testimonials_item name="Linda Johnson" photo="http://your_website_url/wp-content/uploads/2014/06/sc_team_item_3.png"]“Ut commodo purus sapien, quis egestas nunc molestie sed. Donec non tempus purus. Nulla pulvinar lobortis mollis. Donec consequat elit a ultricies dictum. Donec semper, eros vitae sagittis dictum, enim enim convallis erat, ac imperdiet enim massa sed eros. In consequat placerat metus et eleifend.”
      		[/testimonials_item]
      		
      		[testimonials_item name="John Doe" photo="http://your_website_url/wp-content/uploads/2014/06/sc_team_item_2.png"]“No alia tota laboramus quo, pri sale noster offendit ei, agam dolorem 	conclusionemque quo ut. Natum homero mei ex, eran t erroribus ne est, te velit graeci vivendum vel. Cu eam efficiantur itatem, dipisicing elit, sed do eiusmod tempor incididunt ut labore ”
      		[/testimonials_item]
      	[/testimonials]
      [/section]
      
      [section content_wrap="no" text_align="center" background_color="#dee3eb" background_repeat="repeat" background_pos_x="left" background_pos_y="top"]
      	[title type="2" font_size="38" color="#4e5762" align="center" style="regular" size="medium" position="left" weight='100' letter_spacing='-1' top='49' bottom='48'][arrow_link url='#' label='SPOTLIGHT - Art to deliver information'][/title]
      [/section]
      
      

      If you did everything right, you should get this:

    • In the tab "Blog", section "Streampage", you should tick Hide (without sidebar) for option Show main sidebar.
    • In the section "Single page", tick NO for options "Show post title"and "Show post info".
  4. Now, we are desinging the body of the page.
    • We place the shortcode [blogger] in the upper part of body section:

      [blogger ids='1092, 1094, 1097' count="3" visible="3" offset="0" top='12' scroll="no" orderby="date" order="desc" style="image_large" dir="horizontal" rating="no" descr="100" link_url="#" link_title='All News' title='Recent Posts']
      

      You may configure the shortcode [blogger] yourself. To do this, you need to select "Blogger" from the shortcode list in the upper part of Body section:

    • In the pop-up window showed up you can set such settings:

      To learn more about parameters of the [blogger] shortocde, please visit this page.

    • You can use the following combination of shortcodes to build the next section of Homepage:

      [divider top="60" bottom="80" type="std"]
      
      [section content_wrap="yes" text_align="left" background_image="http://your_website_url/wp-content/uploads/2014/07/homepage_1_phone_bg.png" background_repeat="no-repeat" background_pos_x="right" background_pos_y="bottom"]
      
      [title type="2" font_size="42" weight="100" style="regular" size="medium" bottom='43' position="left"]Your Article Title Fits Here Perfectly[/title]
      
      [block text_align="left" width="564"]
      	[columns count="2" bottom='28']
      		[column_item]
      			[list style="ul"]
      				[list_item]Clear and clean design[/list_item]
      				[list_item]Retina ready[/list_item]
      				[list_item]Shortcodes design[/list_item]
      				[list_item]Responsive design[/list_item]
      				[list_item]Radipisicing elit, sed do eiusmod[/list_item]
      			[/list]
      		[/column_item]
      		[column_item]
      			[list style="ul"]
      				[list_item]Modern design[/list_item]
      				[list_item]Performance optimizations[/list_item]
      				[list_item]SEO friendly[/list_item]
      				[list_item]Mega menu[/list_item]
      				[list_item]Advanced rating system[/list_item]
      			[/list]
      		[/column_item]
      	[/columns]
      	[button type="square" style="default" size="huge" fullsize="no" color="#4f99bc" link="#" popup="no" bottom='25']Purchase now[/button]
      [/block]
      [/section]
      [divider top="87" bottom="55" type="std"]	
      
    • To build the last section of Homepage, we are going to use the shortcode [blogger]. This time, the shortcode is configured in such a way, that posts displays reviewer's ratings:

      [blogger cat='reviews' title='Most Popular Reviews' count="4" visible="4" bottom="0" offset="0" scroll="no" orderby="date" order="desc" style="image_medium" dir="horizontal" rating="yes" ids='728,736,738,740' descr="0" link_url="#" link_title='All Reviews']
      
  5. You only need to assign the newly created page as Homepage. To do this:
    • Select the menu item Settings - Readings

    • In the filed Front page displays select "A static page (select below)", and in the list "Front page:" choose the page you have created.

Blog

Now, you have finished up the appearance of the homepage of your website. It is time to start a blog.

To use the blog's functionality in our theme, you need create the blog stream page. To do this, you need to:

  • Go to Pages under the WordPress menu and then click on Add New.
  • Put your Title as usual ("Blog streampage" for example)
  • Choose "Blog streampage" as the page's template

  • Publish this page.

IMPORTANT: It was an optional step. Even if you do not create a separate page for your blog stream page - you will still use the correct template to display a list of posts. However, creating a separate page will give you an extra advantage - you can set up individual features for blog streampage (position and type of sidebars, color scheme for each element on the page, etc).

Now, assign the newly created page as "Posts page" (blog streampage). To do this:

  1. Select the menu item Settings - Readings

  2. In the field Front page displays select "A static page (select below)", and in the list "Posts page:" choose the page you have created.

Blog Items

Now you can create blog posts.

  • Go to Posts under the WordPress menu and then click on Add New.
  • Put your Title as usual.
  • Put Content if needed.
  • Select one or more categories to the Categories.

  • Select desired Post Format.

    • Standart - just set the featured image or without featured image.
    • Gallery - Add gallery to the post (Add Media -> Create Gallery). In the blog stream page, slider will be displayed instead of featured image, with images contained in gallery.
    • Video - Add the YouTube or Vimeo video in the post with the shortcode [trex_video].
    • Audio - Add the Audio in the post with the shortcode [audio].
    • Quote - Add text of the quotes, using shortcode [quote]
    • Link - Add a link to the body of the post.
    • Image - posts with post-format image will display only featured image and title in the blog stream page.
    • Status - Add a one-row message to the body of the post.
    • Aside - Add a short message to the body of the post.
    • Chat - Normally, it contains a block of messages - correspondence of two or more people. For pretty formatting, you can use the shortcode [chat]
  • For every post item it is needed to upload an image and to set it as a featured image. Click Set featured image on the right in the Featured Image section:

  • Click Select Files button and select image to upload (the full size image). WordPress will crop the image, depending on which portfolio template you will use.
  • After image was uploaded you need to set this image as featured. Click Use as featured image.

  • IMPORTANT: In the Post Options section, you can flexibly customize the appearance and behavior of each of the post: select and set sidebars and their position (or hide the unnecessary ones), set up the display of different parts of the page and the post (information about the author, related posts , a comment block and many more). There are default setting for each post that are specified in the category to which the post belongs. If the settings are not specified in category - then they are inherited from the overlying category. If there is no settings specified in any of the parental categories - the settings indicated in Appearance -> ThemeRex Options -> Blog will be used.

  • Publish this post.
  • Reviews

    Reviews can be created on the basis of any post of any category. How it works:

    • Appearance -> ThemeRex Options -> Reviews add the required number of rating criteria. These criteria will be available when editing any post in any category. If your website publishes reviews in only one direction (for example, "Movies"), then you may leave it like this.
    • Of course, we understand that to rate different areas (music, movies, technology, etc.) you need a completely different rating criteria. Therefore, you can override the list of criteria in each category. To do this, open Posts - Categories, select a category you need at the bottom , in the section "Custom settings for this category" on the tab Reviews add new criteria for evaluation.

      IMPORTANT: The criteria established for a category is valid for all the posts in this category and sub-categories in it.

    • Now, in any post, you can assess the subject of the article in the section Post Options on the tab Reviews:

    IMPORTANT: If you change the list of categories for the current post, first press "Update" ("Publish" if you save it for the first time) and then proceed with the installation of Review parameters . If your newly selected category is assigned a separate list of Review criteria, it will appear on the tab "Reviews" only after you save (update) the post!

    IMPORTANT: In Appearance -> ThemeRex Options -> Reviews you can choose the rating system for your posts: 5 stars, 10 stars or 100%. You can easily switch from one rating system to another at any moment!

    Filter pages

    Another great feature of the theme is built in post filters helping to sort posts according to their type of content in a simple and intuitive way. Among other posts you can select pages only containing reviews, Video only, Gallery Only, Audio Only

    Lets see an example how to create a page that contains only posts with reviews. To do that we will have to use "Reviews filter" . For pages Videos filter, Audios filter or Galleries filter (if needed) configuration should be done the same way.

    Only Reviews

    Let's set up an "Reviews filter" page. To do this, you need to:

    • Go to Pages under the WordPress menu and then click on Add New.
    • Add page Title as usual ("Only Reviews" for example)
    • Choose "Only Reviews" as the page's template
    • Publish this page.


    Now you can add this page to the menu, and users of your website will be able to pick from the entire number of posts only those containing Reviews; as for you - you will be able to set individual style of the page display.

    Only Videos

    Video filter page is similar to "Only Reviews"(see above)

    Only Audios

    Audio Filter page is similar to "Only Reviews"(see above)

    Custom pages

    Now we can prepare the other pages of our blog. This is not required, but if you want to change the display settings on Page 404, Archive pages or Search results - you have to create separate pages and customize them.

    Consider the example of the Page 404. For pages Archive pages or Search results (if needed) configuration should be done the same way.

    Page 404

    Let's set up an error 404 page. To do this, you need to:

    • Go to Pages under the WordPress menu and then click on Add New.
    • Put your Title as usual ("Page 404" for example)
    • Choose "Page 404" as the page's template



    • Publish this page.

    As a result, when you try to open non existing page on your site you will see page containing this message:



    NOTICE! You can not preview 404 page using wordpress View page or Preview changes button. You should type incorrect site URL to see 404 page.

    To customize this page you should edit page template file in any text editor like Notepad or TextEdit. Open root folder of your theme and find /templates folder. This folder contains post-layout-404.php file. You can open it in any text editor and chage HTML code according to your needs.

    Archives

    Archives Page Setup is similar to "Page 404"(see above)

    ThemeRex Options

    Now, let's talk about the theme's settings: Appearance -> ThemeRex Options. Here you get full control over general look and functionality of the web-site.

    General

    • Contact form email - Email of receiver of massages sent via contact form.
    • Notify about new registration - Do I need to send a message with information about new registration on the website on contact email or admin email?
    • Favicon - In this field you can upload the icon to your website.
    • Logo image - In this field you can upload the logo to your website.
    • Show tagline under site logo - enables website's slogan display under the logo.
    • Show header search form -enables display of search form in header.
    • Show right panel - enables right panel's display. Right panel may contain user's bookmarks, Side Menu and block of website visual settings.
    • Footer copyright - text entered in this field will be displayed in footer.
    • Image dimensions - What dimensions will be used to display images on the pages: "Original" - precise dimensions of the image block are used; "Retina" - the image twice bigger fits into the original block (for accurate display on Retina).
    • Responsive Layouts - Does your site have to use different layouts for different devices or should it be displayed in full size everywhere?
    • Additional filters in admin panel - Wether to use extra filters for Post Format and Tags in admin panel when viewing the list of the blog posts.
    • Use update notifier in admin panel - Wether to use a new update alert in the dashboard.
      IMPORTANT: Since to detect the latest version of the theme a third party plugin is used - it may cause building of pages in Dashboard! If you observe such an effect - please switch "Update Notifier" off (select "No" in this parameter).
    • Fullwidth Slider - section that displays in header above Main menu is used to put the slider out. Slider placed in the section will be stretched to the entire width.
    • Custom Page Header - section whose contents will be displayed under Main menu. It may contain slider's shortcode or any other shortcodes.
    • Custom Page Footer - section whose contents will be put out in footer.
    • Header Banner - field to upload banner image in header.
    • Header banner URL - link used to redirect to the banner when clicking on it.
    • Show Header Banner - whether to display the banner in header or not?

    Customization

    • Show Theme customizer - enables diplay of website visual settings block in the right panel.
    • Theme font - basic theme font selection.
    • Theme color - basic theme color selection.
    • Header Section 1 background color - Backround color of the upper panel in header.
    • Header Section 1 font color - Font color of the upper panel in header.
    • Header Section 2 background color -Backround color of the panel in header, that contains Main menu.
    • Header Section 2 font color - Font color of the second panel in header.
    • Header Section 2 alignment - elements alignment inside section 2.

      in case you set 'left', all the elements will be assigned feature float: left; if you set center, elements flow around will be disabled, and their contents will be centered.

    • Show user menu - enables menu's display in the upper panel in header.
    • Show Login/Logout buttons - tick yes for this option if you want links Login/logout displayed in the upper panel in header.
    • Main menu position - fix Main menu when scrolling.
    • Submenu width - sets width of a drop-down list for Main menu.
    • Main menu style - selection of one of four main menu styles.
    • Substitute standard Wordpress gallery - tick yes for this option if you want standard WP galleries replaced with slider.
    • Substitute audio tags - Do you need to substitute tag <audio> in the post body with special iframe (used for audio files from the server soundclouds).
    • Substitute video tags - Do you need to substitute tag <video> in the post body with special iframe (used for audio files from the server youtube and vimeo).
    • Body style - The way of page displayed:

      • boxed - page body is located in zone of limited screen width, behind which the background image is seen (set in the fields below)
      • wide - page body occupies entire screen width (background image is not seen behind it), contents is stretched to the entire screen with small indents off the window edges.
    • Background color - Site body background color.
    • Background predefined pattern - One of the built-in theme images filling the background as tile (repeated both vertically and horizontally).
    • Background custom pattern - Here you can upload your own image filling the background as tile (repeated both vertically and horizontally).
    • Background predefined image - One of the built-in theme image used as a background (not repeated).
    • Background custom image - Here you can upload your own image to be used as a background (not repeated).
    • Background custom image position - Here you can select the position of the uploaded image.
    • Your CSS code - Put in this field custom css code to correct main theme styles.

    Sidebars

    By default, the theme provides five standard positions for sidebars (widget sets):

    • Main sidebar - displays widgets vertically to the left or right from the main content.
    • Footer sidebar - displays widgets horizontally at the bottom of the page (under Content).

    Here you can add and remove additional sidebars. You will be able to configure the widgets for the newly created sidebars in the menu Appearance - Widgets

    In the settings of each category, post or page, you can assign any of the created widget sets to any of the available sidebars!

    Blog

    This section will let you to flexibly set up the appearence and behavior of the blog stream page and single pages.

    IMPORTANT: You can override any settings of this section in the settings of the category (they will work with all posts of current category and sub categories contained in it), as well as to set them individually for each page and the post (in Post Options section then creating / editing a post (page).

    Usually when creating/editing categories and/or posts you do not need to configure each of them! It would be very tedious. It is enough to once configure the display parameteres of separate pages and blog in Appearance -> ThemeRex Options -> Blog and not to change the settnigs within categories (posts, pages) (in all fields leave the default value - "Inherit").

    And only in those categories (posts, pages) that should not look like others, you can change these settings.

    Blog Stream page parameters

    Below is a set of parameters that affects the display of the blog stream page:

    • Blog Style - Display style of blog stream page:

      • Blog Default - standard blog style. .
      • Blog portfolio - posts are displayed in the form of tiles. The selection will only include posts that has Featured Image set.
      • Isotope Filters - post's content flows around the image from the right.
      • Masonry (2, 3 columns) - Pictures are cropped only by width. All pictures are cropped by the height till the same size.
      • Reviews Style Masonry (2, 3 columns) - is similar to style Masonry, the difference is that there is no gray background under the post's content.
      • Reviews (2, 3 columns) - the only difference from Reviews Masonry Style is that pictures are cropped without saving proportions.
      • Blog Style Excerpt (2 columns) - first post on the page takes up the entire width, the rest are displayed in two columns.
      • Blog Classic - square picture is displayed to the left of the post content.
    • Show "Top News" - show section with the latest news from the selected categories.
    • Top News Title - title of the secion "Top News".
    • "Top News" Categories - selection of categories to display in the section "Top News"
    • "Top News" posts number -the number of posts to be displayed in the section "Top News" in each of the selected categories.
    • Default Category Color - category color.The color is used to display the category name in the blog stream page and single-post.
    • Show filters - option enables display of the block with filtering by category for blog stream page.
    • Use as filter keywords - what are the criteria for filter: by category or tags.
    • Blog posts sorted by - type of sorting posts by date, alphabetically, by popularity (number of views), number of comments, author's rating, user's rating, random.
    • Blog posts order -type of posts sorting.
    • Blog posts per page - Number of posts on the blog pages.
    • Post excerpt maxlength - the number of characters in the description of the post.
    • Show main sidebar - option enables the display of the main sidebar.
    • Select main sidebar - selection of the sidebar, which will be displayed as main.
    • Show footer sidebar - option enables the display of the sidebar in the footer.
    • Select footer sidebar - selection of the sidebar, which will be displayed in footer.
    • Show search in right panel - enables a search form on the right panel.
    Single (detail) pages parameters

    • Show post title on links, chat, quote, status - Whether to display the header area of ​​a single post (page) on post formats "Quote", "Link", "Aside", "Chat".
    • Show post title -option enables the display of the post title on single page.
    • Show post info - display information about the post (author, category, date of creation).
    • Show text before "Read more" tag - Whether to display the text of the post, located before tag "Read more"
    • Show post author details - Enable/Disable "Post author" section in single post.
    • Show post tags - Enable/Disable "Post tags" section in single post.
    • Show related posts - Enable/Disable "Related posts" section in single post.
    • Related posts number - How many related posts will be shown on single post page.
    • Related posts sorted by - (string). The way to sort posts:

      • date - posts ordering by publish date
      • alpha - posts ordering alphabetically
      • views - posts ordering by views count
      • comments - posts ordering by comments number
      • author_rating - posts ordering by review's author marks
      • users_rating - posts ordering by review's readers marks
      • random - posts ordering is random
    • Related posts order - (string). The order to sort posts: asc|desc.
    • Show comments - Enable/Disable "Comments" section in single post.
    General Blog parameters
    • Exclude categories - In this list, you can mark the categories that should not be displayed in a blog stream page and in the list of categories (Widget Categories). This may be, for example, some service category.
    • Show Breadcrumbs - Whether to show the path to the current page (category).
    • Blog pagination style - selection of pagination style for blog pages. Pagination will be displayed only if the total number of posts exceeds the number of posts displayed on the page.

      • Hide pagination - even if the number of posts per page is less than the total number of posts, pagination will not be displayed.
      • Standard page numbers - standard Wordpress per page navigation.
      • "View more" button - loading of posts is achieved by clicking on the button View More.
      • Infinite scroll - New posts will be loaded if they achieve bottom of the page.
    • Post's category announce - Which category display in announce block (over posts thumb) - original or closest parental.
    • Show post date after - How many days after the publication of the post to display the date of its publication in the usual way. Until that time, instead of the date, it will display how many minutes (hours, days) have passed since the publication.

    Reviews

    • Show reviews block - option enables the display of block with reviews on the single-post.
    • Max reviews level - Maximum level for reviews marks: 5 stars, 10 stars or 100%.
    • Show rating as - review display style:

      • As text (for example: 7.5 / 10) - author's/user's rating is displayed as text
      • As one star - author's/user's rating is displayed inside the star. Rating is displayed in percents.
      • As 5 stars - author's/user's rating is displayed as five stars.
      • As 10 stars - author's/user's rating is displayed as ten stars.
      • As circular diagram - author's/user's rating is displayed as pie chart.
    • Review points color - color of review points. The option is working a review style "Circular Diagram" is selected.
    • Show first reviews - What reviews will be displayed first: by author or by readers. Also this type of reviews will display under post's title.
    • Hide second reviews - Do you want to hide second reviews tab in widgets and single posts?
    • What visitors can vote - What visitors can vote: all or only registered.
    • Reviews criterias - Add the required number of evaluation criteria for the posts with Reviews. These criteria will be applied to all posts. You can override them in any category - the new list of criteria will apply to all posts in this category and its sub-categories.

    Widgets and Sidebars

    Spotlight theme comes with two default widget sidebars. Have a look in Appearance - Widgets.

    • Main Sidebar - displays widgets vertically on the left or right from the main contents.
    • Footer Sidebar - displays widgets horizontally in footer of the page (under Contents).

    And also, due to Appearance -> ThemeRex Options -> Sidebars you can create an unlimited number of additional sidebars. For each category, page and post you will be able to assign the sidebars to be used. In the example below we add Test Sidebar, populate it with widgets and assign to Sample Page:

    Navigate to Appearance -> Widgets, add some widgets to newly creates sidebar

    Navigate to Pages -> Edit Sample page, go to the bottom of the page and in page options -> Blog -> Stream Page find main sidebar settings, see screenshot below:

    Select newly created sidebar, set it's position and save the page.

    Spotlight theme has five custom widgets. Have a look in Appearance - Widgets.

    • Themerex Most Popular - Widget displays posts, sorting them by number of views.
    • Themerex Flickr Photos - Shows photos from Flickr account.
    • Themerex Twitter - This widget shows the last Tweets from your Twitter-feed using the API 1.1 (entered into force in June 2013).
    • Themerex Contacts Block - Widget displays contact details and links to social networks.
    • Awesome Weather Widget - widget will be available after installing the plugin Awesome Weather Widget. Used to display the block with weather forecast.

    Shortcodes

    Shortcodes are a cool feature in WordPress that essentially allows you to do some pretty incredible things by just inserting a shortcode into a page or post. Using Shortcodes is a breeze, just insert one where you want the relevant content to show up.

    The theme comes pre-packed with a number of shortcodes allowing you to add the info easier.

    IMPORTANT: Please make sure to always start new shortcodes from new lines. Most of the time you wont encounter any errors if you don't do that but unfortunately WordPress does mess up the html sometimes. This is true for all shortcodes, but the inline ones like highlight, those are the only ones that don't need a new paragraph.

    Please note that almost all the shortcodes allow parameters:

    • id - unique id for element.
    • top, bottom, left, right - unique id for element.

    Here's a list of the shortcodes included into the Spotlight theme:

    Accordion

    Creates blocks of the "accordion" type. Only one of the blocks can be open at a time.

    Parameters:

    • initial - (number). The number of the initially opened blocks (from 1 to the number of blocks). Attention: if you want to make all accordion items to be closed initially, just make initial parameter bigger, than items count!

    Accordion item Parameters:

    • Accordion item title - name of the accordion element.
    • Title font icon - accordion element icon is displayed to the left of the header
    • Accordion item content - contents of the accordion element.
    [accordion initial="1"]
    	[accordion_item title="Performance leads to success" icon="icon-lifebuoy icon-note-beamed"]
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    	[/accordion_item]
    	[accordion_item title="Passion leads to design" icon="icon-note-beamed"]
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    	[/accordion_item]
    	[accordion_item title="Design leads to performance" icon="icon-search"]
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    	[/accordion_item]
    [/accordion]
    

    Audio

    Inserts an audio file.

    Parameters:

    • URL for audio file - url or src or mp3 or wav - (string). URL of an audio file.
    • Controls - (number). Whether to display the playback controls. The value can be on or off.
    • Autoplay - (number). Allow autostart playback. The value can be on or off.
    • Width - (number). The audio container's width (in percent or pixels).
    • Height - (number). The audio container's height (in pixels).

    [audio url="http://spotlight.wp/wp-content/uploads/2014/02/laura.mp3" controls="show" autoplay="off" width="100%" top="50"]

    Banner

    Inserts a picture - banner with a title. Hovering over the image creates an illusion of movement and adds hover-effect.

    • URL (source) for image file - URL of an image file.
    • title - (string). The text -title that appears when you hover over the image.
    • link - (string). URL of the link that leads you to the banner or header.
    • target - (string). Name the window or frame where the link opens.
    • rel - (string). Gallery Name: group of banners with the same parameter "rel" composes gallery when displaying in a pop-up window.
    • align -parameter, which is responsible for banner's horizontal positioning and text wrapping.
    [banner src="http://spotlight.wp/wp-content/uploads/2014/02/masonry5.jpg" popup="no" title="Title banner" link="http://mysite.net"]Sample banner content[/banner] 
    

    Sidebar

    Using this shortcode you can choose any of the existing sidebars and display all the widgets located in it, into contents.

    • name - sidebar's name.
    [themerex_sidebar name="sidebar-main"]

    Block Container

    Surrounds the selected text to the block and gives it the properties of a given class from the style table. These two shortcodes are absolutely identical! They are created in order to overcome the restriction of WordPress due to which the same shortcodes can not be inserted into each other.

    • class - (string). The name of class of the block
    • style - (string). CSS-style for the generated block
    • align - (string). Block alignment: none|right|left|center
    • text_align - (string). Text alignment inside block: right|left|center
    [block class="block" style="margin-top:10px;" align="left" text_align="center" width="125" height="125"]
    any block content
    [/block]

    Blogger

    Well, we have arrived at the punch line of our collection - shortcode "Blogger". On the one hand, it is rather simple - it just displays the specified number of posts from a given category. But just look how it's doing that! It can do this in many different ways and styles. And by skillfully combining them you can easily create such blocks as Announce, ad units, interviews and much more. I think you had a chance to make sure of that by the example of creating of many different homepages.

    Let's examine its parameters more carefully:

    • cat - (number or string). ID or slug of the category, which puts out the most recent (or the first) posts added (unless ids parameter is specified). It is allowed to specify several ID's (or slugs) separated with commas.
    • ids - (numbers). Comma-separated ID posts to be displayed.
    • title - (string). block's title.
    • style - (string). Block display style:
      • default
      • date
      • image_large
      • image_medium
      • image_small
      • accordion_2
      • carousel
      • list
    • rating - it yes is ticket for the parameter, posts will display ratings.
    • border - enable/display border bottom for posts.
    • descr - the number of characters in post's description.
    • count - number of posts.
    • visible - sets number of columns for columnar layouts.
    • offset - (number). How many posts to skip before starting output.
    • link_title - text in the link that will be displayed to the right of the header block.
    • link_url - link to be displayed to the right of the header block.
    • orderby - (string). The way to sort posts:
      • date - posts ordering by publish date
      • alpha - posts ordering alphabetically
      • views - posts ordering by views count
      • comments - posts ordering by comments number
      • author_rating - posts ordering by review's author marks
      • users_rating - posts ordering by review's readers marks
      • random - posts ordering is random
    [blogger id="unique_2id" order="" count="3" descr="300" cat='20' offset='4' style="accordion" visible='2' border="true"]

    Button

    Creates different types of buttons.

    • type - (string). The button type. It can take one of the following values: square|round. If this parameter is not specified - it gets 'square'.
    • style - (string). The button style. It can take one of the following values: default|border.
    • size - (string). The button style. It can take one of the following values: mini|medium|big|huge.
    • fullsize - (string). Indicates that the button should extend over the entire width available. It can take one of the following values: on|off. If this parameter is not specified - it gets 'off'.
    • color - button background color.
    • align - button alignment.
    • target - (string). The window where the link leads to. If this parameter is not specified - URL will open in the same window.
    • rel - (string). Sets rel parameter for the link.

    [button type="rounded" style="border" size="medium" fullsize="no" link="#" popup="no" bottom='6']Read more[/button]

    Chat

    Creates a chat elements.

    • title - (string). The title of the chat element.
    • link - (string). URL for the current chat element.
    • image - (string). URL of image for the current chat item. For example: user avatar.

    [chat title='Matt']In cursus quam vitae risus vestibulum, ut suscipit massa consectetur. Nunc et pulvinar lacus, eu laoreet eros. Nulla facilisi.[/chat]
    [chat title='Damon' image='http://localhost/spot/wp-content/uploads/2014/03/bigstock-Portrait-of-the-blonde-with-f-26828624.jpg']Purus, nec iaculis eros commodo non. Nunc aliquet commodo magna, a condimentum enim ullamcorper sed. Maecenas id ante dolor.[/chat]
    

    Review Panel

    Displays average rating and rating of each of the criteria.

    • post_id - ID of the post whose rating you you want to display in the Review panel.
    • align - Horizontal block alignment.
    • max - maximum rating level.

    Review Item

    • label - label for the current criteria.
    • points - rating for the current criteria.
    [review_panel max="100"]
    	[review_item label="Item 1" points="90"]
    	[review_item label="Item 2" points="95"]
    [/review_panel]
    

    Columns

    Creates columns in the text.

    • count - (number). The number of columns in the block generated. IMPORTANT: Inside the block [columns] ... [/columns] the number of blocks [column_item] ... [/column_item] must correspond to the parameter count.

    [columns count="3"]
    
    	[column_item]
    		1/3
    		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    	[/column_item]
    	
    	[column_item]
    		1/3
    		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    	[/column_item]
    	
    	[column_item]
    		1/3
    		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    	[/column_item]
    
    [/columns] 
    

    Column item

    Creates one column item in the columns block.

    • span - (number). Indicates the number of the merged columns.

    Contact Form

    Display Contact form.

    • title -title of the contact form.
    • description - contact form description. Text of description will be displayed in the form.

    [contact_form title="Contact form" description="Form Description"]
    

    Countdown

    Creates a block for the countdown - how much time is left until a date (time) in the future.

    • date -the date countdown ending. For example: 12/31/2014.
    • time - time of countdown ending. For example: 17:00:00.
    • style - style of countdown counter: 1 | 2.
    • align - horizontal alignment of the countdown block.

    [countdown date="2014-09-07" time="12:00:00" align="center" width="50" height="50"]
    

    Dropcaps

    Used to create the dropcaps effect - special highlighting of the first letter in a paragraph.

    • style - (number). Display style of the first letter. The value can be from 1 to 6. If not specified - use 1.

    [dropcaps]Consectetur adipisicing elit ...[/dropcaps]
    [dropcaps style="2"]Consectetur adipisicing elit ...[/dropcaps]
    ...
    [dropcaps style="6"]Consectetur adipisicing elit ...[/dropcaps]
    

    Google Map

    Displays Google map at the address you specified.

    • address - (string). The address to which you want to display the map
    • latlng - (double,double). The latitude and longtitude coordinates for map center
    • zoom - (number). Initial map zoom (from 1 to 20)
    • style - (string). Map frame visual style: default|simple|greyscale|greyscale2|muted_blue|style1|style2|style3
    • width - (number). Map frame width (in pixels or percents)
    • height - (number). Map frame height (in pixels)
    [googlemap address="25 Broadway, New York" width="400" height="300" style="greyscale2"]
    

    Hide

    Hide any html block with desired selector (id and/or classes combination).

    IMPORTANT: For advanced users only! Careless hide of objects can disrupt the design of your site. Be extremely careful.

    • selector - (string). Id and/or classes combination (CSS-selector)
    [hide selector="#sidebar .calendar"]
    

    Highlight

    Used to highlight a text with the font's color and / or background.

    • type - (number). Type selection: accent theme color letters or white letters on a background of accent theme color. Possible values: 1 or 2. Instead, you can explicitly specify the text color and background color using the following parameters.
    • color - (string). The color of the text. You can specify the color (white|black|red|blue|green|brown|... - up to 140 styles) ot its code in format #rrggbb, where rr is a hexademical value of the red component, gg - a hexademical value of the green component, bb - a hexademical value of the blue component.
    • backcolor - (string). The background color of the text. The same parameter as color.
    • style - (string). Arbitrary set of CSS-properties (for advanced users only).

    [highlight type="1"]dolore molestiae voluptatum[/highlight]
    [highlight type="2"]dolore molestiae voluptatum[/highlight] 
    

    Icon

    Inserts an image into the text, pressing it (image) to the left or right edge of the text, and the next image text flows around it on the opposite side.

    • icon - (string). Icon name. It can take icon name from 'fontello' set. You can select a required icon using the shortcode builder, or you may learn about a complete list of available icons, opening the page "/ includes / fontello / demo.html" inside the theme folder.
    • size - (number). Font size for the icon (in pixels).
    • weight - (number). Font weight for the icon: 100-900 (step 100).
    • align - (string). Alignment of the icon. It can take one of the following values​​: left|right|center.
    • color - (string). Color of the icon.
    • bg_color - (string). Background color of the icon.
    • background - (string). Background style for the icon: none|round|square.

    [icon icon="icon-trophy" color="#1e73be" size="36"]
    [icon icon="icon-trophy" color="#ffffff" background="round" bg_color="#1e73be" size="36"]
    [icon icon="icon-trophy" color="white" background="square" bg_color="#1e73be" size="36"]
    

    Image

    Inserts an image into the text, pressing it (image) to the left or right edge of the text, and the next image text flows around it on the opposite side.

    • src or url - (string). URL of the image.
    • width - (string). URL of the image.
    • height - (number). the image's height (in pixels).
    • title - (string). Text at the bottom of the image.
    • align - (string). Alignment of the image. It can take one of the following values​​: left|right.

    [image url="http://spotlight.wp/wp-content/uploads/2014/02/clock_dark.png" title="This image aligned left" align="left"] 
    

    Infobox

    Creates different types of messages.

    • style - (string). The infobox style. It can take one of the following values: regular|info|success|error. If this parameter is not specified - it gets 'regular'.
    • closeable - (string). If this parameter is set to "yes" - right in the block there is a button "x" and the block may be closed (disappear) when you click on it. If this parameter is not specified - it gets "no".

    [infobox style="info" closeable="no"]Info Message[/infobox]
    

    List

    Creates lists of different styles.

    • style - (string). List display style. It can take one of the following values​​: regular|check|mark|error. Can be used both ih a shortcode [list] to set the style of all the elements of the list, and in the shortcode [list_item] to change the style of one item in the list.
    • icon - (string). Icon name. It can take icon name from 'fontello' set. You can select a required icon using the shortcode builder, or you may learn about a complete list of available icons, opening the page "/ includes / fontello / demo.html" inside the theme folder. This parameter can be used both in shortcode [list] to specify an icon for the entire list as a whole, and for [list_item] to change icons of a particular item in the list.

    [list style='iconed']
    	[list_item icon="icon-note-beamed"]Lorem ipsum dolor sit amet[/list_item]
    	[list_item icon="icon-star-1"]adipisicing elit, sed do eiusmod[/list_item]
    	[list_item icon="icon-award"]ncididunt ut labore et dolore magna[/list_item]
    	[list_item icon="icon-leaf"]Ut enim ad minim veniam, nostrud[/list_item]
    	[list_item icon="icon-megaphone"]exercitation ullamco laboris nisi ut[/list_item]
    [/list]
    

    List Item

    Creates one list item in the list.

    • icon - (string). Icon's name. It can take icon name from 'fontello' set. You can select a required icon using the shortcode builder, or you may learn about a complete list of available icons, opening the page "/ includes / fontello / demo.html" inside the theme folder. This parameter can be used both in shortcode [list] to specify an icon for the entire list as a whole, and for [list_item] to change icons of a particular item in the list.
    • link - (string). URL for the link of the item in the list.
    • target - (string). Target for URL.
    • title - (string). Indicate the title of the item in the list.

    Price

    Creates a block with price for a specified period.

    • money - (string). Money value (dot separated, for example: 49.99).
    • currency - (string). The currency name or sign. For example: $.
    • period - (string). The period name. For example: monthly.

    [trx_price_data type="price" money="10" currency="$" period="per month"][/trx_price_data]
    

    Price table

    Create a table with prices:

    • align - (string). The table alignment: left|right|center.
    • count - (number). Number of columns.

    [trx_price_table align="center" count="4"]
    	[trx_price_item animation="true"]
    		[trx_price_data type="united"]Choose your plan[/trx_price_data]
    		[trx_price_data]Amount of space[/trx_price_data]
    		[trx_price_data]Amount of space[/trx_price_data]
    		[trx_price_data]Free domain names[/trx_price_data]
    		[trx_price_data]phpMyAdmin[/trx_price_data]
    		[trx_price_data]24h Support[/trx_price_data]
    		[trx_price_data]E-mail support[/trx_price_data]
    		[trx_price_data type="footer"][/trx_price_data]
    	[/trx_price_item]
    [/trx_price_table]
    

    Price item

    Creates a single column in table with prices. It's inserted inside shortcode [trx_price_table].

    • animation - (string). Whether to enlarge the column when you hover over it: yes | no.

    Price data

    Creates a single cell in a column in the table with the prices. It's inserted inside shortcode [trx_price_item].

    • type - (string). Type of a cell:

      • regilar (or empty) - regular cell
      • title - cell with column's header
      • price - cell with price
      • image - cell with image
      • footer - cell in table footer
      • united - merged cell (occupes two cells - current and the next cell in this column)
    • image - (string). Image URL (only if type="image")
    • money - (number). Dot separated price value (only if type="price")
    • currency - (string). Currency symbol (only if type="price")
    • period - (string). Period name (only if type="price")

    Quote

    Used to emphasize the big and small quotes in the text.

    • cite - (string). URL of the site with the original.
    • title - (string). Title for link to the site with the original.

    [quote cite="http://example.org" title="Quote author"]Duis lobortis tempus laoreet. Nam egestas aliquam blandit.[/quote]
    

    Section

    Surrounds the selected text to the block and gives it the properties of a given class from the style table.

    • class - (string). The name of class of the block.
    • style - (string). CSS-style for the generated block.
    • align - (string). Block alignment: none|right|left|center.
    • content_wrap - (string). Wrap content inside section. The width of section wrapper - 1120px.
    • text_align - (string). Text alignment inside section: none|right|left|center.
    • background_color - (string). Block background color.
    • background_image - (string). Block background image.
    • background_repeat - (string). Block background image repeat: repeat|no-repeat.
    • background_pos_x - (string). Block background image position X in pixels.
    • background_pos_y - (string). Block background image position Y in pixels.
    • parallax - (string). Apply parallax-effect to block background image.
    [section content_wrap="no" text_align="center" background_color="#dee3eb" background_repeat="repeat" background_pos_x="left" background_pos_y="top"]
    	[title type="2" font_size="38" color="#4e5762" align="center" style="regular" size="medium" position="left" weight='100' letter_spacing='-1' top='49' bottom='48']
    		[arrow_link url='#' label='SPOTLIGHT - Art to deliver information']
    	[/title]
    [/section]
    

    Skills

    Shows the levels of your abilities in many different styles.

    • title - (string). Type of the skills block: bar|pie|counter|circles.
    • type - (string). Type of the skills block: bar|counter|circles.
    • dir - (string). Direction: horizontal|vertical.
    • maximum - (number). Max value for each skills element. Default value is 100.
    • layout - (string). Skills block's layout: rows|columns.
    • align - (string). Alignment of the skills block: left|right|center.
    • color - (string). Color for the skills elements. The main color of accented theme's elements is used by default.
    • width - (number). The skills block's width (in pixels or percents).
    • height - (number). The skills block's height (in pixels).
    • count - (number). Number of skills items in the block.

    [skills maximum="100" type="bar" dir="vertical" layout="rows" color="#4f99bc" count="4" height='171']
    	[skills_item title="Design" style="style_1" level="71"]
    	[skills_item title="Gameplay" style="style_1" level="82"]
    	[skills_item title="Story" style="style_1" level="93"]
    	[skills_item title="Presentation" style="style_1" level="50"]
    [/skills]
    

    Skills Item

    Shows one item of the skills block. Used only in the [skills] shortcode.

    • title - (string). The name of the current element.
    • level - (number). Ability level for the current element (up to maximum).
    • color - (string). Color for the current item. The main color of accented theme's elements is used by default.
    • style - (number). Style of the skills item (only for type="counter"): from 1 to 4.

    Slider

    And one more feature of our theme - shortcode "Slider". It can display all posts from a specific category or the slideshow of the Revolution or Royal Slider you have prepared beforehand, as a slider (if you have previously installed this plugins).

    • engine - (string). The engine of the slider: swiper|revo|royal. "Revo" and "Royal" options are available if the plugin revslider.zip and "royalslider.zip" is installed. The default parameter is "swiper".
    • height - IMPORTANT: required parameter. (number). The slider's height (in pixels).
    • alias - (string). Name of the slide show, prepared in Revolution or Royal Slider (if engine=revo|royal)
    • cat - (number or string). ID or slug of the category, which puts out the most recent (or the first) posts added (unless ids parameter is specified). If parameter "cat" is not specified - posts from any category will be displayed. It is allowed to specify several ID's (or slugs) separated with commas.
    • count - (number). The number of posts displayed from the category (if engine=swiper).
    • offset - (number). How many posts to skip before starting output (if engine=swiper).
    • orderby - (string). Posts order by (if engine=swiper):

      • date - posts order by descending of publish date.
      • views - posts order by descending of number of views.
      • comments - posts order by descending of comments number.
      • author_rating - posts order by descending of review's author marks.
      • users_rating - posts order by descending of review's readers marks.
      • random - posts order is random.
    • order - (string). Posts order: asc|desc.
    • controls - (string). The presence of the buttons with arrows in the slider: yes|no.
    • pagination - (string). Type of slider pagination: hide|default|thumbs|icons.
    • progressbar - (string). The presence of the progressbar in the slider: yes|no.
    • info - (string). Only if "caption='yes'". The presence of the slide info: yes|no.
    • caption - The presence of the slide caption: yes|no.
    • align - (string). Slider alignment: none|right|left|center.

    [slider engine="swiper" height='406' count="13" offset="0" orderby="date" order="desc" controls="yes" pagination="thumbs" progressbar="no" caption="yes" info='no']
    

    or:

    [slider height='406' controls='yes' caption='no']
    	[slider_item src='http://any_image_url_1.jpg']
    	[slider_item src='http://any_image_url_2.jpg']
    	[slider_item src='http://any_image_url_3.jpg']
    [/slider]
    

    Table

    Displays the table

    [table style="1"]
    Paste here table content, generated on one of many public internet resources, for example:
    http://html-tables.com/
    or http://tablegen.nfshost.com/
    or http://www.impressivewebs.com/html-table-code-generator/
    [/table] 
    

    Tabs

    Creates blocks with tabs.

    • initial - (number). The number of previously open tabs (from 1 to the number of tabs).
    • tab_names - (string). Headlines tabs listed per the sign "|" (vertical bar).
    • style - (string). Style of tabs: vertical|horizontal.

    [tabs initial="1" scroll="no" tab_names="Identity design|Web development|Customer support"]
    	[tab icon='doc']
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    	[/tab]
    	[tab]
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    	[/tab]
    	[tab]
    		Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    	[/tab]
    [/tabs]
    

    Tab Item

    Creates one tab item (with tab content) in the tabs block.

    • title - (string). Headline for current tab (instead tab_names in parent shortcode [tabs]).
    • id - (string). ID for the current tab content (optional).

    Team

    Displays the members of your team (photo with description).

    • count - (number). Number of items in the team block.

    [trx_team count='4']
    	[trx_team_item user="david" name="David Schwimmer" position="developer" photo="http://your_website_url/spot/wp-content/uploads/2014/06/sc_team_item_1.png"][/trx_team_item]
    	[trx_team_item user="john" name="John Doe" position="developer" photo="http://your_website_url/spot/wp-content/uploads/2014/06/sc_team_item_2.png"][/trx_team_item]
    	[trx_team_item user="lisa" name="Lisa Kudrow" position="founder" photo="http://your_website_url/spot/wp-content/uploads/2014/06/sc_team_item_3.png"][/trx_team_item]
    	[trx_team_item name="Matt LeBlanc" user="matt" position="designer" photo="http://your_website_url/spot/wp-content/uploads/2014/06/sc_team_item_4.png"][/trx_team_item]
    [/trx_team]
    

    Team Item

    Displays one member of your team

    • user - (string). Contains the user login to your blog. The user's data contains the description and links to the user profile in popular social networks.
    • name - (string). Name of the team member (only if not set parameter "user").
    • position - (string). Position of the team member (only if not set parameter "user").
    • email - (string). Email of the team member (only if not set parameter "user").
    • photo - (string). Photo of the team member (only if not set parameter "user").

    Testimonial

    It generates a block with the statement of any person (you must also specify its parameters).

    • title - (string). Title of the block.
    • style - (number). Display style of the block: 1 to 2.
    • width - (number). The block's width (in pixels or percents).
    • height - (number). The block's height (in pixels).

    [testimonials height='242' style="1" width="817" left="auto" right="auto"]
    	[testimonials_item name="Matt Jefferson" photo="http://your_website_url/spot/wp-content/uploads/2014/06/sc_team_item_1.png"]
    		“No alia tota laboramus quo, pri sale noster offendit ei, agam dolorem 	conclusionemque quo ut. Natum homero mei ex, eran t erroribus ne est, te velit graeci vivendum vel. Cu eam efficiantur itatem, dipisicing elit, sed do eiusmod tempor incididunt ut labore ”
    	[/testimonials_item]
    
    	[testimonials_item name="Linda Johnson" photo="http://your_website_url/spot/wp-content/uploads/2014/06/sc_team_item_3.png"]
    		“Ut commodo purus sapien, quis egestas nunc molestie sed. Donec non tempus purus. Nulla pulvinar lobortis mollis. Donec consequat elit a ultricies dictum. Donec semper, eros vitae sagittis dictum, enim enim convallis erat, ac imperdiet enim massa sed eros. In consequat placerat metus et eleifend.”
    	[/testimonials_item]
    
    	[testimonials_item name="John Doe" photo="http://your_website_url/spot/wp-content/uploads/2014/06/sc_team_item_2.png"]
    		“No alia tota laboramus quo, pri sale noster offendit ei, agam dolorem 	conclusionemque quo ut. Natum homero mei ex, eran t erroribus ne est, te velit graeci vivendum vel. Cu eam efficiantur itatem, dipisicing elit, sed do eiusmod tempor incididunt ut labore ”
    	[/testimonials_item]
    [/testimonials]
    

    Testimonials item

    It generates one item for testimonials slider.

    • name - (string). The displayed name (unless user parameter is specified).
    • position - (string). The position (unless user parameter is specified).
    • email - (string). E-mail (unless user parameter is specified).
    • photo - (string). The displayed photo (unless user parameter is specified).

    Title

    Generates standard html title tag.

    • type - (number). The title level from 1 to 6.
    • font_size - (number). The title font size.
    • letter_spacing - (number). The title letter spacing.
    • weight - (number). The title font weight.
    • color - (string). The title font color.
    • align - (string). Title alignment: left|center|right|justify.
    • transform - (string). Title text-transform: uppercase|lowercase.
    • style - (string). The title style: regular|iconed.
    • icon - Only used for style="iconed". Contains the icon name.
    • image - Only used for style="iconed". Contains the small image name (from folder "/images/icons").
    • picture - Only used for style="iconed". Contains the any image url.
    • size - Only used for style="iconed". Size of the icon or image: small|medium|large|huge.
    • position - Only used for style="iconed". Position of the icon or image: left|right|top.
    • background - Type of background under the icon or image: none|circle|square.
    • bg_color - Type of background under the icon or image.

    [title type="4" font_size="20" bottom="3" weight="300" align="center" style="iconed" icon="icon-doc-inv" size="large" position="top" background="circle" bd_color="#4f99bc"]Well Documented[/title]
    

    Tooltip

    Used to create pop-up tips that appear when you hover over a given piece of text.

    • title - (string). Tooltip text.

    [tooltip title="Tooltip title"]aliquip ex ea commodo consequat.[/tooltip]
    

    Divider

    It creates the line of the set style.

    • type - (string). The line style. It can take one of the following values: std|solid|dashed|dotted.
    • color - (string). The color line. You can specify the color (white|black|red|blue|green|brown|... - up to 140 styles) of its code in format #rrggbb, where rr is a hexademical value of the red component, gg - a hexademical value of the green component, bb - a hexademical value of the blue component.

    [divider top="10" bottom="10" type="std"]
    

    Video

    Inserts a video file from one of the most popular video hosting services - youtube or vimeo.

    • url or src - (string). URL of a video file
    • image - (string). URL of the cover image for the video. For video from Youtube picture is retrieved automatically.
    • title - (string). Show title bar above the video frame.
    • autoplay - (string). Allow autostart playback. The value can be "on" or "off".
    • width - (number). Video frame width in pixels or percent.
    • height - (number). Video frame height in pixels

    [trex_video url="http://www.youtube.com/watch?v=636Dp8eHWnM" autoplay="off" title="on" image="http://spotlight.wp/wp-content/uploads/2014/02/video_post.jpg"] 
    

    Demo Content

    Our themes have simple One click dummy data import tool. It's very easy to use and you can get precise copy of our demo website in just 1 click, really.

    Before installing demo data be sure you have installed all required plugins, please refer to Plugins installation section of this document for details..

    IMPORTANT: When installing demo-data ALL EXISTING CONTENTS of your website will be deleted and replaced with the new demo content! We highly recommend you to install demo data only on blank Wordpress install.

    To import demo content into a WordPress site follow these steps:

    1. Log in to your site as an administrator.
    2. If you see a message prompting to install WPML, Revolution Slider and Visual Composer plugins - click on "Begin installing plugins" and install them on the corresponding page.
    3. Go to Appearance -> Install Dummy Data:



    4. On the page that showed up, please set the required parameters. IMPORTANT: if you want to get a precise copy of our demo site choose "Overwrite existing content"



    5. Click on "Install Demo Data" button. IMPORTANT: Please wait while demo data is being copied from our server to your site. It may take a while and depends significantly upon Internet connection speed between your website and our server. Please wait patiently and do not refresh/leave the page.



    6. After the data is successfully imported, you will see the following message:



      In 99.9% it works fine but if something went wrong and data was not imported please repeat the proceedure described above. If you are making the install on your local machine please check your internet connection and firewall settings, this may affect data transfer.

    Pages shortcodes

    As we have mentioned before all our pages are built using shortcodes. This means you can re-create single pages instead of importing all demo content. This may be necessary if you have existing website and want to use just some of the pages. In the list below you will find code of all pages built using shortcodes, simply copy the code to your clipboard, navigate to Pages -> Add Page, paste the content of the clipboard to page editor(editor must be in Text mode) and publish the page.



    ATTENTION! The code contains links to images hosted at our server for demo purposes only, please update the images with your own.

    Sources and Credits

    This section discloses the sources of various files used within the theme and describes their function. Use this section to gain an understanding on how the theme functions behind the scenes if considering any type of modification.

    • Fonts:
      • Roboto (non standard) and other 40 Google fonts
      • Fontello (non standard, icons set)
      • Arial (standard)

    All non standard fonts are from Google Web Fonts and Fontello icons set

    We have used the pictures from:
    http://www.bigstockphoto.com/

    All images are copyrighted to their respective owners and not available for download with this theme.

    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. No guarantees, but I'll do my best to assist. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form from our Profile Page on ThemeForest. Thank you so much!

    ThemeREX