Joomla Template Editor

Joomla 3.x offer very powerful Template Editor, available within the admin panel. The Template Editor allows you to edit your template directly in your browser. This is helpful and in case to fix/edit  small issue could be faster than editing files using ftp. Lets talk about this incredible Joomla! option.

How to edit Joomla 3 template.

Joomla Template Editor split on two part : Edit Styles and Edit Details and Files.  First provide all available build in options of individual template, second let you edit and save the files inside the editor. We will show both options on example of AS 002102 template created by AS Designing Team.

Option 1. Template Styles

1. Login to Joomla Admin Panel
2. Navigate to Extension -> Templates
3. Click on Styles
   
4. Click on AS 002102 – Default
5. You can see now menu of possible build in options that this template offer: Header Layout, Content top layout, Content main layout, Content bottom layout, Footer layout, Typography, Features.  Each of Menu has tons of parameters that you can try to edit before start thinking about code editing. Let see couple of them:
6. In Header layout  you can add/edit Background color, Background image, change Logo size,  Logo font color, insert your Logo image instead Logo text and much more.
   
7. In Content main layout you can play with Left and Right sidebar Width ( Bootstrap size from 1 to 12),  Layout style, Font color, H1, H2, H3 … font colors.
   
8. In Typography you can select Body font family, Heading font family, Body font size, H1,H2,H3 … font sizes and much more.
   

We are recommend start editing you template from Styles options. In case you didn’t find what you wanted, its time to test yourself in PHP, CSS, Javascript .

Option 2. Edit Template Details and Files

1. Navigate to Extensions -> Templates -> Templates
2. Click on AS 002102 Details and Files
   
3. Now you can see in left sidebar menu of all available files in the templates. Let say you would like to edit tmpl.default.css file
4. Click on css -> tmpl.default.css
5. In right side text area you can found and edit code, then click on Save button.
   
6. With some procedure you can edit Language files
   
7. Rewrite Components or Modules
   

We recommend to make backup of template before start editing code.  You can use Copy Templates options in this case.

1. Click on Copy Template
   
2. Create new name, let say 002102-backup
3. Click on Copy Template button
   

Now you can change your template without afraid to lose something.

Be careful with Delete File and Manage Folder options. If you by mistake will delete some file or rename it, this could cause stop template working or some errors appeared.