Создание стиля

Материал из Flazy wiki

Введение

Чтобы создать стиль нужно знать несколько вещей:

• Стили располагаются в папке ./style/
• Создается папка (пример: ./style/Flazy) в которой будут находится css файлы, изображения и помещается в ./style/
• Главная папка с названием стиля (пример: ./style/Flazy) должна содержать стыковочный файл с точно таким же названием и расширением .php (пример: ./style/Flazy/Flazy.php), тут главное не ошибиться иначе стиль не определить форумом как установленный.
• Стыковочный файл подключает все стили которые планируется использовать на форуме. В нём перечисляются названия всех css файлов расположенных в папке стиля. Вот пример такого файла из стандартной сборки:

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url.'/style/'.$forum_user['style'] ?>/Flazy.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $base_url.'/style/'.$forum_user['style'] ?>/Flazy_cs.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="<?php echo $base_url.'/style/'.$forum_user['style'] ?>/Flazy_ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="<?php echo $base_url.'/style/'.$forum_user['style'] ?>/Flazy_ie7.css" /><![endif]-->

Возможно Вы заходите объединить файлы в один большой или наоборот раскидать на несколько маленьких.

Практика

Для создания или исправления своего стиля вам потребуется:

1. Notepad++
2. AppServ 2.5.10 если у вас нет хостинга, то вам придется на компьютере делать
3. Установка и настройка AppServ
3. ZentOtimizer
4. Mozilla FireFox
5. Дополнение FireBug
6. Абсолютный помощник CSS

Залив и установив форум в случае если на компьютере предположим что ваш адрес такой тогда в браузере http://localhost/flazy/index.php откройте свой форум в Mozilla FireFox.Немного поясню, сам форум надо устанавливать и заливать на компьютере в папку www в моем случае это C:/AppServ/www/flazy у меня там весь форум записан.

Итак начнем разбирать. Откройте в Notepad++ Flazy_Cold.css и Flazy_Cold.css.cs Проще всего создавать новый стиль на дефалтном для меня по крайней мере.
Нам нужно изменить заголовок форума или передвинуть его и так далее смотрим скриншот
Cкриншот 1
Мы видим что я тыкнул мышкой, нажал правой кнопкой мышки, нажал анализировать и ниже выдалось где это примерно искать. Так как я уже знаю где можно передвигать текст у логтипа, то я скажу что надо искать

#brd-title a, #brd-title strong {
        font-size: 1.5em;
        font-weight: 400;
        padding-left: 120px;
        text-decoration: none;
}

Flazy_Cold.css (строка ~100)

Пошли искать...

Действительно мы находим с Вами вот что:'

#brd-title a, #brd-title strong {
        font-size: 1.5em; /* Размер шрифта */
        font-weight: 400; /* Жирный текст на сколько */
        padding-left: 120px;  /*  Отступ от левого края */
        text-decoration: none; /* Декорировать текст или нет */
}
#brd-desc {
       font-size: 1.084em; /* Размер шрифта */
        padding-left: 120px; /* Отступ от левого края */

Что можно добавить:

font:bolder 18pt monospace;-;жирно,размер шрифта в pt,семейство шрифтов(название)
padding-top:2px;-на сколько спустить текст логотипа от верха вниз
position:absolute;<позиция текста или логотипа>

Во втором файле Flazy_Cold.css.cs сама картинка логотипа, находится в строках 241-246.

После того как вы сделаете стиль вы можете переименовать Flazy_cs.css и Flazy.css как хотите и саму папку, но не забудьте открыть фаил Flazy_Cold.php и переименовать значения - Flazy_cs.css и Flazy.css на название своего стиля. Также необходимо переименовать файлы: Flazy_Cold_ie6,Flazy_Cold_ie7,Flazy_Cold.php - на своё имя - стиль готов.

Думаю основной принцип вы поняли.Тогда постараюсь написать,что известно и где лежит:
В первом файле Flazy_Cold.css можно заменить цвет шрифта и цвет ссылок ширифта,размер шрифта,название название семейств шрифта их всего три- serif,san-serif,fantasy,monospace строки 6-16
Немного поискав, мы добавили изменения цвета отдельно для ссылок RSS активных тем и Всё прочитано,изначально этих данных нигде нет, добавлять в Flazy_Cold.cs.css

.brd .options span.feed a {
color: #fff;
}

#brd-main .gen-content .options span .mark-all-read{
color: #fff;
}

В файле Flazy.css в строке 226-228 тут можно изменить высоту и ширину иконок форума на главной странице

.brd .main-content .icon {
	width: 28px;
	height: 28px;

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

Хотите верхнее меню без подчеркивания:

#brd-navlinks a {
	text-decoration: none;
	height: 120px;
	font: 12pt san-serif;
	font-weight: bolder;
}
#brd-navlinks a:hover {
	text-decoration: none;
	font: 12pt san-serif;
	font-weight: bolder;

C уважением Ваши дизайнеры Lexx и Lili!