Рейтинг Ролевых Ресурсов

Не про что

Объявление

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Не про что » Дизайнерам » FAQ: Свой стиль

FAQ: Свой стиль

Страница: 1

Сообщений 1 страница 4 из 4

1

  • Автор: rps
  • Мой личный статус
  • Зарегистрирован: 2009-06-20
  • Приглашений: 0
  • Сообщений: 84
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    3 дня 5 часов
  • Последний визит:
    2012-08-18 23:20:44

Пояснительная записка.

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

В помощь тем, кто впервые работает с технологией Каскадных таблиц стилей (далее - CSS):
Учебник по CSS для начинающих и опытных: Ссылка.
Учебник по CSS для начинающих пользователей: Ссылка.
Учебник по базовым элементам дизайна форумов MyBB для "чайников": Ссылка.
Помошник по определению селекторов (простой): Ссылка.
Визуальный помошник по определению селекторов и изменению их свойств (для опытных): Ссылка.
Валидатор - средство поиска допущенных в коде ошибок: Ссылка.
Сайт W3C с разделом о CSS - официальный сайт технологии CSS: Ссылка.

Напоминаем всем пользователям основные правила написания стилей:
1. Стили не пишутся на основном форуме. Для этого зарегистрируйте тестовый форум и на нём работайте над написанием кода.
2. Имейте бекап стиля - последнюю рабочую конфигурацию кода Вашего стиля. Сохранить её Вы сможете в любом текстовом редакторе на своём ПК, или же как сообщение на форуме. Постояннно подновляйте бекап - это спасёт Вашу работу при крупных неисправимых ошибках!
3. Не пытайтесь использовать XTML, JavaScript  и прочие языки веб-разработок. Здесь они работать не будут!
4. Строго следуйте инструкциям, приведённым в вышеуказанных источниках. Это поможет Вам написать "корректный" стиль (без ошибок). Помните, нехватка даже одного знака может сделать код или его фрагмент нерабочим.
5. Всегда следите за работоспособностью всех ссылок, которые Вы указываете в коде. Они должны быть прямыми и не находиться под какими-либо ограничениями (пароль, логин и прочее).
6. Всегда проверяйте кроссбраузерность - одинаковое отображение стиля форума во всех браузерах. Если это не так - необходимо произвести изменения в соответствующем элементе (элементах) кода и добиться полного соответствия.
7. В новых версиях популярных браузеров встроены средства веб-разработчиков (или аналогичное). Воспользуйтесь этим для облегчения работы.
8. Не перегружайте стиль графикой.
9. Соблюдайте порядок расположения кода в стиле. Обращайте внимание на указатели (ярлычки), они обычно показывают, что именно меняется в этом разделе.
10. По всем вопросам обращайтесь на форум технической поддержки: Ссылка.

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

ВНИМАНИЕ: производить изменения в первом окне стиля можно только тем пользователям, кто чётко понимает, что и как необходимо делать. В противном случае Вы рискуете испортить работу!

0

2

  • Автор: rps
  • Мой личный статус
  • Зарегистрирован: 2009-06-20
  • Приглашений: 0
  • Сообщений: 84
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    3 дня 5 часов
  • Последний визит:
    2012-08-18 23:20:44

Часть 1: style_cs.css
Откройте страничку настройки кода своего стиля. Для этого перейдите последовательно в Администрирование---Свой стиль или по ссылке

Код:
Адрес форума/admin_style.php

Где слова "Адрес форума" необходимо заменить ссылкой на свой форум.
Перед собой Вы увидите два окошка. Работать мы будем (пока что) только со вторым! Оно имеет надпись Цвета style_cs.css, что означает, что мы работаем над дизайном.
Итак, найдите во втором окошке

Код:
/* CS1 Background and text colours
-------------------------------------------------------------*/

Эта часть кода будет отвечать за фоновые цвета, а так же цвета текста ( с английского  Background and text colours - Фон и цвета текста).
Вы видите, что этот участок для удобства разбит на несколько более мелких:  начиная с /* CS1.1 */ и заканчивая /* CS1.8 */. То есть, похожие части форума сгруппированы так, чтоб нам проще было их найти и отредактировать (поменять).
Давайте посмотрим, что к чему:

/* CS1.1 */

.punbb .section .container включает в себя: блок "Новые сообщения, Активные темы и т.д.", объявление, блок "Привет, .... Ваш последний визит:...", блок с названием форума, блок статистики форума, блок с нижней рекламой, блок с названием форума (нижний) и блок со ссылками на Ваш сервис.

.punbb .post-body включает в себя "тело сообщения", а именно: блок с информацией об авторе сообщения, блок самого сообщения.

.punbb .post-links включает в себя: блок со ссылками "Удалить, Редактировать, Цитировать", блок со ссылками "Ответить, Удалить" на странице личных сообщений.

.punbb td.tc2 включает в себя: колонка "Тем" на главной странице, колонка "Ответов" на странице конкретного форума, колонка "Статус" на странице списка участников, колонки № 2, 3, 4 на странице статистики форума, колонка "Форум" на страницах "Новые сообщения", "Активные темы" "Сообщения без ответов", "Подписка", колонка "Заголовок" на странице создания персональных страниц, колонка "Имя" на странице логов форума

.punbb td.tc3 включает в себя: колонка "Сообщений" на главной странице, колонка "Просмотров" на странице конкретного форума, колонки "Уважение, Сообщений, Зарегистрирован, Был" на странице списка участников, колонка "Дата" на странице личных сообщений, колонка"Время" на странице активных пользователей", колонка "IP" на странице логов форума.

.punbb .formal fieldset .post-box включает в себя: блок сообщения при его предпросмотре перед отправкой.

#viewprofile li strong включает в себя: информацию о пользователе в его профиле при просмотре форума гостем.

#viewprofile li div включает в себя: блок с аватаркой пользователя при просмотре профилья пользователя, как гость.

#setmods dd включает в себя: блок наименования форумов при установке прав модерирования в профиле пользователя.

.punbb .info-box включает в себя: блок "Важная информация" находящийся на странице регистрации при вводе регистрационных данных и текст ниже, блоки "Отображение текста", "Ссылки", "Изображения", "Цитаты", "Код", "Вложенные теги", "Доступные смайлики" и текст ниже на странице помощи по ББ-кодам.

.punbb #pun-main .info-box .legend включает в себя: блок со словами "Важная информация" на странице регистрации при вводе регистрационных данных, блоки "Отображение текста", "Ссылки", "Изображения", "Цитаты", "Код", "Вложенные теги", "Доступные смайлики" на странице помощи по ББ-кодам..

/* CS1.2 */

.punbb .main .container включает в себя: колонки "Форум" и "Последнее сообщение" на главной странице, блок "Участники" а так же колонку "Имя" на странице списка пользователей, блок "Правила" на странице правил, а так же на странице регистрации при соглашении с правилами форума, блок "Поиск" на странице поиска, блок "Регистрация" на странице регистрации при вводе данных, блок "Профиль: ..." на странице чужого профиля а также при просмотра профиля гостем, блок "Профиль: ..." на всех вкладках в профиле при просмотре своего профиля, а также при просмотре профилей модераторами и администраторами, блок личных сообщений а также колонка "Тема" на странице личных сообщений, блок "Войти" на странице входа на форум под своим ником, колонки "Тема" и "Последнее сообщение" а также блок "Удалить, Перенести, Открыть или Закрыть темы  RSS - Atom" на странице конкретного форума, колонки "Тема", "Последнее сообщение" и "Выбрать" а также блок "Модерирование форума" на странице модерирования конкретного форума, блок "Переместить тему" на странице перемещения тем, блок "переадресация" на странице переадресации, блоки "Профиль ЛС  E-mail", "Рейтинг сообщения", "Модерирование темы", "Тему просматривают" "Быстрый ответ" на странице конкретной темы, блок "Тема-ответить" а также блок с информацией об авторах предшествующих сообщений на странице предпросмотра сообщения перед отправкой, блок информации об авторе сообщения на страницах перемещения, удаления и объединения сообщений а также на странице результатов поиска при выводе результатов сообщениями, блоки "Подтвердить удаление", "Подтвердить объединение" и "Переместить в тему" на страницах удаления, объединения и перемещения сообщений, колонки "Имя" и "Последнее действие" на странице списка активных пользователей, первая колонка на странице статистики форума, Колонки "Тема" и "Последнее сообщение" а так же блок "RSS - Atom" на страницах пользовательских ссылок "Новые сообщения Активные темы Сообщения без ответов Подписка" а также на странице вывода результатов поиска при отображении по темам, блок "Информация" на странице с информацией, блоки "Начать новую тему" и "Начать новый опрос", блоки "BBCode" и "Смайлики" на странице справки по ББ-кодам, блок "Редактировать" на странице редактирования сообщения.
Замечание: Вы должно быть заметили, что этот селектор отвечает сразу практически за весь форум (с английского main .container - главный контейнер). Это надо учитывать при написании стиля:
а). Указанный за этим селектором цвет будет являться основным на форуме.
б). Если фоном является изображение, оно не должно долго загружаться, иначе сам дизайн будет грузиться столько же.

.punbb .post .container включает в себя: блок об авторе сообщения на всех страницах, где есть сообщения, блок "рейтинг поста" и блок "Профиль ЛС E-mail" на странице конкретной темы.

.punbb .post h3 включает в себя блок с ником автора сообщения на всех страницах, где есть сообщения.

.punbb-admin #pun-admain .adcontainer включает в себя: все блоки в администрировании форума, в том числе и блок "Админ-меню" и блок "Мод-меню".
Замечание: данный селектор способен работать только в своём стиле. Не пытайтесь опробовать его через HTML-верх.

/* CS1.3 */

#pun-stats h2 включает в себя: заголовок блока "Статистика форума".

.punbb .main h1 включает в себя: заголовки всех блоков, кроме заголовков категорий на главной странице, заголовка для блока "Быстрый ответ" на странице конкретной темы и заголовков блоков в администрировании.

.punbb .main h2 вкючает в себя: заголовки категорий на главной странице форума, заголовок для блока "Быстрый ответ" на странице конкретной темы.

#pun-debug h2 включает в себя:

.punbb-admin #pun-admain h2 включает в себя: заголовки всех блоков в администрировании форума.

/* CS1.4 */

#pun-title включает в себя: контейнер логотипа форума.

#pun-title .container включает в себя:

.punbb .modmenu .container включает в себя: блок модераторского меню на странице конкретного форума и конкретной темы.

/* CS1.5 */

.punbb legend span включает всебя все легенды, имеющиеся на форуме.
Замечание: у многих сейчас наверняка возник вопрос: а что такое эта "легенда"? Это небольшая область, где находится текст, обычно поясняющий принцип работы элемента или его название. Например, зайдём в любую тему и опустимся в самый низ, к форме быстрого ответа. Посмотрите на неё внимательно (на форму ответа), и заметите такую надпись: "Напишите ваше сообщение и нажмите отправить". Это и есть легенда. Кроме формы быстрого ответа, легенды встречаются ещё во многих частях форума.

#viewprofile h2 span включает в себя:

#profilenav h2 span включает в себя: заголовок в меню навигации (Основной, Персональный и так далее) при просмотре своего профиля а также чужого профиля как модератор или администратор.

.punbb-admin #pun-admain legend span включает в себя: легенды форума в администрировании форума.

/* CS1.6 */

.punbb .post h3 span включает в себя: блок со временем и порядковым номером поста в конкретной теме а также везде, где есть посты.

.punbb th включает в себя: заголовки всех столбцов во всех таблицах форума.

#viewprofile li включает в себя: блоки "Зарегистрирован", "Провел на форуме", "Уважение", "Позитив", "Сообщений", "Последнее сообщение", "Последний визит" при просмотре чужого профиля, а также при просмотре профиля гостем.

#setmods dl включает в себя названия категорий, к которых расположены форумы, на которые пользователя возможно назначить модератором в профиле пользователя (вкладка: Управление).

/* CS1.7 */

.punbb .quote-box включает в себя: блоки цитат в сообщениях на всём форуме.

.punbb .code-box включает в себя: блоки кода в сообщениях на всём форуме.

/* CS1.8 */

#pun-navlinks .container включает в себя: блок главного меню форума ("Форум Участники Правила Поиск Профиль Сообщения Администрирование Выход ")

.offline li.pa-online strong включает в себя:

0

3

  • Автор: rps
  • Мой личный статус
  • Зарегистрирован: 2009-06-20
  • Приглашений: 0
  • Сообщений: 84
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    3 дня 5 часов
  • Последний визит:
    2012-08-18 23:20:44
Код:
<script type="text/javascript">
if (document.URL.indexOf("viewtopic") != -1) {
var ft; var i; var ft_f;
ft = document.getElementById("font-area");

var ft_f = new Array();
ft_f.push('Segoe print');
ft_f.push('Mistral');

for (i in ft_f) {
ft.innerHTML += "<div><span style='font-family:" + ft_f[i] + ";'>" + ft_f[i] +  "</span><img src='/i/blank.gif' onclick=\"bbcode('[font= + 
+ ft_f[i] + 
+]','[/font]')\" /></div>";
}}
</script>

0

4

  • Автор: люблю
  • Новичок
  • Зарегистрирован: 2011-06-07
  • Приглашений: 0
  • Сообщений: 1
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    1 минуту
  • Последний визит:
    2011-06-07 22:35:55

привет всем! со мной произошла история, которая закончилась чудесным образом. Парень, который испытывал ко мне только симпатию..полюбил меня и стал моим мужем...Магия творит чудеса...когда я была ему только симпатична, он с лёгкостью при мне смотрел на других девушек. Но когда полюбил....речь сразу зашла о браке...ПОмогла настроить его мысли в нужную волну и обрести более серьёзное чувство по отношению ко мне- Фатима. Найти её можно здесь....http://fatimagiya.ru/ любви вам!Сейчас мы счастливы и уже планируем ребёночка!

0

Страница: 1

Вы здесь » Не про что » Дизайнерам » FAQ: Свой стиль