This page shows you all available JoonextPro temnplate options. Each tab corresponds with the tab in the template section.

This page shows you all available JoonextPro temnplate options. Each tab corresponds with the tab in the template section.

1

GENERAL

Template variation
Currently not in use

Legacy CSS
Load parts of the bootstrap2 modal for backward compatibility

Share buttons
Show or hide share buttons at the bottom of each page

Large share buttons
Set the size of the share buttons

Text before icons
Set the text to show before the share icons, default: Share this page

Hide content on the homepage
Hides the com_content element on the homepage: homepage menu has to be ‘featured articles’

Show back to top button
Display a back to top button on your template, visible at the bottom of your page

Button color and button hover color
Set colors for each state

Select blog animation
This is the effect the blog articles will have

Select duration
The duration of the chosen effect.

Load jQuery
Load jQuery library from jQuery.com, default is YES

Load Font Awesome
Load font Awesome 5.4.1, default is YES

2

STYLING

Main container width
Set the width of the main container in pixels.

Background image
Select or upload a background image, set for the body element, stretched.

Template main color
Sets the main color for the template, for, amongst others, the links

Template main contrast color
Sets the contrast color 

Template background color
If no image is used, this will be the background color for your website

Main container bg color and opacity
Sets the background color and transparency for the main container

Modules bg color and opacity
Sets the background color and transparency for the modules

Text bg color and opacity
Sets the background color and transparency for the content container

Top padding content container
Sets the top padding for the content container

Rounded corners
Sets the rounded corners in pixels for the content container

Content border color
Sets the border color for the content container

Buttons
Sets the colors for each button class, you can set a border radius for the normal and lg button classes.

3

TYPOGRAPHY

Heade font settings

Google font for headers
Default yes, if no, arial is selected

Google font family
Select the google front from the pulldown

Google font variants
Set the variant for the selected font

H1-h6 Colors
Set the header color

Body font settings

Google font for body
Default yes, if no, arial is selected

Google font family
Select the google front from the pulldown

Google font variants
Set the variant for the selected font

Text color
Set the main text color.

4

TOP A-F

Each element has the same options:

Background image
Set the background image for this element

Parallax scrolling
Set the scrolling option for the background image

Row 100% wide
Make the row 100% wide, or stay within the predefined template width 

Background color
if no image is used, this color will be used.

Header color
The color for the headers in this element

Font color
The color for the fonts in this element

Link color
The color for the links in this element

Top-bottom padding
Top and bottom padding for this element in PX

Left-right padding
Left and right padding for this element in PX

Custom widths
By default modules inside this row are spread out equally. Here you can overrule this option and set manual widths.

5

BOTTOM A-F

Each element has the same options:

Background image
Set the background image for this element

Parallax scrolling
Set the scrolling option for the background image

Row 100% wide
Make the row 100% wide, or stay within the predefined template width 

Background color
if no image is used, this color will be used.

Header color
The color for the headers in this element

Font color
The color for the fonts in this element

Link color
The color for the links in this element

Top-bottom padding
Top and bottom padding for this element in PX

Left-right padding
Left and right padding for this element in PX

Custom widths
By default modules inside this row are spread out equally. Here you can overrule this option and set manual widths.

6

TOOLBAR - FOOTERBAR

The toolbar resided on the top of the template and has 2 fixed options, toolbar-left, and toolbar-right, each 50% wide. Further styling of the toolbar is done in the bootstrap nav module, you must publish in the menu position of the template.

Toolbar font-color
Set the font color for the toolbar

Toolbar link color
Set the color for the links in the toolbar

Toolbar padding
Set the padding for the toolbar in pixels.

Footer

Background image
Set the background image for this element

Parallax scrolling
Set the scrolling option for the background image

Row 100% wide
Make the row 100% wide, or stay within the predefined template width 

Background color
if no image is used, this color will be used.

Header color
The color for the headers in this element

Font color
The color for the fonts in this element

Link color
The color for the links in this element

Top-bottom padding
Top and bottom padding for this element in PX

Left-right padding
Left and right padding for this element in PX

Custom widths
By default modules inside this row are spread out equally. Here you can overrule this option and set manual widths.

Copyright

The copyright areas are at the bottom of the template and have 2 fixed options, toolbar-left, and toolbar-right, each 50% wide. 

Copyright text color
Color for this element

Copyright header color
Color for this element

Copyright background color
Color for this element

Copyright link color
Color for this element

Top-bottom padding
Top and bottom padding for this element in PX

7

RESPONSIVE

This tab allows you to show or hide certain modules on mobile layouts (smaller than 768px) The applies for all top-bottom rows, sidebars, and showcase template positions.

8

CUSTOM CSS

Custom CSS allows you to add your own CSS without having to do this in a custom.css file. There are 3 options, 

Global - CSS entered here applies to both mobile and desktop viewports

Desktop - CSS entered here applies only to desktop viewports

Mobile - CSS entered here applies only to mobile viewports

Yo do not need to put <style></style> tags here.

9

CUSTOM CODE

Adding custom code can be done in the tab custom code.

You can add

Custom head scripts, to be placed inside the <head></head> section

Custom begin body: scripts will be placed right after the <body> section

Custom end body: scripts will be placed right before the </body> section

Google analytics: here you can paste the complete embed for your google analytics code. It will also be placed at the end of the <body> tag.

10

OPEN GRAPH

The JoonextPro template has a twittercard and open graph options built in the com_content. This makes sharing your pages even easier! The template has some general website settings you can enter, and each article itself has unique settings.

We offer the following data:

• twitter:title
• twitter:card
• twitter:site
• twitter:create
• twitter:url
• twitter: description
• twitter:image
• og:title
• og:type
• og:url
• og:image
• og:site_name
• og:description
• fb:admins
• fb:app_id

This makes a complete set for sharing your articles!

Simply complete the section 'Open Graph' in the template settings, and our template will do the rest. Below you can see an example of how it is implemented