Ruby – Blog WordPress Theme

To install Ruby go to "Appareance - Themes - Add New - Upload Theme", and upload the .ZIP file.

You can find the .ZIP File that contains all needed files to Installation of the Theme in the folder that you have downloaded from ThemeForest.

Enable the Theme ..and welcome to Ruby, your new Portfolio and Blog Theme!

After installing and enabled "Ruby" you have to create the pages that you need. Go to "Pages » Add New".

• HomePage Creation. Rename in "Home" this first page and save using the template "Home".
• Blog Creation. Rename in "Journal" this second page and save using the template "Blog".
• Portfolio Creation. Rename in "Project" this third page and save using the template "Project".
• Page Creation. Rename in "Contacts" this fourth page and save using the template "Contacts".
• Archives Page Creation. Rename in "Archives" this fifth page and save using the template "Archives".

Now that we have created all the needed pages we can import them; so, from the Main WordPress Menu:

- Go to "Settings - Reading"

- Now select "A static page (select below)"
- In Front page select "Home Page"
- In Post page "Blog"

Now we are ready to build the Primary Menu. From the main WordPress Panel go to "Appearance - Menus". Create a new Menu and rename it: "Primary Menu" (without quote marks).

Add to menu this pages: Home, Project, Journal, Contacts. Now select "Top Primary Menu" and save.

Ruby requires the installation of five plugins to working. To do that you have to go in "Appareance - Install Plugins".

• BioTools
• Contact Form 7
• Essential Grid
• RoyalSlider

BioTools

This plugin active the Portfolio and other options.

Contact Form 7

To create your Contact Form go to "Contact - Add New" from the Main WordPress Menu and follow this instructions: Enter a title for you new Contact Form and then put the following code in your contact form field, like the screen below.

Enter the following codes in the right sections:

Save and copy the your Contact Form 7 ID (highlighted in red upward in the previous screen) Now go to "Appearance - Widgets" and enable "Contacts Area" widget, this widget is your Contact Form. Use the Text Widget to add the this code:

contact-form-7 id="Your ID" title="Contacts Area"

In "Your ID" paste the ID previously generated.

Leave the rest unchanged, or modify it at will and save.

Essential Grid

Go to "Ess. Grid » Import / Export". Select "Import".

With: "ess_grid-only-grids-and-custom-skins.json" - This file load only custom contents of essentials grids, the default files are already installed. (advised)

Choose the setting file "ess_grid-only-grids-and-custom-skins.json" (available inside the Ruby ZIP) and click "Read File.

Click "Import Select Data". If everything goes well, grids are ready to use.

With: "ess_grid-all-contents.json" - This file load all default and custom contents of essentials grids, if you use this file you need to overwrite the contents of default.

Choose the setting file "ess_grid-all-contents.json" (available inside the Ruby ZIP) and click "Read File.

Select "Overwrite Existing" and click "Import Select Data". If everything goes well, grids are ready to use.

Go to "Appareance » Widgets" and enabled the Grids.

Essential Grid Skin

With the powerful editor skins of "Essential Grid", you can create or edit skins for items of your portfolio.

Go to "Ess. Grid » Item Skin Editor", choose your skin and click edit.

RoyalSlider

*IMPORTANT* Go to "Royal Slider - Settings" and check "On every page (overrides all other options)"

Home Slider

Go to "RoyalSlider » Add New". Create a new "Custom" slider. Rename it "Home Slider".
It is much important to follow of the settings to display correctly:

• General Option: Default
• Skin: Header Slider
• Size & Scaling:
  • Width: 100%;
  • Height: empty
  • Auto scale slider: check;
  • Base width 2560;
  • Base height 612;
  • Auto height: uncheck;
  • Slides spacing: 0
• Image Options:
  • Image scale mode: Fill the area;
  • Image align center: check;
  • Image scale padding: 0;
  • Lazy-loading: uncheck;
  • Main image width 1670;
  • Main image height 400;
  • Thumb image width: empty;
  • Thumb image height: empty;
• Bullets: None

Create the class for the slides

• Create New Slide
• Block Editor
• Block CSS Class - Add New Class
• Create: "AbTextAlignLeft" e "AbTextAlignRight". These classes will be used to move the text to the left or right in the slide.

Add your Photos and save.
Save.

Go to "Appareance » Widgets" and enabled the shortcode.

Gallery Blog Post

Go to "RoyalSlider » Add New". Create a new "WordPress Gallery" slider. Rename it "Gallery Blog Post".
It is much important to follow of the settings to display correctly:

This slider is used to add custom gallery on the blog pages. Follow the instructions for the correct use of RoyalSlider in the posts.

• General Option: Default
• Skin: Blog Slider
• Size & Scaling:
  • Width: 100%;
  • Height: empty
  • Auto scale slider: uncheck;
  • Auto height: check;
  • Slides spacing: 0
• Image Options:
  • Image scale mode: Fill the area;
  • Image align center: check;
  • Image scale padding: 0;
  • Lazy-loading: uncheck;
  • Main image width empty;
  • Main image height empty;
  • Thumb image width: empty;
  • Thumb image height: empty;
• Bullets: None

Add your Photos and save.
Save.

Single Project Slider

Go to "RoyalSlider » Add New". Create a new "WordPress Gallery" slider. Rename it "Single Project Slider".
It is much important to follow of the settings to display correctly:

This slide is used to add custom gallery on the pages custom. Follow the instructions for the correct use of RoyalSlider in the posts.

• General Option: Default
• Skin: Project Slider V1
• Size & Scaling:
  • Width: 100%;
  • Height: empty
  • Auto scale slider: uncheck;
  • Auto height: check;
  • Slides spacing: 1
• Image Options:
  • Image scale mode: Fill the area;
  • Image align center: check;
  • Image scale padding: 0;
  • Lazy-loading: uncheck;
  • Main image width empty;
  • Main image height empty;
  • Thumb image width: empty;
  • Thumb image height: empty;
• Bullets: None

Add your Photos and save.
Save.

In Ruby, the blog is the "Journal" page. Ruby has six types of posts format: Standard, Audio, Video, Gallery, Link and Quote. Each on with its own style and feature.

The articles will be written, by the editor of WordPress, using the section: "Portfolio » Add New". You can insert a thumbnail image, a summary, the various categories, clients, skills and hashtags.

For the best visualization of the posts with an particular format, you will need to follow some simple.

Gallery Post

The Shortcode of the Gallery will be on the first line (add royalslider="3" to enable the skin, where "3" equals the ID of your slider blog), just below will go the text without the need for special formattings.

Post Quote

The text will be inserted between the

<blockquote> Your Content </blockquote>

The first line is the quote, the second line is the author. Open the tag and write the quote. New line, write the author and close the tag.

In Ruby, the portfolio is the "All Projects" page. Ruby has two different styles to the display of the Single Page of the Portfolio. Selectable from the "Biolab Customize Theme".

The articles will be written by the editor of WordPress from the section: "Portfolio » Add New". You can insert a thumbnail image, a summary, the various categories, clients, skills and hashtags.

For the best visualization of the posts with an particular format, you will need to follow some simple.

Project Post

(Optional for the Layout 1 of the Single Page of the Portfolio) the shortcode of the Gallery will be on the first line (add royalslider="4" to enable the skin, where "4" equals the ID of your Project Slider.

Just below will go the text without the need for special formattings.

(Optional for both layouts) add the shortcode to view the section where to write the name of the client and the various skills.

At last, add the shortcode to enable the button.

Now you can add your single images without slider.

*IMPORTANT* It is necessary you do not leave spaces between the various elements, except for the text and the gallery.

Ruby currently supports two types of shortcode: customizable buttons and the "client & skills" area of the single page of the portfolio.

Buttons

The buttons can be inserted in the text editor when creating the article with the following syntax: color button name="Text" url="Link"
Are currently ten available colors: White, Red, Black, Grey, Blue, Yellow, Violet, Azure, Turquoise, Green and Orange.

Customer & Skills Area

The area of Customers and Skills can be inserted in the Text Editor when creating the post with the following syntax: clients name="Name" url="Link" skill="One - Two - Three"
This shortcode will be used to provide visitors with information about customers you served.

Custom CSS

In this area you can change the colors and style of the other sections of Ruby.
Go to "BioLab Customize Theme - Styling" and add your favorite CSS.

Google Font Style

Ruby supports many Google Fonts, you can choose your favorite through this area.
Go to "BioLab Customize Theme - Styling" and choose your favorite font.

For update Ruby unzip the download file, and inside, you’ll find a "ruby.zip".

Unzip "ruby.zip". Open your favourite FTP program and navigate to the following directory: "/wp-content/themes/ruby" delete all of the files and folders in this directory, and replace them with all the files and folders from the "ruby.zip".

*IMPORTANT* All of your content and settings are stored in the WordPress database, so updating manually this way will not delete any of your previous works.