How To Change Joomla Template Width

Table of contents:

How To Change Joomla Template Width
How To Change Joomla Template Width

Video: How To Change Joomla Template Width

Video: How To Change Joomla Template Width
Video: Joomla 3.x. How To Change Modules, Menu, Logo Width 2024, December
Anonim

Joomla is one of the most customizable and user-friendly CMS out there. Using the capabilities of this site management system, you can not only fill the site with various functionality, but also change its appearance based on the installed templates.

How to change joomla template width
How to change joomla template width

Instructions

Step 1

Open the home page of your site. In the menu of the browser you are using, select the function of viewing the source code of the page. In Google Chrome, this tool is located under "Tools" - "View Source", in Firefox - "Web Development" - "Source". If you are using Opera, select View - Development Tools - Source Code to view the HTML code.

Step 2

Find the handle and see all divs and their names. Open your template's template.css file with any text editor and find a block that explicitly sets the width. For example, if it is after, then in the template file look for the name block. To simplify the search, you can use the "Edit" - "Find" function of the editor window. Browse through all the divs listed in the source code of the page.

Step 3

In the width parameter, enter the desired value in percent or pixels. Review the rest of the blocks that have the same widths and change them in the same way. For example, if you added 200 pixels to the width in the main layer, then you need to add the same 200 pixels to other blocks.

Step 4

After completing the changes, save the file and see the result, edit template.css again if necessary. If you use images as the background of blocks in the template, then most likely you will have to change their size as well. Also, for each div, you can set its own background color, which can replace the monochrome image. If there is a logo in the site design, then you can stretch it using any graphic editor. You can also use your own images in templates.

Recommended: