Волшебный мир...

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

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


Вы здесь » Волшебный мир... » Создание стиля с помощью css » Цвета style_cs.css


Цвета style_cs.css

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

1

Если в окне "Структура" мы разбирали параметры, начертания и расположения, то раздел "Цвета" полностью отвечает за заполнение форума графическим контентом, то есть здесь мы уже сможем вставлять фоны, шапки и далее в том же духе.

1. Начать стоит с фона.

/* CS1 Background and text colours
-------------------------------------------------------------*/

body {
background-color: #e8e9e9;
background-image: url("http://s52.radikal.ru/i136/1010/a7/bbbe49612ca5.jpg");
background-position: bottom center;
background-attachment: fixed;
overflow-x: hidden;
background-float: center
}

Данный код вы можете найти в самом начале окошка, либо вставить самим, если оного ещё не имеется.
background-image: url("http://s52.radikal.ru/i136/1010/a7/bbbe49612ca5.jpg"); - здесь у нас вставляется ссылка на фон. Если вы заполняете фон однотонным цветом, а не фоном, допускается вариант background-color: #цвет;
background-float: center - этот параметр отвечает за расположение фона по центру. Соответственно, расположение можно менять на left, right.

2. Следующий параметр, который мы видим, отвечает за цвет текста на форуме:

/* 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 {
  border-style: none;
  color: #363636;
}

Из кода уже становится ясно, что цвет лучше указывать один.

3. И ещё один параметр, который указывает всё тот же цвет, но уже цвет ссылок:

/* CS1.2 */
#pun-ulinks .container {
   color: #363636;
}

Он меняет цвет ссылок "Новые сообщения", "Активные темы" и т.д. По желанию сюда также можно добавить центрирование текста, размер и т.д.+

4. Следующий код, который мы видим, отвечает за надписи категорий, начертание и цвет текста и далее в том же духе.

Код:
/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-image: url(ФОН); height : 89px;
}

Здесь можно указать всевозможные значения, выбрать шрифт, цвет и далее, а так же вставить фон.

5. Переходим к следующему участку кода:

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  border-style: none;
  color: red;
  }

На первый взгляд весьма трудно определить, к чему именно он относится, тем более, что этот код меняет совсем незначительный элемент: строку просмотра тем. Когда вы заходите в определенную тему, внизу есть надпись "Просматривают такое-то количество гостей". Данный код отвечает за цвет текста этого элемента.

6. Следующий код позволяет вам поменять строку текста над формой быстрого ответа: "Напишите ваше сообщение и нажмите отправить"

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  border-style: none;
  color: red;
  }

7. Для того, чтобы поменять заглавия в "Профиле", "Администрировании" и т.д., используйте этот код:

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
   border-style: none;
   color: #red;
  }

8. А теперь нам предстоит отредактировать весьма важный элемент - блок цитаты и кода:

/* CS1.7 */
    .punbb .quote-box, .punbb .code-box {
      background-color: transparent;
      color: #5a5a5a;
}
.punbb textarea, .punbb select, .punbb input {
  background: url(ссылка на фон) #цвет фоновой заливки;
  color: #000;
  border: 1px solid #цвет границы;
}

В первом коде фон цитаты и кода - прозрачный, но вы можете залить его любым другим цветом или вставить картинку. Следующая строка после фона - цвет текста. Её тоже имеет смысл изменять в зависимости от расцветки вашего форума.
Второй код отвечает за форму быстрого и расширенного ответа, а также за фон маленького сворачивающегося меню в каждой теме "Модерировать тему", "Выделить тему", "Закрыть" и т.д

9. Последний код в данном разделе отвечает за строку пользовательских ссылок, иными словами это "Форум", "Участники", "Поиск" и т.д.

/* CS1.8 */
#pun-navlinks .container {
  background: url(ссылка на фон) repeat;
  color: #000;
}

2

Переходим ко второму разделу, название он носит

* CS2 Border colours
-------------------------------------------------------------*/

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

#pun-title, #pun-navlinks {
        border-color: #цвет границы;
}

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3 {
  border-color: #цвет границы
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #цвет границы;
  }

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

/* 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: #цвет границы;
  }

/* CS2.5 */
.punbb th {
  border-color: #цвет границы;
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #цвет границы;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #цвет границы
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #цвет границы
  }

.punbb .divider {
  border-color: #цвет границы
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #цвет границы;
  }

li.pa-online {
  border-left-color: #цвет прямоугольничка слева от надписи "Активен";
  }

Все эти параметры отвечают за одну-единственную деталь - границу.
border: 1px solid - вот такие строки и определяют саму границу, то есть, если бы вместо 1 там стояло 0, граница бы автоматически пропала.
Вы волны ставить те цвета, которые вы захотите, но если вы решили, что ваш дизайн будет без границ, имеет смысл ставить одинаковый цвет во всех кодах и желательно, чтобы он был таким же цветом, как и ваш фон.

3

Следующий раздел ссылок и их настроек. Название у него такое:

* CS3 Links

-------------------------------------------------------------*/

Без лишних предисловий переходим к настройкам:
I. Первый параметр позволяет нам изменить цвет ссылок пользовательского меню "Новые сообщения", "Активные темы" и т.д., а также некоторые другие ссылки, к примеру, в разделе "Администрирование"

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #404040;
  text-decoration: none;
  }

color: #404040; - цвет ссылок в спокойном состоянии.
text-decoration: none; - декорации. К примеру, можно прописать подчеркивание к вашим ссылкам или выделение
II. Здесь вы сможете выставить параметры для ссылок при наведении. К примеру, у меня стоит выделение ссылок жирным при наведении и подчеркивание.

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: white;
  font-weight: bold;
  border-bottom: 0px none #000;
  text-decoration: underline;
  }

III. Здесь задаем цвет ссылок для пользовательского меню "Участники", "Форум" и т.д.

/* CS3.3 */
#pun-navlinks a {
  color: #404040;
  text-decoration: none;
  }

IV. Этот параметр относится к меню, описанному в прошлом пункте, только здесь мы задаем параметры для ссылок при наведении.

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: black;
  text-decoration: none;
  }

4

И, наконец, последняя часть, на которую нам стоит обратить внимание - изменение иконок.

/* CS4 Post status icons
-------------------------------------------------------------*/

Помните, что для того, чтобы иконки отображались, не урезались и не исчезали, обязательно нужно вначале выставить правильные размеры ваших иконок. Это вы можете сделать в первом окошке.

div.icon {
       background: url("http://xmages.net/storage/10/1/0/0/a/upload/30966a97.png") no-repeat;
}

tr.inew div.icon {
        background: url("http://savepic.ru/2659959.png") no-repeat;
}

tr.iclosed div.icon {
        background: url("http://xmages.net/storage/10/1/0/0/a/upload/d8bae849.png") no-repeat;
}

tr.iredirect div.icon {
        background: url("http://xmages.net/storage/10/1/0/0/a/upload/30966a97.png") no-repeat;
}

tr.isticky div.icon {
        background: url("http://xmages.net/storage/10/1/0/0/a/upload/032d7e6b.png") no-repeat;
}

Установка иконок проходит в такой последовательности:
1 код - нет новых сообщений
2 код - есть новые сообщения
3 код - закрытая тема
4 код - переадресованная тема
5 код - выделенная (важная тема)

5

Дополнительно:

Поскольку я задалась целью максимально подробно рассказать вам о своем стиле, стоит отметить, что есть еще и те коды, которые я отдельно добавляю в каждый стиль. Вот они:

/* Профиль
-------------------------------------------------------------*/
    .punbb .post .container,
    .punbb .post h3 {
      border-style: none;
    color: #5a5a5a;}

    .punbb .post h3 span {
    border-style: none;
     color: #5a5a5a;}

Оба эти кода отвечают за текст профиля а также текст ваших постов. Фактически, если вы задаете центрирование профилю, то автоматически задается центр и текстам ваших профилей. Будьте аккуратны. Чтобы сделать это отдельно, вам понадобятся уже немного иные коды.
Я всегда отдельно задаю цвет текстам категорий и форумов (к примеру, в описании):

#pun-main  h3 {border-style: none;
color: #5a5a5a;}
   #pun-main .topic  .container {border-style: none;
color: #5a5a5a;}
   #pun .tcl {border-style: none;
color: #5a5a5a;}
   #pun .tc2 {border-style: none;
color: #5a5a5a;}
   #pun .tc3 {border-style: none;
color: #5a5a5a;}
   #pun .tcr {border-style: none;
color: #5a5a5a;}

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

.punbb textarea, .punbb select  {
  background-color: #ececec;
  border-color: #dbdbdb;
  color: #5a5a5a;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;}

Три последние строки и отвечают за закругленные края.

А этот код позволит вам закруглить края у кнопок "Отправить" и посмотреть".

.formsubmit .button {
background-color: #цвет фона;
border: 1px dashed #цвет границ
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;}

Краткая статья по использованию собственного стиля закончена, вопросы можете задать в специальных темах. Творите свои стили и наслаждайтесь знаниями!

Взято с сайта http://clubps.artbb.ru

6

Привет, мне вот интересно как ты сделала в окне ответа фоном цветы? У моей подруги форум 0pk. Я там второй админ, так вот я нихера в стиле не понимаю, но всё же как то делаю им стиль. Он меняется на форуме каждые три месяца, мне бы хотелось сделать стиль на долго. Подскажи пожалуйста какой у тебя форум если не 0pk? Я уже с ума схожу.

7

У меня форум mybb . Стиль делала не я :) А дизайнер форума.

8

Ууууу.... жалко.... а можно с дизайнером то посоветоватся?

9

Он в данное время не сидит в интеренете... И не известно когда зайдет еще...

10

Мне вот интересно, что именно нужно заменить, чтобы закруглить углы у формы ответа и кнопок "отправить" и "просмотреть" ??? :huh:  Заранее спасибо за ответ.


Вы здесь » Волшебный мир... » Создание стиля с помощью css » Цвета style_cs.css