ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

ДОРАБОТАЕМ ВМЕСТЕ СКРИПТ ПЕРВОАПРЕЛЬСКИХ РОЗЫГРЫШЕЙ

Акция продлится до 1 апреля;
Поддержите нашего разработчика в улучшении его скрипта первоапрельских розыгрышей.
Мы отблагодарим баллами, как за предоставление идей новых шуток, так и за помощь в их реализации.

Принять участие

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже два года.

Посетить

TVD: FACELESS

В каждой истории есть две стороны.
Я и герой, и злодей.

Посетить

ЭНТЕРОС

Магия и технологии, эпизоды, 18+
ПутеводительХотим видетьРасы

Посетить

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

💰 Продаётся: функционал, упрощающий жизнь админу форума

Ивент-календарь, вкладки и слайдеры в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.
Ультимативный список тем - картинки, описания и иконки для топиков.

Как купить

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
🎨 Голосуйте за лучшие парные аватарки до 29.02! Отдать голос.
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



Расшифровка кода стиля.

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

1

Берете у нас информацию? ПОЖАЛУЙСТА!!! СТАВЬТЕ ССЫЛКУ НА ЭТУ СТАНИЦУ!

на все вопросы ответят технические специалисты форума в теме: http://forumdes.mybb.ru/viewtopic.php?id=388

I style_cs.css
управляет цветовыми сочетаниями и стилями шрифтов

1. CS1 Background and text colours
управляет цветовыми сочитаниями таблиц форума и текстов

а) Первое, что мы видим там, это код:

body {
background-color: #Цвет;
}

Мы можем вставить свой цвет, но можем вставить какую-либо картинку:

body {
background-image: url(http://Адрес картинки);
}

б) Потому уже идут блоки:

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #цвет;
  color: #цвет;
  }

это первый блок.
Он управляет основны цветом форума: фоновый цвет ячеек таблиц форума с количеством сообщений и тем, приветствие, низ форума, статистика форума, меня форума (где "профиль", "поиск" и т.д.)

background-color: #

этот тег устанавливает цвет фона этих элементов форума. но туда можно вставить фоовое изображение, а не цвет:

background-image: url(http://Адрес картинки);

Вот такой тег устанавливает цвет текста:

color: #

ВАЖНО! Цветом, который вы пропишите в этом теге, будет обладать только тест, находящийся в этих блоках.

ТЕКСТ можно менять по стилистике!
Дописываем:
color: #цвет; - задаете цвет текста
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.

Я сделала цвет фона Белым, а текст Желтым именно в этом блоке, так что, глядите скриншоты:

http://s54.radikal.ru/i144/0903/b4/bc43da533171.gif

Водим после изменений этого блока:
1 - меня форума отобразилось белым
2 - приветствие у нас тоже белое
3 - тест приветствия - желтый.

http://s57.radikal.ru/i157/0903/fc/5b18e6fa3245.gif

1 - текст, которым писано колычиство сообщений, желтый
2 - часть таблицы белая

(не обращайте внимание на высоту ячеек форумных таблиц, это с этим блоком не связано, потом расскажу, как это изменить)

http://s44.radikal.ru/i104/0903/2d/05aff294261a.gif

1 - везде внизу форума текст тоже стал желтый
2- везде внизу форума основной цвет - белый

в) Следующий блок:

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #цвет;
  color: #цвет;
  }

меняет цвета таблиц форума и текста форума.

цвет как и всегда можно заменить на картинку:

background-image: url(http://Адрес картинки);

ТЕКСТ можно менять по стилистике!
Дописываем:
color: #цвет; - задаете цвет текста
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.

вот так получилось у меня:

http://s51.radikal.ru/i131/0903/0e/c78d0909eca8.gif

1 - новый  (желтый цвет)
2 - фоновый цвет (белый)

г) Следующий блок:

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #цвет;
  color: #цвет;
  font-weight: normal;
font-style: normal;

  }

этот блог управляет категориями форума:

http://s59.radikal.ru/i166/0903/ab/c81f058e33cf.gif

1 - ТЕКСТ.
color: #цвет; - задаете цвет текста
font-weight: normal; - меняете "normal" на "bold" - текст станет жирным.
font-style: normal; - меняете "normal" на "italic" - текст будет курсивом.

2 - ФОН.
color: #цвет; - можете задать цвет фона.
background-image: url(http://Адрес картинки); - ставит в качестве фона картинку.

д) Следующий блок:

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #цвет;
  color: #цвет;
  }

Корректирует шапку

http://i063.radikal.ru/0903/88/a2883ec73792.gif

1 - Текст

color: #цвет; - устанавливаете цвет шрифта.
дописываем по необходимости, если надо:
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.

2 - ФОН

background-color: #цвет; - устанавливаем цвет фона.
background-image: url(http://Адрес картинки); - - устанавливает фоновое изображение (например, шапку форума.)

е) далее следует такой блок:

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #FFFFFF;
  color: #000000
  }

Он управляет всяческими замечаниями и приписками форума, которые есть на движке mybb по умолчанию.
Вот пара примеров (я сделала цвет фона черным, а цвет теста белым):

http://s57.radikal.ru/i155/0903/d3/e907921f9643.gif http://i064.radikal.ru/0903/46/7851c72afb8e.gif

1 - цвет текста: белый
2 - цвет фона: черный

опять же, возможно редактирование текста:

дописываем по необходимости, если надо.
font-weight: bold; - текст станет жирным.
font-style: italic; - текст будет курсивом.

Теги: Дизайн поддержка, статья, стиль, css

Отредактировано Герда (30.10.12 19:54)

+7

2

ж) далее блок:

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #FFFFFF;
  color: #000000
  }

Он упраыляет шапкой форумных таблиц и теством в этой шапкой.

Я зделала фон белым (2), а текст черным (1):

http://s53.radikal.ru/i139/0903/b5/e7ad91c8d94c.gif

редактировать можно таким образом:

1 - Текст

color: #цвет; - устанавливаете цвет шрифта.

2 - ФОН

background-color: #цвет; - устанавливаем цвет фона.
background-image: url(http://Адрес картинки); - - устанавливает фоновое изображение

з) Блок:

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #FFFFFF;
  color: #000000
  }

Управляет "задником" (цвет фона цитаты, кода...) и параметрами его текста:

http://s51.radikal.ru/i132/0903/be/b662de0b9bd5.gif

1 - Текст

color: #цвет; - устанавливаете цвет шрифта.
так же как и в предыдущих блоках можно сделать текст жирным или курсивом.

2 - ФОН

background-color: #цвет; - устанавливаем цвет фона.
background-image: url(http://Адрес картинки); - - устанавливает фоновое изображение

и) Следующий Блок:

/* CS1.8 */
#pun-navlinks .container {
  background-color: #цвет;
  color: #цвет;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

.punbb textarea, .punbb select, .punbb input {
  background-color: #цвет;
  color: #цвет
}

для удобства я разобью его на 3 части:

и-1)

/* CS1.8 */
#pun-navlinks .container {
  background-color: #цвет;
  color: #цвет;
  }

Управляет меню навигации

Цвет фона можно установить за счет модерирования вот этой части:

background-color: #цвет;

или можно поставить картинку:

background-image: url(http://Адрес картинки);

Почему-то от регулирования параметра "color: #цвет;" у меня ничего не поменялось, поэтому на данный момент, не могу сказать, что это.

Для изменения стиля надписей, можно дописать:

font-weight: bold;  -  жирный
font-style: normal;  -  курсивом

Например, я сделала фон черным:
http://s60.radikal.ru/i170/0904/40/2ccb1587817e.jpg

и-2)

.offline li.pa-online strong {
  font-weight: normal
  }

что регулирует - непонятно на данный момент.

и-3)

.punbb textarea, .punbb select, .punbb input {
  background-color: #цвет;
  color: #цвет

регулирует цвет фона и шрифта в форме ответа (вместе с кнопками "отправить" и "пред. просмотр") и других формах для заполнения.

для редактирования:

1 - Текст

color: #цвет; - устанавливаете цвет шрифта.
font-weight: bold;  -  жирный
font-style: normal;  -  курсивом

2 - ФОН

background-color: #цвет; - устанавливаем цвет фона.
background-image: url(http://Адрес картинки); - - устанавливает фоновое изображение

На примере:

http://s53.radikal.ru/i139/0904/c7/8c4c507525d9.jpg

1 - проставили белый тест
2 - проставили черный фон

+1

3

2. CS2 Border colours
управляет цветовыми сочетаниями границ форума.

а) Первый блок раздела:

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #цвет #цвет #цвет #цвет
  }

Управляет внешними границами форума.

1 - цвет верхних границ
2 - цвет правых боковых границ
3 - цвет нижних границ
4 - цвет левых боковых границ

См рисунок:

http://s43.radikal.ru/i099/0904/81/0bff538f165at.jpg

б)  Следующий блок:

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #цвет
  }

Управляет цветом черты под нижней границей форума:

http://s52.radikal.ru/i138/0904/1f/97d2be74def4.jpg

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

в) Следующий блок:

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #цвет;
  }

Он управляет рамкой внизу и справа от полоски с названиями категорий (см. скриншот)

http://s42.radikal.ru/i095/0904/1c/c35529de7627t.jpg

1 - я задала им черный цвет (для наглядности остальные границы белого цвета)

выбираете цвет или ставите картинку - все по аналогии с предыдущими блоками.

г) Далее идет блок

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #цвет;
  }

управляет внутренними рамками форумных таблиц:

http://s61.radikal.ru/i174/0904/e6/4e633aa796fc.jpg

точно так же как и всегда можно задать цвет, а можно вставить картинку.

д) следующий блок

/* CS2.5 */
.punbb th {
  border-color: #цвет
  }

Это полоски разделяющие : названия секций!

https://forumupload.ru/uploads/0007/e3/f7/4458-1-f.png

+1

4

и действительно решила почистить темку от флуда.
Ведь статья еще продолжаться будет, а в наших обсуждения запутаться можно.
теперь все вопросы пишем сюда: Css-код стиля. Разбираем на пазл и изучаем. - ОБСУЖДЕНИЕ И ВОПРОСЫ

0