Переделываем дизайн форума>>

Поделиться12010-11-16 14:32:48

Автор: д ж е й н;
Активный участник
Зарегистрирован: 2010-11-16
Приглашений: 0
Сообщений: 54
Уважение: +31
Позитив: +23
Провел на форуме:
5 часов 45 минут
Последний визит:
2010-11-21 12:03:57

Я знаю что многие новички непонимают что и куда вставлять- я обьясню.

чтобы добавть в любое место картинку вставляйте в скрипт такой тег

Код:

background-image : url(ссыль);

Этот код заливает полностью форум определенным цветом

Код:

<style type="text/css">
#pun {background-color:blue;}
</style>

Но если вы хотите залить его не просто цветом а картинкой он будет выглядеть так.

Код:

<style type="text/css">
#pun {background-color:blue;background-image : url(ссыль);}
</style>

border-color: - Это цвет рамок на форуме
color: - цвет текста
pun-navlinks a:link, #pun-navlinks a:visited, #pun-navlinks a:link span, #pun-navlinks a:visited - это цвета ссылок

Начнем с того что сделаем форум прозрачным, для этого входим в администрирование, настройки и вставляем этот код в хтмл верх

Код:

<style type="text/css">
.punbb .main .container,
.punbb td.tc3,
.punbb .section .container,punbb td.tc2,.punbb td.tcr,#pun .tc2   {background-color: transparent; }
</style>

Отлично теперь можно начать делать Шапку

Код:

 <style type="text/css">
#pun-title table {background-image : url(ссылка на шапку);
height : 132px;
}
</style>

Далее приступим к тому что сделаем себе другой задний фон

Код:

<style type="text/css">
HTML, BODY {background-image: url("ссылка")!important; background-repeat: repeat !important;}
</style>

Если вы хотите сделать себе стоячий задний фон то скрипт будет такой

Код:

<style type="text/css">
HTML, BODY {background-image: url("ссыль"); background-attachment: fixed;}
</style>

теперь подгоним форум по своему желанию, тоесть сделаем его меньше либо наоборот шире 83 меняйте на свое.

Код:

<style type="text/css">
#pun {
width : 83%;
}
</style>

Теперь если кто-то хочет то может с помощью этого скрипта изменить размер текста на всем форуме, меняя на свое потходящее число

Код:

<style type="text/css">
body {
 font-size: 150%;
 }
</style>

С помощью этого кода можно изменить стиль шрифта на форуме, вместо Century Gothic пишем свой стиль шрифта

Код:

<style>
BODY A{font-family : "Century Gothic";}
</style>

поменять на главной 1,2,3,4 столбцы форума)а именно залить их своим цветом

Код:

<style type="text/css">
#pun  .tcl { color: цвет текста;
background-color : цвет фона;}
#pun  .tc2 { color: цвет текста;
background-color : цвет фона;}
#pun  .tc3 { color: цвет текста;
background-color : цвет фона;}
#pun  .tcr { color: цвет текста;
background-color : цвет фона;}
</style>

С помощью этого кода вы сможете вставить свою картинку в название категорий на главной страничке

Код:

<style type="text/css"> #pun-main h2 {
color : green;
background-color : transparent; background-image : url(ссылка);
}
</style>

Для наибольшей красоты поставим свою картинку и в строке Форум-Тем - Сообщений - Последнее сообщение

Код:

<style type="text/css"> #pun th {
color: red; background-color : #FF00FF; background-image : url(ссыль);
}
</style>

Если вы хотите полностью залить форум своим цветом тогда вставляем такой код

Код:

<style type="text/css">
#pun {background-color:blue; transparent;}
</style>

Сделаем рамку между столбцами

Код:

 <style type="text/css">#pun-main td {
border-color : #00FFFF;
border-width: 1px;}
</style>

Подвинем слегка верхнюю рекламу. Внимание если вы удалите рекламу ваш форум удалят!Рекламу можно только слегка отодвинуть в сторону или слегка передвинуть ее в другое место))
меняйте эти цифры на свои
left: 510px - в лево 510 пикселей (510 и 190 меняйте по своему усмотрению)
top: 190px - вниз 190 пикселей
(510 и 190 меняйте по своему усмотрению)

Код:

<style> #pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 510px; top: 190px
}
</style>

Этот код сделает картинку около статистики)

Код:

<style type="text/css">
#pun-stats ul.container {
background-image:url(ссыль); padding-left:80px; height : 192px; background-repeat: no-repeat}
</style>

Надписи внизу форума (Администратор Модератор и тд)

Код:

<script type="text/javascript">
var text="<center><font color=Red> Администратор </font> | <font color=Blue> Координатор </font>  |  <font color=Green> Модератор </font></center>"
pa=document.getElementById("pun-stats")
pa.style.position = "relative"
pa.innerHTML = "<div style=\"position:absolute; z-index:2; center: 10px; top: 40px; width: 100%;\">"+text+"</div>"+ pa.innerHTML
</script>

Думаю ваш дизайн уже изменился и стал немного другим.

+2