Каскадные таблицы стилей

Мы уже говорили о том, что полностью изменить дизайн сайта в он-лайн (панель "Дизайн") не всегда удается. К примеру, вам хочется использовать вместо установленного по умолчанию шрифта Ariel что нибудь более экзотическое. Можно, конечно выбрать с помощью редактора текстов какой-то другой шрифт, но он будет отображаться только для той страницы, где вы его применили. Остальные же разделы сайта будут отображены как и прежде, шрифтом Ariel. Такой дизайн выглядит непрофессионально.

Или например, вы хотите в качестве фона использовать какое-то изображение. Сделать это с помощью админки пока не получается (в будующих версиях мы планируем расширить возможности модуля "Дизайн").

Так что для тех, кому хочется сделать красивый и необычный дизайн сайта нужно воспользоваться файлом каскадной таблицы стилей (Cascading Style Sheets, или сокращенно, CSS). Желательно при этом иметь хотя бы минимальные знания в области языка HTML.

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

1. Откройте какую-нибудь страницу вашего сайта и выберите в верхнем меню вашего броузера View -> Source.

2. Найдите в нем часть кода, заключенного между тегами <style></style> и скопируйте этот кусок в отдельный текстовый файл. Назовите его как хотите, но желательно с расширением .css!

Важно! Измените путь к файлам в селекторах, где вам встретится фрагмент кода: 

background: url(имя_файла.jpg) на background: url(../template/имя_файла.jpg)

3. Зайдите в Панель Управления Файлами и закачайте этот файл в папку с текстовыми, html, php css-файлами.

4. После этого в Панели Настроек установите Внешнюю таблицу стилей, а в окошечке справа - свой файл.

Теперь ваш сайт работает с внешней CSS, осталось только научиться его редактировать.

Шаблон вашего сайта - это, попросту говоря, таблица, состоящая из колонок и строк. Если вам когда-либо доводилось строить таблицы в тестовом редакторе Word, то вы легко поймете о чем идет речь.

Серые боковые колонки шаблона, левая - c_side_L и правая - c_side_R предназначены для вставки изображений, создающих эффект трехмерной тени (см. дизайн сайта, установленный "по умолчанию").

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