*(Юный дизайнер)*

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

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


Вы здесь » *(Юный дизайнер)* » Учимся дизайну СSS » Меняем элементы дизайна


Меняем элементы дизайна

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

1

Урок первый.
Как встроить фоновое изображение в стиль?

Нам нужно второе окошко в панельке Администрирование > Стиль.
Там в самом верху находим тег "body"

Вот он:
http://s59.radikal.ru/i166/0903/d1/8103c793303d.gif

"background-color = " - означает, что у нас стоит в коде выбор фонового цвета.
"#FFFFFF" - это сам цвет. в данном случае - белый.

Не нашли этого тега сами? - смело его ручками рисуйте.

Далее у нас несколько вариантов пути:
если хотите одноцветное фоновое изображение, просто вставьте туда код цвета, например, заменить FFFFFF на F1F1F1.
если хотите фоновое изображение, т.е. картинку - ставьте вместо всего выделенного следующее:

Код:
body {
background-image: url(АДРЕС_ВАШЕЙ_КАРТИНКИ);
}

получится так для примера:
http://i025.radikal.ru/0903/69/d4335d52a1ca.gif

Источник

+1

2

Урок второй.

Как встроить иконки в стиль?

с style_cs.css ищем в самом низу: "CS4 Post status icons" (см. Скриншот)
http://s47.radikal.ru/i115/0903/c1/278cbe2c958f.gif
все, что написано в этом пункте удаляем вместо этого вписываем код:

Код:
div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ТЕМ БЕЗ НОВЫХ СООБЩЕНИЙ) no-repeat;
}

tr.inew div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ТЕМ С НОВЫМИ СООБЩЕНИЯМИ) no-repeat;
}

tr.iclosed div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ЗАКРЫТЫХ ТЕМ) no-repeat;
}

tr.iredirect div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ТЕМ С ПЕРЕАДРЕСАЦИЕЙ) no-repeat;
}

tr.isticky div.icon {
        background: url(ВАША_КАРТИНКА_ДЛЯ ВАЖНЫХ ТЕМ) no-repeat;
}

Там, где написано "ВАША_КАРТИНКА_ДЛЯ" Вставляем ссылки на ваши картинки.

Затем залезаем в style.css и ищем "C2 Table layout" (см. Скриншот) - это управление параметрами форумных таблиц

http://s58.radikal.ru/i161/0903/21/4b08abdaef70.gif
В этом пункте находим: "C2.14" и "C2.15" (см. Скриншот)
http://s40.radikal.ru/i087/0903/3b/974df9bb5620.gif
(Если у вас стоит что-либо после C2.15 - можете удалить, оно скорее всего не нужно. но не спешите это деать, стоит удалять только, если иконки или картинка на статистику не встанут)

Удаляем все что у вас числится в этих пунктах и заменяем на:

Код:
/* C2.14 */
.punbb td div.tclcon {
    margin-left: 31px;
}

/* C2.15 */
.punbb div.icon {
  float: left;
  display: block;
  width: 50px;
  height: 47px;
margin-right: 7px;}

"margin-left" в C2.14 - это "отступ слева": расстояние между границами таблиц форума и иконками, чем больше пикселей выставите, тем больше будет отступ.
"width" и "height" в C2.15 - это ширина и высота ваших иконок соответственно. Оно указывается для всех иконок, поэтому если вы выставляете иконки с различными габаритами, берите максимальную величину.
"margin-right" в C2.15 - это "отступ справа": расстояние между иконкой и названиями тем и форумов.
Редактируйте циферки - и все у вас получится. 
Для наглядности изучайте схемку:

http://i023.radikal.ru/0903/67/82936f2cc08e.gif
источник

+1

3

а как шапки и банеры вставлять?

0

4

через html

0

5

спс) но я уже разобрвлась

0

6

Vanilla_sky написал(а):

через html

Необязательно))

0

7

Nansy а ты разбераешься в этом? :)

0

8

?Angel? написал(а):

а ты разбераешься в этом?

Конечно! Я и дизайн умею делать

0

9

круто) я ща один делаю)

0

10

спасибо!

0

11

здорово!)) минуть пять правда искала это body{ и иже с ним.
а потом не заморачиваясь сама написала... и ничего так ,сработало.))

0

12

норм статья

0

13

токо лень все читать и учить

0

14

форум клас=)Спасибо=)

0

15

а у мя ваще всё чёт за путанно

0

16

Спасибо за помощь...

0

17

а как полный диз сделать?

0

18

подскажите плиззззззззззззззззззззззззззз!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

0

19

ФИг знает написал(а):

а как полный диз сделать?

Смотри здесь: http://colorforum.ru/viewtopic.php?id=505

0

20

спс

0

21

Спасибо )
Все очень понятно написано)

0

22

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

0

23

:angry:

0

24

Всё просто супер у меня пашет

0

25

ппрорлпрпол

0


Вы здесь » *(Юный дизайнер)* » Учимся дизайну СSS » Меняем элементы дизайна