ExBB Community :: Версия для печати :: А как сделать также на своем форуме?

1. nikil - 9 декабря 2011 — 17:37 - перейти к сообщению

У Вас в ветке форумов на сайте висит интересный сайт на cms exbb, как вот точно также оформить себе форум? чтобы вверху можно было создавать вкладки, как на обычном сайте, чтобы люди писали комментариии, и тут же отвечали. Это я так понимаю нужно интегрировать exbb в какую то cms типа joomla? или необязательно?

ссылка

2. BON - 9 декабря 2011 — 18:57 - перейти к сообщению

nikil, чет я не понял про что вы. Про главную страницу ExBB ???

3. nikil - 10 декабря 2011 — 01:40 - перейти к сообщению

Имелся ввиду сайт по этой вот ссылке:

http://www.shopzona.info/forum/

там вот вверху есть вкладки , как на обычном сайте + форум. Не пойму, как у них получилось так сделать. красиво и фуннкционально

4. electron - 10 декабря 2011 — 05:45 - перейти к сообщению

ничего сложного. простое выпадающее меню на css. в рунете исходников полно.

ну а если нужно прям точно такое же, то можно выдрать нужный код из исходного кода форума и воткнуть его себе. все делается за 5 минут Улыбка

надеюсь хозяйка форума на меня не обидется Закатив глазки

само меню добавляем в logos.tpl :

Спойлер (Отобразить)

CODE:

<div class="art-nav">
<div class="l"></div>
<div class="r"></div>
<ul class="art-menu">
<li class="item1">
<a href="http://www.shopzona.info/" >


ГЛАВНАЯ</a>
</li>
<li class="parent item362">
<a href="/instruction.html">


ПОШАГОВАЯ ИНСТРУКЦИЯ</a>
<ul>
<li class="parent item452"><a href="/instruction/podgotovka.html">Шаг №1. Надо знать!</a>
<ul>
<li class="item392">
<a href="/instruction/podgotovka/dostavka-gosudarstvennay-courier.html">Почтовые службы доставки</a>
</li>
<li class="item402">
<a href="/instruction/podgotovka/customs-limit.html">Таможенные лимиты</a>
</li>
<li class="item532">
<a href="/instruction/podgotovka/security-payment.html">Безопасность платежей</a>
</li>
</ul>
</li>
<li class="parent item462">
<a href="/instruction/ob-oplate.html">Шаг №2. Чем платить?</a>
<ul>
<li class="item372">
<a href="/instruction/ob-oplate/plastic-bank-card.html">Банковские карты</a>
</li>
<li class="item382">
<a href="/instruction/ob-oplate/banks-belarus.html">Выбор банка</a>
</li>
<li class="item492">
<a href="/instruction/ob-oplate/procedure-payment.html">Процедура платежей</a>
</li>
</ul>
</li>
<li class="parent item472">
<a href="/instruction/shopping-online.html">Шаг №3. Выбирай.</a>
<ul>
<li class="item412">
<a href="/instruction/shopping-online/poisk-tovara.html">Поиск и выбор магазина</a>
</li>
<li class="item442">
<a href="/instruction/shopping-online/pravila-vybora-tovara.html">Правила выбора товара</a>
</li>
<li class="item502">
<a href="/instruction/shopping-online/opredelenie-razmera.html">Определение размера</a>
</li>
<li class="item422">
<a href="/instruction/shopping-online/znakomstvo-s-magazinom.html">Знакомство с магазином</a>
</li>
</ul>
</li>
<li class="parent item482">
<a href="/instruction/economy.html">Шаг №4. Сэкономь.</a>
<ul>
<li class="item512">
<a href="/instruction/economy/economy.html">Как сэкономить</a>
</li>
</ul>
</li>
<li class="parent item542">
<a href="/instruction/pokupki.html">Шаг №5. Покупай.</a>
<ul>
<li class="item432">
<a href="/instruction/pokupki/registration.html">Регистрация в магазине</a>
</li>
<li class="item522">
<a href="/instruction/pokupki/korzina.html">Формирование корзины</a>
</li>
<li class="item612">
<a href="/instruction/pokupki/oformlenie-zakaza.html">Оформление заказа</a>
</li>
</ul>
</li>
<li class="parent item622">
<a href="/instruction/poluchenie.html">Шаг №6. Получай.</a>
<ul>
<li class="item642">
<a href="/instruction/poluchenie/kontrol-treking.html">Контроль перемещения</a>
</li>
<li class="item652"><a href="/instruction/poluchenie/poluchenie-zakaza.html">Получение заказа</a>
</li>
<li class="item662">
<a href="/instruction/poluchenie/rastamogka.html">Растаможка №1</a>
</li>
<li class="item672">
<a href="/instruction/poluchenie/rastamogka-2.html">Растаможка №2</a>
</li>
</ul>
</li>
<li class="parent item742">
<a href="/instruction/problems.html">Дополнительно</a>
<ul>
<li class="item602">
<a href="/instruction/problems/online-shopping-pravila.html">"Правила игры"</a>
</li>
<li class="item552">
<a href="/instruction/problems/terminy.html">Словарь терминов №1</a>
</li>
<li class="item572">
<a href="/instruction/problems/terminy-2.html">Словарь терминов №2</a>
</li>
<li class="item562">
<a href="/instruction/problems/language.html">Иностранный язык: понять</a>
</li>
<li class="item592">
<a href="/instruction/problems/customs-price.html">Таможенная стоимость</a>
</li>
<li class="item632">
<a href="/instruction/problems/nalog.html">Налогообложение</a>
</li>
<li class="item692">
<a href="/instruction/problems/other-limit.html">Другие ограничения</a>
</li>
<li class="item722">
<a href="/instruction/problems/izmenenie-i-otmena-zakaza.html">Изменения и отмена заказа</a>
</li>
<li class="item712">
<a href="/instruction/problems/problems-oplata.html">Проблемы с оплатой</a>
</li>
<li class="item732">
<a href="/instruction/problems/problems-poluchenie.html">Проблемы с получением</a>
</li>
<li class="item702">
<a href="/instruction/problems/vozvrat-tovara.html">Возврат товара</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="parent item582">
<a href="/obzory-magazinov.html">


ОБЗОРЫ МАГАЗИНОВ</a>
<ul>
<li class="item682">
<a href="/obzory-magazinov/shopping-mall.html">Шопинг-моллы</a>
</li>
<li class="item822">
<a href="/obzory-magazinov/cosmetics.html">Косметика и парфюмерия</a>
</li>
<li class="item832">
<a href="/obzory-magazinov/odezhda.html">Одежда, белье, обувь</a>
</li>
<li class="item932"><a href="/obzory-magazinov/detskie-magaziny.html">Детские магазины</a>
</li>
<li class="item892"><a href="/obzory-magazinov/others.html">Другие</a>
</li>
<li class="item872"><a href="/obzory-magazinov/your-obzor.html">Ваш обзор</a>
</li>
</ul>
</li>
<li class="parent item762">
<a href="/catalog-magazinov.html">КАТАЛОГ МАГАЗИНОВ</a>
<ul>
<li class="item782">
<a href="/catalog-magazinov/shopping-mall.html">Шопинг-моллы</a>
</li>
<li class="item852">
<a href="/catalog-magazinov/cosmetics.html">Косметика и парфюмерия</a>
</li>
<li class="item772">
<a href="/catalog-magazinov/odezhda.html">Одежда</a>
</li>
<li class="item862">
<a href="/catalog-magazinov/shoes.html">Обувь</a>
</li>
<li class="item912">
<a href="/catalog-magazinov/underwear.html">Нижнее бельё, чулки и пр.</a>
</li>
<li class="item902">
<a href="/catalog-magazinov/tovary-dlja-beremennyh.html">Для будущих мам</a>
</li>
<li class="item842">
<a href="/catalog-magazinov/detskie-tovary.html">Детские товары</a>
</li>
<li class="item882">
<a href="/catalog-magazinov/accessories.html">Аксессуары</a>
</li>
<li class="item802">
<a href="/catalog-magazinov/tovary-dlja-sporta.html">Товары для спорта</a>
</li>
<li class="item792">
<a href="/catalog-magazinov/technika.html">Техника</a>
</li>
<li class="item922">
<a href="/catalog-magazinov/tovary-dlja-doma.html">Все для дома</a>
</li>
<li class="item812">
<a href="/catalog-magazinov/others.html">Другие</a>
</li>
</ul>
</li>
<li class="parent item752">
<a href="/poleznoe.html"> ПОЛЕЗНОЕ</a>
<ul>
<li class="item1022">
<a href="/poleznoe/coupons.html">Скидочные купоны / Акции</a>
</li>
<li class="item1102"><a href="/poleznoe/analiz-plastic-card.html">Анализ пластиковых карт</a>
</li>
<li class="parent item1052">
<a href="/poleznoe/rukovodstvo-po-paypal.html">Руководство по PayPal</a>
<ul>
<li class="item1062">
<a href="/poleznoe/rukovodstvo-po-paypal/korotko-o-sisteme-paypal.html">Коротко о системе PayPal</a>
</li>
<li class="item1072">
<a href="/poleznoe/rukovodstvo-po-paypal/paypal-v-rb.html">PayPal в Беларуси</a>
</li>
<li class="item1082">
<a href="/poleznoe/rukovodstvo-po-paypal/poshagovaja-instruction-paypal.html">Регистрация счета в PayPal</a>
</li>
<li class="item1092">
<a href="/poleznoe/rukovodstvo-po-paypal/poshagovaja-instruction-paypal-i-card.html">Привязка банковской карты</a>
</li>
</ul>
</li>
<li class="item1032">
<a href="/poleznoe/obrazcy-pisem.html">Образцы писем</a>
</li>
<li class="item1012">
<a href="/poleznoe/srok-godnosti-cosmetics.html">Сроки годности косметики</a>
</li>
<li class="item1002">
<a href="/poleznoe/site-brand.html">Официальные сайты брендов</a>
</li>
</ul>
</li>
<li class="parent item952">
<a href="/posredniki.html"> ПОСРЕДНИКИ</a>
<ul>
<li class="item962">
<a href="/posredniki/usa.html">В США</a>
</li>
<li class="item992">
<a href="/posredniki/europe.html">В ЕВРОПЕ</a>
</li>
</ul>
</li>
<li class="item982">
<a href="/news.html">
НОВОСТИ</a>
</li>
<li class="item972">
<a class="active" href="/forum"> ФОРУМ</a>
</li>
</ul>
</div>

естественно, названия ссылок и сами ссылки надо поправить.

далее вот это добавляем в самый низ файла style.css :

Спойлер (Отобразить)

CODE:

/* begin Menu */
/* menu structure */

.art-menu a, .art-menu a:link, .art-menu a:visited, .art-menu a:hover {
font-family: "Trebuchet MS",Verdana,Geneva,Arial,Helvetica,Sans-Serif;
text-align: left;
text-decoration: none;
outline: none;
letter-spacing: normal;
word-spacing: normal;
}

.art-menu, .art-menu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}

.art-menu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}

.art-menu li:hover
{
white-space: normal;
}

.art-menu li li
{
float: none;
}

.art-menu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background: none;
}

.art-menu li:hover>ul
{
visibility: visible;
top: 100%;
}

.art-menu li li:hover>ul
{
top: 0;
left: 100%;
}

.art-menu:after, .art-menu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.art-menu, .art-menu ul
{
min-height: 0;
}

.art-menu ul
{
background-image: url(im/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}

.art-menu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}

ul.art-menu
{
float: right;
}

/* menu structure */

.art-menu
{
padding: 6px 6px 6px 6px;
}

.art-nav
{
position: relative;
height: 36px;
z-index: 100;
}

.art-nav .l, .art-nav .r
{
position: absolute;
z-index: -1;
top: 0;
height: 36px;
background-image: url('im/nav.png');
}

.art-nav .l
{
left: 0;
right: 0;
}

.art-nav .r
{
right: 0;
width: 1004px;
clip: rect(auto, auto, auto, 1004px);
}

/* end Menu */

/* begin MenuItem */
.art-menu a
{
position: relative;
display: block;
overflow: hidden;
height: 24px;
cursor: pointer;
text-decoration: none;
}

.art-menu ul li
{
margin:0;
clear: both;
}

.art-menu a .r, .art-menu a .l
{
position: absolute;
display: block;
top: 0;
z-index: -1;
height: 72px;
background-image: url('im/menuitem.png');
}

.art-menu a .l
{
left: 0;
right: 5px;
}

.art-menu a .r
{
width: 410px;
right: 0;
clip: rect(auto, auto, auto, 405px);
}

.art-menu a .t
{
margin-right: 10px;
margin-left: 10px;
font-size: 12px;
color: #00BAD6;
padding: 0 4px;
margin: 0 4px;
line-height: 24px;
text-align: center;
}

.art-menu a:hover .l, .art-menu a:hover .r
{
top: -24px;
}

.art-menu li:hover>a .l, .art-menu li:hover>a .r
{
top: -24px;
}

.art-menu li:hover a .l, .art-menu li:hover a .r
{
top: -24px;
}
.art-menu a:hover .t
{
color: #F2BB6E;
}

.art-menu li:hover a .t
{
color: #F2BB6E;
}

.art-menu li:hover>a .t
{
color: #F2BB6E;
}

.art-menu a.active .l, .art-menu a.active .r
{
top: -48px;
}

.art-menu a.active .t
{
color: #F2BB6E;
}
/* end MenuItem */

/* begin MenuSeparator */

.art-menu .art-menu-li-separator
{
display: block;
width: 5px;
height: 24px;
}

.art-nav .art-menu-separator{
display: block;
margin:0 auto;
width: 1px;
height: 24px;
background-image: url('im/menuseparator.png');

}
/* end MenuSeparator */

/* begin MenuSubItem */
.art-menu ul a
{
display: block;
text-align: center;
white-space: nowrap;
height: 20px;
width: 180px;
overflow: hidden;
line-height: 20px;
background-image: url('im/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 0;
border-style: solid;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
display: inline;
float: none;
margin: inherit;
padding: inherit;
background-image: none;
text-align: inherit;
text-decoration: inherit;
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
text-align: left;
text-indent: 12px;
text-decoration: none;
line-height: 20px;
color: #00ACC7;
margin-right: 10px;
margin-left: 10px;
font-size: 12px;
margin:0;
padding:0;
}

.art-menu ul li a:hover
{
color: #F2BB6E;
background-position: 0 -20px;
}

.art-menu ul li:hover>a
{
color: #F2BB6E;
background-position: 0 -20px;
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
color: #F2BB6E;
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
color: #F2BB6E;
}

/* end MenuSubItem */

остается что.... залить нужные рисунки с того форума к себе в папку адрес_вашего_форума/templates/имя_стиля/im/ . рисунки выдираются любым менеджером закачки (я выдирал их моим любимым Download Master-ом) . рисунки - в прикрепленном архиве

5. igrok54 - 10 декабря 2011 — 07:12 - перейти к сообщению

nikil, на shopzona.info сделана интеграция joomla и ExBB, два движка работают в связке. Верхнее выпадающее меню формируется в Жумле, на страницах ExBB это меню только транслируется с изменением подсветки пункта меню ( подсвечивается пункт "Форум" ).

6. BON - 10 декабря 2011 — 07:39 - перейти к сообщению

nikil пишет:

там вот вверху есть вкладки , как на обычном сайте + форум. Не пойму, как у них получилось так сделать. красиво и фуннкционально

как написал электрон - это просто. + можете сделать многомерное выпадающее меню. в общем что душе пожелается, было бы только желание

7. Nikela - 11 декабря 2011 — 13:21 - перейти к сообщению

ааааааааа, я в ауте Покатываюсь со смеху

что ж всем так мой форум сдался Язычок

то скин дай, то мод дай, то меню дай Радость

уже инструкции делаем, как растянуть мой форум по кусочкам Радость

НЕ ДАМ!!! ХОЗЯЙКА ПРОТИФФФФФ!!! Радость

Она поимаишь тут ночами не спала, лепила, в коде ковырялась, а тут дай им Покатываюсь со смеху

8. - 11 декабря 2011 — 13:33 - перейти к сообщению

Жжоте, ребята. Ха-ха

nikil, все это можно реализовать в logos.tpl. Можете глянуть, как делал я - просто форум наиболее близок по оформлению к сайту. Но можно и полностью повторить внешний вид сайта.

9. nikil - 11 декабря 2011 — 14:14 - перейти к сообщению

Nikela

Извиняюсь, я вообще-то его в качестве примера взять хотел. никто же у Вас контент не собирался воровать) у меня совсем другая тематика форума. Просто красиво, когда обычный сайт и форум объединены.
(Добавление)

Zeg пишет:

Жжоте, ребята. Ха-ха

А где можно глянуть как делали Вы?

10. - 11 декабря 2011 — 15:29 - перейти к сообщению

nikil, ссылка есть в моей подписи. Правое меню "Помощь, Поиск, Форумчане, Сервисы, Фотоальбом, Статьи, История, Город и район, Главная". Оно, правда не выпадающее, но сделать его нет проблем. CSS в руки.

11. nikil - 11 декабря 2011 — 21:18 - перейти к сообщению

Zeg пишет:

спасибо
(Добавление)

nikil пишет:

Zeg пишет:

спасибо, Ваш сайт тоже красив. Думаю такое осилю Улыбка

пока, вот что плучается
www.derjimpitomcev.tk

(Добавление)
Zeg

можно спросить, а как вы сделали плавающие строки при наведении мышки в самом верхнем правом углу? если не секрет

12. - 12 декабря 2011 — 08:04 - перейти к сообщению

nikil пишет:

можно спросить, а как вы сделали плавающие строки при наведении мышки в самом верхнем правом углу?

Не секрет давно. Вот.