Documentation

Revibe

REVIBE template (and QuickStart package) for Joomla 3.4+, is awesome looking Creative purposes layout. It allows you quickly set up your portfolio, private CV, business site. Revibe can be used for any news niche such as tech, music, food, sports, health, games, fashion and much more. But modern, full of features and flexible design can be used to create any other website.

General Information

First, Thank you for purchasing our digital product (template). We are happy that you are one of our customers and we assure you won't be disappointed as well. Spending several minutes reading the manual may save lot's of your time and avoid questions with obvious answers.

To use this template you must be running on Joomla 3.4+ or higher, PHP 5.5 or higher. Please contact your web hosting service provider to be sure your server complies with the requirements.

Following guide contains the basic configuration settings for the Revibe Joomla 3 template. Using these information you will be able to configure your template when you cannot use the Quickstart package. This template has been based on Helix3 Framework  (more).

DOWNLOAD | DEMO

Template Demo Appearance

To recreate exactly the template  demo design, you will have to install the Quickstart. Downloaded from our site package (revibe_quickstart_j3.zip) includes: Joomla 3+, template, modules, components, plugins and sample data. By using this package, you will have a complete site look like on demo site.

The images shown in the live preview are for demonstration purposes only and are not included in the download package. Due to license QuickStart package contain mostly only image placeholders (Pictures with JoomShaper logo inside). Unfortunately but we cannot include in Quickstart package all photos from original Template Demo. We assume that our customers have (or should have) their own photos, which better fit to real website purposes. First online impression is the most important, so please use high quality and legal photos.

main home

Note! Template package (~2,4 MB) doesn't include any modules/plugins nor demo content. If you manually installed the template on your existing setup, you will have to manually create each article and install & set all modules to suit your needs using our example settings. So if you are not advanced user please install the template Quickstart (~75 MB) on your testing ground/environment, just to get more insights on sample content and advanced usage. You don't have to use demo content to build your own website, demo-dummy content is only for showing a features of current template and included components.

How to install Quickstart

  1. Unfortunately, it is not possible to install the Quickstart package inside an existing Joomla installation via the Extension Manager, because the Quickstart also includes the Joomla! CMS itself. This package is strictly for use with a new Joomla! installation to provide you with a duplicate of our demo for that particular template.
  2. You can install Quickstart just like a typical Joomla 3.x installation process (step by step).
  3. Unzip Quickstart package to get separate folders and files before sending to server.
  4. Please do not use "admin" as a your default Super Admin Username (!). Use something more unique during installation process (security reasons!).
  5. In most cases we suggest to use a new/fresh database (MySQL 5+) for all QS installations.

Template Default Settings

New Helix3 allows you to Export-Import its settings from Advanced tab. It means that you have to download this text file, then open in any text editor and paste into your template. It includes all basic settings of Template only !.

Typography

In template demo we used Google Font named: Maven Pro for whole main typography including headers and menu. Check template Typography tab inside Newedge template settings, of course you can set your own font-family. More information about it you can find >> here <<.

fonts

Homepage Layout

The following screenshot shows the detail of Revibe template settings of "Home" page with list of the addons used in the demo content configuration. Please note, Home page was built using SP Page Builder (PRO), but you can use layout structure (with only modules!) to build similar appearance. Of course redesign using SP Page Builder component is much faster and easier.

Here is default "Home" layout created in SP Page Builder Pro (tool provided by JoomShaper):

page builder

Revibe Module Positions

The following screen-shot highlights the default layout module positions that we used in current template. By using Layout builder in Helix3 users will be able to move positions or change their size. Our in-build layout builder from template settings provide the opportunity to add new positions, columns, rows wherever you need as much as moving elements.

layout

 

Used Extensions

In our DEMO version we used core and additional extensions, here is a full list of them:

  • SP Page Builder (Pro) - Pro version is built-in only in QuickStart (JoomShaper.com)
  • SP Simple Portfolio (JoomShaper.com)
  • AcyMailing (acyba.com)
  • Articles - Latest (Joomla core module)
  • Breadcrumbs (Joomla core module)
  • Custom HTML (Joomla core module)
  • Search (Joomla core module)
  • Menu (Joomla core module)

Module Manager View - with list of all used and published modules

modules

Featured Work

The Featured Work section on home page and whole Portfolio section was built using a SP Simple Portfolio (more) component  and we used module SP Simple Portfolio which was published inside the SP Page Builder "Home" layout page on module position named "pagebuilder".

featured work

SP Simple Portfolio module settings, all items are taken from component.

portfolio module

TopBar Colors

topbar

By default TopBar, which means first dark bar in template have dark color and white text. This section was used in template demo to publish two modules on Top1 and Top2 position. Of course you can customze it, content and colors as well - even without using CSS tricks. To change colors go to Templates and edit Shaper_Revibe template, then open layout tab. On first bar named "Top Bar" click Settings links and now you can edit colors. Do not forget to save new settings twice. First in opened Window and on the toolbar.

here topbar

BTW By default in Quickstart content of Top1 and Top2 position was filled by template settings not modules. Check first Basic tab. If you need more advanced content or features just disable from settings also and publish there your own modules.

 

Menu Background

You can modify background color under main menu using basic CSS. Here is default code, please override vaules to customize appearance.

#sp-header {
background-color: rgba(255, 255, 255, 0.96);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
height: 60px;
width: 100% !important;
}

We suggest to use custom.css file for it. This file have to be created in /css folder of template.

 

Blog section

In current template we used default Joomla! articles to build whole Blog section. Each article in Blog section is also using "Helix Blog options" which you can find in article edit mode under this tab. On following image you check example settings with final detail view.

blog from revibe

Second tip. In Demo we shown 4 blog views, which are in general this same component view but with different settings. The most basic (2 big objects with images and 9 smaller ones) was based on following settings:

blog settings - revibe template

 

Article blog view hover layer

In current template for image hover effect especially in blog view we used a color layer. It's sort of red color, of course you probably need your own color. If yes, you have to override only selected class with your RGA color. This is example for blue one:

.view-category .blog .items-row .item .entry-image::after { background-color: rgba(0,174,239, 0.7); } 

color blue

You can use above CSS code in Custom CSS field inside template settings or using a custom.css file located in css folder of Revibe template. Both solutions work unless you will change - "Compile LESS to CSS" to Yes switch.

If you're using Article addon and you want to replace layer color as well - please use following CSS code:

.revibe-article .sppb-addon-article .sppb-article-img::after { background-color: rgba(0,174,239, 0.7); }

And result should be similar to that:

article addon

Newsletter