====== Правим стили ====== Примечание: описывается версия **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»: Взято на http://bb3x.ru/a_styles/styles_about ===== Полезные ссылки по изменениюи допиливанию стилей ===== * Изменяем заголовок (шапку) prosilver - http://www.phpbbguru.net/community/kb.php?a=42 * [FAQ] Как перекрасить prosilver - http://www.phpbbguru.net/community/topic27271.html