NAV

Requirements

Browser Support

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

Introduction

In this tutorial, we will be installing the template using Upload Feature in 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

Installation

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 as following screen.

Installation Successfull

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 in multiple sections and then sub sections 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

Preloader

Back to Top

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.

OptionDefaultDescription
AnimationNoneHere you can select the animation for the preloader from the list.
ColorInheritHere you can set the color of the animated element of a preloader.
BackgroundInheritHere you can select the preloader background color which is to be displayed as a background for the preloader.
SizeInheritThis option allow you to set the size of the preloader.

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.

OptionDefaultDescription
Icontop-arrowHere you can select the icon style for your Back to top Button from the dropdown list.
Icon SizeDefaultYou can easily set the size of the icon in pixel to it’s is maximum value by moving an indicator in a horizontal fashion.
ColorInheritHere you can set the icon color for back to top button.
BackgroundInheritYou can set the background color for back to top button.
ShapeCircleYou 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
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.

OptionDefaultDescription
Background ImagenoneSelect a Background Image for boxed layout.
Background Repeatno-repeatAllows 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 SizeInheritAdjust the background image displaying. You can select one of the following values: cover, contain and inherit.
Background PositionCenter TopChoose the position for the background image from the Dropdown list.
Background AttachmentFixedSet 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)

Layoutsetting1

Layoutsetting2

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:

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

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.

This options decides the animation that will be used for displaying the dropdown menu.

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.

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

OptionDefaultDescription
Sticky Header LogoNoneSelect 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 DesktopStickyYou can select whether you need the header to be sticky at all times or sticky on scroll up.
Sticky Header on TabletsStickyYou 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 MobileStickyYou 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.

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.

OptionDefaultDescription
Toggle VisibilityAlwaysYou can select whether you need offcanvas enabled on desktop or mobile only or you can have it displayed at all time.
Panel Width240You can set the width of the offcanvas navbar (in pixels), default is 240px.
Off canvas AnimationSlide in on TopYou can select the animation that will be used for opening the offcanvas bar.

header

Colors

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

Body

Here you can configure color settings for the body.

OptionDefaultDescription
Background Color#EEEEEEAllows you to set the default Background color for the body for the whole site.
Text Color#333333Set the Text color of the Body Content.
Link Color#007BFFSet the color of the link in the Body Content.
Link Hover Color#007BFFSet 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.

OptionDefaultDescription
Background Color#333333Allows you to set the default Background color for the Header section for the whole site.
Text Color#FFFFFFSet the Text color for the Header section.
Logo Text Color#007BFFSet color for your text logo.
Logo Tag Line Color#007BFFSet color for Tag Line in your text logo.
Backgroud Color for sticky header#FFFFFFSet background color of the Sticky Header.

header-color

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

OptionDefaultDescription
Link Color#333333Set the link color for the main menu.
Link Hover Color#007BFFSet the link hover color for the main menu.
Link Active Color#007BFFSet the appearance of a link while it is being activated.

mainmenu-color

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

OptionDefaultDescription
Background Color#FFFFFFAllows you to set the default Background color for the Dropdown menu.
Link Color#333333Set the color of the link in the dropdown menu for submenu items.
Hover Link Color#FFFFFFSet the color for hovered links; links hover when the mouse moves over it.
Hover Background Color#007BFFSet the Background color for the hovered links.
Active Link Color#FFFFFFSet the color for the active links; links become active once you click on them.
Active Background Color#007BFFSet the Background color for the active links.

dropdownmenu-color

Off-Canvas

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

OptionDefaultDescription
Background Color#FFFFFFSet the default Background color for the Off-Canvas Menu.
Text Color#007BFFSet the Text color for the menu items in the Off-Canvas.
Link Color#333333Set the color of the link in the Off-Canvas menu for menu and Sub-menu items.
Active Link Color#FFFFFFSet the color for the active links (links become active once you click on them).
Active Background Color#007BFFSet the Background color for the active links.

offcanvas-color

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

OptionDefaultDescription
Background Color#333333Set the default Background color for the Footer.
Text Color#FFFFFFSet the Text color for the Footer items.
Link Color#007BFFSet the color of the link in the dropdown menu for submenu items.
Link Hover Color#007BFFSet the color for hovered links; links hover when the mouse moves over it.

footer-color

Layout Manager

Layout manager provides the ability to build flexible layout from the collection of available elements. A layout consist 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

Managing Layout

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

editoptions

Element

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

Following are the elements within this section:

If we already added component area and messages before than 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 new section by clicking on the add new section option given with in the row level options or we can also add new section by clicking on add section button.

editoptions

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

Following are the options for Background in Design Settings:

OptionDefaultDescription
Background ColorNoneSet the Background color for the particular column
Background ImageNoneSet the Background image for the particular column
Select Background RepeatInheritSet the Background image of the particular column
Select a background SizeInheritAdjust the background image displaying. You can select one of the following values: cover, contain and inherit
Select a Background AttachmentInheritSet 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 PositionInheritChoose the position for the background image from the Dropdown list.
Background VideoNoneSet the background video for the particular column

design-settings

Following are the options for ResponsiveSettings:

OptionDescription
Hide on Extra Small deviceEnable to hide this section on Extra small Devices.
Hide on Small DeviceEnable to hide this section on Small Devices.
Hide on Medium deviceEnable to hide this section on Medium Devices.
Hide on Large DeviceEnable to hide this section on Large Devices.
Hide on Extra Large DeviceEnable 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.

OptionDefaultDescription
Font FamilyNunitoSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight400Select the font weight from the list, it will define how bold your text are.
Font Size16pxSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1.5emline-height property specifies the height of a line.
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

bodytypogarphy

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

OptionDefaultDescription
Font FamilyOpen SansSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight400Select the font weight from the list, it will define how bold your text are.
Font Size1emSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1emline-height property specifies the height of a line.
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

menutypogarphy

menutypogarphy

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

OptionDefaultDescription
Font FamilyOpen SansSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight400Select the font weight from the list, it will define how bold your text are.
Font Size1emSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1emline-height property specifies the height of a line.
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

submenutypogarphy

submenutypogarphy

Headings (H1-H6) Typography

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

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

This section control the typography for all H1 headings.

OptionDefaultDescription
Font FamilyNunitoSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight700Select the font weight from the list, it will define how bold your text are.
Font Size3.5emSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1.2emline-height property specifies the height of a line.
Font Color#000000set 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)".
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

h1typogarphy

h1typogarphy

This section control the typography for all H2 headings.

OptionDefaultDescription
Font FamilyNunitoSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight600Select the font weight from the list, it will define how bold your text are.
Font Size2emSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1.2emline-height property specifies the height of a line.
Font Color#000000set 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)".
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

h2typogarphy

h2typogarphy

This section control the typography for all H3 headings.

OptionDefaultDescription
Font FamilyNunitoSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight500Select the font weight from the list, it will define how bold your text are.
Font Size1.8emSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1.2emline-height property specifies the height of a line.
Font Color#000000set 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)".
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

h3typogarphy

h3typogarphy

This section control the typography for all H4 headings.

OptionDefaultDescription
Font FamilyNunitoSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight500Select the font weight from the list, it will define how bold your text are.
Font Size1.6emSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1.2emline-height property specifies the height of a line.
Font Color#000set 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)".
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

h4typogarphy

h4typogarphy

This section control the typography for all H5 headings.

OptionDefaultDescription
Font FamilyNunitoSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight500Select the font weight from the list, it will define how bold your text are.
Font Size1.4emSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1.2emline-height property specifies the height of a line.
Font Color#000000set 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)".
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

h5typogarphy

h5typogarphy

This section control the typography for all H6 headings.

OptionDefaultDescription
Font FamilyNunitoSelect 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 FamilyArial, HelveticaIf the browser does not support the first font family, it tries the Alternate font family.
Font Weight500Select the font weight from the list, it will define how bold your text are.
Font Size1.2emSet the font size you need to use in the text element.
Letter Spacing0emSet the needed distance between letters.
Line Height1.2emline-height property specifies the height of a line.
Font Color#000000set 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)".
Text TransformNoneSet the font transformation, if needed (uppercase, capitalize and lowercase).

h6typogarphy

h6typogarphy

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.

OptionDefaultDescription
Custom HTMLNoneHere we can enter the text that displays in the copyright bar.
Module Positionastroid-footerSelect a suitable module position where you want to display this feature.
Featue Load PositionAfter moduleIf 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.

footer

Custom Code

Here we can add Custom CSS , Custom Javascript

OptionDefaultDescription
Tracking CodeNoneA 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>NoneFor the javascript before </head>
Space before </body>NoneFor the javascript before </body>
Custom CSSNoneHere you can add custom CSS to add your own styles or overwrite default CSS, Wrapped within <style> tags.
Custom JSNoneHere 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 :

In style we have 2 Options to style our social icons:

  1. Inherit color
  2. Brand color

In this section we have in all 21 types of Social Profiles:

  1. Facebook
  2. Messenger
  3. Twitter
  4. YouTube
  5. LinkedIn
  6. Instagram
  7. WhatsApp
  8. Pinterest
  9. Google Plus
  10. GitHub
  11. Tumblr
  12. reddit
  13. Telegram
  14. Skype
  15. Slack
  16. SoundCloud
  17. Behance
  18. Dribbble
  19. Spotify
  20. Flickr
  21. VK

social

Miscellaneous

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.

OptionDefaultDescription
Module PositionNoneSelect a suitable module position where you want to display this feature.
Featured Load positionAfter ModuleIf 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 NumberNoneAdd phone number here. Leave blank if not required.
Mobile NumberNoneAdd mobille number here. Leave blank if not required.
EmailNoneAdd email address here. Leave blank if not required.
Open HoursNoneAdd Opening hour here. Leave blank if not required.
AddressNoneAdd your address here. Leave blank if not required.
DisplayIconsHere you can choose to get the information (Phone number ,mobile number, Email, Open hours and Address) displays with Text or Icons.

miscontact

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

OptionDefaultDescription
LogoNoneHere you can select a logo which will display on your coming soon Page, default template logo will be displayed if not selected.
Background ImageNoneYou can select a Background image for your coming soon page.
TitleComing SoonHere you can Enter the Title for your Coming Soon Page which will be displayed when your site is under construction.
Countdown Date2017-05-15Here you can set a date for countdown exactly when your site is going to be live.
ContentNoneEnter description for your coming soon page.
Background Repeatno-repeatSet if/how a background image will be repeated.
Background SizeInheritThis property specifies the size of the background images.
Background Positioncenter topThis property sets the starting position of a background image.

miscomingsoon

miscomingsoon

404 Error

Allows you to customize 404 page for your site

OptionDefaultDescription
Show HeaderNoneSelect If want to show header.
Background ImageNoneSet a Background Image for 404 Error Page
Logodefault template logoSet a logo for 404 Error Page, default template logo will be used if not selected.
Call To ActionTextEnter text to dislay on Call To Action Button.
404 Page ContenttinyMCEEnter the content of your 404 page.

mis404

Favicon

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

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

megamenu

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.

megamenu

OptionDescription
Dropdown Alignmentallows you choose align (left/right/centre) dropdown position.
Subtitleallows you to set subtitle for your menu item.
Icon OnlyWhen you want to show only icon for your Menu instead full title you can enable this option.
IconYou can set icon for your Menu Items.
WidthYou can set total width in pixel for submenu area.
Custom CSS Classallows you to add Custom CSS Class(es) to the menu item.

megamenu

OptionDescription
Dropdown DirectionAllows you choose align (left/right/centre/full) dropdown position.
SubtitleAllows you to set subtitle for your menu item.
Icon OnlyWhen you want to show only icon for your Menu instead full title you can enable this option.
IconYou can set icon for your Menu Items.
Mega menu WidthYou can set total width in pixel for mega menu area.
Custom CSS ClassAllows you to add Custom CSS Class(es) to the menu item.

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 it’s settings, you can set the Banner Title, subtitle, background color or image and more.

OptionDescription
Enable BannerThis option allows to Enable/Show or Disable/Hide the Banner.
Banner TitleSet a Title for the Banner, if it is not set, the Menu Title of the menu item will displayed as Banner Title.
Background colorHere you can set a Background color for the Banner.
Background ImageHere you can set a Background Image for the Banner.
Banner Title TagSelect the title tag from the dropdown option for the Banner.
Banner ClassYou can specify class name for certain tasks for the Banner.
Banner LayoutYou 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.

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:

ValueDescriptionRequired
TypeField type (must be astroidgroup) and this is mandatoryYes
NameThe name of the field that will be used for storing values in the databaseYes
TitleThe title of the field that should be displayed in the left navigation & as a headingYes
DescriptionThe 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:

ValueDescriptionRequired
TypeField type (must be astroid group) and this is mandatoryYes
NameThe name of the field that will be used for storing values in the databaseYes
TitleThe title of the field that should be displayed in the left navigation & as a headingYes
DescriptionThe 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:

ValueDescriptionRequired
TypeField type (must be astroidlist) and this is mandatoryYes
NameThe name of the field that will be used for storing values in the databaseYes
TitleThe title of the field that should be displayed in the left navigation & as a headingYes
DescriptionThe description that will be displayed under the title (heading)No
Astroid-variableProvided 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 enable 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:

ValueDescriptionRequired
TypeField type (must be astroidswtich) and this is mandatoryYes
NameThe name of the field that will be used for storing values in the databaseYes
TitleThe title of the field that should be displayed in the left navigation & as a headingYes
DescriptionThe description that will be displayed under the title (heading)No
CheckedThis is the default value false == 0 and true == 1. Checked=”true” means astroidswitch is checked and checked=”false” means astroidswitch is not checkedNo

Color form field type

The Color form field provide 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`
```xml
<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:

NameDefault valueTypeDescription
Font-faceArialSTRINGfont-face can be Arial, Times New Roman, Verdana and Trebuchet and other’s can be possible
Alt-font-faceAbelSTRINGIf the browser does not support the first font family, it tries the Alternate font family.
Font-colorWhiteSTRINGFont-color can be Hex , RGB or RGBA
Font-size1INTfont-size property sets the size of a font
Font-unitemSTRINGfont-unit can be px , em pt , ex etc
Letter-spacing0INTletter-spacing property increases or decreases the space between characters in a text.
Line-height1INTline-height property specifies the height of a line
Font-styleNoneSTRINGfont-style can be italic , oblique and many more
Font-weight400INTfont-weight property sets how thick or thin characters in text should be displayed. Font-weight can be normal , bold , bolder etc.
Text-transformNoneSTRINGtext-transform can be none , capitalize , uppercase , lowercase , initial , inherit.
Color-pickerTrueSTRINGProvides 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:

NameDescriptionRequired
Minmin attribute specifies the minimum value for the astroidrangeNo
Maxmin attribute specifies the maximum value for the astroidrangeNo
Stepstep attribute specifies the size of each movement (an increment or jump between values) of he astroidrangeNo
PostfixPostfix attribute specifies what to show after range valueNo
PrefixPrefix attribute specifies what to show beforer range valueNo
DefaultDefault attribute specifies the default value of astroidrange like default range start from 70No

Output

footer

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:

NameDescriptionRequired
DefaultDefault date to be shown in calendarNo

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:

NameDescriptionRequired
DefaultTo set the default value in the text fieldNo

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:

NameDescriptionRequired
FilterMethod to recursively filter data for form fieldsNo
HintThe text displayed in the html placeholder elementNo

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:

NameDescriptionRequired
DefaultWith default value we can set which value is by default selected in drop down listNo
Astroid-variableProvide 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:

NameDescriptionDefault valueRequired
DefaultWith default value we can set which value is by default selected in drop down listfas fa-long-arrow-alt-upNo

Output

footer

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:

ValueDescriptionRequired
NameDescriptionRequired
TypeThis is mandatory and must be menuYes
NameThis is the unique name of the fieldYes
LabelThis is the descriptive title of the fieldYes
DefaultThis is the default menuNo
DescriptionThis is the text that will be shown as a tooltip when the user moves the mouse over the drop-down boxNo

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 astroid framework, majority of the HTML rendered can be edited via the /frontend/ folder in your template. However, updating astroid to newer version would overwrite your modifications with that or core astroid files.

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

If you’d like to override the 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 record of all notable changes made to a Astroid Framework.

v1.3.0: 31-August-2018

Added

Updated

Fixes

Removed


v1.2.1: 16-August-2018

Added

Fixes


v1.2.0: 14-August-2018

Added

Updated

Fixes

Removed


v1.1.3: 6-August-2018

Added

Fixes


v1.1.2: 30-July-2018

Added

Updated

Fixes


v1.1.1: 23-July-2018

Added

Fixes

Removed


v1.1.0: 18-July-2018

Added

Updated

Fixes


v1.0.2: 3-July-2018

Fixes


v1.0.1: 1-July-2018

Updated

Fixes


v1.0.0: 28-June-2018