1. Заходим на сайт http://mybb.ru/generator/ и генерируем код в css будущего дизайна
Жмём на "Сохранить стиль" и копируем всё, что нам дали
2. Идём на свой форум
администрирование - стиль
удаляем всё, что есть во втором окошке, и вставляем то, что скопировали в предыдущем шаге.
3. Выбираем в этом же окошке
Хотите ли Вы использовать собственный стиль оформления?
Да
Сохраняем
4. Теперь давайте сделаем форум более узким
Для этого заходим в Администрирование - Стиль
в первом окошке
находим
/* A5.1 */
И заменяем весь пункт под этим заголовком на
/* A5.1 */
#pun {
margin: 0px auto 30px auto;
width : 720;
padding: 0px 15px 0px 15px;
}Значение 720 меняете на своё.
5. Ну что ж...Теперь уберём все-все таблицы с форума, чтобы вставить фон.
Фон у нас будет одной зафиксированной картинкой, а не повторяющимися. Конечно, весить он будет много, но красота требует жертв. А жертва - ваш трафик.
Ставим
background-color: transparent;
Начиная с
/* CS1.1 */
до
/* CS2 Border colours
Вот таким образом
Это ставим
; border-style:none !important;
с
/* CS2 Border colours
до
/* CS3 Links
Вот, что получается
http://i070.radikal.ru/1006/1e/0ef8b039c50et.jpg
Замечаем, чтобы два двухточия не стояли вместе! Только одно!!
Форум теперь выглядит так
6. Теперь идём создавать фон.
Берём шаблон
Загоняем его в фотошоп. Заливаем чёрное любым цветом, белое можете оставить тем же или перекрасить в цвет потемнее.
7. Теперь сделаем "волшебные" полоски)
Для начала выбираем измерители
Жмём на левую линейку и ведём к границе меду тёмной и светлой частью на фоне. Оставляем там бирюзовую полосу. Затем проделываем те же действия, но со второй границей.
Создаём новый слой.
Теперь берём предмет Выделения прямоугольиком и выделяем тоненькую полосу вдоль границы, не заходя на светлую часть! Вдоль всего фона!
И закрашиваем белым цветом эту полосу. Копируем её и перемещаем в ту же позицию справа. Ставим обе полосочки на 30% непрозрачности.
Вот так
8. Теперь помещаем это всё изобретение на наш форум:
во втором окошке css в самом верху делаем замену на
/* CS1 Background and text colours
-------------------------------------------------------------*/
html {background: url(ссылка)
#ffffff;
background-position: center;
background-attachment : fixed;
}9. Поставила нашу шапку с размером 720*400, лень делать под стиль форума.
В хтмл-верх
<style type="text/css">
#pun-title table {background-image : url("картинка");
background-repeat : no-repeat; height : 400px;
}
</style>
<style type="text/css">
#pun-title .title-logo {display: none;}
</style>10. Теперь передвинем рекламу на шапке, дабы не загораживала нужные места)
<style>
.title-logo-tdr a, .title-logo-tdr iframe, .title-logo-tdr object{
position: relative;
left: 0px;
right: 350px;
top: 200px;
}
</style>Тоже в хтмл-верх
Цифры 0, 350, 200 корректируйте сами.
11. Нам надо заменить иконки разделов и тем.
Для этого заходим в css второе окошко, прокручиваем в самый низ
Заменяем
Код:
/* CS4 Post status icons
-------------------------------------------------------------*/
div.icon {border-color: #DDAAFF #BD8ADF #AD7ACF #BD8ADF}
tr.iredirect div.icon {border-color: #FFDDFF #FFDDFF #FFDDFF #FFDDFF}
div.inew {border-color: #FFCCFF #DFACDF #CF9CCF #DFACDF}
#pun-main div.catleft, #pun-main div.catright {display: none}
На
Код:
/* 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.isticky div.icon {
background: url(важное) no-repeat;
}
#pun-main div.catleft, #pun-main div.catright {display: none}Чтобы разместить их справа от описания раздела, ставим в хтмл-верх
<style type="text/css">
#pun-main .category Div.icon{
float: right;
}
</style>12. Если вы хотите большие иконки на форум, то идите в...администрирование - стиль - первое кошко
Меняете это
/* C2.14 */
.punbb tbody.hasicon td.tcl {
padding-left: 3.2em
}
/* C2.15 */
.punbb div.icon {
border-style: solid;
border-width: 0.6em 0.6em 0.6em 0.6em;
height: 0;
line-height: 0.0;
margin-top: 0.1em;
width: 0;
}На
/* C2.14 */
.punbb td div.tclcon {
margin-left: 70px;
}
/* C2.15 */
.punbb div.icon {
float: left;
display: block;
width: 60px;
height: 60px;
padding-top: 1px;
margin-top: 1px;
}Циферки 70 и 60 меняете на свои.
А этот пункт удаляете.
/* C2.16 */
.punbb table div.icon {
font-size: 1.05em;
position: absolute;
margin-left: -2.2em;
}13. Хотим меню навигации посередине, да ещё и жирным?
<style type="text/css">
#pun-navlinks .container {
background-image : url(картинка);
font-weight: bold;
text-align: center;
}
</style>Ставите в хтмл-верх.
14. Хотим поставить копирайт?
Ставим в хтмл-низ под все уже имеющиеся скрипты
<center><img src=картинка></center>
15. Блин, вот надо поменять цвет в навигации, а как?
А вот так: второе окошко css
/* CS3.3 */
#pun-navlinks a {
color: #392e76;
border-bottom: 0px none #000;
text-decoration: none;
}
/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
color: #FFFFFF;
font-weight: normal;
font-style: normal;
border-bottom: 0px none #000;
text-decoration: underline;
}
#pun-pagelinks a:active, #pun-pagelinks a:focus {
background-color: #333;
color: #fff;
}Где color: - это и есть цвета ссылок. Только разница во всех этих кодах в том, что в начале указан цвет обычной ссылки, а прокрутите вниз - ссылка при наведении.
15. Нам же ещё надо шрифт поменять и размер текста?
Ставим в хтмл-верх
<style>
body {font-size:17px;}
</style>17 - меняете на своё
<style type="text/css">
#pun-main .formal textarea {font-family: georgia;}
</style>georgia меняете на свой шрифт. Помните, что шрифты нужно указывать только стандартные!! Которые есть уже на форуме. Для этого идите в тему на форуме и выбираете в панели инструментов для нового сообщения "Шрифты" и смотрите названия.
