Custom Code

The Analytics tracking code is a snippet of JavaScript that collects and sends data to Analytics from a website.
The Analytics tracking code may be directly added directly to the HTML of each page on your site, or indirectly using a tag management system such as Google Tag Manager.

Please go to Admin > Theme Options > Settings > Custom Code

Custom CSS/JS

For all customization purposes, this framework allows you to load multiple CSS/JS files you customized without altering the template core files.

You can include css/js files by adding file path per line. You can use Full URL of the CSS/JS file, or path of the CSS/JS file relative to the Joomla root directory.

Copyright Information

This section allows you to add your own copyright information that usually appears in the footer bottom of every website.

  • Please go to Admin > Theme Options > Settings > Miscellaneous > Copyright
  • Edit copyright information with custom HTML. You can use {year} for current year and {sitetitle} for site name.

You’re flexibly able to place the contact information anywhere in the layout section.

Contact Information

In this section, you can add or edit the contact information on the top right of the page. TemPlaza framework provides you with 4 information types: Location, Email Address, Phone Number, Login.

  • Please go to Admin > TemPlaza Blank Options > Settings > Miscellaneous > Contact > Enable the contact info
  • Add your contact info including Location, Email Address, Phone Number, as well as select relevant icons.

You’re flexibly able to place the contact information anywhere in the layout section.

Blog Options

Go to Admin > Theme Options > Settings > Blog Options to set up your blog page, single blog page, slider blog, and related blog.

Blog Page

  • Blog Layout: you can choose a blog layout between Grid or List layout.
  • Blog Columns: Set the number of blog columns
  • Show thumbnail: you can enable or disable the thumbnails of blog articles
  • Thumbnail size: It’s also possible to set the thumbnail size to fit your need
  • Besides, you’re able to configure several options for your blog page such as date, author, comment count, post view, category, tag, and so on.

Blog Single

You can select to show/hide different related elements (title, thumbnail, date, author, comment count, category, tag, description …) in each detailed blog post.
To enable or disable related articles, please disable the option “Show Related”.

Blog Slider Option

Used to configure sliders added in posts in Gallery format

Blog Related

Here you can configure the number of columns and related blog articles display on your website. To enable or disable related articles, please configure the option in the Blog Single section.

Color

These options are used to change color for different parts on your website: Body, Header, Main Menu, Sticky Menu, Dropdown Menu, Off-canvas menu, contact icons, and buttons.

Body Color

Here you can configure color settings for the body.

  • Background Color: This 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.
  • Heading Color: Set the color of headings: H1, H2, H3, H4, H5, H6
  • 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.

Header Color

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

  • Background Color: This 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.
  • Link Color: Set color for the links on the header
  • Top-bar Border Color: Set the border color for the top bar

Main Menu Color

Here you can set the color schemes for the main menu on your website.

  • Link Color: Set the link color for the main menu.
  • Link Active Color: Set the appearance of a link while it is being activated.
  • Link Hover Color: Set the link hover color for the main menu.
  • Sidebar Separate Color: Set the color for the separate menu of sidebar

Sticky Menu Color

Here you can set the color schemes for the sticky menu of your website.

Dropdown Menu Color

Here you can set the color schemes for the dropdown menu items of your website.

Off-Canvas Menu Color

Here you can set the color schemes for the off-canvas menu.

Contact Icons Color

Here you can set the color for contact icons on the header (Phone, Email, Address, Login).

Button Color

Here you can set the color for buttons used on your website.

Social Profile

This social section will help you to create a social profile on your website.

Please go to Admin > Theme Options > Settings > Social > Search a social brand and click it to add to your profile.
You’re able to locate the position of social icons in the layout section.

Typography

These options are used to set up typography for the whole website. You can change the font, and style of various sections including Body, Headings (H1, H2, H3, H4, H5, H6), Menu, Dropdown Menu, Sidebar and Footer. In each option, you can select to use Default or Custom typography

Select Typography Properties

Default typography: If Default is selected, the typography will inherit from the theme.
Custom typography: If Custom is selected, you can configure typography for your website.

Font settings

  • 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).

Layout Builder

TemPlaza Framework comes with a drag & drop layout builder, so you’re able to edit, manage and control the layout of the template. It’s easy to use and add different blocks to create your own layout for pages, as well as adjust elements effortlessly.

Please go to Admin > Theme options > Settings > Layout > Edit or create a new one

Section Settings

Sections are the main building blocks of any layout. Everything that you see at the front end directly or indirectly exists inside a section.

Click on “Add Section” to create a new section

After adding the section you see certain options(icons) like Drag or reorder section, Section name, Toggle section, Add Row, New Section, Edit section, Duplicate, and Delete.

If you click on the “Edit Section” icon, a popup opens that has 3 different tabs General Settings, Design Settings & Responsive Settings. With these settings, you can customize your sections easily.

General

Under this tab the options are as follows:

  • Admin Label: enter the admin label of the section for an easy identification
  • Custom Class: Write the class name used for writing custom CSS or JS.
  • Custom ID: Give a custom ID to override the auto-generated ID.
  • Section Layout: Choose the layout for the section from Container, Container Fluid, Container with No gutters, Container fluid with no gutters, Without Container, or a Custom layout.
  • Layout Custom Class: If you choose a Custom layout then write the custom class name.
  • Text Align: specifies the horizontal alignment of text: Left, Center, or Right

Design Settings

Under this tab the options are as follows:

  • Background Type: Select the background type for your section from Color, Image, or Transparent.
  • Custom Colors: Choose whether you want to make the text transparent or give it a custom color. And you’re also able to set the color of regular, active and hover-links.
  • Spacing: With this, you can set your section’s custom Margin & Padding in 4 different units Px, Em, Rem & % with device responsiveness.

Responsive Settings

Under this tab, the only option is:

  • Device Visibility: Choose your preference of hiding or showing the section on different screens like Hide on Extra Small Devices, Hide on Small Devices, Hide on Medium Devices, Hide on Large Devices or Hide on Extra Large Devices.

Row Settings

Add New Row option is provided along with the section name. Other editing options are provided to the right of each row that are Add Column, Edit Grid, Edit Row, Duplicate Row & Delete Row icons.

Edit Grid

When clicking on “Edit Grid”, you can choose one of the given grid layouts or use a custom grid to create your own grid layout (Ex: 2+3+6+1)

When you click on the “Edit Row” icon, a popup opens that has 3 different tabs: General Settings, Design Settings & Responsive Settings. With these settings, you can customize your row easily.

Element Settings

Creating a template layout from scratch just by dragging & dropping elements into your layout, with incredible speed and performance.

Click “Add Element” and choose a suitable element to add to the layout. It’s easy to add new sections, new elements, as well as edit, duplicate or remove them.



If you click on the “Edit Element” icon, it will open a popup that has 2 tabs: General Settings, Design Settings. With these settings, you can customize your element easily.

General Settings

Under this tab the options are as follows:

  • Admin Label: Give the element a name to make it easy & clear to understand in the layout manager.
  • Text Align: specifies the horizontal alignment of text: Left, Center, or Right
  • Custom Class: Write the class name used for writing custom CSS or JS.
  • Custom ID: Give a custom ID to override the auto-generated ID.

Design Settings

Under this tab the options are as follows:

  • Background: You can change the background color by selecting a color, or choose the “transparent” option
  • Spacing: set your element’s custom Margin & Padding in 4 different units Px, Em, Rem & % with device responsiveness.
  • Custom Colors: you can set the text color and link color of the element

Setup template styles for archive pages (Blog, Shop, Inventory and Agency pages…)

Post Options

Go to Autoshowroom Option > Settings > Post Options to set up the template style for Blog page and Post Single Page

Page Options

Go to  AutoShowroom Options > Settings > Page Options to set up the template style for Default Pages

Product Options

Go to Autoshowroom Options > Settings > Products Options to set up the template style for Product Pages

Vehicle Options

Go to Autoshowroom Options > Settings > Vehicle Options to set up the template style for Vehicle Pages

Agency Options

Go to Autoshowroom Options > Settings > Agency Options to set up the template style for Agency Pages

 

Shop Page

Shop page

To configure Shop page, you go to Dashboard > Autoshowroom Options > Open the template you need to edit > Shop page. This page layout can be  Grid or List


Product Detail Page

This option is used to set up the Product Detail Pages. You can select the style of product image sliders which can be WooCommerce slider or Flex Slider