Theme Documentation

If you have any questions that are beyond the scope of this documentation, please contact us via email.
Please note that we only provide support in case of errors in our product or to advise You about using our product’s features.


Table of Contents

  1. Getting started
  2. Accessing theme settings
  3. Uploading your custom logo
  4. Setting up menu
  5. Setting up homepage
  6. Setting up portfolio
  7. Setting up contact page
  8. Uploading sample content
  9. Shortcodes
  10. Layout
  11. CSS Files
  12. JavaScript Files
  13. Embeding youtube videos in posts
  14. Considerations for content of posts, pages etc.

A) Getting started - top

To install this 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.

You have two options for uploading the theme - to use FTP or upload tool in Wordpress admin.

1) Upload via FTP:

First you must unzip the file you downloaded from Themeforest. There you will find a file named regolith.zip. Now unzip this file also. You should see a folder named "regolith". Upload this to /wp-content/themes/ in your wordpress installation.

2) Upload via Wordpress admin:

Open your Wordpress admin; Go to Appearance and choose Add New Themes. Click Add new. Upload the regolith.zip. Do not upload the zip archive you downloaded from themeforest. Upload only the regolith.zip file. If you have a "missing stylesheet" issue you are uploading the wrong file!

Activation

Once upload has finished, activate your theme in Appearance > Themes. Once activated Regolith will create couple of default pages, among them - Blog and Homepage. These will be assigned as your new front page and posts pages. You can later edit these settings under Regolith > Visual editor > Static Front page.

More info here.


B) Accessing theme settings - top

Open admin section for your wordpress blog. You can find it by typing your domain name + /wp-admin/. Once you have opened the admin, you have to click on "Regolith" at the bottom left corner of screen. There you will find theme settings.

admin

Theme settings have 5 sections:


Go to theme settings and open the General tab. There you will find section called "Logo". There you will see two file upload fields and alt text field. Click on the "browse" button and select your logo from your computer. Also provide a smaller version of your logo, for the fixed, compact sidebar that's shown when scrolling beyond the original sidebar. Click save on the bottom of page and that's it! You should also provide an ALT text which will be show if your image ever fails to load on the front page.


The menu for this theme acts almost exactly like for any other wordpress theme. There is one difference. Each 1st level menu item has an icon. These are Font Awesome icons, so you can easily pick anything you like and place it there. To have the menu display your desired icons take these steps:


E) Setting up homepage - top

When you activate theme, Regolith will auto create a page that's used for homepage. This page will be called "Homepage" and you can find it and edit it under "Pages" in your wp-admin.

Homepage is set up using various shortcodes that are included with the theme. All of these shortcodes are there on your homepage by default. These shortcodes have various options, that you can read more about here.

By default your homepage content should look like seen below, but feel free to edit it to your liking.

[regolith_slider /]

[column_wrap]
 [column_item icon="globe" title="Lorem Ipsum" description="There are many variations of passages of Lorem Ipsum available"/]
 [column_item icon="leaf" title="Consectetur adipisicing elit" description=" Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"/]
 [column_item icon="suitcase" title="Eiusmod tempor incididunt" description="Magni dolores eos qui ratione voluptatem sequi nesciunt."/]
[/column_wrap]

[text_block]
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [/text_block]

[post_list count="6"/]

[portfolio_list]

F) Setting up portfolio - top

Portfolio works a lot like regular blog posts, with couple minor differences. The portfolio does not need to be especially setup. If you have enabled pretty permalinks, then all your portfolios will always be visible under your-address.com/portfolio.

To create a new portfolio item first go to "Portfolio" section on wp-admin. Then click on "Add New" at the top of the page, just like you would do when creating a blog post. After that proceed to write your content and set a thumbnail the same as usual.

Now comes the part that's unique to portfolio. Click on "Add media" right above the post text editor. Choose "Create gallery". Select the pictures you want to display in portfolio and when you are done click on "Create new gallery". This will cause a gallery object to be inserted into the post.

Save the post and open it on front end of your page. The theme will have picked the images you placed in the gallery and displayed them in cool looking columns.

G) Setting up contact page - top

Contact page is already created by default. Also the required plugin is bundled with theme and should be easy to install. Once all that is done, go to Contact on the wp-admin menu and open/create a contact form (there is one created by default). Edit the form to your liking and save it. Then copy the id from shortcode above the form. (see code example below).

[contact-form-7 id="1805" title="Contact form 1"]

Now go to Contact Page section of Regolith admin. There you will find field named "Contact form id". Paste the ID there.

Now you can fill up the remaining fields, to display additional info.

Embed Google maps

There is also an option to embed a goole maps directly from theme admin panel. Go to Google maps and find your desired location. Then copy the maps iframe code and paste it in the field called "Google maps link". See example of google maps embed code below.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.lv/maps?f=q&source=s_q&hl=en&geocode=&q=San+Francisco,+California,+United+States&aq=0&oq=San+francisco+califoria+united&sll=37.812496,-122.35817&sspn=0.393285,0.696259&ie=UTF8&hq=&hnear=Sanfancisko,+San+Francisco+County,+Kalifornija,+Amerikas+Savienot%C4%81s+Valstis&ll=37.77493,-122.419416&spn=0.393271,0.696259&t=m&z=11&output=embed"></iframe>

You don't have to worry about size's etc. the theme will parse all the information it needs and resize the google maps to to fit the window just right.


H) Uploading sample content - top

To make things easier with initial setup, we have provided you with sample content that you can import in your wordpress site. It is located in the folder you downloaded from Themeforest. It's called regolith.wordpress.xml. You can import it using wordpress admin. Go to Tools > Import. From the list select "Wordpress". Choose the aforementioned file and upload it.


I) Shortcodes - top

Slider

Default usage:

[regolith_slider /]

Additional attributes:

[regolith_slider count="5" category="furniture" /]

Homepage slider is not visible when you first load the theme, since no slides are added to it. You can add images to homepage slider by going to "Slider" section in your wp-admin and creating new slides.



Headline column

headline

The shortcode allows you to add headline columns to pages. Default usage as follows:

[column_wrap]
[column_item title="" description=""/]
[/column_wrap]

Each headline column consists of wrapping element ([column_wrap]) and the items ([column_item]). Items have the option to either show a font awesome icon or an image. If both are supplied, the icon takes the priority. See example below:

[column_item title="" description="" icon="globe" /]
[column_item title="" description="" image="http://example.org/example.jpg" /]


Recent posts

The following shortcode allows you to embed post collections in pages. Default usage:

[post_list /]

Additional attributes:

[post_list count="6" title="Blog posts" category="news" tag="breaking" /]


Recent portfolio items

The following shortcode allows you to embed mosaic of portfolios in pages. Default usage:

[portfolio_list /]

Additional attributes:

[post_list count="6" title="Blog posts" /]

J) Layout - top

This theme has a Responsive layout that is laid out horizontally. All of the information within the main content area is nested within a div with a class of "main-content-wrapper". The general template structure is the same throughout the template.

This theme has 2 different layout modes - full screen and mobile (for screens smaller than 650px). Adjust your browser window size to explore them closer. It should be noted, that mobile version uses traditional vertical layout, instead of horizontal.

Regolith uses CSS3, so it will NOT support legacy browsers such as Internet Explorer 6 & 7 and 8.


K) CSS Files - top

All the CSS files are located in theme/assets/css/ folder. Most of the theme's CSS is in main-stylesheet.css, but mobile design is specified in mobile-stylesheet.css.

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.


L) JavaScript - top

All the Javascript files are located in theme/assets/js/ folder. This theme uses Jquery Javascript library and many plugins and custom built scripts. All the theme specific behaviour is written in theme.js and this is the only file you may ever need to edit.

It is comparatively easy to find what you need to edit in theme.js. Just open the file and look for init function. It initializes all other functions which you can recognize by the name.


M) Embeding youtube videos in posts - top

The theme allows you to to embed videos in posts. However that has to be done correctly in order not break, the text columns. You make sure, that the width of video player is not larger than 400px. To achieve, that go to youtube and under "embed" section pick a custom size option and set the width to 400px. Then copy the iframe and paste it into post editor window on wp-admin. Make sure, you have selected text editing mode!

admin

admin


N) Considerations for content of posts, pages etc. - top

The theme does a good job resizing content of pages, posts, portfolios etc. to fit the limited screen height. This is achieved by intelligently splitting content into dynamic columns. If however a post contains a non textual item, such as large image or custom html code, that can not be split, some of the contents may overflow the edge of screen and become invisible. The theme can only work well, if the content is edited in way, that allows it to be split into columns.


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 a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Planetshine

Go To Table of Contents