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

Поделиться12010-04-22 08:33:22

Автор: ღAngelღ
Зарегистрирован: 2010-04-01
Приглашений: 0
Сообщений: 312
Уважение: [+5/-0]
Позитив: [+3/-0]
Провел на форуме:
1 день 15 часов
Последний визит:
2010-10-10 20:43:53

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

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

Вот он:

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

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

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

Код:

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

получится так для примера:

Источник

+1

Поделиться22010-04-22 08:36:23

Автор: ღAngelღ
Зарегистрирован: 2010-04-01
Приглашений: 0
Сообщений: 312
Уважение: [+5/-0]
Позитив: [+3/-0]
Провел на форуме:
1 день 15 часов
Последний визит:
2010-10-10 20:43:53

Урок второй.

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

с style_cs.css ищем в самом низу: "CS4 Post status icons" (см. Скриншот)

все, что написано в этом пункте удаляем вместо этого вписываем код:

Код:

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" (см. Скриншот) - это управление параметрами форумных таблиц

В этом пункте находим: "C2.14" и "C2.15" (см. Скриншот)

(Если у вас стоит что-либо после 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 - это "отступ справа": расстояние между иконкой и названиями тем и форумов.
Редактируйте циферки - и все у вас получится.
Для наглядности изучайте схемку:

источник