Skip to content

Documentation

Chandan Deep edited this page Apr 3, 2019 · 29 revisions

Github All Releases AUR GitHub release

Astroid framework

Astroid framework is built with simplicity and ease of use in mind. Astroid lets you manage every aspect of your Joomla! website without writing a single line of code which helps you to build Joomla templates easily. Also available in multiple languages.

Requirements

  • Joomla: 3.8 +
  • PHP : 5.6+

Browser Support

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

Installation

Template Installation

We will be installing the template using Upload Feature in the Joomla Administration Control Panel.

Be sure you have downloaded the template, (You can get the latest copy at https://github.com/joomdev/Astroid-Framework/releases/latest) and logged into Joomla Administrator Control Panel.

Navigate to Extensions >> Manage >> Install

In order to Install, click the browse for file button and select the download files astroid_vxxx.zip, Joomla will automatically start the upload & continue with the installation after selection of a valid zip file.

After installation, you will be notified with a success notification like the following screen.

Installation Successfull

Quickstart package Installation

Quickstart is the exact template that is shown on the demo site. It comes with all Joomla CMS files and with all extensions, sample data, and images.

It is better to use quickstart packages if you do not currently have a website. The first step is to download the quickstart package you want to install.

Follow below link for detail guidance on how to install the quickstart package https://www.joomdev.com/blog/entry/how-to-install-joomla-template-and-quickstart

Setting Astroid as the default template

You can now navigate to Extensions >> Templates >> Styles and set Astroid as your default template by clicking the (star) icon next to the template. Set Astroid as your Default template

Template Options

Template options are divided into multiple sections and then subsections under them. You can see the sections on the left side of the screen and we will go through all the sections one by one.

Basic

Under the Basic section, you have the following settings

1. Preloader

2. Back to Top

3. Layout Settings

Preloader

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

Option Description
Animation Here you can select the animation for the preloader from the list.
Color Here you can set the color of the animated element of a preloader.
Background Here you can select the preloader background color which is to be displayed as a background for the preloader.
Size This option allows you to set the size of the preloader.

preloader


preloader style icon


preloader

Preloader is rendered from the following file, learn more about astroid overrides here.

ROOT/templates/astroid_template_zero/frontend/preloader.php

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.

Option Description
Icon 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 a pixel to it’s is maximum value by moving an indicator in a horizontal fashion.
Color Here you can set the icon color for back to top button.
Background You can set the background color for back to top button.
Shape You can select Back to top Icon shape i.e. Circle, Round and Square

Back To Top Button On Mobile

By Default the Back to Top Button will be enabled on mobile, disable the button if you don’t want this feature in mobile view.

backtotop


Backtotop

Back To Top button is rendered from the following file, learn more about astroid overrides here.

ROOT/templates/astroid_template_zero/frontend/backtotop.php

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.

Option Description
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)

Layoutsetting2


layoutsettings

Header

The header section contains your logo, mega menu, module menu & off canvas menu. Disabling the header would disable all these elements.

Header Module Position

Here you can select a suitable module position where you want to display header. The module position must exist in the layout manager. Learn more about creating modules positions in layout manager here.

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 add 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 add blocks above and below the menu/logo position.

In case of Odd number of menu items you can select position right or left for extra menu item.

  • Stacked Divided: This layout provides you with logo & menu on the left (on top of each other) with option to add 2 blocks on the right, next to menu and/or the logo.

Header Blocks

Header blocks are positions that let you add content inside the header. Based on the layout selected you may see 1 or 2 blocks. You can either directly enter custom 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 Joomla! menu you’d like to publish as your main menu.

Mobile Menu

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

Header settings


header

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.

Sticky Header

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.
Option Description
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.

Header logo settings

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.

Option Description
Toggle Visibility You can select whether you need off-canvas enabled on desktop or mobile only or you can have it displayed at all time.
Panel Width You can set the width of the off-canvas navbar (in pixels), the default is 240px.
Off-canvas Animation You can select the animation that will be used for opening the off-canvas bar.

Header offcanvas settings

Animation

Here you can customize the dropdown animation for both the mega menu as well as for dropdown menu. You can control the speed of an animation by setting a value with the range indicator in a horizontal fashion and also ease in and ease out the animation.

Option Description
Animation You can select whether you want animation as fade or slide can also select none if you don't want animation.
Animation speed Set a value by moving an indicator in a horizontal fashion.
Easing You can select the animation from the dropdown list.

Header offcanvas settings


animation

Colors

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

Body

Here you can configure color settings for the body.

Option Description
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.

bodycolor

Header

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

Option Description
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.
Background Color for sticky header Set background color of the Sticky Header.

header-color

Main Menu

Here you can set the Main Menu color schemes for your site.

Option Description
Link Color Set the link color for the main menu.
Link Hover Color Set the link hover color for the main menu.
Link Active Color Set the appearance of a link while it is being activated.

mainmenu-color

Dropdown Menu

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

Option Description
Background Color Allows you to set the default Background color for the Dropdown menu.
Link Color Set the color of the link in the dropdown menu for submenu items.
Hover Link Color Set the color for hovered links; links hover when the mouse moves over it.
Hover Background Color Set the Background color for the hovered links.
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.

dropdownmenu-color

Off-Canvas

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

Option Description
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.

offcanvas-color

Layout Manager

Layout Manager for Dummies

3 levels of hierarchy

  1. _sections You can have up to 12 columns in a section (This is standard based on bootstrap Grid).
  2. ___columns You can have unlimited elements in a column.
  3. _____elements

Animations, Custom Background options & Responsive settings are available for sections, columns and elements.

You can move elements within the columns.
You can move columns within the section.
You can move sections within the layout.

  1. Section level settings
    Custom classes, ID and layout overrides
    Custom colours

  2. Column level settings
    Custom classes & ID
    Custom colours

  3. Element level settings
    Custom classes, ID (module position (for module position element only)).

4 type of elements

  1. Component (Core Joomla, non-repeatable)
  2. Messages (Core Joomla, non-repeatable)
  3. Banner (Astroid Feature, non-repeatable)
  4. Module(s) (Core Joomla, repeatable)

Layout Manager for Dummies ends here

Layout manager provides the ability to build a flexible layout from the collection of available elements. A layout consists of sections, grids and elements that can be easily managed with the built-in drag and drop functionality. It allows customization of each section with Design Settings, Responsive Settings, Animation Settings and others.

layout

Layout Structure

  • Layout based on module positions includes a responsive, grid system that appropriately scales up to 12 columns as the device or viewport size increases. You can select the desired number of columns from the predefined columns grid or can create your own custom grid layout.

  • Icon with arrows allows you to change positions of rows by moving them up or down. Use plus icon to add new Row, then select column structure and insert module position(s) accordingly.

  • Sections, rows and elements can be added, edited, copied and deleted directly in the layout manager.

Managing Layout

In the layout particular section can be edited, drag-drop, copy, a new section can be added and new row within the section can also be added. Also, we can edit, delete and copy particular column.

  • Drag and Drop: Click on Drag icon to Drag and Drop rows/columns to arrange your layout.
  • Edit: Click the pencil icon to edit sections and rows.
  • Copy: Click the copy icon to duplicate a section, row or element.
  • Delete: Click the delete icon to delete a section, row or element.
  • New row: Click on New row to add a new row.
  • New Section: Click on New section to add a new section below to the targeted section.

Element

New elements can be created by clicking the Add icon that appears in bottom-centre when hovering the element.

Following are the elements within this section:

  • Module Position
  • Component Area
  • Messages
  • Banner

If we already added component area and messages before then we are not able to add them again
Add messages element to display errors, warnings and notices, if you won't add it you won't be able to see the notifications messages.

Section

We can add a new section by clicking on the add new section option given within the row level options or we can also add a new section by clicking on add section button.

Edit Options of Element and Section

Elements and section both have same edit options i.e General Settings, Design Settings and Responsive Settings.

  • General Settings: general settings have options to set module position, Title, Custom Class and Custom ID of an element.

general-settings

  • Design Settings: In this we have Animation and Custom Background options. To enable Background options we need to switch on the Custom Background Option.

Following are the options for Background in Design Settings:

Option Description
Background Color Set the Background color for the particular column
Background Image Set the Background image for the particular column
Select Background Repeat Set the Background image of the particular column
Select a background Size Adjust the background image displaying. You can select one of the following values: cover, contain and inherit
Select a 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 a Background Position Choose the position for the background image from the Dropdown list.
Background Video Set the background video for the particular column

design-settings

  • Animation Settings: Here you will get different animation options which make possible to animate particular column, section and element. You can define animation delay time which will specify a delay for the start of an animation.

  • Responsive settings: This allows you to control the visibility of the columns. You can use breakpoints to define different content layouts based on device width, you can set the column size to the content layout to ensure that your layout is responsive. And also you can hide components for specific device layouts.

Following are the options for ResponsiveSettings:

Option Description
Hide on Extra Small device Enable to hide this section on Extra small Devices.
Hide on Small Device Enable to hide this section on Small Devices.
Hide on Medium device Enable to hide this section on Medium Devices.
Hide on Large Device Enable to hide this section on Large Devices.
Hide on Extra Large Device Enable to hide this section on Extra-Large Devices.

responsive-settings

Typography

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 text and the Responsive Headings, that define the Headings H1-H6.

Body Typography

It allows you to adjust typography settings for the Body on the site. If default selected then properties will inherit from CSS code.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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).

bodytypogarphy


typography

Menu Typography

This section allows adjusting typography settings for the Menu. If inherit selected then the property will inherit its value from body typography properties.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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).
Font-Color 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)".

menutypogarphy

SubMenu Typography

This section allows adjusting typography settings for the SubMenu. If inherit selected then the property will inherit its value from body typography properties.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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).
Font-Color 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)".

submenutypogarphy

Headings (H1-H6) Typography

This section allows adjusting typography settings for the headings(H1-H6) used on the site. If inherit selected then the property will inherit its value from body typography properties.

Here we can set different typography for different types of headings from H1 to H6

  • H1 Typography

This section controls the typography for all H1 headings.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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).
Font-Color 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)".

h1typogarphy

  • H2 Typography

This section controls the typography for all H2 headings.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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).
Font-Color 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)".

h2typogarphy

  • H3 Typography

This section controls the typography for all H3 headings.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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).
Font-Color 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)".

h3typogarphy

  • H4 Typography

This section controls the typography for all H4 headings.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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).
Font-Color 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)".

h4typogarphy

  • H5 Typography

This section controls the typography for all H5 headings.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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 none
Font-Color 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)".

h5typogarphy

  • H6 Typography

This section controls the typography for all H6 headings.

Option Description
Font Family Select the font family from the drop-down list. Here you can select the System Font or the Google font to the 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 is.
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).
Font-Color 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)".

h6typogarphy

Article/Blog

Article/Blog settings allow you to customize the blog and article layout of the website.

Basic Settings

This section allows you to configure the following options.

Article type Icons:

Article type icons are for further more illustration to show which type of content the particular article (post) have. That icon will appear on the top right corner of the article.

Article Type options

The article type icon can be customized in the Administrator (Back-end) by clicking on the Content menu, in the respective article you will get the following options:

Article Type
Regular:

Same as of the default joomla article.

Regular type

Video:

Select the video type and enter the respective video URL.
For both YouTube video ID and Vimeo ID. First, go to the video webpage. Copy the URL and you just need to paste in the Video URL field.

Video type

Gallery:

For Gallery Type article you need to upload a Gallery Image and define a title and a small description for it. You can add multiple Items to your article.

Gallery type

Audio:

You can Choose from SoundCloud or Spotify. To get an embed code for your track or playlist, click the 'Share' button below the waveform and an overlay will appear. Click on the embed tab to view what options you have to embed your player. Copy-paste the embed code in the code editor.

For Spotify: To retrieve a Spotify song URL, on the web player click on the three dots on a song and choose copy song Link and then copy and paste it in the Spotify field.

Audio type

Review:

You can easily add a detailed review for your single article by giving star rating followed by detail description.

Review type

Quote:

You can add words from a text or speech written or spoken by another person or author.

Qoute type

Article Badge

Use article badge to indicate a specific post. It will appear on the top left corner of the respective post. Here you will get the option to choose between predefined badges or you can create your own.

Read Time:

Enables this option shows the estimated reading time of the article.

Single Article Options:

Author Info:

The Author information is displayed underneath the article, the author information is updated the in the Author profile in User Tab.

Authorinfo

Article Rating:

Article rating/review shows the star rating for a single article and allow a user to give a star rating.This basically enhances the Joomla's core voting functionality feature which displays a drop down menu to rate the article, instead it modifies it by allowing the star functionality and also displays the number of votes received.

Related Posts:

Allows you to display a list of related posts underneath the article post. The list is based on the meta keyword of the post which makes them more relevant and more likely to display. The settings also allow displaying number of the related article you want to display.

Social Buttons Type:

You can also enable Social Share buttons under each article. You can use AddThis or ShareThis content sharing platform in order to add social buttons.

AddThis:

AddThis provides an HTML and Javascript code that displays sharing tools on your site. Customize the Share button you would like to use.

How to Configure AddThis

  1. Create an account to AddThis.
  2. Implement/customize Share Buttons.
  3. Click on Activate Tool button to start to build the code.
  4. AddThis will generate a code snippet for you.
  5. Copy the code and paste in the code editor.
ShareThis:

ShareThis button allows you to share content on your site. Customize the button you would like to use on your site. Copy the property Id and Paste in the Input field. Under the Property Settings page, you would see the Property ID.

How to Configure ShareThis

  1. Register to ShareThis.
  2. Navigate to the Share Buttons > Inline Share Buttons tab on the left sidebar.
  3. Customize your share buttons accordingly.
  4. Get the property ID from the Property Settings page from the lower part of the left sidebar.
  5. Paste in the property ID in the ShareThis field

Open Graph

Open Graph allows you to identify which elements of your page you want to show when someone share's your page. Here you don't need to mess with scripts or tags. Simply add your Facebook App ID and Twitter Username. You can even set different OG Title, OG Description and OG Image for each article.

Opengrapgh

Comments

This option allows a comment system on each article post so that users will be able to leave comments under their own name. Choose between the platforms Facebook, Disqus, HyperComments or IntenseDebate.

Article/Blog

Custom Code

Here we can add Custom CSS, Custom Javascript

Option Description
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.

customcode

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 whether 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, the 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 20+ types of Predefined Social Profiles and also to add Custom social Profile :

  1. Facebook
  2. Messenger
  3. Twitter
  4. YouTube
  5. LinkedIn
  6. Instagram
  7. WhatsApp
  8. Pinterest
  9. Google Plus
  10. GitHub

More...

social


social

Miscellaneous

In this section, you can add footer copyright bar, contact Information, customize coming soon and 404 page and set a favicon for your site.

Copyright

Copyright 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.

Option Description
Custom HTML Here we can enter the text that displays in the copyright bar.
Module Position Select a suitable module position where you want to display this feature.
Feature 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.

Copyright

Contact Information

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

Option Description
Module Position Select a suitable module position where you want to display this feature.
Featured Load position If your selected module position for the feature has also module then it will work. This is especially 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 mobile number here. Leave blank if not required.
Email Add email address here. Leave blank if not required.
Open Hours Add Opening hour here. Leave blank if not required.
Address Add your address here. Leave blank if not required.
Display Here you can choose to get the information (Phone number, mobile number, Email, Open hours and Address) displays with Text or Icons.

miscontact


contactinformation

Coming Soon

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

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

Option Description
Logo 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.
Title 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.
Social Icon Icons will appear those which are configured in social section
Content Enter the 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.

miscomingsoon

Error Page

Allows you to customize error page for your site

Option Description
404 Page Content Enter the content of your 404 page.
Call To Action Enter text to display on Call To Action Button.

mis404

Favicon

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

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

favicon

Astroid Mega Menu

A mega menu is defined as a drop-down interface that is triggered by the user hovering over a link or defined area. This dropdown usually shows all options in one main, mega-panel and oftentimes groups related topics into categories. In this section, you can configure menu options.

Mega Menu : Enable/Disable Mega Menu option.

  • By default Mega Menu option is disabled, you can set icon, subtitle, custom class, width and dropdown Alignment for your drop-down menu.
Option Description
Dropdown Alignment allows you choose align (left/right/centre/Container/Full) dropdown position.
Subtitle allows you to set subtitle for your menu item.
Icon Only When you want to show the only icon for your Menu instead full title you can enable this option.
Icon You can set an icon for your Menu Items.
Width You can set total width in pixel for submenu area.
Custom CSS Class allows you to add Custom CSS Class(es) to the menu item.
  • By enabling Mega Menu you can easily create and customize Mega Menu with submenu items and modules, offers you different layouts with drag and drop menu building system. Each menu item contains Astroid Menu Options which provides the ability to add rows, columns, links and more to a mega menu.

megamenu

Option Description
Dropdown Allignment allows you choose align (left/right/centre/full) dropdown position.
Subtitle allows you to set subtitle for your menu item.
Icon Only When you want to show only icon for your Menu instead full title you can enable this option.
Icon You can set an icon for your Menu Items.
Mega menu Width You can set total width in pixel for mega menu area.
Custom CSS Class allows you to add Custom CSS Class(es) to the menu item.
  • You can add rows by clicking the Add row button that appears in bottom-centre, Upon clicking the Add Row button a pop-up will appear showing predefined 12 column grid Layout from here you can select the Menu layout.

  • After selecting the menu layout an Add icon button will appear in the centre, you should be able to see submenu items and modules by clicking on that icon. You can select an existing module(s) and submenu items for your column.

  • Using drag and drop function, you can easily arrange columns, move elements or modules into another position, from one column into another.

Astroid Banner

Banner is either a graphic image that announces the name or identity of a site and often is spread across the width of the Web page or is an advertising image.

In this section, you can configure Banner options.

By default, Banner is disabled. Once you enable the Banner, you can customize its settings, you can set the Banner Title, subtitle, background color or image and more.

Option Description
Enable Banner This option allows to Enable/Show or Disable/Hide the Banner.
Banner Title Set a Title for the Banner, if it is not set, the Menu Title of the menu item will be displayed as Banner Title.
Background color Here you can set a Background color for the Banner.
Background Image Here you can set a Background Image for the Banner.
Banner Title Tag Select the title tag from the drop-down option for the Banner.
Banner Class You can specify a class name for certain tasks for the Banner.
Banner Layout You can set Banner Layout as Container or Container Fluid, The container provides a responsive fixed width container. The Container fluid provides a full-width container, spanning the entire width of the viewport.

NOTE: In order to make this feature work you have to publish the Banner element using the layout manager. In Layout Manager Add a Section where you want to show your banner and select a Banner Element in it. banner

Developer Documentation

Field Types & Example Codes

astroidgroup form field type

The astroidgroup form field type lets you group several fields within one section/heading. The section heading is also added under the tabs navigation on the left.

Example

<field type="astroidgroup" name="fieldname" title="title Goes here" description="description goes here"/>

astroidradio form field type

The Asrtroidradio form field type provides radio buttons to select different/multiple options.

Example

<field type="astroidradio" name="fieldname" title="title Goes her" description="dscription goes here">
<option value="option_one">option_one</option>
<option value="option_two">option_two</option>
</field>

Input values:

Value Description Required
type Field type (must be astroidgroup) and this is mandatory yes
name The name of the field that will be used for storing values in the database yes
title The title of the field that should be displayed in the left navigation & as a heading yes
description The description that will be displayed under the title (heading) no

astroidmedia form field type

The Astroidmedia form field type provides media option to upload images like background image , logo etc.

Example

<field type="astroidmedia" name="fieldname" title="title Goes here" description="description goes here"/>

Input values:

Value Description Required
type Field type (must be astroid group) and this is mandatory yes
name The name of the field that will be used for storing values in the database yes
title The title of the field that should be displayed in the left navigation & as a heading yes
description The description that will be displayed under the title (heading) no

astroidlist form field type

With Astroidlist form field type, we can create a drop-down list. It allows the user to choose one value from a list.

Example

<field type="astroidlist" name="fieldname" title="title Goes here" description="description goes here"  astroid-variable="value for dropdown list" />

Input values:

Value Description Required
type Field type (must be astroidlist) and this is mandatory yes
name The name of the field that will be used for storing values in the database yes
title The title of the field that should be displayed in the left navigation & as a heading yes
description The description that will be displayed under the title (heading) no
astroid-variable Provided a value for drop-down list (astroid list ). yes

astroidswitch form field type

The astroidswitch form field provide a switch i.e a checkbox which enables a user to make choice (binary choice), a choice between one of two possible mutually exclusive options

Example

<field type="astroidswitch" name="fieldname" title="Title Goes here" description="Description goes here"  checked="false/true" />

Input values:

Value Description Required
type Field type (must be astroidswtich) and this is mandatory yes
name The name of the field that will be used for storing values in the database yes
title The title of the field that should be displayed in the left navigation & as a heading yes
description The description that will be displayed under the title (heading) no
checked This is the default value false == 0 and true == 1. Checked=”true” means astroidswitch is checked and checked=”false” means astroidswitch is not checked no

Color form field type

The Color form field provides a color picker to select the color.

Example

<field type="color" name="fieldname" title="Title Goes here" description="Description goes here" />

Input values:

Value Description Required
type Field type (must be color) and this is mandatory yes
name The name of the field that will be used for storing values in the database yes
title The title of the field that should be displayed in the left navigation & as a heading yes
description The description that will be displayed under the title (heading) no

astroidtypography form field type

For typography h1,h2,h3,h4,h5,h6 & body.

Example

<field  astroidgroup="body_typography" name="fieldname" type="astroidtypography"  font-face="" alt-font-face="" font-color="" font-size="1"  font-unit="em" letter-spacing="0” line-height="1"   font-style="" font-weight="400" text-transform="none"></field>

Input Values:

Name Default value Type Description
font-face Arial STRING font-face can be Arial, Times New Roman, Verdana and Trebuchet and other’s can be possible
alt-font-face Abel STRING If the browser does not support the first font family, it tries the Alternate font family.
font-color White STRING Font-color can be Hex, RGB or RGBA
font-size 1 INT font-size property sets the size of a font
font-unit em STRING font-unit can be px , em pt , ex etc
letter-spacing 0 INT letter-spacing property increases or decreases the space between characters in a text.
line-height 1 INT line-height property specifies the height of a line
font-style None STRING font-style can be italic, oblique and many more
font-weight 400 INT font-weight property sets how thick or thin characters in text should be displayed. Font-weight can be normal, bold, bolder etc.
text-transform none STRING text-transform can be none, capitalize, uppercase, lowercase, initial, inherit.
color-picker true STRING Provides color picker popup. (You can send in false in order to turn off the color picker)

astroidrange form field type

Let the user specify a numeric value which must be no less than a minimum value, and no more than another maximum value.

Example

<field name="fieldname" type="astroidrange" min="20" max="500" step="1" postfix="px" prefix="" default="40" description="description goes here" />

Input Values:

Name Description Required
min min attribute specifies the minimum value for the astroidrange no
max min attribute specifies the maximum value for the astroidrange no
step step attribute specifies the size of each movement (an increment or jump between values) of the astroidrange no
postfix Postfix attribute specifies what to show after range value no
prefix Prefix attribute specifies what to show before range value no
default Default attribute specifies the default value of astroidrange like default range start from 70 no

Output

astroidcalendar form field type

Astroidcalendar field type let the user select date from the calendar like Countdown date.

Example

<field name="fieldname" type="astroidcalendar" description="description goes here" default="2017-05-15" ></field>

Input Values:

Name Description Required
default Default date to be shown in calendar no

Text form field type

Elements of type text create basic, single-line inputs. You should use them anywhere you want the user to enter a single-line value.

Example

<field type="text" label="Label goes here" description="description goes here" default="48rem" ></field>

Input Values:

Name Description Required
default To set the default value in the text field no

textarea form field type

Textarea defines a multi-line text input control. A text area can hold an unlimited number of characters.

Example

<field name="fieldname" type="textarea" filter="raw" label="Label goes here" description="description goes here" hint="hint goes here" />

Input Values:

Name Description Required
filter Method to recursively filter data for form fields no
hint The text displayed in the html placeholder element no

List form field type

With list form field type we can create a drop-down list. It allows the user to choose one value from a list.

Example

<field  name="fieldname" type="list"  label="Label goes here" description="description goes here" default="option_two"  astroid-variable="astroid variable goes here">
    <option value="option_one">option_one</option>
    <option value="option_two">option_two</option>
</field> 

Input Values:

Name Description Required
default With default value we can set which value is by default selected in drop down list no
astroid-variable Provide a value for drop down list (astroid list ) no

astroidmodulesposition form field type

A module position is a placeholder in a template. Placeholders identify one or several positions within the template.

Example

<field astroidgroup="astroidgroup goes here" name="fieldname" type="astroidmodulesposition" label="label goes here" default="" description="description goes here" />

astroidicon form field type

AstroidIcon provides you with a list of icons available for the back to top icon. The list is hard coded in the code and can’t be modified on a template level.

Example

<field description="description goes here" name="fieldname" type="astroidicon" default="fas fa-long-arrow-alt-up" label="label goes here" />

Input Values:

Name Description Default value Required
default With default value we can set which value is by default selected in drop down list fas fa-long-arrow-alt-up no

Output

Menu form field type

The menu form field type provides a drop down list of the available menus from your Joomla! site. If the field has a saved value this is selected when the page is first loaded. If not, the default value (if any) is selected.

Example

<field name="fieldname" type="menu" default="mainmenu" label="label goes here" description="description goes here" />

Input Values:

Value Description Required
Name Description Required
type This is mandatory and must be menu yes
name This is the unique name of the field yes
label This is the descriptive title of the field yes
default This is the default menu no
description This is the text that will be shown as a tooltip when the user moves the mouse over the drop-down box no

Code

Custom CSS

You can use the Custom CSS to customize the appearance.

Example

<field code="css"  name="customcss"  type="textarea"  label="Label goes here" description="Description goes here"></field>

Custom JavaScript

Example

<field  code="javascript" name="customjs"  type="textarea" label="Label goes here" description="Description goes here"></field>

Frontend Folder Overrides

By default in the astroid framework, the majority of the HTML rendered can be edited via the /frontend/ folder in your template. However, updating astroid to a newer version would overwrite your modifications with that or core astroid files.

Starting Astroid 1.1.3, You can override the frontend folder as well.

If you'd like to override the header layout file header.php

ROOT/templates/astroid_template_zero/frontend/header.php

Copy the file header.php to

ROOT/templates/astroid_template_zero/html/frontend/header.php

and that should do it, the overrides are applicable to all files under the frontend folder.

Changelog

Here is a record of all notable changes made to an Astroid Framework.

v2.0.2: 3-November-2018

Updated

  • Overrides compatible with Joomla 3.9

Fixes

  • Fixed Mobile menu issue.
  • Improved Articles badge issue.
  • Improved Article rating issue.
  • Improved Dropdown menu.

v2.0.1: 1-November-2018

Added

  • Added Global badge option in Article/Blog.
  • Added option 'none' in the main menu and mobile menu (This disables the mobile menu).

Updated

  • Joomla 3.9 updated in quickstart package.
  • Animate.css updated to v3.7.0.
  • Updated Google Fonts.
  • FontAwesome updated to v5.4.2.
  • Register Login module v1.10 updated in the quickstart package.

Fixes

  • Related posts view improved.
  • Tag Positioning Fixed.
  • Column level responsive settings bug fixed.
  • Article rating improved. All settings are inherited from the Core Joomla Vote plugin now.
  • Removed the duplicated modules_suffix class in the overrides.

Removed

  • Removed _custom.scss file (Path: astroid_template_zero/scss/_custom.scss)
  • Removed rating.php file (Path: astroid-template-zero/frontend/blog/modules/rating.php)

v2.0.0: 16-October-2018

Added

  • Animation delay now possible on columns, section & element level.
  • Added new blog article types: Astroid now comes with inbuilt integration for the following article types. Video :: Add YouTube or Vimeo video (demo: http://bit.ly/2yDmuhH). Gallery :: Create an image carousel (demo: http://bit.ly/2yGIDvB). Audio :: Add Sound Cloud or Spotify audio (demo: http://bit.ly/2OsaNF9). Review :: Add a review with rating's (demo: http://bit.ly/2ynSerL). Quote :: Add a beautiful quote with author's name (demo: http://bit.ly/2J0qYUj).
  • Custom badges for articles (Editor's Choice, Best Seller, Best Price, Hot. Trending, Custom)
  • Open graph : Add custom open graph title, image and description for each article.
  • Column responsive settings : Manage the width of each column for all bootstrap breakpoints.
  • Contact information icon color picker added : easily change the color of the contact information section icons now.
  • Custom color options in column level.
  • Refresh button added in media manager.
  • Menu module overrides added.
  • JD Simple Contact Form added in quickstart package.
  • JD Profiles lite added in quickstart package.
  • JD SkillSet added in quickstart package.
  • Added option to display social icons on coming soon page.

Updated

  • Joomla 3.8.13 updated in quickstart package.

Fixes

  • IE11 compatibility issues fixed.
  • Header Block module title issues fixed.
  • Sp Page Builder compatibility issues fixed.
  • Module title now displays for modules rendering in the Mega menu.
  • Template COPY issue fixed (copying a template from Joomla template manager failed earlier).
  • Improved Frontend UI
  • Improved Backend UI
  • Improved mod_articles_categories overrides
  • Improved search module
  • Improved Search Results page
  • Improved Language
  • Improved Typography
  • Improved articles latest module overrides

Removed

  • AcyMailing from QuickStart Package
  • ChronoForms from QuickStart Package
  • Pagination overrides deleted (Path: html/layout/joomla/pagination)
  • media.php overrides deleted (Path: html/mod_articles_latest/)
  • mod_custom overrides deleted from quickstart package (Path: html/mod_custom)

v1.3.0: 31-August-2018

Added

  • Column Level Class and ID
  • Users can use HTML tag in the banner title input field.
  • Functionality to add Custom CSS and JS files. #15
  • Updated
  • FontAwesome updated to 5.3.1
  • Joomla 3.8.12 updated in quickstart package
  • Register Login 1.9 updated in quickstart package
  • Fixes
  • Coming Soon page fixed
  • Error page Typography fixed
  • Debug & Error reporting is now working on the Error page
  • Setting export functionality fixed for Firefox alt text
  • Mobile menu issue fixed
  • Body background color issue fixed in boxed layout
  • Fixed menu assignment in quickstart package. #16

Removed

  • Removed error.php file from template frontend folder.

v1.2.1: 16-August-2018

  • Split title module chrome Added
  • Performance improvement in the header
  • Duplicating Astroid Template issue resolved

v1.2.0: 14-August-2018

  • Custom Grid Options Added
  • Section Color Options Added
  • Sub level Menu Options Added
  • Custom Social Profile Option Added
  • Column Resizing Logic Updated
  • Font Awesome Library updated
  • Moved all astroid based templates params to #__astroid_templates table.
  • Footer section renamed to copyright section and merged in the miscellaneous section
  • Footer Color Option removed
  • Bug Fixes

v1.1.3: 6-August-2018

  • Social Profile list ordering
  • Missing Social icons added in Social Profile list
  • WhatsApp language Added
  • Joomla 3.8.11 Compatible
  • px, em, rem, pt, % Units added in Typography
  • Banner Element Improved
  • Frontend folder override functionality added.
  • Language filtered

v1.1.2: 30-July-2018

  • Frontend and Backend RTL Compatible
  • Google font loading bug fixed
  • Custom CSS and SCSS functionality added. (Now, you can create your own custom CSS and SCSS file)
  • Bootstrap version updated to v4.1.3

v1.1.1: 23-July-2018

  • Removed Extra container from Stacked Layout
  • VK Social profile Added
  • Close icon(X) on off-canvas and mobile menu Added
  • Sticky header Improved
  • Favicon added on 404 page
  • Removed default location and phone number from Contact information
  • Removed extra margin on a logo from Stacked Style 2
  • Main menu Color improvement

v1.1.0: 18-July-2018

  • Section container layouts with more options
  • Frontend editing overrides
  • Column calculation with component area
  • Added Banner Element
  • Added Banner option in Menu item settings
  • Added Flickr icon to the Social Profiles
  • CRSF Token on post requests
  • Astroid admin security
  • Backend UI/UX improved
  • Import/Export buttons for better positioning.
  • Updated language file
  • Some other bug fixed

v1.0.2: 3-July-2018

  • Critical and minor HTML bug resolved

v1.0.1: 1-July-2018

  • Default Parameter updated
  • Default parameter updated
  • Off-Canvas and Mobile Menu bug fixed

v1.0.0: 28-June-2018

  • Initial Release
You can’t perform that action at this time.