Сегодня я хочу рассказать о несложном, но очень полезном алгоритме редактирования CSS стилей шаблонов для сайтов на Joomla. Я бы сказал, что сам алгоритм намного универсальнее и подходит для любых типов движков и сайтов вообще, просто примеры я буду приводить именно редактируя дизайн шаблонов сайтов на Joomla, поскольку этим я довольно часто занимаюсь в последнее время.
Конечно, если Вы читаете эту статью, значит причина у Вас уже имеется, но многие только догадываются, зачем это нужно. Поэтому, например, можно сказать, что Вы создали сайт себе или кому-то, добавили интересующий Вас шаблон, но в итоге одна или несколько деталей Вас не устраивает по какой-то причине, например:
Вот все эти казалось бы мелочи очень часто огорчают веб-мастеров и заставляют в итоге принять решение или о найме веб-дизайнера для его правки, или об установке другого шаблона. Данная статья поможет Вам самостоятельно и бесплатно редактировать шаблоны сайтов.
В современных шаблонах для Joomla и других CMS как правило содержится много папок, в которых располагаются файлы, обслуживающие работу определенных модулей, вывод стилей и т.д. Практически всегда, отвечающие за дизайн шаблона файлы находятся в папках шаблона под названием CSS. В таких шаблонах может быть несколько папок с таким названием, да и в самих папках можеть находиться много файлов с расширением.css и нужно четко понимать, какой именно файл нужно редактировать.
Для этого, в браузере Firefox есть такой полезный инструмент как исследование элементов. Далее буду приводить примеры. Давайте отредактируем положение, высоту и цвет фона поля, предназначеного для выведения шапки сайта.
Итак, на интересуемом участке, который нужно отредактировать (у нас это будет шапка сайта), кликните правой кнопкой мыши. В предложенном меню выберите пункт Исследовать элемент . После этого исследуемый элемент будет выделен пунктирной рамкой и откроется дополнительная консоль, где будет выведен код страницы и самого элемента (напомню, в примере шапка сайта) - смотрите скриншот ниже.
Должен сразу заметить, что у меня на ноутбуке установлена ОС Lubuntu, поэтому графика программ и приложений у Вас может отличаться, но это не имеет принципиального значения.
Справа видим HTML-код шаблона, но поскольку нам нужно отредактировать CSS-файл, отвечающий за стиль отображения шапки сайта, переходим сразу в него, нажав на его названии (кликните там, где показано в скриншоте выше красным). В итоге нам открывается нужный CSS файл (смотрите скриншот ниже).
Удобная штука! Вам сразу же показан нужный участок кода, что значительно облегчает работу! Но перед тем как начать фокусы с дизайном, давайте в основных понятиях проанализируем тот кусок кода, который будем редактировать. Вот ниже его и приведу:
Td.logoheader {
margin: 0;
padding: 0;
background: url(../images/123.png) #4B6B94 no-repeat bottom center;
height: 146px;
width: 100%;
td.logoheader - имя шапки сайта в CSS-файле
background - фон шапки сайта, который состоит из картики (url(../images/123.png) ) и из html-кода цвета фона (#4B6B94 ), а также из правила, которое указывает картинке не тиражироваться (no-repeat ) и находиться внизу по центру (bottom center )
height - высота шапки сайта в пикселях (в данном случае - 146px)
width - ширина шапки сайта по отношению к шаблону, в примере выражена в % (100%)
Для изменения цвета фона, размера шапки сайта и самой фоновой картинки мы будем вносить изменения в параметры background и height, остальные не будем трогать.
Самое интересное и приятное заключается в том, что изменения мы будем вносить в код прямо в редакторе таблиц стилей в браузере Firefox (смотрите второй скриншот). И что очень удобно, изменения будут отображаться в реальном времени и только для Вас! Таким образом Вы сможете провести эксперименты, найти оптимальное решение в дизайне и уже только потом внести остаточные изменения в CSS-файл шаблона! Согласитесь - это избавляет от массы проблем:)
Для наглядности, давайте сделаем следующие изменения:
Кстати, чтобы точно узнать путь к папке, в которой лежит нужное изображение, нужно просто на самом изображении в браузере кликнуть правой кнопкой мыши, далее выбрать пункт Открыть фоновое изображение и в браузерной строке увидите полный путь от домена до названия самого файла:)
И еще раз напомню, все изменения в код я вношу прямо в редакторе браузера, поэтому результат всех вышепредложенных изменений смотрите в скриншоте ниже.
Вроде уже потренировались в редакторе браузера, определились с изменениями в дизайне. Заходите через FTP-клиент на сервер или через менеджер файлов хостинга, скачиваете нужный CSS-файла шаблона, открываете его в Notepad++ (или в текстовом редакторе JuffEd, если у Вас Ubuntu), вносите изменения в сам файл, сохраняете, заливаете измененный файл на сервер но никаких визуальных изменений в итоге не произошло? Что нужно сделать:
Эти простые манипуляции должны помочь:)
CSS — это язык стилей, который определяет отображение HTML-страниц. С помощью этого языка Вы можете управлять шрифтами, цветом, размерами, позиционированием и многими другими элементами веб-страницы. Любая современная тема в своей разметке использует CSS. WordPress-шаблоны тоже не являются исключением.
Часто бывает необходимость изменить на сайте какие-то элементы дизайна. Например, размер логотипа, цвет фона или вставить новый блок.Так, многие WordPress-темы для этого имеют специальное окно настроек, которое позволяет легко задать новые параметры отображения для той или иной части сайта. Но разработчики тем не могут предусмотреть все нюансы дизайна и добавить для них возможность быстрого редактирования. Поэтому часто приходится вносить изменения самому.
Редактировать язык стилей в WordPress можно несколькими способами. Мы рассмотрим два из них, которые являются наиболее простыми для пользователей.
Большинство современных WordPress-тем предусматривают добавление CSS-кода прямо в настройках. Для этого достаточно в админ-панели перейти Внешний вид -> Настроить , выбрать Дополнительные стили и в поле вставить нужный код, после чего кнопку Сохранить и активировать .
Итак, для редактирования CSS-файлов через админ-панель необходимо перейти Внешний вид -> Редактор . В итоге Вы попадаете в окно редактирования WordPress-тем.
Тут нужно выбрать тему, которую хотите изменить. Далее справа, в списке файлов темы, следует найти и нажать на пункте Таблицы стилей style.css .
Перед Вами отобразится окно редактора, в котором можно редактировать файл стилей.
После внесения всех нужных изменений не забудьте нажать кнопку Обновить файл . Все, Ваши правки применены и отображаются на сайте.
Изменить оформление сайта, можно в файлах активной темы WordPress, а именно в файле под названием style.css. Это простой текстовой файл в расширении CSS. Переводится CSS как Cascading Style Sheets - каскадные таблицы стилей. Согласен, перевод мало о чем говорит. Какими способами можно редактировать пойдет речь далее.
С одной стороны CSS это расширение текстового файла. С другой стороны CSS это язык программирования, на котором пишется это файл. С третьей стороны CSS это свод правил для задания шрифта, цвета сайта, относительного расположения блоков сайта (влево, центр, право, отступы от верха и низа) и других представлений внешнего вида страниц сайта, которые в этом файле и прописаны.
Сразу замечу, файлы CSS могут иметь пугающие размеры, но в них нет ничего сложного. Это очень простые, хотя и разнообразные, правила, написанные в простом синтаксисе.
Я не собираюсь обучать основам CSS, это отлично делают на специальных сайтах. Нам понадобиться только справочник HTML: http://htmlbook.ru/ .
Также замечу, что запоминать все правила CSS наизусть совершенно не обязательно. Достаточно понимать синтаксис написания правил CSS. Этого достаточно, чтобы редактировать файл CSS, да и справочник всегда поможет. Главное знать, что править и как править. Кроме справочника есть инструменты в браузерах, о них чуть ниже, которые позволяют редактировать CSS онлайн.
Несколько прописных истин:
А лежит файл style.css WordPress в папке с темой (шаблоном) WP. Полный адрес, одинаков для всех тем: wp-content/themes/название_темы/style.css.
Предложу три варианта редактирования файла style.css.
Вам, наверное, известно, что система WordPress имеет внутренний редактор файлов установленных тем. Войти в него можно из консоли сайта через вкладку: Внешний вид→Редактор.
Справа вы видите список файлов темы, в поле редактора открывается содержимое файлов. Если у вас установлено несколько тем, обратите внимание на правый верхний угол. Там есть поле выбора темы. По умолчанию откроется активная тема, но редактировать можно любую установленную тему без её активации.
Совет: Ошибки в редактировании style.css не могут обрушить сайт, вы можете изуродовать только внешний вид. Поэтому, перед прямым редактированием из консоли можно обойтись без , достаточно сделать копию самого файла style.css и в случае неудачного редактирования вернуть файлу прежний вид.
Говорят, что есть хостинги, которые не поддерживают редактирование файлов темы из административной панели сайта. Не беда. Можно и на самом деле это правильно, редактировать файл style.css по FTP. Правильно, потому что безопасно и у вас всегда есть оригинальная копия файла.
Оба способа редактирования относятся к прямому редактированию, «живого» файла активной темы. У прямого редактирования есть большой недостаток: при обновлении темы все ваши изменения потеряются и тема примет исходный внешний вид. Чтобы этого избежать используется способ дочерней темы.
На этом принципе основан и третий способ редактирования стилей.
Есть несколько плагинов для улучшения редактора файлов темы. Для редактирования стилей мне нравится плагин Jetpack. О плагине я писал подробную статью: . Плагин очень большой и для редактирования стилей темы нужно активировать модуль Custom CSS.
После его активации в меню консоли в пункте Внешний вид появляется вкладка «Редактировать CSS».
редактировать CSS сайта WordPress Теперь не нужно редактировать style.css напрямую, достаточно вписать кусок кода css в поле редактора и изменения появятся на сайте. Причем при обновлении темы они не потеряются.
Если вы бегло не читаете CSS нужно воспользоваться онлайн инструментами, для чтения CSS и понять, что нужно редактировать.
Самый простой инструмент, это инструмент в любом браузере: «Просмотр кода элемента» в Chrom. В других браузерах название похожее. Доступ к инструменту через правую кнопку мыши или короткими клавишами (Ctrl+Shift+I).
Показываю, как им пользоваться:
Например, хотим поменять заголовок сайта.
редактировать CSS сайта WordPress начало 
редактировать CSS сайта WordPress Для примера, я поменял онлайн размер шрифта названия.
Но это еще не все.
Раньше, когда еще не было CSS, дизайнеру приходилось вручную прописывать каждому заголовку тег . Это было очень мучительно, и затем пришел CSS, который значительно облегчил жизнь веб-дизайнерам. CSS позволяет определить все стили для вашего сайта в одном файле(или нескольких, на ваше усмотрение). Это позволяет сэкономить время работы и сделать код более гибким.
Но для чего нам нужны редакторы CSS? Каждое введение новой технологии имеет две стороны медали, в CSS это отобразилось на поддержке некоторых свойств CSS в браузерах IE. И поэтому веб-дизайнер должен найти хак, чтобы исправить отображение в браузерах IE.
Редакторы CSS помогают писать код быстрее и избегать множества ошибок.
STYLIZER — это редактор CSS, который позволяет редактировать CSS и видеть изменения в реальном времени. Вы можете просто ввести адрес веб-страницы и слева увидите веб-страницу, а справа — CSS код, который можно изменять и изменения будут видны слева. Можно изменять как вручную, прописывая свойства, так и с помощью кнопок WYSIWYG редактора.
Изменить цвет текста можно также динамически. При изменении цвета, появляется спектр цвета, похожий на тот, который есть в Adobe Photoshop.
В данном редакторе невозможно сделать ошибку, так как здесь сам редактор будет проверять значения, которые вы вводите.
Редактор TopStyle показывает стили поддерживаемые браузерами Firefox, IE, Safari и даже iOS 2.0. Данная возможность может быть применена при кросс-платформенной разработке дизайна.
Одной из полезных функций данного редактора является Инспектор, который позволяет добавлять CSS свойства одним кликом, что позволит сэкономить время и силы при долгом и утомительном кодировании.
Также данный редактор позволяет увидеть совместимость CSS свойства в браузере, что очень полезно при написании кода для браузера IE.
Как заявляет разработчик, Style Master это редактор, который можно использовать при любом уровне знаний CSS. В программе можно использовать не только WYSIWYG редактор, но и писать код вручную(очень странно было бы если это было не так:)), с подсветкой каждого свойства, для более опытных разработчиков.
Пожалуй самым большим достоинством данного редактора являются — готовые шаблоны стилей. Он имеет около 20 шаблонов, правильно организованных, которые позволяют быстро и легко писать стили для сайта.
Редактор Rapid CSS является удобный, легконастраиваемой программой для редактирования CSS файлов. Он имеет текстовый редактор с подсветкой синтаксиса, автозавершение кода и другие.
С помощью данного редактора вы можете отформотировать вашу таблицу стилей по-своему желанию. Встроенный валидатор кода будет содержать таблицу стилей не только в чистоте, но и оградит от CSS ошибок.
Сразу скажу о том, что данный редактор поддерживает только MAC OS. Редактор имеет красивый дизайн, но он не предназначен для начинающих пользователей. Также данных редактор позволяет видеть изменения динамически, в реальном времени.
Интересной возможностью данного редактора является то, что можно описать свойство на простом английском языке(для этого создан Selector Builder). Для новичка эта функция будет достаточно интересной.
Если вы серьезный веб-дизайнер, который заботится о правильном написании CSS, правильном размещении свойств, но данный редактор вам понравится.
В данном редакторе вы можете добавить класс или идентификатор с помощью встроенных функций, а также есть возможность конвертировать цвет из HEX(шестнадцатеричного формата) в RGB, что является редкостью для редакторов.
Также в редакторе присутствует функция автозавершения кода.
Стандартный CSS редактор, который позволяет установить font, color, margin, border и другие свойства.
По сравнению с Rapid CSS редактором он имеет меньше функций, но понятный интерфейс, что важно для начинающих, которые сразу пугаются большого набора функций.
Simple CSS также является простым редактором таблицы стилей. Он является бесплатным. Работу можно вести сразу с несколькими проектами. Есть функция предварительного просмотра, которая покажет как будет выглядеть класс или идентификатор после внесенных изменений.
NeonHTML - Бесплатный редактор HTML и CSS с визуальными инструментами. Отличается функциональностью инструментов. Поддерживает XHTML. Позволяет редактировать быстро и комфортно: подсветка синтаксиса, визуальное создание тегов в диалогах. Большинство инструментов имеют предпросмотр, изменение параметров сразу влияет на отображение в просмотре. Есть встроенный браузер с имитацией разного разрешения и масштаба. Инструмент поисковой (SEO) оптимизации и проверки рейтинга сайта. Инструмент вариаций текста поможет при раскрутке. Очень хорошая работа с цветами - специально созданная палитра как в графических редакторах, список недавних цветов, список цветов страницы, быстрое редактирование цвета одним кликом, мгновенное создание параметров стиля с выбором цвета, докер цвета. Инструменты взаимодействуют друг с другом, этим достигается быстрое привыкание к интерфейсу, удобство и высокая скорость работы. Не заменяет клавиатуру где не нужно. Не содержит хлама менюшек.
________________________________________________________________________________
