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 useLegacy CSS
Load parts of the bootstrap2 modal for backward compatibilityShare buttons
Show or hide share buttons at the bottom of each pageLarge share buttons
Set the size of the share buttonsText before icons
Set the text to show before the share icons, default: Share this pageHide 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 pageButton color and button hover color
Set colors for each stateSelect blog animation
This is the effect the blog articles will haveSelect duration
The duration of the chosen effect.Load jQuery
Load jQuery library from jQuery.com, default is YESLoad 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 linksTemplate main contrast color
Sets the contrast colorTemplate background color
If no image is used, this will be the background color for your websiteMain container bg color and opacity
Sets the background color and transparency for the main containerModules bg color and opacity
Sets the background color and transparency for the modulesText bg color and opacity
Sets the background color and transparency for the content containerTop padding content container
Sets the top padding for the content containerRounded corners
Sets the rounded corners in pixels for the content containerContent border color
Sets the border color for the content containerButtons
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 selectedGoogle font family
Select the google front from the pulldownGoogle font variants
Set the variant for the selected fontH1-h6 Colors
Set the header colorBody font settings
Google font for body
Default yes, if no, arial is selectedGoogle font family
Select the google front from the pulldownGoogle font variants
Set the variant for the selected fontText color
Set the main text color. 4
-
TOP A-F
Each element has the same options:
Background image
Set the background image for this elementParallax scrolling
Set the scrolling option for the background imageRow 100% wide
Make the row 100% wide, or stay within the predefined template widthBackground color
if no image is used, this color will be used.Header color
The color for the headers in this elementFont color
The color for the fonts in this elementLink color
The color for the links in this elementTop-bottom padding
Top and bottom padding for this element in PXLeft-right padding
Left and right padding for this element in PXCustom 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 elementParallax scrolling
Set the scrolling option for the background imageRow 100% wide
Make the row 100% wide, or stay within the predefined template widthBackground color
if no image is used, this color will be used.Header color
The color for the headers in this elementFont color
The color for the fonts in this elementLink color
The color for the links in this elementTop-bottom padding
Top and bottom padding for this element in PXLeft-right padding
Left and right padding for this element in PXCustom 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 toolbarToolbar link color
Set the color for the links in the toolbarToolbar padding
Set the padding for the toolbar in pixels.Footer
Background image
Set the background image for this elementParallax scrolling
Set the scrolling option for the background imageRow 100% wide
Make the row 100% wide, or stay within the predefined template widthBackground color
if no image is used, this color will be used.Header color
The color for the headers in this elementFont color
The color for the fonts in this elementLink color
The color for the links in this elementTop-bottom padding
Top and bottom padding for this element in PXLeft-right padding
Left and right padding for this element in PXCustom 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 elementCopyright header color
Color for this elementCopyright background color
Color for this elementCopyright link color
Color for this elementTop-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