CSS верстка

CSS описывает внешний вид любого сайта, в том числе написанного на Джумле. После скачивания шаблона Джумла непременно встанет вопрос о его коррекции для своих нужд. Да и просто для того, чтобы он отличался от других.

CSS работает в тесной связке с PHP.Грубо говоря PHP отвечает за то, какая информация и где будет показана на сайте, а таблицы стилей оформят внешний вид этой информации. Когда говорится о работе над дизайном сайта Джумла, в первую очередь об изменении шаблона.

Редактировать CSS шаблона Joomla можно из административной панели. Для этого нужно перейти в расширения, далее в менеджер шаблонов, выбрать необходимый шаблон и нажать кнопку Изменить. Для редактирования у файла должны стоять права 0644.

В некоторых шаблонах добраться до файлов довольно сложно. В этом случае придется идти в панель хостинга (CPanel, ISP Manager). Шаблон располагается в папке templates. Обычно большая часть таблиц стилей лежат в папке css. Некоторая часть файлов может быть вынесена в отдельные папки menu, иногда в blocks. В платных бизнес-шаблонах реализована возможность менять цветовую палитру сайта прямо из публичной части сайта. В правом нижнем углу стоят переключатели цвета. В этом случае в шаблоне будет папка themes, внутри которой папки конкретных цветов dark-blue, green и т.д.

Основной файл - template.css

Также почти у любого шаблона будет файл template-ie template-ie7. Дело в том, что интернет-обозревателя IE7 и более ранних версий нужны свои таблицы стилей, так как Explorer не всегда поддерживает свойства правильно считываемые других браузерами.

Сложные шаблоны будут иметь файлы component.css, layout.css.

Также следует отметить, что модули, компоненты имеют схожую с шаблонами структуру PHP и CSS

просмотр css в браузереНе имея основных навыков работы с этими языками, лучше не исправлять код, а если очень хочется попробовать, то необходимо периодически сохранять работоспособные версии. В изучении кода помогут расширения браузеров, созданные для веб-разработчиков: Firebug. Да и в самом браузере предусмотрена возможность изучения как HTML, так и таблиц стилей. Так в Mozilla Firefox нужно выделить элемент на сайте, нажать правую кнопку мыши и выбрать "Исследовать элемент". В правом окне откроется весь код, который описывает стиль элемента. Скорее всего это будет не один файл.

Можно прямо тут, не внося изменений в сам файл, поиграться со значениями padding, margin, font-size, font-family, color, background

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

 

Работа по редактированию CSS Joomla 2.5 ничем не отличается от 1.5