Решил дополнить и обновить уже существующую темку.
Все что тут есть, имеется на форме в разбросанном виде. По надобности, тема будет дополняться новыми кодами.
Тег <style></style> - прописывается всегда в HTML-верх.
PS: большая просьба - в теме за зря не флудить, и не набивать сообщения.
Шапка форума
Вариант №1
<style type="text/css">
#pun-title table{height: высотаpx; width: ширинаpx}
#pun-title .title-logo {display: none;}
#pun-title table {background-image: url(ссылка на картинку);}
</style>
Вариант №2
<img id="Mylogo" src="ссылка на картинку с шапкой" />
<style type="text/css">
#Mylogo {width: 100%; margin: auto;}
</style>
Размер тела форума
<style type="text/css">
#pun {width: 68%; margin: auto; }
</style>
Так же число можно прописать в пикселях т.е. вместо 68% Прописываете 800px (допустим) так будет проще подобрать
ту же таблицу к вашему форуму, в четких пропорциях.
Фон форума
<style type="text/css">
HTML , BODY {
background-image : url(ссылка на фон);}
</style>
Дополнительные эллементы что вы можите указать
background-attachment: fixed; - фоновая картинка не подвижна. Если данный элемент не указан, тогда фоновая картинка будет прокручиваться вместе с форумом
background: #цвет фона - цвет фона форума который не взят в рамки изображения, а так же фон переадресации. (подходит для вариантов форума, где шапка слита с самим фоном, и сам фон не содержит в себе картинку. Что бы не нагружать лишними элементами - проще подобрать цвет)
background-position: left; center; right; top; center; bottom (Лево, центр, право, по верхнему краю, по нижнему) Положение вашего фона, к данному элементу, нужно будет применить дополнительные позиции
background-repeat: no-repeat; repeat; repeat-x; repeat-y - Отвечает за повтор вашего фоного изображения (так же можно указать повторени только по вертикали или горизонтали)
Навигационное/пользовательское меню
1. Расположение
text-align: center;
text-align: left;
text-align: right;
2. Поднять/Опустить
margin-top: числоpx;
Обычно используеться отрицательное число при поднятии, а при опуске - положительное.
3. Изменить размер шрифта
font-size: числоpx;
4. Изменить начетание
font-family: Название шрифта (имя)
Все данные css эллементы добавляются в код
(Для навигационного меню)
<style type="text/css">
#pun-navlinks .container {
text-align: center;
}
</style>
(Для пользовательского меню)
<style type="text/css">
#pun-ulinks .container {
text-align: center;
}
</style>
Вместо или в дополнении к выделенному.
Названия категорий
1. Расположение
text-align: center;
text-align: left;
text-align: right;
2. Отцентрировать название
padding-top: 31px!important;
3. Изменить размер шрифта
font-size: числоpx;
4. Изменить начертание
font-family: Название шрифта (имя)
Все данные css элементы добавляются в код
<style> #pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2
{text-align: center;
}</style>
Вместо или в дополнение к выделенному.
Иконки новых, старых, закрытых и важных тем
<style>
.punbb table Div.icon {float: left; display: block; width: 121px; height: 101px; border-style: none; background-image: url(старые); background-repeat: no-repeat; position: relative; margin-right: 0px;}
TR.inew Div.icon {
background: url(новые) no-repeat;}
TR.isticky Div.icon {
background: url(важные) no-repeat;}
TR.iclosed Div.icon {
background: url(закрытые) no-repeat;}
</style>
Самый универсальный код, в котором можно указать все, что нужно: размер иконок (высоту и ширину) расположение иконок (лево право left, right)
Картинка в статистику
<style>#pun-stats ul.container {
background: transparent url(ссылка на картинку) no-repeat 20px 20px;
padding-left: 200px;
}</style>
Указывается число отступа с одной и другой стороны, а так же величина отступа от самой статистики
Обводка цитаты и кода в посте
<style>
.punbb .post-content .quote-box, .punbb .post-content .code-box {
border-style: solid;
border-width: 1px;
}</style>
border-style: none; hidden; dotted; dashed; solid; double; groove; ridge; inset; outset; - начертание/узор
http://s43.radikal.ru/i100/1110/6f/ba2f8fee8949.jpg
border-width: 1px; - толщина линии
Так же можно сделать рамку с закругленными краями для этого нужно добавить
border: 1px solid #цвет;
border-radius:5px;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
и тень к ней
-webkit-box-shadow:1px 4px 8px #цвет;
-khtml-box-shadow:1px 4px 8px #цвет;
-moz-box-shadow:1px 4px 8px #цвет;
цвет толщина и начертание границ - выбирается вами самостоятельно
Информация под аватаром
text-align: center; left: right- положение информации
Так же можно указать любой другой параметр указанный выше к данному элементу.
Положение слов: Форум, сообщения, темы и т.д.
<style type="text/css"> #pun th {
text-align: center;
}
</style>
Убрать слово объявление
<style>
#pun-announcement h2{
display: none;}</style>
Перемещение рекламного баннера
<style>
#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 670px; top: 0px
}
</style>
left: 670px - перемещение баннера по шапке по горизонтали (до 550 - максимальное значение)
top: 0px - перемещение баннера по шапке вертикально (не заходите слишком низко от меню - это уже считается "запрещенной зоной")
Так же вы можете расположить свой рекламный баннер над шапкой создавая небольшой отступ сверху
<style>
#pun {top: 40px}
#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 670px; top: 0px
}
</style>
40px - отступ сверху форума, для баннера
Замена шрифта на всем форуме
<style>
.punbb {
font-family: Century Gothic;}
</style>
Прозрачность форума
Вариант №1 Только прозрачность
<style type="text/css">
.category .container {background: transparent none !important; }
.punbb td.tcl, .punbb td.tc2, .punbb td.tc3, .punbb td.tcr{
background: transparent none !important;
}
.punbb .section .container,.punbb .post-body,.punbb .post-links,.punbb .formal fieldset .post-box,#viewprofile li strong,#viewprofile li div,#setmods dd,.punbb .info-box,.punbb #pun-main .info-box .legend,.punbb .main .container,.punbb .post .container,.punbb .post h3, #pun-stats h2,.punbb .main h1,.punbb .main h2,#pun-title .container,.punbb .modmenu .container,#pun-navlinks .container,.punbb th,.punbb .post h3 span,#pun-main fieldset legend span,.punbb textarea, .punbb .quote-box, .punbb .code-box, #pun-crumbs2 .container, #pun-about .container, .punbb .section .formal .container, .punbb .altstyle h3, .punbb .altstyle .container, #pun-navlinks .container, #pun-ulinks .container, #profilenav h2 span, .punbb td.tc2, .punbb td.tc3, .punbb td.tcr, #viewprofile li strong, #pun-title h1, #pun-stats div.statscon, #viewprofile li div, #setmods dd,.punbb #pun-main .info-box .legend, .punbb .post-links, .punbb .formal fieldset, .punbb .post-body, .post-box, .punbb .altstyle .post-links, .punbb .altstyle .post-body, .altstyle .post-box, .punbb th, .punbb legend span, .punbb .post h3 span, .punbb .altstyle h3 span, #viewprofile h2 span{
background: transparent none !important;
}
</style>
Вариант №2 Прозрачность и отсутствие линий (полное)
<style type="text/css">
.category .container {background: transparent none !important; }
.punbb td.tcl, .punbb td.tc2, .punbb td.tc3, .punbb td.tcr{
background: transparent none !important;
}
.punbb .section .container,.punbb .post-body,.punbb .post-links,.punbb .formal fieldset .post-box,#viewprofile li strong,#viewprofile li div,#setmods dd,.punbb .info-box,.punbb #pun-main .info-box .legend,.punbb .main .container,.punbb .post .container,.punbb .post h3, #pun-stats h2,.punbb .main h1,.punbb .main h2,#pun-title .container,.punbb .modmenu .container,#pun-navlinks .container,.punbb th,.punbb .post h3 span,#pun-main fieldset legend span,.punbb textarea, .punbb .quote-box, .punbb .code-box, #pun-crumbs2 .container, #pun-about .container, .punbb .section .formal .container, .punbb .altstyle h3, .punbb .altstyle .container, #pun-navlinks .container, #pun-ulinks .container, #profilenav h2 span, .punbb td.tc2, .punbb td.tc3, .punbb td.tcr, #viewprofile li strong, #pun-title h1, #pun-stats div.statscon, #viewprofile li div, #setmods dd,.punbb #pun-main .info-box .legend, .punbb .post-links, .punbb .formal fieldset, .punbb .post-body, .post-box, .punbb .altstyle .post-links, .punbb .altstyle .post-body, .altstyle .post-box, .punbb th, .punbb legend span, .punbb .post h3 span, .punbb .altstyle h3 span, #viewprofile h2 span{
background: transparent none !important;}
*{
border: none !important;
}
</style>
Вариант №2 Полупрозрачность
<style type="text/css">
.category .container {background-color: url(ссылка на картинку) !important; }
.punbb td.tcl, .punbb td.tc2, .punbb td.tc3, .punbb td.tcr{
background-color: url(ссылка на картинку) !important;
}
.punbb .section .container,.punbb .post-body,.punbb .post-links,.punbb .formal fieldset .post-box,#viewprofile li strong,#viewprofile li div,#setmods dd,.punbb .info-box,.punbb #pun-main .info-box .legend,.punbb .main .container,.punbb .post .container,.punbb .post h3, #pun-stats h2,.punbb .main h1,.punbb .main h2,#pun-title .container,.punbb .modmenu .container,#pun-navlinks .container,.punbb th,.punbb .post h3 span,#pun-main fieldset legend span,.punbb textarea, .punbb .quote-box, .punbb .code-box, #pun-crumbs2 .container, #pun-about .container, .punbb .section .formal .container, .punbb .altstyle h3, .punbb .altstyle .container, #pun-navlinks .container, #pun-ulinks .container, #profilenav h2 span, .punbb td.tc2, .punbb td.tc3, .punbb td.tcr, #viewprofile li strong, #pun-title h1, #pun-stats div.statscon, #viewprofile li div, #setmods dd,.punbb #pun-main .info-box .legend, .punbb .post-links, .punbb .formal fieldset, .punbb .post-body, .post-box, .punbb .altstyle .post-links, .punbb .altstyle .post-body, .altstyle .post-box, .punbb th, .punbb legend span, .punbb .post h3 span, .punbb .altstyle h3 span, #viewprofile h2 span{
background-color: url(ссылка на картинку) !important;}
</style>
url(ссылка на картинку) - ставиться картинка любого размера однотонная (единый цвет) с прозрачностью от 5 до 95 % (делается в ФШ)
Разделитель подписи
<style>
.punbb .post-sig dt {
border-top-color: #020000 !important;
}
</style>
020000 - цвет линии из таблицы безопасных цветов
Убрать Название форума
<style type="text/css">
#pun-title h1 span {display: none;}
</style>
Замена названий в категориях на картинки
<style>
#pun-category1 h2 {height: 62px; background-image: url("картинка"); background-repeat: no-repeat; overflow-x: hidden; background-position: top center; color: transparent; display: none;}
</style>
То что выделено меняется при дубляже - сколько категорий - столько раз и копируете меняя номер
Полезные ссылки: