Содержание

Правим стили

Примечание: описывается версия 3.0.7-PL1

Копируем один из готовых стилей для запила

Можно конечно пилить любой стандартный стиль, но мне больше нравится идея сделать свой собственный, дабы его можно было переносить и легко переключаться если что-то пойдет не так.

Итак, в папке styles копируем какой-нибудь уже существующий стиль, например prosilver

# cp prosilver mystyle
Если сидите на *nix платформе, не забудьте выставить правильные права на вновь созданную папку.

Теперь надо поправить конфигурационные файлы - чтобы они соответствовали вашему стилю.

В файлах

mystyle/style.cfg
mystyle/imageset/imageset.cfg
mystyle/template/template.cfg
mystyle/theme/theme.cfg

прописываем реквизиты своего шаблона:

name = mystyle
copyright = © MyName, 2010
version = 0.1

Следующий этап - включить новый стиль в админке.

Админка → Стили, видим новый стиль в разделе «Доступные для установки стили». Добавляем его и активируем.

Заходим в пункт «Информация», проверяем поля «Имя стиля», «Копирайт», изменяем поля «Шаблон», «Тема», «Набор изображений» на имя нашего нового стиля mystyle.

Модифицируем свой стиль по вкусу

После изменения любого файла стиля требуется сделать следующее: перейти Админка → Стили → Темы и нажать «Обновить» у вашего стиля.

Если менялся какой-либо шаблон в папке template, делаем так: Админка → Общие и нажимаем «Очистить кэш»

Меняем лого форума

За шаблон шапки (лого форума, слоган, поиск) отвечает файл

mystyle/template/overall_header.html

Cама картинка лого - это файл

mystyle/imageset/site_logo.gif

Стандартный размер картинки 139х52 пикселя. Если новая картинка больше, заменяем текущую картинку на новую, идем Админка → Стили → Наборы рисунков → Изменить. Выбираем новый логотип и меняем размер.

Меняем цвет шапки форума

Цвет шапки форума лежит в colours.css, параметр .headerbar (свойства color и backgroung-image)

Меняем ссылку лого и описание

Ссылка, по которой переходим по клике на лого описывается переменной U_INDEX в файле

папка_форума/includes/functions.php

Но одно большое НО: переменная глобальная, и если ее менять то ссылки вида «Вернуться в Список форумов» так же изменятся.

Решение: пилить переменную прямо в шаблоне

mystyle/template/overall_header.html

За описание ссылки отвечает переменная L_INDEX - она запиливается аналогично.

Меняем название конференции в шапке

Правим common.css, параметр h1

Если нужно изменить вертикальный отступ для слогана - меняем margin-top

Меняем описание конференции в шапке

Правим common.css, параметр h2

Цвет категорий

Файл colours.css, параметр ul.forums

Цвет топиков

Файл colours.css, параметр .bg1

Цвет списка категорий и навигации

Файл colours.css, параметры a:link, a:visited, a:hover, a:active

Цвет топиков

Файл colours.css, параметры a.topictitle

Кто сейчас на конференции

Файл colours.css, параметры h3

Статистика

Файл colours.css, параметры h3

Вход на сайт

Файл colours.css, параметры .panel

Кто, где, почему и зачем

У стиля есть три папки:

imageset — содержит рисунки, используемые в стиле, а файл imageset.cfg определяет рисунки в стиле.

template — содержит основные файлы HTML, которые отвечают за общий дизайн стиля, страниц, и так далее, и файл template.cfg, содержащий информацию о наборе шаблонов.

theme — содержит файлы CSS, которые определяют отображение различных объектов, цвета, фоны, ссылки и так далее, и файл theme.cfg, который содержит информацию о теме оформления.

Ниже размещён список всех файлов, используемых в стилях Olympus, с описанием функций каждого файла. Поскольку Olympus поставляется с двумя стилями, я сначала перечислю идентичные файлы с идентичными функциями, встречающиеся в обоих стилях. А затем я перечислю отличающиеся файлы.

Папка «theme»

stylesheet.css — этот файл отвечает за код CSS и содержит все классы, используемые для стилизации. Файлы prosilver

bidi.css — отвечает за настройку форумов RTL (текст справа налево), таких, как арабские или еврейские.

buttons.css — отвечает за отображение кнопок форума (Новая тема, Ответить и так далее).

colours.css — отвечает за цвета форума, тексты, фоны и так далее.

common.css — отвечает за общую стилизации, такую, как верхний и нижний колонтитул, главная страница и так далее.

content.css — Стилизация внутреннего содержимого страниц (viewforum_body.html, viewtopic_body.html и так далее).

cp.css — Стилизация пользовательских панелей управления, вкладок, страниц личных сообщений и так далее.

forms.css — стилизация различных форм (форма входа, страница размещения ответа, текстовые области и так далее).

large.css — увеличивает размер текста при нажатии на кнопку «A».

links.css — стилизация ссылок, цвета, фоны, эффекты при наведении мыши и так далее (цвета берутся из файла colours.css, а links.css используется для форматирования, изменения размеров текста, стилизации и так далее).

medium.css — отображает средний размер текста при нажатии на кнопку «A».

normal.css — отображает обычный размер текста при нажатии на кнопку «A».

print.css — отвечает за форматирование темы при выводе на печать (при нажатии кнопки «Версия для печати»).

tweaks.css — корректировки для некоторых браузеров, таких, как IE.

Все эти файлы собраны в файле stylesheet.css с помощью свойства «import»:

@import url('/"filename.css"');

Папка «theme» также содержит папку «images», в которой содержатся рисунки для стиля, фоны, значки и так далее.

Папка «template»

attachment.html — этот файл отображает вложения в сообщениях и в личных сообщениях.

bbcode.html — специфический файл кнопок BBCode. Содержит кнопки и их расположение.

confirm_body.html — страница подтверждения. Эта страница появляется при подтверждении чего-нибудь (например, при удалении темы).

custom_profile_fields.html — страница дополнительных полей в профиле. Появляется при редактировании профиля.

editor.js — файл JavaScript, используемый при написании тем, ответов, личных сообщений, и применяет кнопки BBCode и другие объекты встроенного редактора.

faq_body.html — страница часто задаваемых вопросов.

forumlist_body.html — этот файл отображает категории и форумы на главной странице.

index_body.html — этот файл отображает содержимое главной страницы.

jumpbox.html — отображает выпадающий список для перехода в форумы конференции.

login_body.html — страница входа, используемая при входе на конференцию, или при подтверждении пароля во время входа в панель администрирования.

login_forum.html — страница входа в форумы, защищённые паролем.

mcp_approve.html — страница одобрения тем и сообщений. Если имеются отложенные темы и сообщения, то этот файл отвечает за их отображение.

mcp_ban.html — страница блокировок, отображаемая, если модератор имеет права для блокировки пользователей.

mcp_footer.html – нижний колонтитул панели модератора. Содержит разбивку на страницы, темы, сообщения и так далее.

mcp_forum.html – страница модерации форума в панели модератора.

mcp_front.html – главная страница панели модератора. Содержит списки последних действий, таких, как пять последних жалоб, пять последних записей журнала и так далее.

mcp_header.html – верхний колонтитул панели модератора. Содержит вкладки и блоки, название модерируемого объекта и так далее.

mcp_logs.html – страница журнала модераторов, на которой модератор может просматривать действия других модераторов и свои собственные.

mcp_message.html – сообщение, которое появляется после выполнения какого-либо действия модератором. Например, при изменении типа темы.

mcp_move.html – страница перемещения темы, с помощью которой можно выбрать форум для перемещения темы.

mcp_notes_front.html – главная страница заметок о пользователях. С помощью этой страницы выбирается пользователь, заметки о котором вы хотите просмотреть.

mcp_notes_user.html – страница отображения заметок о пользователе. Здесь вы можете читать заметки о пользователе и записывать новые.

mcp_post.html — страница редактирования сообщений в панели модератора. На этой странице отображаются опции для редактирования сообщения, изменения автора сообщения и так далее.

mcp_queue.html — страница, отображающая отложенные темы и сообщения в панели модератора.

mcp_reports.html — страница жалоб на сообщения, отображаемая в панели модератора.

mcp_topic.html — страница модерирования тем в панели модератора. Здесь вы можете изменить, закрывать, изменять статус тем и так далее.

mcp_viewlogs.html — страница, отображающая журналы выбранных тем.

mcp_warn_front.html — главная страница с предупреждениями. Здесь можно увидеть пользователей с наибольшим числом предупреждений, последние пять предупреждений, а также можно выбрать пользователя и выдать ему предупреждение.

mcp_warn_list.html — Страница, отображающая список всех предупреждённых пользователей.

mcp_warn_post.html — страница выдачи предупреждения пользователю, отображаемая при щелчке на кнопку «Выдать предупреждение», находящуюся возле сообщения.

mcp_warn_user.html — страница выдачи предупреждения пользователю, отображаемая при поиске пользователя на главной странице предупреждений, или при щелчке по соответствующей кнопке в его профиле.

mcp_whois.html — страница, отображающая сведения об IP-адресах.

memberlist_body.html — страница со списком пользователей конференции, отображаемая при щелчке по ссылке «Участники».

memberlist_email.html — страница для отправки пользователю электронного сообщения.

memberlist_im.html — страница для отправки пользователю мгновенного сообщения.

memberlist_leaders.html — страница, отображающая администраторов и модераторов конференции. Для просмотра этой страницы нажмите ссылку «Команда сайта».

memberlist_search.html — страница поиска пользователей, проявляющая при щелчке по ссылке «Найти пользователя».

memberlist_view.html — страница для отображения профиля пользователя.

message_body.html — общее сообщение. Отображается при выполнении некоторых действий с темами. Например, при размещении сообщения.

overall_footer.html — нижний колонтитул конференции.

overall_header.html — верхний колонтитул конференции.

posting_attach_body.html — форма для прикрепления файла к сообщению. Отображается на странице размещения сообщений.

postiing_body.html — страница размещения сообщений. Используется для написания текстов сообщений, личных сообщений и так далее.

posting_buttons.html — страница, предназначенная для отображения кнопок BBCode на странице размещения сообщений.

posting_poll_body.html — эта страница отображается при добавлении опроса к сообщению.

posting_preview.html — страница предварительного просмотра темы или сообщения, появляющаяся при нажатии кнопки «Просмотр» во время написания сообщения.

posting_review.html — эта страница появляется в момент размещения сообщения в тему, в которой кто-то разместил сообщение в то время, пока вы писали ответ.

posting_smilies.html — страница со смайликами, отображаемая при написании сообщений.

posting_topic_review.html — Страница обзора темы, отображающаяся во время размещения ответа.

search_body.html — страница расширенного поиска.

search_results.html — страница, отображающая результаты поиска.

simple_footer.html — нижний колонтитул для всплывающих окон, просмотра темы и так далее.

simple_header.html — верхний колонтитул для всплывающих окон, просмотра темы и так далее.

template.cfg — файл, содержащий сведения о наборе шаблонов.

ucp_agreement.html — страница соглашения с условиями регистрации.

ucp_attachments.html — страница, отображающая вложения пользователей.

ucp_footer.html — нижний колонтитул пользовательской панели управления.

ucp_groups_manage.html — страница управления группами. Если вы являетесь руководителем группы, то с помощью этой страницы можете управлять участниками группы.

ucp_groups_membership.html — страница, отображающая участников группы.

ucp_header.html — верхний колонтитул пользовательской панели управления.

ucp_main_bookmarks.html — страница, отображающая закладки пользователя.

ucp_main_drafts.html — страница, отображающая черновики пользователя.

ucp_main_front.html — главная страница пользовательской панели управления.

ucp_main_subscribed.html — страница, отображающая подписки пользователя.

ucp_pm_history.html — страница истории личных сообщений, отображающая ваши сообщения и ответы другого пользователя.

ucp_pm_message_footer.html — нижний колонтитул личных сообщений, отображаемый при просмотре сообщения.

ucp_pm_message_header.html — верхний колонтитул личных сообщений, отображаемый при просмотре сообщения.

ucp_pm_options.html — страница, отображаемая во время настройки правил для личных сообщений.

ucp_pm_popup.html — всплывающее окно, уведомляющее пользователя о поступлении новых личных сообщений.

ucp_pm_viewfolder.html — страница папок для сообщений, отображающая сообщения в папках «Входящие», «Исходящие», «Отправленные» и так далее.

ucp_pm_viewmessage.html — страница для отображения личных сообщений.

ucp_pm_viewmessage_print.html — страница, используемая для отображения личных сообщений в версии для печати.

ucp_prefs_personal.html — страница общих настроек, отображаемая в пользовательской панели управления.

ucp_prefs_post.html — страница настроек размещения сообщений, отображаемая в пользовательской панели управления.

ucp_prefs_view.html — страница настроек отображения сообщений, отображаемая в пользовательской панели управления.

ucp_profile_avatar.html — страница настроек аватары, отображаемая в пользовательской панели управления.

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

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

ucp_profile_signature.html — страница для создания и изменения подписи, отображаемая в пользовательской панели управления.

ucp_register.html — страница, отображаемая при регистрации пользователей.

ucp_remind.html — страница с функцией восстановления забытого пароля.

ucp_resend.html — страница отправки повторного кода активации.

ucp_zebra_foes.html — страница, отображающая ваших недругов.

ucp_zebra_friends.html — страница, отображающая ваших друзей.

viewforum_body.html — страница, отображающая темы форума.

viewonline_body.html — страница «Кто сейчас на конференции».

viewonline_whois.html — страница, отображающая сведения об IP-адресах при щелчке по ссылке «Информация об IP-адресе» на странице viewonline.php.

viewtopic_body.html — страница, служащая для отображения сообщений темы.

viewtopic_print.html — страница, отображающая тему в версии для печати.

Различные файлы для каждого стиля

prosilver

drafts.html — страница, отображающая загруженный черновик. Во время размещения нажмите кнопку «Загрузить», чтобы увидеть эту страницу.

forum_fn.js — файл с функциями JavaScript конференции (управление всплывающими окнами, выпадающий список перехода к форумам и так далее).

posting_editor.html — главная страница для размещения сообщений в стиле prosilver.

posting_layout.html — страница размещения сообщений, содержащая редактор, смайлики, добавление опроса, вложений и так далее.

posting_pm_layout.html — то же самое, что и posting_layout.html, но для личных сообщений.

Файл posting_body.html не содержит ничего непосредственного, но настроен на включение файлов posting_layout.html и posting_pm_layout.html в нужное время.

styleswitcher.js — файл JavaScript, содержащий функции пользовательских cookies, изменения шрифта, параметры таблиц стилей и так далее.

ucp_avatar_options.html — параметры аватары пользователя. Этот файл также подключается в файле ucp_profile_avatar.html.

=== subsilver2 ===

breadcrumbs.html — страница, отображающая текущую полосу навигации по конференции, и настройки времени.

mcp_jumpbox.html — выпадающий список для модератора (этот файл больше не используется).

memberlist_group.html — страница для отображения информации о группах.

pagination.html — файл, отображающий разбивку на страницы для форумов, тем и так далее.

posting_progress_bar.html — страница, отображаемая при загрузке вложения.

searchbox.html — поисковое поле в форумах, темах и так далее.

Файлы, включаемые в другие файлы, подключаются с помощью функции «INCLUDE»:

<!-- INCLUDE filename.ext --> 

Взято на http://bb3x.ru/a_styles/styles_about

Полезные ссылки по изменениюи допиливанию стилей