Need More Help?

We are here to serve you

Sometimes, it becomes confusing to someone that in which files the css styles should be applied. There are two types of files to apply css styles- less files in less folder(templates>rox_right>less) and css files in css folder(templates>rox_right>css).

Which files get the priority first?

Less: Less files get priority first when less mode is enabled from template styles' advanced settings tab.

At this condition, you do not need to apply css styles in css folder (for example-template.css). For right template styles, we have applied styles in the following less files:

- variable.less(templates>rox_right>less>variable.less): There are some global values we have applied here so that it can be applied to other selectors. For example, there are some titles that have font size 22pixels. We have applied css in variable.less for this font size. First-we have defined a selector variable as "semi-large-text" and then we have applied font size to this selector variable as 22px. Then we have applied this selector variable (semi-large-text) to other selectors when needed.You will get various such kind of variables in variable.less files.

- theme.less(templates>rox_right>less>theme.less): CSS for all the sections, layouts, pages etc. have been applied in theme.less file. 

- preset.less(templates>rox_right>less>preset.less): All the css styles for preset colors have been applied in this file.

CSS: When less mode is disabled, css files get the first priority.

 

Portfolio details page in right template has been created in a specific way.  This page has been linked with single portfolio link of portfolio module. If you click on “preview more link” from a portfolio, you will be directed to portfolio details page and you can see the details of that portfolio project.

In portfolio details page, you can show the details of a project. There is a carousel slider to show the project images.

Generally, the “project details” in portfolio details page is an article, created from joomla article manager. But the article for portfolio details page should be configured in some specific ways.

Article should be in category that you created to show with portfolio module. For example, we created two article categories (named as “Portfolio” and “Recent Work” ) to show with portfolio module and all the project articles that we created with article manager have been categorized in different project categories. All the project categories have been included  in these two categories.

When you create an article for “portfolio module” category, you have to configure it using the settings that have been added just for portfolio details page.

Here you can learn how to configure an article for portfolio details page. Let’s discuss with an article that we have already created.

Article name: Project title.

How to creat: Administration>article manager> add new article

At the right side bar, there is “Portfolio Details Option” tab. Click on it. You will get the setting panel as like as the image bellow:

Details page title: It should be project title

Portfolio item image: Images of the project to show with slider.

How to show other module in portfolio details page?

If you want to show any module in the portfolio details page, then keep the module with position “none”. In our demo template we have published sp portfolio module. The position of this module is none.

Right Service Module is a dynamic module. You can add content of this module from the Joomla administration panel. Using this module you can add image, text, read more buttons etc.

Right service module has been created by default to show 3 blocks in a row.

You can configure the data for each block from module’s configuration panel.

How to configure the module?

Get the module from admin panel: Go to Administration>Extensions> Module Manager> by filtering, select module type “right service”>you will get 2 modules of same type. Each of the two modules has been published in different positions of different pages.

As the configuration/settings type of the module is same for all of the two modules, in this section customizing the” what we can do (home/about us basic/about/me)” module has been discussed for example:

a. Click on the module to open the configuration panel.

b. At the right side bar you will get the setting options of the module.

Basic Settings: From here you can select the number of rows that you want to show. You can select up to three rows. Each of the three rows has 3 blocks and same type of data configuration settings.

First row setting has been shown below as an example:

 

Icon Image: There is an icon image at the top of each block’s main image. The icon image has been set up as background image. In our template we have added different colored icon images for different preset colors. So, you will get the css for icon images in preset.less (templates>rox_right>less>preset.less) file.

Shadow Image: There is a shadow image at the bottom of each block’s main image. Shadow image has been set up as default. If you want to remove it, then you have to edit the module’s default.php file. Get php file here: Modules>mod_rox_right_service>tmpl>default.php

Get following codes in the file:

<img class="service-box-shadow" src="/support/<?php echo JURI::root();?>modules/mod_rox_right_service/assets/images/shadow.png" alt="image"/>

CSS for the module: All the css style codes, except preset color for readmore button, have been applied in module’s css file. Get it from here:

Modules>mod_rox_right_service>assets>css>style.css

Button background color has been applied from preset.less file. 

  Customizing Configuration Label/language support: You can customize the sequence slider's labels/language. See the section of Customizing Module's Language/labels

 

We have used nivo slider from sp smart slider. Nivo slider is one of the slider integration of sp smart slider. We have already downloaded and installed the nivo slider in our Right Template. In this documentation customizing of nivo slider have been focused on.

Module Position: Feature

Module assigned with page/pages/menu: Nivo slider (Main menu>Slider>Nivo slider).

Get the module in admin panel: Administration>Extensions>Module Manager>by filtering, select module type>sp smart slider>click on to enter the configuration setting panel.

Now you can configure the module from the right side bar of configuration panel.

Basic Options (slide style): You must select nivo slider. It is already selected. So, do not change this setting.

Sliders: From here you can add new slide, edit the added slide. You can also input data from here for your slide. See the image below:

 To add content in the slide click on edit slide. See the image below, this is the single slide configuration panel.

When all the data content added into a single slide, save the change. 

 

Nivo Slider Settings:

This is the nivo slider settings panel. From here you can set up the slider effects. That means you can configure the appearance of the slider that you want to show in the front end of your site.

CSS styling of the Module: The css styles are coming from module's css file.If you want to customize any of the css styles, then it's best way to put css in theme.less file(when less mode enabled) or template.css file (when less mode disabled.)

 

Carousel slider performs as a basic image/video/content slider. We have added 10 slides, that you can define dynamically. 

Position of the Module: Feature.

Get the module in admin panel: Administration>Extensions>Module Manager>by filtering, select module type>mod_rox_carousel_slider>click on mod_rox_carousel_slider to enter the configuration setting panel.

General Setting Tab:  Define the number of slides you want to show.

Slide Settings: There are 10 different slide setting panels. You can set each of the slide contents from these panels. For an example Slide-1 setting has been discussed. See the image below:

How to add video:

 You can add video object from youtube. But you have to make sure that you have put correct url of the video. 

Get the video from youtube. See the image below:

 

Select a video from youtube, open it. Then do the steps as like as image above:

1. From the bottom of the video frame click on share. 

2. Click on Embed to get the url.

3. Copy the url as like as the image above.

Paste the url in rox carousel slide setting panel. See image below:

Get Module's CSS Stylesheet: You can edit the style from your module directory. Go to [Where you setup the joomla or directory]  > modules  > mod_rox_carousel_slider  >  assets  > css  > carousel-slider.css

 Customizing Configuration Label/language support: You can customize the sequence slider's labels/language. See the section of Customizing Module's Language/labels

 

 

Fraction Slider is another slider integration of Right Multipurpose Joomla Template. Using this slider you can display multiple background images, texts and object image. There are two slides to show in fraction slider.

Position of the Module: Feature.

Assigned page/pages: Fraction Slider (Slider>Fraction slider).

We have already installed the module for Fraction slider in our demo template. So, in this section of documentation we will discuss about how to customize the Fraction Slider Module.

Get the module in admin panel: Administration>Extensions>Module Manager>by filtering, select module type>mod_rox_fraction_slider>click on to enter the configuration setting panel. 

In General Setting Tab (at the right side bar) you will get following options:

Slider Full Width: Using this option you can set your slider to full width/box layout on the screen. Select true to enable full width mode and false to enable box layout.

Enable Controls: Enable/disable navigator controls by selecting true/false.

Responsive Slider: If you want to show your slider in responsive mode, select true; otherwise select false.

Slider width/height: The values for width and height have defined in “pixel (px)” unit.

Module Increase: Select True/False to Enable/Disable.

Pause on Hover: Select true to activate the pause function. It will stop the sliders to slide when hovering on the slider.

Slider Animation: Select true/false to enable/disable the slider animation.

 First Slider Setting: This is the settings for first slider.

 

 Second Slider Setting: This is the settings for second slider.

 

Customizing Configuration Label/language support:

If you wish to customize the labels of the module’s configuration panel with your native language or if you wish to change the label of the module’s configuration panel then you can do it easily following the steps below:

a. Get language pack: To customize the labels with native language, you have to download the language pack and install it in the admin panel.

b. Get the language file: Go to Joomla language folder>en_GB folder> select the language file of the module (select the file with the .ini extension)> en-GB.mod_rox_fraction_slider.ini.

c. Change labels: Open the file with notepad editor. Change the labels. Now you have to copy the edited labels and paste in module’s en-GB language file.

d. Get Module’s language file: Go to folder named as Modules >Enter into the folder of target module (e.g. mod_rox_fraction_slider)>language folder>en_GB folder> open the file (with .ini extension) in notepad editor>select all the content (ctrl+A)>paste the copied content (content from edited language file) by pressing ctrl+v>save the file (ctrl+s)

Module  Style codes: All the style codes for the fraction slider module have been included in module’s css file. The path directory is Modules>mod_rox_fraction_slider>assets>css>fractionslider.css/style.css

 

 

Sequence slider has three styles named Parallax, Apple and modern. Each of the slider styles has been assigned with different pages:

Parallax style: Slider>both in pages of Sequence slider & Sequence slider>style one.

Apple style: Slider> Sequence slider>style two.

Modern style: Slider> Sequence slider>style three.

All of the three styles above have nearly same configuration panel. That’s why in this section Parallax style customization has been discussed as an example of the three styles.

Position of the Module: Feature.

Get the module in admin panel: Administration>Extensions>Module Manager>by filtering, select module type>mod_rox_sequence_slider>click on mod_rox_sequence_slider parallax to enter the configuration setting panel.

General Setting Tab:

From general setting option you can select style layout such as- Parallax/Apple/Modern

As we are discussing about parallax slider style, let’s get introduce with Parallax setting options:

Dynamic Jquery Functions:

We have added some jquery functions that can be enabled or disabled dynamically. See the image below:

Parallax auto play: To enable slider auto play select true.

Parallax delay time: Set the time period for slides to remain in the front end until next slide comes.

Parallax Sliding Pause On Hover: Selecting true will enable the pause function when hovering on the slides.

Parallax Navigator Next Button / Parallax Navigator Previous Button : Enable/disable to show the navigators by selecting true/false.

Parallax Pause Button: Enable/disable parallax slider pause button by selecting true/false.

Parallax Preloader: To show preloader select ture, to hide preloader select false.

Parallax Preloader Delay to Hide: Time period for preloader to hide from the front end.

CSS for Parallax Preloader: CSS for preloader have been included.

Parallax Animation Starts In Frame: Using this option you can enable/disable to start/not to start the animation when the page loads.

Parallax Navigation Skip: You can set the navigator time to next slider.

Parallax Animation Delay for Reversing: If you select true then animation will be reversed in delay. Selecting false will deactivate this function.

Others Settings for slide: See the image below:

Customizing Configuration Label/language support: You can customize the sequence slider's labels/language. See the section of Customizing Module's Language/labels

Style codes for Module: You can edit the style from your module directory. Go to [Where you setup the joomla or directory]  > modules  > mod_rox_suquence_slider>  assets  > css  > sequencejs-theme.apple-style.css/sequencejs-theme.modern-slide-in.css/sequencejs-theme.sliding-horizontal-parallax

We have integrated the latest version of revolution slider (unite revolution slider 2) in Right template. You will find some extended features in the latest edition of the slider, such as- video background slider is one of the most attractive features of the new edition.

We have added both of normal (without video background) for Slider menu>Style one & Style two and video background module for Slider menu> Style3 in our template.

Note: You do not need to purchase the revolution slider pack separately. We have included it with our template pack. It has also been installed in our template. You just need to customize it according to your choice of use. 

1. Revolution slider normal:

Position in the template: Feature

Assigned pages: Home, Slider>Style one.

Find the Module in Admin Panel: Administration>Extension>Module Manager>by filtering, select Unite Revolution 2

Configuration for normal mode: Click on Unite Revolution Slider 2>you will get the configuration panel. From the general setting option, located at the right side bar, you can select either it should be published with normal mode or with video background style. Select revo style 1 to publish in normal mode.

Configuration with Component: To configure slider, slides, text layer, image layer, animation, styles etc go to component using the directory-Administration>Components>Unite Revolution Slider2>click on rev_style1 to open the configuration setting panel.

In configuration setting panel of main slider, you will get so many setting options. In this section only our customized setting options have been discussed.

This is the main slider setting:

 

 We have set up the general setting panel as like as the image below:

Almost of the other setting tabs at the right side bar are in default status. We have not customized those options. You can check it out and set up according to your choice. When all of the slider settings are completed, save the settings. 

Editing Slides: To edit each of the slides click on Edit Slides.

Each of these slides contains slider image, image layer, text layer, and animations on sliding. How have we edited these slides? For example, editing the first slide has been discussed here.

 Editing first slide:


- Click on edit slide

 In first slide, there are background image, image layer and text layer. 

- Change background image

 - Add layer (you can add text layer, image layer, video layer)

 In our demo template we have some added layers already. Let's see how we put styles in these added layers.

- Click on one of the text layers

Now you can drag and move this layer on all over slide and place in any position on the slide.

- This is the general parameter setting panel of the selecter layer shown in above photo.

 - Get the styles of the selected layer. We have applied styles using both edit style and edit global style options.Click on each of the buttons, you will see the styles.

- Using edit style button we have applied css styles only for the selected layer.When you click on the edit style a pop up will come. You will get an option panel. Using simple editor, you can apply styles dynamically

- using advanced editor you can apply css directly. So, using the advanced editor is mostly suggested.

- there is also an option for hover styles. Using this setting panel you can apply layer's hover effect.

 

-Using edit global style button we have applied styles for the layers of which styles are same in different slides(for example: styles of the button text layer are same in all of the 4 slides).

 

 - Now go to layer animation setting panel. Click on Layer animation tab. There are a lot of animations you will find. You can also create new animation styles by clicking on custom animation.

 - Create new animation styles by clicking on custom animation.

 

 - Do not forget to update your slide whenever you make any kind of changes in your slide's layers.

 Hope you can customize other layers using the guidelines given above. Do the same for other slides also.

 2. Revolution Slider With Video background:

For Slider Menu>Revolution> Style3, we have added video background. Except video background, the ways of editing styles and animation for layers are as same as the given instructions above. How have we added video background in our template? Let's see in the guidelines below:

 - At first create a new slider from here : Administration>Components> Unite revolution slider 2>Create new. In this way we have created Rev video Bg Slider.

 

 - Click on the Rev Video Bg slider. You will get Slider configuration panel. See the background setting of first slide in the image below:

 - Click on add video layer to select video for background. A setting panel will open in pop up. 

- You can edit the added video 

To show video for background, add video using the same way. But keep full width option checked

 

 Important: We have not applied any of the css styles for revolutions sliders in our template's file, except those related to preset color. All the styles have been applied in the Revolution slider configuration panel. 

Note: The guidelines above have been given to let you know the way of customization our Right Template. But the Unite Revolution Slider has lots of functionalities and setting panels. To know more details you are being suggested to visit this link  

 

 

 

 

 

a. Customizing Template Title and Subtitle(rox_title):

In Right Template, we have used a little bit different ways to put title and subtitle of a section or module. You will see in our demo template that some title has subtitle under it and some title has no subtitle. You will also see that some titles are white colored. The common thing of these different type titles is that there is/are colored word or words among the title’s words. In this section of the documentation, following topics will be discussed:

  1. Title font
  2. Title with subtitle
  3. Title without subtitle
  4. Title white
  5. Colored word among title’s words

1.Title Font:  First let’s see what type of font has been selected and how it has been applied for each title. The font name for our template’s titles is “Oswald”. This is a google font. This font has been applied from the admin panel of the template. Here are the steps:

Go to Extension>Template manager>rox_right>Template style and layout configuration panel> font tab>Header font. The header fonts have been set up for “Oswald”. So, we have imported the class for the titles in header font’s input field. 

If you want to change the title font, then first you have to replace the font name with “oswald” font or you can remove the class from the header font input field. If you remove the title class from the header font input field then others font will be applied for titles.

2. Title with Subtitle: We have created custom modules for sections' or modules' title if they have title with subtitle.  

The photo  above is showing an example of custom module  which is used as the title for the module named "rox-product-feature". It has been published in the same position where the module(rox-product-feature) needs to be published and ordered as '1st" by using ordering option of this(custom module) module's configuration panel.

 

So to change the words of the title that has subtitle, you have to find it from custom module.

Find it in this way: Extensions>Module manager>filter module type> Custom HTML>get the module named with the title that you are looking for.

 3. Title without subtitle

If there is no subtitle with the title then, it has been given directly from the module’s configuration panel. So you will find this title along with that concerned module.

4. Title White: White colored (as like as "our crazy skill and why choose first title" in the above photos) titles have a module class suffix. Module class suffix has been given from the advanced options of the module configuration panel.

The css style for color has been applied in the variable.less file (templates>rox_right>less>variable.less)

5. Colored words: Most of the titles have colored word/words that changes/change with the preset color. To apply this feature to Right template we have used a specific tactic. Let’s know the tactic.

If you want to show the colored word of a module of Right template, you have to reset the position of the module from the Template style and layout builder panel.

What type of reset you have to do?: to explain let’s discuss with the title “What WE CAN DO FOR YOU” title. 

This is the title of the module named “right-service-module”. Right service module has been published in the “right-service position” of our demo template. So we have to reset the right service position from the template style panel.

Go to Extension>Template Manager>rox_right>Layout tab>Find the right service position in the layout builder. From the position setting panel select "rox_right"

 

This is not "the end" here. Now you have to type the title in a specific way. So let's type the title in module configuration panel (for example, "what we can do for you" is the title of a custom module so the directory is Extensions>Module Manager>By filtering>module type custom HTML>Module named"what we can do for you")

Typing the title in way shown above will influence the title to show colored word/words in it. See the effect in the image below:

 

b.Template Font Setting:

We have used three types of text fonts in our template- Oswald, Open Sans and PT sans. These are google fonts. You can setup fonts from template style admin panel (Extensions>Template Manager>rox-right>fonts tab).

To apply only one type of font for template, type the font name in the body font.

To apply two different kinds of fonts (one type for body text and another is for title) type the body font name in body font box and another font name in header font box. Then call the selector classes or ids of the text and put them in header input box.

To apply more than two fonts, type the third font’s name on the others font box and call the classes and Id selectors.

 

 

Use Font Squirrel

You can also use font squirrel to apply font in your site. You can get clear guidelines of how to use font squirrel from this link

Note: Please use font squirrel if you cannot find your desired font in google fonts. You also need to have basic coding knowledge to use font squirrel.

c. Template Preset Setting:

We used 18 amazing preset colors in our Right template! There is a preset.less (templates>rox_right>less>preset.less) file where all the styles for selectors, of which colors will change according to preset selection, have been applied. There are some images (e.g. logo) that will also change along with changing the preset. For these images, 18 different colored images have been created and placed in different folders (get directory: templates>rox_right>images>presets).

You can change preset color from template’s style admin panel (Administration>Extensions>Template Manager>rox_right>presets tab)

 

 You can also set up preset from the menu option. See the image below:

 Change preset using style switcher, located at the left side of the template.

D. Theme Setting (Style Switcher):

Using theme setting you can change/select preset color and template layout. Theme setting is located at the left side of the template.

If you don't want to show the style switcher on the frontend of your site, you can disable it from here: Extensions>Template Manager>rox_right-default>Basic Settings tab>At the bottom, get theme setting option>disable the by selecting "Hide" button

 

 

 

 

 

 

 

 

 

 

Page 1 of 2
JoomShaper