How To Edit A Joomla Template

Table of contents:

How To Edit A Joomla Template
How To Edit A Joomla Template

Video: How To Edit A Joomla Template

Video: How To Edit A Joomla Template
Video: [Full Course] Joomla Template Customization For Beginners 2024, December
Anonim

To give individuality to the site, the webmaster sets up an original template, because design is the face of the site. A large number of layout layouts can be downloaded from the Internet today, and they will look quite nice. Typically, templates that were copied from the web are edited to make the site unique.

How to edit a joomla template
How to edit a joomla template

It is necessary

  • - image viewer;
  • - FileZilla;
  • - text editor Notepad ++.

Instructions

Step 1

Use FileZilla to view and edit your template files. With its help, you can work with configuration files online. As a rule, 3 files are processed to change the site design: index.php, template.css and templateDetails.xml.

Step 2

The "header" of the site is the element of the page that goes from the very top to the beginning of the content, hence the name. It is also called a header. As a rule, only the logo or any other image (logo.jpg) should be replaced in the "header" of the site. The location of the site logo is in the template.css file. Open it with Notepad ++.

Step 3

To search for a value, you must use the "Find element" option: press the Ctrl + F key combination and enter the desired value in the empty field. If you want to change the width or height of the image in the "header", enter the word header in the search bar and press the Enter key.

Step 4

Below the word you are looking for, you will see the lines: Height and Width. Change these values, then press Ctrl + S to save your changes. In the resulting FileZilla dialog box, click the Yes button.

Step 5

Go to the site to view the changes. If you are not satisfied with them, go back to the file and enter the new values.

Step 6

To change the size and name of the font on the main page of the site, use the search. Type the word body and press the Enter key. Below this operator there are the lines font-family (name) and font-size (size or point). Change their values, save your changes and go to the site to view them.

Step 7

To change the way links are displayed, enter the values a: link (standard link), a: visited (visited link) and a: hover (active link) in the search form. Press Enter to find these elements in the template.css file.

Step 8

Edit the font-size and color parameters. After changing them, you will probably notice that not all links have acquired a different color or font size. In this case, you need to look for alternative link placement options. For example, those that have remained unchanged are located in the main menu, therefore, you need to search for a consonant element.

Step 9

Search for the word "Main" and press Enter. Most likely, you will find yourself next to the left col link and left col current link elements, the value of which you need to change. After editing them, save the result and go to the site page, all links on the loaded page should externally change.

Recommended: