Menu

Despite having 200+ settings, Favourite is fast and easy to use. Its many amazing features are only a part of what our Joomla! templates have to offer, since Favourite is a free version of our premium themes.

Discover the 200+ settings available for Favourite

Find the template you downloaded from FavThemes in the STYLES tab of the Template Manager and access it. The template settings look like this:

FavThemes tutorial for the template settings

1) Details

This tab is the presentation tab for the template and has a short description of the template, with links to the demo and documentation and a preview image.

2) Settings

This tab controls the general settings of the template, the ones that let you customize the main elements such as the preset, custom and template color styles, the max width, the copyright info, the back to top link, the error page and the offline page.

3) Layout

The layout tab targets the main layout elements such as the background stripe image and module positions blocks: notice, topbar, slide, intro, lead, promo, prime, showcase, feature, focus, portfolio, screen, top, maintop, mainbottom, bottom, note, base, block, user and footer. Each one can be customized with background images and colors for the layout elements such as titles, text or links.

4) Logo

This tab was created to customize the 4 logo types supported by our templates: default, uploaded, text and retina logo. Each of them can be further customized with additional features such as slogan text, image alt, padding, margin or Google Fonts.

5) Mobile

Being a responsive product, the mobile behaviour of the template is a key element of the customization process. The tab for the mobile behaviour controls the style of the main navigation for mobile, the mobile images and the mobile font size for an improved reading experience on mobile devices.

6) Analytics

Insert the Google Analytics tracking code inside this tab. Since SEO is an important element of any website, we've created this settings tab to make the Google Analytics setup for your website as easy as possible without any code changes that require editing the template files.


The Settings tab

This tab controls the general settings of the template, the ones that customize the main elements of the website.

1) Color Styles

FavThemes tutorial for the settings tab color styles

  1. PRESET COLOR STYLES - Choose between the 10 preset styles to customize the colors and appearance of the template.
  2. CUSTOM COLOR STYLE - Choose the main color for the template to create your own custom style which can be used instead of the 10 Preset Color Styles.

2) Template Width

FavThemes tutorial for the settings tab maximum width

  1. TEMPLATE MAX-WIDTH - nsert the maximum width of the template using pixels or percent (for example: 1100px or 70%, not 1100). A blank field reverts the setting to the default value.

3) Copyright Info

FavThemes tutorial for the settings tab copyright info

  1. COPYRIGHT SHOW TEXT - Choose if the copyright text should be displayed or not.
  2. COPYRIGHT TEXT - Insert the text for the copyright info. The copyright symbol and year are automatically generated, so insert only the name that is protected by copyright laws.
  3. COPYRIGHT TEXT LINK - Insert the link for the copyright info. The http:// is automatically generated, so insert only the URL starting with www. (for example www.yourdomain.com, not http://www.yourdomain.com).

4) Main Navigation

FavThemes tutorial for the settings tab navigation

  1. MAIN NAVIGATION LINK PADDING - Insert the padding for the main navigation published in the NAV module position using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
  2. MAIN NAVIGATION FONT SIZE - Insert the font size for the main navigation published in the NAV module position using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  3. MAIN NAVIGATION TEXT TRANSFORM - Choose the text transform style for the main navigation published in the NAV module position.
  4. MAIN NAVIGATION ICONS COLOR - Choose the color of the icons for the main navigation published in the NAV module position. A blank field reverts the setting to the default value.
  5. MAIN NAVIGATION ICONS FONT SIZE - Insert the font size for the icons for the main navigation published in the NAV module position using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  6. MAIN NAVIGATION GOOGLE FONT - Insert the name of the Google Font for the main navigation published in the NAV module position, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  7. MAIN NAVIGATION GOOGLE FONT WEIGHT - Choose the weight for the Google Font for the main navigation published in the NAV module position.
  8. MAIN NAVIGATION GOOGLE FONT STYLE - Choose the style for the Google Font for the main navigation published in the NAV module position.

5) Titles

FavThemes tutorial for the settings tab title

  1. TITLES PADDING - Insert the padding for the titles of the template using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
  2. TITLES FONT SIZE - Insert the font size for the titles of the template using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  3. TITLES LINE HEIGHT - Insert the line height for the titles of the template using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  4. TITLES TEXT ALIGN - Choose the text align for the titles of the template.
  5. TITLES TEXT TRANSFORM - Choose the text transform style for titles of the template.
  6. MODULES TITLES ICON FONT SIZE - Insert the font size for the icon of the module titles using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  7. MODULES TITLES ICON PADDING - Insert the padding for the icon of the module titles using pixels or percent (for example: 14px or 10%, not 14). The padding is a CSS property that sets the space around the content. The padding can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.
  8. MODULES TITLES ICON BORDER RADIUS - Insert the border-radius for the icon of the module titles using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.
  9. TITLES GOOGLE FONT - Insert the name of the Google Font for the titles of the template, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  10. TITLES GOOGLE FONT WEIGHT - Choose the weight for the Google Font for the titles of the template.
  11. TITLES GOOGLE FONT STYLE - Choose the style for the Google Font for the titles of the template.

6) Error Page

FavThemes tutorial for the settings tab error page

  1. ERROR PAGE ARTICLE ID - Insert the ID of the article used for the custom 404 error page. A blank field reverts the setting to the default value.

7) Offline Page

FavThemes tutorial for the settings tab offline page

  1. OFFLINE PAGE STYLE - Choose the color style for the offline page form.
  2. OFFLINE BACKGROUND UPLOAD IMAGE - Upload the background image for the site when in offline mode. If you do not want to display a background image, click on the CLEAR button and leave the field blank.
  3. OFFLINE BACKGROUND IMAGE STYLE - Choose the style for the background image for the site when in offline mode.

8) Back to Top

FavThemes tutorial for the settings tab back to top button

  1. SHOW BACK TO TOP ARROW - Choose if the button arrow for the back to top link should be displayed or not.
  2. BACK TO TOP STYLE COLOR - Choose the color for the button arrow for the back to top link. A blank field reverts the setting to the default value.
  3. BACK TO TOP TEXT - Insert the text for the back to top link.

The Layout tab

The layout tab controls the main layout elements such as the body and module positions blocks.

1) Body element

The body element serves as a container for the entire content of the website.

FavThemes tutorial for the layout tab body element

  1. BODY BACKGROUND IMAGE UPLOAD - Upload the background image for the body element. If you do not want to display a background image, click on the CLEAR button and leave the field blank.
  2. BODY BACKGROUND IMAGE STYLE - Choose the style for the background image of the body element.
  3. BODY BACKGROUND IMAGE OVERLAY - Choose if the overlay for the background image of the body element should be displayed or not.
  4. BODY BACKGROUND COLOR - Choose the color for the background of the body element. A blank field reverts the setting to the default value.
  5. BODY TEXT COLOR - Choose the color for the text of the body element. A blank field reverts the setting to the default value.
  6. BODY TITLE COLOR - Choose the color for the title of the body element. A blank field reverts the setting to the default value.
  7. BODY LINK COLOR - Choose the color for the links of the body element. A blank field reverts the setting to the default value.
  8. BODY LINK HOVER COLOR - Choose the color for the links in the hover state of the body element. A blank field reverts the setting to the default value.

2) Notice

The notice element is designed for banners, promotions and advertisement space.

FavThemes tutorial for the layout tab notice element

  1. NOTICE BACKGROUND STYLE - Choose the style for the background of the notice module position block.
  2. NOTICE BACKGROUND COLOR - Choose the color for the background of the notice module position. A blank field reverts the setting to the default value.
  3. NOTICE TEXT COLOR - Choose the color for the text of the notice module position. A blank field reverts the setting to the default value.
  4. NOTICE TITLE COLOR - Choose the color for the title of the notice module position. A blank field reverts the setting to the default value.
  5. NOTICE NOTICE LINK COLOR - Choose the color for the links of the notice module position. A blank field reverts the setting to the default value.
  6. NOTICE LINK HOVER COLOR -Choose the color for the links in the hover state of the notice module position. A blank field reverts the setting to the default value.

3) Slide

The slide element is designed for publishing the slideshow module and the slide images.

FavThemes tutorial for the layout tab slide element

  1. SLIDE MAX-WIDTH - Set the maximum width of the slide in pixels, percent or em. For a full width slideshow, set this value at 100%.
  2. SLIDE BACKGROUND STYLE - Choose the style for the background of the slide module position block.
  3. SLIDE BACKGROUND IMAGE UPLOAD - Upload the background image for the slide module position. If you do not want to display a background image, click on the CLEAR button and leave the field blank.
  4. SLIDE BACKGROUND IMAGE STYLE - Choose the style for the background image of the slide module position.
  5. SLIDE BACKGROUND IMAGE OVERLAY - Choose if the overlay for the background image of the slide module position should be displayed or not.
  6. SLIDE BACKGROUND COLOR - Choose the color for the background of the slide module position. A blank field reverts the setting to the default value.
  7. SLIDE TEXT COLOR - Choose the color for the text of the slide module position. A blank field reverts the setting to the default value.
  8. SLIDE TITLE COLOR - Choose the color for the title of the slide module position. A blank field reverts the setting to the default value.
  9. SLIDE LINK COLOR - Choose the color for the links of the slide module position. A blank field reverts the setting to the default value.
  10. SLIDE LINK HOVER COLOR - Choose the color for the links in the hover state of the slide module position. A blank field reverts the setting to the default value.

4) Module Position Blocks

The module positions blocks are sections of the template and each one can be customized. If the notice, copyright and slide are special module position blocks with very custom functions, the rest of the module positions can be used for any type of content. Each of these module positions (topbar, intro, lead, promo, prime, showcase, feature, focus, portfolio, screen, top, maintop, mainbottom, bottom, note, base, block, user and footer) have the same set of parameters.

To customize the module positions blocks, choose for each of them a background style, a background image, a background image style, a background image overlay, a background color, text color, title color, link color and link hover color.

FavThemes tutorial for the layout tab module position blocks

The Logo tab

The logo tab was created to customize the 4 logo types supported by our templates: default, uploaded, text and retina logo.

1) Default logo

FavThemes tutorial for the logo tab default

The default logo is the logo that comes by default with the template and can be changed from the files and folders of the template inside the Template Manager. To customize the default logo, choose if it should be displayed or not, the logo image, the logo image alt tag, the padding and the margin.

2) Uploaded logo

FavThemes tutorial for the logo tab uploaded

The uploaded logo type is designed to let you upload any image for your logo without editing the template files or using FTP. To customize the uploaded logo, choose if it should be displayed or not, upload the the logo image or set the logo image alt tag, the padding and the margin.

3) Text logo

FavThemes tutorial for the logo tab text

The text logo type is designed to be used instead of the logo image and can be styled with Google Fonts. To customize the text logo, choose if it should be displayed or not, the logo text, the color, the font size, the Google Font family, the Google Font weight, the Google Font style, the line height, the padding and the margin.

4) Slogan

FavThemes tutorial for the logo tab slogan

The slogan is designed to be used with the default, uploaded, retina or text logo types. To customize the slogan, choose if it should be displayed or not, the slogan text, the color, the font size, the line height, the padding and the margin.

5) Retina logo

FavThemes tutorial for the logo tab retina

The retina logo is designed to be used as the logo image for devices with Retina Display and only for those devices, being a Retina version of the normal logo (either default, uploaded or text logo types). Both the normal logo and the Retina logo can be used at the same time, the normal logo will be visible on the normal display, while the Retina logo will be visible only on the Retina Display. To customize the Retina logo, choose if it should be displayed or not, the logo image, the height, the width, the image alt tag, the padding and the margin.


The Mobile tab

Being a responsive product, the mobile behaviour of the template is a key element of the customization process. The tab for the mobile behaviour controls the style of the main navigation for mobile, the mobile images and the mobile font size for an improved reading experience on mobile devices.

1) Mobile Navigation

FavThemes tutorial for the mobile tab navigation

  1. MOBILE NAVIGATION BACKGROUND COLOR - Choose between the light and dark versions of the mobile navigation.
  2. SHOW MOBILE MENU BUTTON TEXT - Choose if the mobile menu button text should be displayed or not.
  3. MOBILE MENU BUTTON TEXT - Insert the text for the mobile menu button. A blank field reverts the setting to the default value.

2) Mobile Font Size

FavThemes tutorial for the mobile tab font size

  1. MOBILE PARAGRAPH FONT SIZE - Insert the font size for the paragraphs for mobile devices with a width smaller than 480px, using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  2. MOBILE PARAGRAPH LINE HEIGHT - Insert the line height for the paragraphs for mobile devices with a width smaller than 480px, using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  3. MOBILE TITLE FONT SIZE - Insert the font size for the titles for mobile devices with a width smaller than 480px, using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.

The Analytics tab

Insert the Google Analytics tracking code inside this tab. Since SEO is an important element of any website, we've created this settings tab to make the Google Analytics setup for your website as easy as possible without any code changes that require editing the template files.

FavThemes tutorial for the mobile tab navigation