Кот

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

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


Вы здесь » Кот » Архивы » `tsunami | Fox


`tsunami | Fox

Сообщений 11 страница 19 из 19

11

Разберем поверхностно второе окно
1. За что отвечают блоки
Блок CS1 Background and text colours отвечает за все фоны форума.
Блок CS2 Border colours отвечает за границы на форуме.
Блок CS3 Links  отвечает за ссылки на форуме.
Блок CS4 Post status icons отвечает за иконки сообщений и тем.
Последний блок я люблю выносить в HTML-верх отдельно, так как лично мне прямо в стиле работать с этим неудобно. Но это потом, пока мы трогать этот раздел не будем.
2. CS1 Backround and text colours
Пункты /* CS1.1 */ и /* CS1.2 */ отвечают за "тело форума", но я предпочитаю их тоже заменять, чтобы не заморачиваться особо. Менять стандартный код под себя мы будем в следующем уроке.
Пункт /* CS1.3 */ отвечает за категории форума.
Пункт /* CS1.4 */ отвечает за шапку форума.
Пункт /* CS1.5 */ отвечает за полосы легенд.
Пункт /* CS1.6 */ отвечает за строки форум|тем|сообщений.
Пункт /* CS1.7 */ отвечает за коды и цитаты.
Пункт /* CS1.8 */ отвечает за главное меню, т.е форум/участники и т.д.
3. CS2 Border colours
Я предпочитаю везде проставлять вместо цветов ко всем свойствам border-color: подставлять transparent;, так как границы сейчас особо не нужны. Ты можешь сделать то же самое.
Пункт /* CS2.6 */ отвечает за границы кода и цитаты.
Пункт li.pa-online отвечает за границу у надписи онлайн, но я сама здесь никогда ничего не меняю.
4. CS3 Links
Пункт /* CS3.1 */ отвечает за все неактивные ссылки на форуме (без наведения).
Пункт /* CS3.2 */ отвечает за все активные ссылки на форуме (при наведении).
Пункт /* CS3.3 */ отвечает за главное меню без наведения.
Пункт /* CS3.4 */ отвечает за главное меню при наведении.

Задание
1. Создаешь свой тестовик на mybb.
2. Копируешь туда исходные коды.
3. Все комментарии исправляешь на русские и понятные, чтобы тебе было удобнее. И чтобы не спрашивать потом, где это менять. Когда сделаешь, кинь ссылку на тестовик сюда.

0

12

Можно, наверно, глупый вопрос?

`tsunami написал(а):

отвечает за полосы легенд

Что это такое?

Пробник - http://foxprobnik.mybb.ru/

Комментарии исправлены.

0

13

Fox
Да, конечно)) то, что выделено красным - это и есть полосы легенд, на скрин кликни, там лучше качество будет:
http://s3.uploads.ru/t/ey92D.jpg
Следующее задание?

0

14

`tsunami
Теперь понял, спасибо)

`tsunami написал(а):

Следующее задание?

Да-да, конечно.

0

15

Изменяем код под себя
Дальше там все будет радикально, не пугайся. Просто я хочу, чтобы ты не боялся менять коды под себя, чтобы тебе было легче и удобнее.
1. Блок CS1.
1. Пункт /* CS1.1 */
Я не очень люблю, когда за тело форума отвечают два пункта, а цвет фона прописывается сверху. Так как (я это уже говорила) все пояснения форумом игнорируются. Поэтому весь пункт /* CS1.1 */ мы заменяем на такой код:

#pun { background-color: #шестизнак;
background-repeat: repeat;
background-position : center;}

Слово "шестизнак" ты, естественно, заменяешь на свой цвет. Пока любой.
Этот пункт у нас по-прежнему отвечает за тело форума.

2. Пункт /* CS1.2 */
Теперь этот пункт будет отвечать у нас за сам фон. Свойство со значением (background-color: #E139F1;) можешь смело удалять. Вместо стандартного кода вставляешь в пункт вот этот:

body {background-color: #шестизнак;
background-image : url("...");
background-repeat: no-repeat;
background-position : top center;
overflow-x: hidden;
}

Слово "шестизнак" опять же заменяешь на свое. Свойство фоновой картинки я специально сюда вставила, так как ничем мешать оно не будет, а потом это очень поможет нам в случае в объединенным дизайном. И не забудь поменять комментарий к этому пункту!
3. Пункт /* CS1.9 */
Да-да, не удивляйся, во все коды я добавляю еще один новый пункт. Это будет нижнее завершение нашего дизайна, картинка в самый низ, проще говоря. На таких обычно авторы копирайты штампуют:3 вот какой код мы в этом пункте вставляем:

#pun-about p.container {
background: transparent url("...")
bottom center no-repeat;
  }

Вместо ... вставляешь свою картинку, но пока ничего не вставляй, это потом.
4. Пункт /* CS1.10 */
Да, еще один. Этот пункт будет отвечать за стиль поля ввода (формы ответа). Обычно, я эту штуку не трогаю, но потом мы будем работать и с ней. В любом случае лучше, чтобы она у тебя была. Код такой:

.punbb textarea, .punbb select, .punbb input {
  background-color: #шестизнак;
  color: #шестизнак;
}

Слово "шестизнак" меняешь на свое. Color - цвет текста в поле ввода.
2. Блок CS4.
А вот отсюда я предпчоитаю все убирать и перемещать в HTML-верх. Ты пока просто убираешь этот блок, с иконками мы поработаем немного позже.

Задание
1. Переделать код на своем тестовике как я написала.
2. Изменить все пояснения.
3. Выбрать тему для нашего дизайна и цветовую гамму.
4. Подобрать соответствующие исходники.
Все это - сюда.

0

16

Переделано - http://foxprobnik.mybb.ru/
Комментарии изменил.
Тема - фентези
Гамма - что-то кремового цвета, пожалуй

Исходники

http://s2.uploads.ru/jwG0Z.jpg
http://s2.uploads.ru/thcNb.jpg
http://s3.uploads.ru/SCWvd.jpg
http://s3.uploads.ru/vQlNI.jpg
http://s3.uploads.ru/KDIU6.jpg

0

17

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

1. Тело форума
Изменяешь на свой цвет. Можешь поставить картинку, но пока лучше цвет.

/* CS1.1 */
#pun { background-color: #шестизнак;
background-repeat: repeat;
background-position : center;}

Слово "шестизнак" меняешь на свой цвет.
2. Фон форума
Тоже меняшь на свой цвет. Картинку лучше пока не ставь, этим мы займемся позже.

/* CS1.2 */
body {background-color: #шестизнак;
background-repeat: no-repeat;
background-position : top center;
overflow-x: hidden;
}

Слово "шестизнак" меняешь на название своего цвета.
3. Категории форума
Я думаю, нам стоит сделать дизайн не аляповатым и ярким, а красивым и спокойным, поэтому цвет категорий ты меняешь на тот же, каким заливал тело форума.

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Цвет после свойства background-color означает цвет фона. Это ты знаешь (первое слово "шестизнак" меняешь как я написала раньше).
Цвет после свойства color означает цвет текста именно этой области (в данном случае - цвет текста, которым будет написано название категорий). Здесь тоже выбираешь свой, но обязательно такой, чтобы сочетался с фоном форума и не очень резал глаза. То есть не надо делать красное на синем или малиновое на зеленом, ладно?)

4. Шапка форума
А здесь мы напрямую сталкиваемся с графикой. Пока (для начала) ты можешь просто загрузить через какой-нибудь сервер и вставить в шапку пустую картинку, подогнав в фотошопе или любом другом графическом редакторе ее под размеры 850 х 500. Ты можешь сделать коллаж (если умеешь) опять же в любом графическом редакторе, но я этого не требую прямо в этом уроке. Если хочешь, этому мы научимся потом. Вот каким должен быть окончательный код для шапки:

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-image : url("...");
  }

Замени тот код, который у тебя стоит, на такой. Там мы просто изменяем свойство backround-color на свойство backround-image и убираем свойство color за ненадобностью. Можешь оставить последнее, конечно, это свойство не помешает.
5. Полосы легенд
Здесь опять та же штука, что и с категориями. Цвет фона ставим тот же, что и тело форума. Цвет текста выберешь сам, но опять же обязательно, чтобы сочетался с цветом форума. Можешь взять тот же, что и в категориях.

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #шестизнак;
  color: #шестизнак
  }

Первый "шестизнак" заменяешь на цвет фона опять же, второй на цвет текста. Тут все понятно.
6. Строки форум|сообщений|тем
Ту все то же самое - цвет фона тот же, что и тело. Цвет текста выбираешь сам.

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Первый "шестизнак" - цвет фона, второй - цвет текста.
7. Коды и цитаты
Здесь немного по-другому. Вместо цвета поля кодов или цитат можно ставить и картинки, но мы пока ограничимся цветом. Цвет ты выбираешь немного отличающийся от цвета тела форума, чтобы было заметно, где у нас цитата или код, а где нет. Но опять же все должно сочетаться.

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Первый "шестизнак" - на тот выбранный тобой цвет, второй - на цвет в поле цитаты или кода, но обязательно следи, чтобы было все видно.
8. Главное меню (форум, участники и т.д.)
Цвет фона выбираешь тот же, каким заливал тело форума. Цвет надписей выбирай сам.

/* CS1.8 */
#pun-navlinks .container {
  background-color: #шестизнак;
  color: #шестизнак;
  }

На месте первого "шестизнака" - цвет фона, на месте второго - цвет текста.
9. Картинка в самый низ
Помнишь, мы добавляли этот пункт? Но сейчас он нам не понадобится, пока мы не будем его трогать, а позже я пришлю тебе стандартную картинку в самый низ, которую использую я, ты сделаешь свой копирайт.
10. Поле ввода
И этот пункт мы тоже добавляли к исходному коду. Цвет фона, думаю, стоит выбрать тот же, что и тело форума.

.punbb textarea, .punbb select, .punbb input {
  background-color: #шестизнак;
  color: #шестизнак;
}

Первый "шестизнак", как обычно, - фон, второй - цвет текста.
11. Границы
Я уже писала в прошлом уроке, что в них нужды нет, поэтому после всех свойств border-color: везде нужно подставлять transparent; во всем блоке. Так и сделай.
12. Все ссылки в неактивном состоянии
Нужно выбрать какой-нибудь цвет, который будет выделяться, но сочитаться с цветом тела форума.

/* 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: #шестизнак
  }

Слово "шестизнак" меняешь на выбранный цвет.
13. Все ссылки в активном состоянии
Выбираешь цвет еще более светлый или просто ярче, чем в прошлом пункте.

.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: #шестизнак;
  }

Слово "шестизнак" меняешь на этот цвет.
14. Главное меню без наведения
Здесь цвет лично я предпочитаю брать тот же, что мы брали для неактивных ссылок, но ты можешь взять какой-то другой на свое усмотрение.

/* CS3.3 */
#pun-navlinks a {
  color: #шестизнак;
  text-decoration: значение;
  }

Вместо слова "шестизнак" - выбранный цвет, вместо слова "значение" выбираешь какое-либо украшение текста (см. первый урок).
15. Главное меню при наведении
Здесь все просто.

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #шестизнак;
  text-decoration: значение;
  }

Вместо слова "шестизнак" - выбранный цвет, вместо слова "значение" - выбранное украшение текста.

Задание
1. Собственно, весь наш этот урок состоял из задания. Как сделаешь, отпишись и скинь мне повторно ссылку на тестовик.

0

18

Готово - http://foxprobnik.mybb.ru/

0

19

Fox
Молодец, отлично.

Ладно, вот новый урок. Вернее, его первая часть, чтобы не откладывать. Потом вторую пришлю, и у тебя будут две оценки.
Добавим чего-то нового
Часть 1. Что именно мы будем добавлять? Иконки. Помнишь, мы убрали последний блок в одном из уроков. Это совсем не случайно, я хочу дать тебе более простой и хороший код, как мне кажется, для этого важного дела. Собственно, вот он. Вставляется в HTML-верх он.

<style>
.punbb table Div.icon {
float: right;
display: block;
width: ширина;
height: высота;
border-style: none;
background-image: url("иконка старых сообщений");
  background-repeat: no-repeat;
position: relative;
}
.punbb table div.inew {background: url("иконка новых сообщений") no-repeat;}
TR.isticky Div.icon {background: url("иконка важных сообщений") no-repeat;}
TR.iclosed Div.icon {background: url("иконка закрытых сообщений") no-repeat;}
</style>

Здесь все, думаю понятно. Ширину и высоту иконок я предпочитаю указывать 100х100. Пикселей, конечно. Если ты будешь делать так же, то тогда на месте моих слов "ширина" и "высота" пишешь 100px и 100px. Ты можешь взять и свои значения, но размер иконок обязательно должен соответствовать размерам, указанным в коде. Иначе ничего не получится.
На месте соответствующих слов ты вставляешь ссылки на соответствующие иконки, которые ты сделал или где-то нашел. Вот и все.

Задание
1. Делаешь или ищешь где-то иконки, подходящие по цвету и стилю к нашему дизайну.
2. Вставляешь в HTML-верх код, данный мной.
3. Делаешь в нем соответствующие исправления, вставляешь иконки.
4. Кидаешь очередной раз ссылку на тестовик мне.

0


Вы здесь » Кот » Архивы » `tsunami | Fox


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC