Using com config for frontend template style editing

Introduction

In early versions, it was a bit difficult thing for users to figure out how to change basic settings after installing Joomla! for the first time. To reduce that difficulty, the Frontend component com_config makes it possible to do some of those settings through Frontend. Through this template view of com_config, Super Users can easily change the current template style parameters and view the changes soon after clicking Save.

Access to Templates View

For beginners, we encourage you to install Joomla! with sample data Blog English (GB) Sample Data or Brochure English (GB) Sample Data. If you installed with one of the two data sets, you can access it by clicking Template Settings on the Main Menu. (Logging in as a Super User is required).

In other cases simply add it to any menu. The following steps are for adding it to Main menu:

1. Login to Backend (Administrator view)

2. Go to Menus → Main Menu → Add New Item

3. Set Menu Item Type to ConfigurationManager → Display Template Options

4. Set Menu Title to Template Settings

5. Finally, click Save & Close

6. Log into Frontend as a Super User.

7. Click on menu item Template Settings on the Main Menu.

8. You will get the Template Settings allowed for the current Frontend template.

You can view the settings and change them quickly.

For Template Developers

There is flexibility for template developers to specify the parameters that to be shown on the Frontend. Just add a com_config.xml file with relevant fields to the template folder as shown below.

Note: If no such file is included in template folder, this component will take all the configuration fields mentioned in templateDetails.xml.

Example

For this case, the Protostar template is used.

1. Open the folder PATH_TO_JOOMLA_DIR → templates → protostar.

2. Create a com_config.xml file.

3. Add this code:

<?xml version="1.0" encoding="utf-8"?>
<config>
	<fields name="params">
		<fieldset name="basics">
			<field name="templateColor" class="" type="color" default="#08C"
				label="TPL_PROTOSTAR_COLOR_LABEL"
				description="TPL_PROTOSTAR_COLOR_DESC" />

			<field name="templateBackgroundColor" class="" type="color" default="#F4F6F7"
				label="TPL_PROTOSTAR_BACKGROUND_COLOR_LABEL"
				description="TPL_PROTOSTAR_BACKGROUND_COLOR_DESC" />

			<field name="logoFile" class="" type="media" default=""
				label="TPL_PROTOSTAR_LOGO_LABEL"
				description="TPL_PROTOSTAR_LOGO_DESC" />

		</fieldset>
	</fields>
</config>

4. The above code segment specifies only the Template Colour, Background Colour and Logo fields.

5. After clicking Template Settings, you will only see the previously mentioned fields.

This can be used for any template, but special inspection by the template designer may be required.

Conclusion

From this feature, it is believed that Joomla! Super Users will have a more efficient way of customizing their websites.

Important: Some templates will not directly support this by adding a com_config.xml file. Templates also should support viewing fields added to com_config.xml. Consult the template developer when enabling this feature.