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

Если объем работы невелик, я своим клиентам делаю за символическую цену или, иногда, вообще бесплатно. Сложность в том, что у меня не всегда есть возможность сделать это быстро. Если вы хоть чуть-чуть разбираетесь в HTML и CSS, я думаю, это руководство будет вам полезно.

Возьмем простой пример - на сайте под Joomla3 нужно поменять цвет модулей в боковой колонке. В качестве примера буду использовать данный сайт.

Какой софт нам потребуется?

  1. Браузер, в котором можно смотреть исходный код страницы и, что важно - код отдельного элемента. Это позволяют делать почти все современные браузеры
  2. FTP-клиент - программа, позволяющий видеть сайт "изнутри" как папку на жестком диске. Я использую Total Commander (условно бесплатный).
  3. Notepad++ - текстовый редактор, оптимизированный для работы с кодом. В отличие от обычного "блокнота" имеет нумерацию строк, подсветку синтаксиса и возможность быстрого перехода к нужной строке. Подробнее о Notepad++

Алгоритм действий

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

2. Делаем по этому элементу правый клик мышкой, в появившемся контекстном меню выбираем пункт "посмотреть код элемента". Я использую Opera, в ней это выглядит так:

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

В правой панели - стиль элемента, в данном случае, это класс .well - мы видим, что в нем прописаны все цвета, отступы, границы, и прочие свойства. Более того, мы можем прямо здесь внести изменения в стиль - отключить элементы, задать им другие параметры и браузер покажет данный элемент с новыми настройками.

Только вот беда - как ни настраивай стиль через браузер, при следующей перезагрузке страницы все настройки восстановятся, что вполне логично - мы не можем через браузер вносить изменения в файле на сервере (к счастью :), нам нужно зайти на сервер по FTP и найти файл со стилями. Где искать?

В панели со стилями справа вверху указан путь к файлу css на сервере, а также номер строки в этом файле,  где прописаны настройки стиля элемента. Чтобы поменять вид элемента на сайте нам нужно подправить файл стиля на сервере.

3. Подключаемся к сайту по FTP при поможи FTP-клиента. Для этого нам потребуется адрес хоста, логин и пароль к FTP-аккаунту - этой информацией вас должен снабдить хостинг-провайдер. 

В нашем случае путь к файлу стиля такой:  /templates/new-protostar/css/template.css (строка 2155)

Находим этот файл и открываем его в редакторе (я использую Notepad++) и ищем данную строку. В Notepad++ есть горячая клавиша Ctrl+G - перейти к строке. Вводим номер 2155 и нажимаем ОК. И вот, примерно что мы увидим:

Теперь можно вносить изменения в файл (только не забудьте сделать бэкап - мало ли что?). После сохранения файл будет закачан обратно на сервер и изменения станут видны на сайте.

Этот вариант хорош тем, что он практически универсален - он применим не только для сайта на Joomla, но и на любом другом движке - главное, чтобы у вас был FTP-доступ и обозначенный выше набор программ (или их аналогов).

Если нет доступа FTP

Если у вас нет доступа по FTP, это можно сделать в редакторе шаблона через админку сайта. 

В Joomla это делается через меню "расширения" / "менеджер шаблонов" / 

... откроется подобие файлового менеджера, в котором можно открывать файлы движка и вносить в них изменения.

В других движках также почти всегда есть возможность это сделать.

Этот метод плох тем, что позволяет редактировать только тот стиль, который зашит в шаблон. Если же вы используете какое-то альтернативное расширение для управления контентом, например, K2, вы не сможете добраться до файла CSS.

Да и производительность труда при использовании данного метода правки будет низкой - функциональность редактора не впечатляет.

"Element-style" - как его поменять?

Бывает  так, что в окне просмотре CSS-свойств элемента фигурирует фраза element-style. Это означает, что свойства элемента прописаны не во внешнем CSS-файле, а в самом коде HTML или PHP. Поменять его сложнее,  чем элемент, описанный во внешнем файле CSS, но все же выполнимо. Самая большая сложность - это найти тот самый файл, который содержит этот элемент - в Joomla они, как правило, раскиданы по всей папке public_html :) 

Обычно описание элементов, общих для всего сайта, находится внутри шаблона - public_html/templates/имя шаблона/index.php, но если вы используете сторонние компоненты, то искать исходный код страниц следует в папке этих расширений public_html/components/имя компонента/views - а там уже смотреть исходный код php-файлов и html-шаблонов и искать нужный элемент и его описание. В очередной раз напоминаю - прежде чем вносить изменения в код, сделайте резерную копию.

Но самое обидное то, что даже если вы нашли и поменяли нужное свойство, при следующем обновлении компонента, все сбросится к значениям по умолчанию.