A magazine blog needs different post types, responsive layout, perfect readability, attractive design, ad space etc and JD Stylo packed with all these.
- Joomla: 3.8+
- PHP: 5.6+
- upload_max_filesize = 4MB (or more)
- memory_limit = 128MB (256MB suggested)
- max_execution_time = 180 (300 suggested)
- PHP upload_max_filesize = 4MB or more
|Chrome 64+||Firefox 58+||Edge 14+||Safari 10+|
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.
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.
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.
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.
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.
Select a Background Image for boxed layout.
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.
Adjust the background image displaying. You can select one of the following values:
Choose the position for the background image from the Dropdown list.
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)
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.
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.
Horizontal layout provides 3 different layouts with logo being on the left & mega menu being on the
right. You also have an option to publish a block on the right that can either be a module position or custom HTML.
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 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.
This options decides the animation that will be used for displaying the dropdown menu.
You can select a logo for desktop view, mobile view and sticky header.
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.
A sticky header is a menu or navigation bar that stays at the top of the page no matter where you scroll. In other words, a “fixed” header. You can enable or disable the sticky header option, By enabling the option the header will stick to the top when you reach its scroll position.
There are 2 different ways you can show the sticky header
- Sticky: A Sticky or Fixed header appears when a page is scrolled down.
- Sticky on Scroll up: Sticky Header only appears when scrolled up to the page.
Sticky Header Logo
Select an image for your sticky header logo ( Sticky header logo is only for desktop and will not be visible on the mobile sticky header).
Sticky Header on Desktop
You can select whether you need the header to be sticky at all times or sticky on scroll up.
Sticky Header on Tablets
You can select whether you need the header to be sticky at all times , sticky on scroll up or to be static (not visible on scroll) in Tablet view.
Sticky Header on Mobile
You can select whether you need the header to be sticky at all times , sticky on scroll up or to be static (not visible on scroll) in mobile view.
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.
You can select whether you need offcanvas enabled on desktop or mobile only or you can have it displayed at all time.
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.
Allows you to set the default Background color for the body for the whole site.
Set the Text color of the Body Content.
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.
Here you can set the Header color schemes for your site.
Allows you to set the default Background color for the Header section for the whole site.
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.
Here you can set the Off-Canvas color schemes for your site.
Set the default Background color for the Off-Canvas Menu.
Set the Text color for the menu items in the Off-Canvas.
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:
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.
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.
Select the font weight from the list, it will define how bold your text are.
Set the font size you need to use in the text element.
Set the needed distance between letters.
line-height property specifies the height of a line.
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)".
Here you can add custom CSS to add your own styles or overwrite default CSS, Wrapped within
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.
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.
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.
Add phone number here. Leave blank if not required.
Add mobille number here. Leave blank if not required.
Add email address here. Leave blank if not required.
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.
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.
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.
Here you can set a date for countdown exactly when your site is going to be live.
Enter description for your coming soon page.
Set if/how a background image will be repeated.
This property specifies the size of the background images.
This property sets the starting position of a background image.
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.
Footer is a small section at the bottom of each page. You can Enable or Disable the footer copyright bar, by enabling this section it enables you to edit the content of the bottom copyright information of the page.
Here we can enter the text that displays in the copyright bar.
Select a suitable module position where you want to display this feature.
Featue Load Position
If there are other module(s) published to this module position, you can select to display the content of this feature either below or after the module(s) published to this position.
Allows you to upload your browser URL icon. It’s recommended to apply a size of 96x96 pixels to the favicon icon
Select an icon for a favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon.
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
How to add Custom CSS
How to add 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.