Как сделать категории и их форумы разноцветными

Доброго времени суток!
Есть ли возможность на движке PunBB создать следующее:

1 каждая категория отличается по цвету от другой
2 перед категорией установить свой логотип (шапку)

Похожее увидел ЗДЕСЬ

каждая категория отличается по цвету от другой

Это точно можно.

перед категорией установить свой логотип (шапку)

Проверю - скорее всего, тоже возможно.

Игорь, а ведь она сделает.
Пятой точкой чую))))))))))))))

Dana, вы волшебница!

I вариант



1. В ПА > Оформление > Структура и иерархия указать Отделять категории в оглавлении форума : средний

2. В шаблоне index_box (Главная страница - показ категорий) добавить <div class="contcolor"> перед <div class="main-head">


и еще один </div> перед <!-- END tablefoot -->


После этого - сохранить, опубликовать шаблон.

3. В CSS добавить настройки для первой категории:

Код:

.main .contcolor:nth-child(1) {
background: transparent url('http://i44.servimg.com/u/f44/16/54/26/99/russia10.png') top left repeat-x;
padding-top: 50px;
}
.main .contcolor:nth-child(1) .tcl, .main .contcolor:nth-child(1) .tc2,  .main .contcolor:nth-child(1) .tc3, .main .contcolor:nth-child(1) .tcr {
background-color: #BC8F8F;
border-color: #A27B7B;
}

Пояснения:

.main .contcolor:nth-child(1) - это контейнер 1-ой категории, фон которого будет виден над заголовком
background: transparent url('https://i.servimg.com/u/f44/16/54/26/99/russia10.png') top left repeat-x;	Само изображение. repeat-x - дублирование картинки по горизонтали, если нужно будет недублирущееся изображение - замените repeat-x на no-repeat top left - выравнивание по верхнему левому краю, если нужно по центру - замените на top center
padding-top: 50px	отступ сверху, должен быть равен высоте изображения
.main .contcolor:nth-child(1) .tcl, .main .contcolor:nth-child(1) .tc2, .main .contcolor:nth-child(1) .tc3, .main .contcolor:nth-child(1) .tcr - это все ячейки первой категории, которые будут перекрашены
background-color: #BC8F8F; border-color: #A27B7B;	фоновый цвет цвет линий

Для второй категории добавьте второй комплект настроек, изменив цвета, изображение над категорией и номер категории

.main .contcolor:nth-child(2) {
background: transparent url('https://i.servimg.com/u/f44/16/54/26/99/united10.png') top left repeat-x;
padding-top: 50px;
}
.main .contcolor:nth-child(2) .tcl, .main .contcolor:nth-child(2) .tc2, .main .contcolor:nth-child(2) .tc3, .main .contcolor:nth-child(2) .tcr {
background-color: #D4FF91;
border-color: #9ACD32;
}

Аналогичным образом добавьте настройки для третьей:

.main .contcolor:nth-child(3) {
background: transparent url('https://i.servimg.com/u/f44/16/54/26/99/nether10.png') top left repeat-x;
padding-top: 50px;
}
.main .contcolor:nth-child(3) .tcl, .main .contcolor:nth-child(3) .tc2, .main .contcolor:nth-child(3) .tc3, .main .contcolor:nth-child(3) .tcr {
background-color: #FFCF78;
border-color: #DAA520;
}

И т.д.

А для phpbb2?

Dreams, как только разберемся с Pun - сделаем и для BB2.

К слову, нашла свой предыдущий ответ на этот же вопрос:
https://help.forum2x2.ru/t14390-topic#122964

dreams пишет:А для phpbb2?

Посмотрите
здесь и здесь

Dana Domirani спасибо, буду сегодня пробовать: рубить и добавлять!

А фон заголовков категорий никак?

Домовой пишет:А фон заголовков категорий никак?

Можно! По тому же принципу - для первой категории:

Код:

.main .contcolor:nth-child(1) .main-head {
background-color: #BC8F8F;
}

Для второй:

Код:

.main .contcolor:nth-child(2) .main-head {
background-color: #32cd32;
}

и т. д.

Спасибо

Dana, ОГРОМНОЕ СПАСИБО! Усё получилось!

Пожалуйста!

Dana Domirani пишет:
Можно! По тому же принципу - для первой категории:

Код:

.main .contcolor:nth-child(1) .main-head {
background-color: #BC8F8F;
}

Для второй:

Код:

.main .contcolor:nth-child(2) .main-head {
background-color: #32cd32;
}

и т. д.

А вместо цвета, картинку можно?

А для phpBB2?

Gamatos пишет:

А вместо цвета, картинку можно?

Кажется так

Код:

.main .contcolor:nth-child(1) .main-head {
background: url("http:// ссылка на картинку");
}

Бармен пишет:
Кажется так

Код:

.main .contcolor:nth-child(1) .main-head {
background: url("http:// ссылка на картинку");
}

Это точно а то буду искать где ошибка?

Gamatos пишет:

Это точно а то буду искать где ошибка?

ну если фоновая картинка то точно, если просто картинка то надо задать атрибуты расположения и не повторения.
То есть к примеру

Код:

background-position:center top;
background-repeat: no-repeat;

Мне просто картинку.А значит так:

Код:

.main .contcolor:nth-child(1) .main-head {
background: url("http:// ссылка на картинку");
background-position:center top;
background-repeat: no-repeat;
}

Лучше вот так

Код:

.main .contcolor:nth-child(1) .main-head {
background: url('http://ссылка') bottom center no-repeat;
height:50px;
}

height:50px; - высота картинке.
Замени на свою

А если вместо фонового цвета установить картинку, то сие по идее должно выглядеть так:

Код:

.main .contcolor:nth-child(1) .tcl, .main .contcolor:nth-child(1) .tc2,  .main .contcolor:nth-child(1) .tc3, .main .contcolor:nth-child(1) .tcr {
background: url(http://ссылка) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
border-color: #A27B7B;
}
.main .contcolor:nth-child(1) .main-head {
background: url(http:// ссылка) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Цвета рамок и ссылки установите свои.


А сисьняюсь спросить, внутри "раскрашенных" категорий форумы и сообщения тоже можно совместить по цвету с категорией?

Форумы - можно (по этому принципу), сообщения - наверное, тоже. Попробую сделать.

Дана, спасибо, буду ждать!
С форумами что-то не работает, отосплюсь - попытаюсь еще разок.

Бармен, просто названия форумов пропиши так:

Код:

<span style="color:#FF00C4;">Название раздела</span>