Быстрый лёгкий надёжный форумный движок
Вы не вошли.
Цель урока показать как настраивать внешний вид форума, используя шаблоны и стили. Для этого сайта я захотел добавить панель сверху, чтобы она была "приклеена" и не скроллировалась вместе со всей страницей. В панели размещу ссылки первой необходимости: лого с ссылкой на корень сайта, быстрый поиск и профиль + выход (регистрация + вход, для неавторизованных).
Рекомендую делать шаг за шагом, а не прыгать сразу в конец. Так в голове отложится больше полезной информации.
Откройте include/template/main.tpl
Сразу за тегом body вставьте такую строку:
<pun_include "topbar.php">
Движок будет искать модуль topbar.php в папке include/user. Создайте такую папку, если нет и сделайте в ней вот такой файл topbar.php:
<?php
?>
<div id="topbar">
ololo
</div>
Очевидно, что это всего лишь заготовка. Давайте посмотрим как будет выглядеть наша новая главная страница. Здесь и далее я буду считать, что мы работаем со стилем Air.
Работает.
Отправляемся редактировать файл стилей style/Air.css
В конец файла добавляем текст:
#topbar {
width: 100%;
height: 40px;
background-color: #000;
color: #fff;
}
Обновляем страницу в браузере. Наша панель стала выглядеть лучше. Но она не приклеена, при прокрутке страницы она уходит. Исправляем:
#topbar {
position: fixed;
width: 100%;
height: 40px;
background-color: #000;
color: #fff;
}
* html #topbar {
position: absolute;
}
Последние строки нужны для IE6. Он не понимает fixed, лекарство такое: надо размещать фиксированный элемент только непосредственно внутри body и объявить позиционирование absolute.
Ок, наша полоска стала фиксированной, можно поиграть с прокруткой и заметить новые проблемы с наложением элементов.
1. На языке верстальщиков наша панель теперь находится "не в общем потоке", поэтому она не вытесняет шапку форума, а лежит в тех же координатах.
2. Элементы с абсолютным позиционированием, как круглые уголки шапки, могут накладываться поверх панели.
Исправление: укажем "высоту" нашего слоя и увеличим верхний отступ для обертки форума. Находим в Air.css секцию "Page layout" и исправляем padding на величину равную высоте нашей панели:
/* Page Layout
----------------------------------------------------------------*/
.pun {
padding: 70px 40px 30px;
}
Отправляемся в конец и добавляем для #topbar z-index
#topbar {
position: fixed;
z-index: 100;
Пробуем прокрутку, наша панель размещена как надо!
Решаем что должно быть в панели
лого со ссылкой на корень сайта
строка быстроко поиска
(регистрация | вход) либо (профиль | выход)
изменяем topbar.php:
<div id="topbar">
<div class="inbox">
<div id="top-left">
<a href="/" title="Home"><img id="top-logo" src="/img/logo.png" alt="logo" width="158" height="40"/></a>
<form id="q-search" method="get" action="search.php">
<input type="hidden" name="action" value="search" />
<span class="glass"><i></i></span>
<input type="text" id="keywords" name="keywords" maxlength="100" />
<input name="search" src="/img/zoom.png" alt="" title="" type="image" />
</form>
</div>
<div id="top-right">
<img id="top-logo" src="/img/spacer.png" alt="" width="1" height="40"/>
<?php
if ($pun_user['is_guest']):
?>
<a id="navregister" href="register.php"><?php echo $lang_common['Register'] ?></a> |
<a id="navlogin" href="login.php"><?php echo $lang_common['Login'] ?></a>
<?php
else:
?>
<a id="navprofile" href="profile.php?id=<?php echo $pun_user['id'] ?>"><?php echo htmlspecialchars($pun_user['username']) ?></a> |
<a id="navlogout" href="login.php?action=out&id=<?php echo $pun_user['id'].'&csrf_token='.pun_hash($pun_user['id'].pun_hash(get_remote_address())) ?>"><?php echo $lang_common['Logout'] ?></a></li>
<?php
endif;
?>
</div>
</div>
</div>
панель разбита на две части: top-left и top-right. Смысл понятен из названия. Всё это окружено оберткой inbox, он нужен чтобы задать левый и правый отступ равные отступам основного тела форума. В зависимости от того авторизовался ли пользователь, в правой половине будет та или иная пара ссылок.
Как всё это вывести красиво. Я воспользуюсь свойством vertical-align: middle, оно применимо для элеентов с типом inline или inline-block. Фактически элементы будут центрироваться по самому высокому элементу в строке. Таким элементом я объявляю картинки.
Вот моя окончательная версия вставки в Air.css
/* Top fixed bar
----------------------------------------------------------------*/
.pun {
padding: 70px 40px 30px;
}
#topbar {
position: fixed;
z-index: 100;
width: 100%;
height: 40px;
background-color: #000;
color: #999;
font: 81.25%/1.462em Arial, Helvetica, sans-serif;
}
* html #topbar { position: absolute; }
#topbar .inbox {
position: relative;
padding: 0 58px;
}
#top-left { float: left; }
#top-right { float: right; }
#topbar a:link, #topbar a:hover, #topbar a:visited {
color: #bbb;
font-weight: normal;
text-decoration: none;
}
#topbar a:hover { color: #fff; }
#topbar .inbox a, #topbar .inbox form, #topbar input {
display: inline;
vertical-align: middle;
}
#top-right #navprofile, #top-right #navregister { padding-left: 12px; }
#top-right #navprofile img { border: 1px solid #999; }
#topbar .inbox form {
background-color: #c0c0c0;
border: 1px solid black;
padding: 4px;
}
#topbar .inbox form #keywords {
border: none;
background-color: #c0c0c0;
color: #333;
width: 150px;
}
#topbar img {
display: inline-block;
vertical-align: middle;
border: 0;
}
Ну вот, в целом всё. Конечно есть желание добавить всяких плюшек. Для урока достаточно.
Архив с готовыми правками здесь: https://fluxbb.qb7.ru/files/topbar-v1.zip
There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.
Offline
Offline
???
не понял, но думаю тебе надо нажать Ctrl+F5
edited: я вначале не заметил, что в стилях уже есть z-index: 100, исправил свой на z-index: 110 чтобы панель была еще выше.
There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.
Offline
Что-то фигня какая-то. Во-первых, чёрная. Во-вторых ненастраиваемая. Украл 40 пикселей вертикального разрешения, которое и так не очень большое.
Аналогичная фигня на буржуйских сайтах тоже не нравится. Недавно и в ЖЖ появилась, LJ Times, типа. Слава богу, её можно задвинуть за край, чтобы только корешок выглядывал.
Offline
Ты сейчас говоришь не про урок, а про этот сайт. Предлагаю обсудить в отдельной теме.
There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.
Offline
Извиняйте братцы, совместимость решения с IE6 я делал только "теоретически". Сейчас добрался до IE6 и увидел багу. Можно стиль модифицировать вот так:
* html #topbar {
position: absolute;
left: 0;
top:expression(eval(document.documentElement.scrollTop)+'px');
}
Почему-то известный мне хак не сработал. Позже разберусь.
update: Опытным путём выяснил: рецепт "известного мне хака" перестает работать, когда исчезает
.wrapper {height: 100%;}
то есть в нашем случае height: 100% надо добавлять к .pun
Всё, что касается вёрстки под Internet Explorer это не наука, а шаманство. Позже сделаю новую версию примера.
There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.
Offline
Ребят, извиняюсь что поднимаю старую тему, но мне очень интересно куда вносить изменения чтобы изменить главное меню? ну вот например как у Вас в главное меню отделено Профиль и Выход (в правую сторону)
Заранее Спасибо!
Offline
Looler, главное меню формируется в файле functions.php ф-ей generate_navlinks().
Чтобы кнопки разбивались на части, artoodetoo видать внес в ф-ию изменение, которое их выводит в два блока: <ul class="conl"> - слева страницы и <ul class="conr"> - справа.
Моя сборка FluxBB 1.5, ForkBB · сообщество
Offline
ну да, это я уже видел в коде вашего сайта, просто я никак не пойму куда вписывать в ПХП <ul class="conl"> и <ul class="conr">
Offline
Разобрался!!! Спасибо Большое!
P.S.: Отличный движок форума! Особенно Поражает его скорость работы!
Offline
Полезная информация в тему: как с помощью CSS настроить ссылки-якоря чтобы открывались со смещением, например чтобы прикрепленная панель не заслоняла нужный текст.
There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.
Offline