Принцип изменения ширины шаблона

В некоторых случаях, веб-разработчикам необходимо изменить ширину шаблона, чтобы готовый дизайн больше подходил под требования заказчика и с ним удобнее будет работать. Предлагаем вам ознакомиться с инструкцией, которая поможет изменить Joomla шаблоны, а точнее их ширину.

В качестве подопытного кролика, будет пользоваться узковатым шаблоном, который нам необходимо будет расширить примерно на 200 пикселей.

Первым делом открываем главную страницу веб-ресурса, и нажимаем правой кнопкой мыши по экрану. Знакомимся с исходным кодом HTML. На данном этапе, нас интересует код самого начала страницы. Он подписан как блок <body>, поисками именно этого тега мы и занимаемся.

После того, как мы его нашли, перед нами предстают несколько блоков с классами. Именно с помощью них выводится содержимое любого шаблона Joomla. Наша основная цель — узнать, в каких конкретно блоках указана ширина шаблона, так как их может быть несколько.

Открываем файл template.css, который содержат все шаблоны. Лучше всего, сделать это, используя WordPad. Нажимаем на «Правка», затем «Найти» и начинается поиск классов.

Поиск выдаст нам Класс «page_bg». Так как в нем не указывается ширина, значит он нам не подходит.

Продолжаем поиски другого класса. Результат поиска предлагает нам Класс «pill_m». В нем указывается, что текст должен располагаться по центру, а фоном послужит изображение menu.jpg. Здесь мы видим и указанную ширину в 718 пикселей. Но нам нужно еще ознакомиться с другими блоками.

Поскольку изначально мы хотели сделать шире наш шаблон на 200 пикселей, то исправляем указанную ширину до 918 пикселей и незабываем Сохранить файл.

Далее, поиск выводит нам блок, у которого id=»leftcolumn». Нам не нужно его менять, так как он отвечает за параметры левой колонки.

Практически каждая тема содержит в себе такой класс, как maincolumn, который отвечает за параметры основной колонки, в которой обычно на сайте отображается текстовое наполнение — статьи. Его нам тоже следует найти.

После того, как данный класс найдем, мы увидим, что его ширина составляет 510 пикселей. Увеличиваем ширину все на то же количество пикселей и получаем в данном классе 210 пикселей. Сохраняем изменения.

После этого момента материал начинает выводиться. Изменения во всех главных блоках мы выполнили. Теперь для подстраховки нужно сделать еще кое что: увеличим в файле template. сss все значения на 200 пикселей. Чтобы это выполнить, нажимаем на «Правка», затем на «Заменить». Сохраняем внесенные изменения.

После данного действия мы получим не привлекательный шаблон в ширину. Такой результат получился из-за того, что роль фона играют картинки, а их мы не редактировали.

Есть два варианта действий, чтобы не столкнуться с такой ситуацией:

  1. Нарисовать свои собственные изображения.
  2. Подкорректировать картинки, используя фотошоп.

С помощью таких не сложных манипуляций, можно изменить ширину шаблона Joomla. Обычно, данные инструменты легко поддаются редактированию, поэтому при правильном выполнении корректировок, сложностей у вас возникнуть не должно.