Пришёль хд

Отредактировано #D.K; (2010-07-01 17:26:20)

#bc
Аха, ну давай х)
Я - Диана, лучше просто Дина, так привычнее =) Ну про апесинок, свинохомяков и прочие прозвища я промолчу хд
Хорошо =) Так... с чего начнём?

#bc
Взаимно ) Хорошо, тогда начнём с азов. И сразу вопрос: изучать хотим общее HTML и CSS или только коды, относящиеся к mybb?

#bc
Да, именно, но в общих я не сильна, больше mybb. И так... чтобы работать с дизайном, нужно включить стиль. Администрирование = Стиль.

#bc
Хорошо. Давай тогда разбирать всё по порядку.
Начнём со второго окна => Цвета style_cs.css.
1. Блок /* CS1 Background and text colours
-------------------------------------------------------------*/
Первое, что мы видим, так это название элемента, а то, что с фигурных скобках - его свойства.
Допустим возьмём /* 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: #f1f1f1;
  color: #333;
  }
где .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: #f1f1f1;color: #333;} - свойста, т.е. как мы хотим его отредактировать.
В данном элементе даны только два свойства, как background-color - фоновый цвет, а color - цвет (шрифта).
Надеюсь знакома с таким понятием, как номера цветов?
Допусти белый - #ffffff, а чёрный - #000000.
Если да, то тебе такое задание:
Поменяй все фоновые цвета в блоке /* CS1 Background and text colours на #48587f, а цвета (шрифта) на #000000

#bc
Саш, хорошо. Теперь поменяй на те же цвета весь блок /* CS1 Background and text colours, начиная от /* CS1.2 */ и заканчивая /* CS1.8 */

Замечательно.
Следующий блок = /* CS2 Border colours отвечает за границы форума - полоски, которые делят профиль от сообщений в теме и т.д.
Тег  border-color отвечает за цвет этих границ. Обычно все границы убирают, а сделать мы это можем следующим способом: вместо цвета добавить тег transparent
К примеру:

А вот теперь попробуй у всего блока /* CS2 Border colours вместо цвета поставить значение transparent

Следующее по плану - /* CS3 Links
Разберём блок полностью.
/* 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: #005EAB} - отвечает за цвет ссылки в обычном состоянии.

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {color: #333} - отвечает за цвет ссылки в обычном состоянии.

/* 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: #B42000;} - отвечает за цвет ссылки при наведении

/* CS3.3 */
#pun-navlinks a {color: #eee;text-decoration: none} - отвечает за цвет ссылки при наведении

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active  color: #fff;text-decoration: underline} - отвечает за цвет ссылки при наведении

#pun-pagelinks a:active, #pun-pagelinks a:focus {background-color: #9b0e0e;color: #fff;} - отвечает за цвет ссылки в обычном состоянии

Попробуй поменять в блоках, отвечающих за ссылки в обычном состоянии, цвет на #797979
А в блоках, отвечающих за ссылки при наведении, на #ffffff
А так же text-decoration в каждом блоке сделать underline
+
Добавь в блок /* CS3 Links  в самый низ
a:link{color:#353434;text-decoration:none;} - отвечает за ссылки в обычном состоянии
a:visited{color:#353434;text-decoration:none;} - отвечает за ссылки в обычном состоянии
a:hover{color: #ffffff;text-decoration:none;} - отвечает за ссылки при наведении
Только расшифровки убери и измени цвета в этом коде на те, которые я указала выше.