Есть вариант стиля, где шапка переходит в фон форума (вылазит за границы форумных таблиц) выглядит это приблизительно так:
# увеличивается по клику
Примеры такого стиля есть в нашем свободном каталоге: Фентези стиль для ролевого форума MyBB LastChance-2012, Дизайн Hentay School of Umineko (+ PSD) [6/8], Дизайн Seven Kingdoms (+ PSD) [5/8], Дизайн Лесное фэнтези [3/8]
В этом уроке мы "разберем" этот стиль на кусочки и продемонстрируем написание такого кода.
# увеличивается по клику
1. отмечено розовым
Основной фон залили красным цветом, вот такой код:
<style>
HTML, BODY {
background-color: #ad3a32;
}
</style>
2. отмечено синим
Поверх основного фона размещена фоновая картинка (в формате png - чтобы края были полупрозрачными и плавно переходили в цвет основного фона), чтобы эта картинка правильно отображалась, надо ее оцентровать и сделать не повторяющейся.
<style>
HTML, BODY {
background-color: #ad3a32;
background-image: url("http://картинка");
background-repeat: no-repeat;
background-position: top center
}
</style>
красная строчка кода позволяет добавить картинку
синяя - делает картинку неповторяющейся
зеленая - делает картинку по центру (top - верх; center - центр)
3. отмечено зеленым
Фон форумных таблиц сделан просто одноцветно. Делается это следующим образом:
<style>
#pun {
background-color: #beb9a7;
width: 800px;
}
</style>
Тут есть один существенный нюанс: необходимо заранее указать ширину форумных таблиц.
4. отмечено красным
Поверх всего вышеперечисленного идет шапка. (Она тоже сделана в формате png). Делать ее необходимо по образу и подобию основного фона, но с нюансами (например, указав высоту шапки).
<style>
#pun-title table {
background: url(http://катринка);
height: 295px;
background-repeat: no-repeat;
background-position: top center;
}#pun-title .title-logo span {display: none;}
</style>
красное - картинка
синее - высота шапки
розовое - отсутствие повторение шапки
позиционирование - сверху по центру
салатовое - убирает текст и названием форума из шапки
Далее - дело тонкого мастерства дизайнера, остается создать в фотошопе подходящие под такой код картинки.
Проблема
может возникнуть вот такие "полоски":
# увеличивается по клику
Это границы шапки форума. чтобы убрать их вставьте вот этот код:
<style>
#pun-title {
border: none;
}
</style>
я так сделала, и вот что вышло:
