A magazine blog needs different post types, responsive layout, perfect readability, attractive design, ad space etc and JD Stylo packed with all these.

Template Info

Technical Requirements

  1. Joomla: 3.8+
  2. PHP: 5.6+
  3. upload_max_filesize = 4MB (or more)
  4. memory_limit = 128MB (256MB suggested)
  5. max_execution_time = 180 (300 suggested)
  6. PHP upload_max_filesize = 4MB or more
  7. Browser Support

    Chrome 64+Firefox 58+Edge 14+Safari 10+

Key Notes

Pro extensions are bundled in only Quickstart package

All the pro extensions used in the templates, are bundled only in the quickstart package. These are not provided separately. If there will be any update in the extensions version, we will release an update for the template with other changes possible. And if you want to get a licence or regular update for the extensions, you need to purchase licence key from the respective owner of the extensions.


If you want to recieve automatic updates for this template and don't want your customizations to disappear, we recommend adding new files for your custom code and NOT modifying the existing core files.Create a new file and write all the custom code in that file. So when there are updates, your custom work will stay and you can stay up-to-date with the latest version of the template as well.

Click here to know how to add SCSS/CSS/JS file

Installing Template & Quickstart

We have recently covered an article where you will find a detailed guide to install Joomla Template and QuickStart Packages. Please click here to see in details.

Installing Extensions

To Install/update for Extensions:

For free version: Go to Extensions > manage> Update, select respective extension for update> Click on update.

For Paid version: Download the latest files, then go to your Admin panel-> Extension-> Install, Install the respective files.

NOTE: If "paid" version of extensions are updated via Joomla's updater you might be downgraded to the "free" version of the extension.

Basic Settings

Under Basic you have the following settings, here you can style the preloader, Back to top Button and select the layout settings.


This option allows you to enable or disable the preloader for the site. It is displayed while the content is being loaded.


Here you can select the animation for the preloader from the list.


Here you can set the color of the animated element of a preloader.


Here you can select the preloader background color which is to be displayed as a background for the preloader.


This option allow you to set the size of the preloader.


Back to Top

The “Back to top” button allows you to scroll smoothly to the top of the page with one click. This option allows you to show/hide the back to top button. This Button will display at the bottom right corner of the page after the user scrolls down a bit.


Here you can select the icon style for your Back to top Button from the dropdown list.

Icon size

You can easily set the size of the icon in pixel to it’s is maximum value by moving an indicator in a horizontal fashion.


Here you can set the icon color for back to top button.


You can set the background color for back to top button.


You can select Back to top Icon shape i.e. Circle, Round and Square


Layout Settings

You can use two main layouts for your site, Full-Width or Boxed. The full-width layout is the default layout for the template and it displays your content centered whereas in the boxed layout you can apply a background to your body and all your content will still be centered with the background flowing around it.

Background Image

Select a Background Image for boxed layout.

Background Repeat

Allows you to choose the repeat for the background image. You can select All Repeat, horizontal repeat, vertical repeat or disable repeat of the image.

Background Size

Adjust the background image displaying. You can select one of the following values: cover, contain and inherit.

Background Position

Choose the position for the background image from the Dropdown list.

Background Attachment

Set the background image attachment style: Scroll – background image scrolls with the content , Fixed – the background image is fixed and content scrolls over it (Select fixed if you want have parallax scrolling effect)

Layout settings


Header section combines with the options such as logo, mega menu, mobile menu & off canvas menu etc that will appear at the top of each page when displayed. Disabling the header would disable all header options.


Header Module Position

Here you can select a suitable module position where you want to display header.

Header Mode

You can select from 6 different header types, the header layouts provide a visual representation of what your header on the frontend would look like.

  1. Horizontal layout provides 3 different layouts with logo being on the left & mega menu being on the left, center or right. You also have an option to publish a block on the right that can either be a module position or custom HTML.

  2. Stacked header layout provides with 3 different layout options:

    • Stacked Center: This layout provides you with the logo and menu in the center of the page with an option to add a block below the menu.
    • Stacked Separated: This layout provides you an option to have the logo between the menu, Half the menu items will appear on the left and other half on the right with an option to publish blocks above and below the menu/logo position.
    • Stacked Divided: This layout provides you with logo & menu on the left (on top of each other) with option to publish 2 blocks on the right, next to menu and/or the logo.

Header Blocks

Header blocks are positions that let you publish content inside the header. Based on the layout selected you may see 1 or 2 blocks. You can either directly publish HTML in each block or select a module position of your choice and publish modules to the selected position.

Mega Menu

You can select from the dropdown list which menu you’d like to publish as your main menu.

Mobile Menu

You can select from the dropdown list which menu you’d like to publish as your main menu on mobile.

Logo Options

You can select a logo for desktop view, mobile view and sticky header.

Logo Type

Logo type gives an option to set the image for logo or the logo text.

  • Text Logo Settings - You can enter the text for the logo and an optional tagline as well.
  • Image Logo Settings - You can upload a logo for the desktop view and one for mobile view as well.

OffCanvas Menu

Here you can customize Off-Canvas style for your site. This is how an off-canvas menu works: The user clicks an icon or performs some sort of action (e.g. slide in on Top , Reveal , Push ) that results in a vertical navigation menu sliding into the screen from off canvas.

Toggle Visibility

You can select whether you need offcanvas enabled on desktop or mobile only or you can have it displayed at all time.

Panel Width

You can set the width of the offcanvas navbar (in pixels), default is 240px.

Off canvas Animation

You can select the animation that will be used for opening the offcanvas bar.


This section allows you to style the color schemes on your site.


Here you can configure color settings for the body.

Background Color

Allows you to set the default Background color for the body for the whole site.

Text Color

Set the Text color of the Body Content.

Link Color

Set the color of the link in the Body Content.

Link Hover Color

Set the color for hovered links; links hover when the mouse moves over it.

body color


Here you can set the Header color schemes for your site.

Background Color

Allows you to set the default Background color for the Header section for the whole site.

Text Color

Set the Text color for the Header section.

Logo Text Color

Set color for your text logo.

Logo Tag Line Color

Set color for Tag Line in your text logo.

Backgroud Color for sticky header

Set background color of the Sticky Header.

heade color


Here you can set the Off-Canvas color schemes for your site.

Background Color

Set the default Background color for the Off-Canvas Menu.

Text Color

Set the Text color for the menu items in the Off-Canvas.

Link Color

Set the color of the link in the Off-Canvas menu for menu and Sub-menu items.

Active Link Color

Set the color for the active links (links become active once you click on them).

Active Background Color

Set the Background color for the active links.



The following screen-shot highlights the default layout module positions that we used in current template. By using Layout builder in Astroid users will be able to move positions or change their size in the grid. 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.


These are the all available template module positions which you can use:

  1. header
  2. hero-section
  3. language-switcher
  4. astroid-top-contact
  5. astroid-top-social
  6. top-a
  7. login
  8. cart
  9. content-bottom
  10. astroid-content-left
  11. astroid-home-page
  12. astroid-header
  13. astroid-footer
  14. breadcrumbs
  15. position-1
  1. position-2
  2. position-3
  3. position-4
  4. position-5
  5. position-6
  6. position-7
  7. position-8
  8. position-9
  9. position-10
  10. position-12
  11. position-13
  12. position-14
  13. left
  14. right
  15. g-map
  1. ad-1
  2. ad-2
  3. ad-3
  4. bottom-1
  5. bottom-2
  6. bottom-3
  7. bottom-4
  8. footer-1
  9. footer-2
  10. footer-3
  11. footer-4
  12. fullwidth
  13. offcanvas
  14. debug


This is a fully customizable font-related section.You can change the fonts and their style accordingly, you can easily customize typography for all body, Menu, Sub menu text and the Responsive Headings, that define the Headings H1-H6.

Font Family

Select the font family from the drop-down list. Here you can select the System Font or the Google font to whole Body of your website

Alt Font Family

If the browser does not support the first font family, it tries the Alternate font family.

Font Weight

Select the font weight from the list, it will define how bold your text are.

Font Size

Set the font size you need to use in the text element.

Letter Spacing

Set the needed distance between letters.

Line Height

line-height property specifies the height of a line.

Text Transform

Set the font transformation, if needed (uppercase, capitalize and lowercase).


set the color of the text. The color is specified by: color name - like "red" , HEX value - like "#ff0000" , RGB value - like "rgb(255,0,0)".

Custom Code

Here we can add Custom CSS , Custom Javascript

Tracking Code

A tracking code is a snippet of JavaScript code that tracks the activity of a website user by collecting data and sending it to the analytics module.

Space Before </head>

For the javascript before </head>

Space before </body>

For the javascript before </body>

Custom CSS

Here you can add custom CSS to add your own styles or overwrite default CSS, Wrapped within <style> tags.

Custom JS

Here you can add custom javascript code here, Wrapped within <script> tags.

custom code

Social Profile

This section allows you to display your social profiles on your site.

In this section we have :

  • Module Position : Select a suitable module position where you want to display this feature.
  • Social Load Position : If there are other module(s) published to this module position, you can select weather the content of this feature should be displayed below the or after the module(s) published to this position.
  • Style : Choose the style how you want to show Social profile on your site, default value is Inherit color.
    In style we have 2 Options to style our social icons:
    1. Inherit color.
    2. Brand color.
      In this section we have in all 19 types of Social Profiles :
      1. Behance
      2. Dribbble
      3. Facebook
      4. Flickr
      5. GitHub
      6. Google +
      7. Instagram
      8. LinkedIn
      9. Messenger
      10. Pinterest
      11. reddit
      12. Skype
      13. Slack
      14. SoundCloud
      15. Spotify
      16. Twitter
      17. Telegram
      18. Tumblr
      19. VK
      20. WhatsApp
      21. YouTube
custom code


In this section, you can add contact Information, customize coming soon and 404 page, set favicon for your site and can also define the responsive breakpoints for your site.

Contact Information

Here you to add Phone number, Mobile number, Email address, Address and opening hours, also allows to customize the settings where you want to display your Contact Information.

Module Position

Select a suitable module position where you want to display this feature.

Featured Load position

If your selected module position for feature has also module then it will works. This is specially where you want to show this feature, before module or after module.

Phone Number

Add phone number here. Leave blank if not required.

Mobile Number

Add mobille number here. Leave blank if not required.


Add email address here. Leave blank if not required.

Open Hours

Add Opening hour here. Leave blank if not required.


Add your address here. Leave blank if not required.


Here you can choose to get the information (Phone number ,mobile number, Email, Open hours and Address) displays with Text or Icons.

Contact Information

Coming Soon

Here you can customize the maintenance mode page when your site is under construction/maintenance.

If we enable the development mode than it will take your site offline and show a static coming soon page


Here you can select a logo which will display on your coming soon Page, default template logo will be displayed if not selected.

Background Image

You can select a Background image for your coming soon page.


Here you can Enter the Title for your Coming Soon Page which will be displayed when your site is under construction.

Countdown Date

Here you can set a date for countdown exactly when your site is going to be live.


Enter description for your coming soon page.

Background Repeat

Set if/how a background image will be repeated.

Background Size

This property specifies the size of the background images.

Background Position

This property sets the starting position of a background image.

Coming Soon

404 Error

Allows you to customize 404 page for your site

Call To Action

Enter text to dislay on Call To Action Button.

404 Page Content

Enter the content of your 404 page.



Allows you to upload your browser URL icon. It’s recommended to apply a size of 96x96 pixels to the favicon icon

Favicon image

Select an icon for a favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon.


JD Profiles

JD Profiles in Stylo Joomla template, we have created a component to manage the team which allows you to create team thumbnail and also detailed page where you can showcase all the details of a volunteer.


How to add Custom SCSS

  1. Go to template directory and find scss folder and create a folder named custom.
  2. Create a custom.scss file in custom folder.

How to add Custom CSS

  1. Go to template directory and find css folder and create a custom.css

How to add Custom JS

  1. Go to template directory and find js folder and create a custom.js


Need More Help?

If you couldn't find an answer for your question in this documentation, feel free to contact us. For technical support, you can contact us via forum here

We’re in UTC +05:30 (Indian Standard Time) and we aim to answer all questions within 8 hours in weekdays. In some cases, the waiting time can be extended to 24 hours. Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.

Once again, thank you so much for purchasing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating this theme.