`tsunami | Louisa

Поделиться212013-03-12 16:18:49

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Louisa
Молодец)

Ладно, вот новый урок. Вернее, его первая часть, чтобы не откладывать. Потом вторую пришлю, и у тебя будут две оценки.

Добавим чего-то нового
Часть 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

Поделиться222013-03-14 11:43:59

Автор: Louisa
Участник
Зарегистрирован: 2013-02-26
Приглашений: 0
Сообщений: 36
Уважение: +1
Позитив: +0
Провел на форуме:
1 день 1 час
Последний визит:
2013-05-24 09:14:38

Ширину и высоту по 100 выставила, иконки сделала 90 на 90. Всё равно не помещаются o.O
Ссылка

И ещё. У меня одной этот глюк в виде части от шапочной картинки? Там, где модерирование темы и чуть ниже.

О.о

Отредактировано Louisa (2013-03-14 11:45:03)

0

Поделиться232013-03-15 08:34:21

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Louisa
Иконки пока оставь так, мы когда будем первое окно стиля разбирать - там будет это.
А чтобы глюк убрать, кинь мне свой код из CS1.4.

0

Поделиться242013-03-15 10:39:46

Автор: Louisa
Участник
Зарегистрирован: 2013-02-26
Приглашений: 0
Сообщений: 36
Уважение: +1
Позитив: +0
Провел на форуме:
1 день 1 час
Последний визит:
2013-05-24 09:14:38

Код:

/* шапка форума CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-image : url("http://fotohosting.info/images/2013/03/12/ukWKJ.png");
  background-color: #ebaca9;
  }

0

Поделиться252013-03-17 09:48:01

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Louisa
То, что я красным выделила - убираешь и не будет ничего)

/* шапка форума CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
background-image : url("http://fotohosting.info/images/2013/03/12/ukWKJ.png");
background-color: #ebaca9;
}

0

Поделиться262013-03-17 16:25:48

Автор: Louisa
Участник
Зарегистрирован: 2013-02-26
Приглашений: 0
Сообщений: 36
Уважение: +1
Позитив: +0
Провел на форуме:
1 день 1 час
Последний визит:
2013-05-24 09:14:38

И ведь получилось. Оо ~~магия, ага~~

0

Поделиться272013-03-21 11:15:07

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Louisa
Ахах)) ну да, типо того.

Добавим чего-то нового
Часть 2. А на сей раз мы будем добавлять картинку в самый низ. Помнишь, мы даже вставляли специально для этого еще один пункт во второе окно стиля? Я очень много где использую такую картинку:

http://s3.uploads.ru/FgQU4.png
Ее взяла из классного урока на этом же сайте "Делаем дизайн [супернатурал]". Раньше делала каждый раз что-то разное, а теперь просто перекрашиваю такую и ставлю на ней свой копирайт. Копирайт можешь себе придумать и поставить, можешь не придумывать. Только ставь не очень высоко, в самом-самом низу, так как картинка по своему формату не соответствует нашему коду.
Загружаешь картинку через сервер, ссылку в этот код, если не помнишь:

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

Но перед этим в фотошопе ты должна перекрасить картинку, чтобы она соответствовала телу форума. Заливаешь и рамочку (темно-коричневая), и саму картинку (бежевую часть) тем цветом (точно таким же!) каким у тебя залито тело форума. А те уголки светло-серые, которые по бокам, заливаешь цветом своего фона. Запутаться, вроде, не должна. Здесь все предельно просто.