Ruby - Installation Guide

Ruby is a new WordPress Theme designed and developed for users who want to expose their personal Projects, Photographs or Stories through blog. It is developed exclusively for the WordPress platform,it has an ultra simple, modern, intuitive design and it works with mobile devices. Thanks to BioPanel you can customize almost every aspect of the site.. From the colors to the layout!

Ruby Installation

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

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

Creating Pages

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 "Blog" 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".

Settings Reading

Now that we have created all the pages necessary we can import them.

Go to "Settings » Reading". Select "A static page". In Front page select "Home", in Posts page select "Journal" and save.

Menu Settings

Now we are ready to build the menu. Go to "Appareance » Menus". Add to menu this pages: Home, Project, Journal, Contacts. Now select "Top Primary Menu" and save.

If you followed all the steps correctly the site will look like in the screen below:

Plugin Installation

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

  • BioTools
  • Contact Form 7
  • Essential Grid
  • Royal Slider

Click on "install" and wait for it to be done.The plugins will be not activated automatically, do it from the list of plugins.

BioTools

This plugin active the Portfolio

Settings Contact Form 7

Go to "Contact » Add New". Enter the following codes in the right sections:

Form:

[text* name class:altTypeName]
[text* email class:altTypeEmail]
[textarea message]
[submit "Send"]

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

Go to "Appareance » Widgets" ” and enable the form. Use the Text Widget entering the code in the picture with the ID of your Form.

Settings 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..

Settings RoyalSlider
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:
  • Image Options:
  • Bullets: None

Create the class for the slides

  • Create New Slide
  • Block Editor
  • Block CSS Class - Add New Class
  • Creare: "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.

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

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

Gallery Blog Post

Go to "RoyalSlider » Add New". Create a new "Wordpress Gallery" slider. Rename it "Gallery Blog Post". Call "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:
  • Image Options:
  • Bullets: None

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: Single Project Slider V1
  • Size & Scaling:
  • Image Options:
  • Bullets: None

Save.

Creation of the Articles of the Blog

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.

Recommended Rules for a good construction of an Article

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

Gallery Post

The Schortcode 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> tags. 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.

*IMPORTANT* If the post is in featured add the sticky tags

Creation of Portfolio Posts

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 "Bio Panel" (The customization Panel).

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.

Recommended Rules for a good construction of an Portfolio Post

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

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 don't leave spaces between the various elements, except for the text and the gallery.

Shortcodes

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: Red, Black, Grey, Blue, Yellow, Violet, Azure, Turquoise, Green and Orange.

Syntax of Buttons
[red-button name="My Project" url="http://biobutterfly.com"]
[black-button name="My Project" url="http://biobutterfly.com"]
[grey-button name="My Project" url="http://biobutterfly.com"]
[blue-button name="My Project" url="http://biobutterfly.com"]
[yellow-button name="My Project" url="http://biobutterfly.com"]
[violet-button name="My Project" url="http://biobutterfly.com"]
[azure-button name="My Project" url="http://biobutterfly.com"]
[turquoise-button name="My Project" url="http://biobutterfly.com"]
[green-button name="My Project" url="http://biobutterfly.com"]
[orange-button name="My Project" url="http://biobutterfly.com"]
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.

Styles & Color Schemes

The style of Ruby is highly customizable through its Control Panel. Header, Footer, Selection and much more thanks to the Custom CSS.

Header's

Go to "BioLab Customize Theme » Header". The head of the Blog and Journal pages is divided into upper and lower. Through the Panel you can change any color you like and move the logo in any position you want.

Footer

Go to "BioLab Customize Theme » Styling". Through the panel you can put any color.

Selection

With Ruby theme, you can also choose the color with which the visitor will highlight, by putting the mouse over it, the text on your site.

Go to "BioLab Customize Theme » Styling". Through the Panel you can put any color.

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.

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.

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.

How to Update Ruby

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.