HTML-страница форума как "Туториалы"

Всем здравствуйте и у меня снова вопрос.
Возможно ли сделать на отдельной HTML-странице форума, как в Туториалах, т.е. выбрал что тебе надо в левой колонке, жмяк, а в правой появляться информация??

Возможно. Информация в "Туториалах" берется непосредственно из тем на форуме и копируется в контейнер на html-странице.

Ага, возможно значит. А можете подсказать, как всё это в кодах выглядит, ибо сама вряд ли догадаюсь?

Вариант для BB2, правильно понимаю?

Нет. На том форуме у меня стоит punbb.

Для PUN будет так.

1. Создаете (редактируете) необходимую тему - помещаете содержимое, которое надо будет отображать на странице в таблицу с классом styk

Пример:

Внимание! Это надо будет сделать во всех темах, содержимое которых Вы хотите копировать на странице. Скрипт будет вытаскивать только содержимое сообщения, обрамленное в таблицу!

Посмотрите и запишите номер созданной темы

В указанном примере это t8

2. В ПА > Модули > Управление страницами HTML жмете Добавить страницу HTML
В настройках указываете:
Вы хотите использовать верх и низ вашего форума? - да
В содержимое ставите код:

Код:

<script type="text/javascript">
function discat(cat) {
$('#menu > div').slideUp(500); $('#subcat'+cat).slideDown(900);
}
</script>

<style type="text/css">

#main div.buble-form {
margin: 0!important;
width: 100% !important;
}

#content-container div#content {
margin: 0!important;
}

#main div.contenu {
padding: 10px 10px !important;
}

.category {
text-align: justify;
padding: 5px
}

.category a {
font-size: 12px !important;
cursor: pointer;
}

.scat b {
color: #00A5CD;
}

.imgcat {
float: left;
max-width: 30px;
max-height: 40px;
margin-right: 8px;
}

.tuto-descr {
font-size: 11px;
line-height: normal;
}

td#menu {
width: 170px;
font-size: 11px;
}

#menu, #contuto {
vertical-align: top;
}

#search2 {
background: url("http://illiweb.com/fa/admin/icones/voir.png") no-repeat scroll left center transparent;
float: right;
font-size: 12px;
margin-top: -32px;
padding-left: 25px;
padding-right: 15px;
}   

#search2 input {
border-color: #7CBA2C;
border-style: solid;
border-width: 1px 1px 1px 4px;
padding-left: 4px;
width: 200px;
} 

#body-tuto {
font-size: 13px;
}

#body-tuto img, #body-tuto code {
max-width: 520px;
}       

#body-tuto code {
padding: 5px;
border: 1px dotted grey;
display: block;
color: #8C81C4;
max-height: 200px;
overflow: auto;
}

/* заголовок страницы */
#subheader {
font-weight: bold;
color: #696969;
font-size: 18px;
margin: 10px 0;
padding: 15px;
border: 1px solid #D8D8D8;
border-radius: 8px;
background-color: #E6E6FA;
text-align: center;
}

/* оформление окна с содержимым тем */
td#contuto {
padding-left: 10px;
border: 1px solid #D8D8D8;
border-radius: 8px;
width: 70%;
}

/* Оформление категорий в списке  */
a.cattuto {
cursor: pointer;
color: #00A5CD !important;
font-weight: bold;
background: url('http://i43.servimg.com/u/f43/12/33/62/17/archiv10.png') no-repeat top left;
padding-left: 30px;
height: 22px;
line-height: 22px;
display: block;
border-bottom: 1px dashed #D8D8D8;
}

/* Оформление тем в списке */
a.subcat {
background: url("http://i43.servimg.com/u/f43/12/33/62/17/2right10.png") no-repeat scroll left center transparent;
display: block;
margin-bottom: 6px;
margin-left: 10px;
min-height: 17px;
padding-left: 23px;
}
 
/* Оформление заголовка в окне темы */
#title-tuto a.subcat {
background: url("http://i43.servimg.com/u/f43/12/33/62/17/2right10.png") no-repeat scroll right 50%;
padding: 5px 19px 5px 5px;
border: 1px solid #D8D8D8;
border-radius: 8px;
font-size: 15px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin: 5px 5px 5px 0;
} 

 </style>

<div id="content">

<div id="subheader">Список категорий и тем</div>

</div>
 

<div id="main">

<div id="search2"><input id="yeah" type="text" onchange="$('.subcat,.cattuto').show(); if(this.value!='' && this.value.length>1) { $('#menu > div').show(); $('.subcat').filter(function(index) { return !($(this).text().match(new RegExp($('#yeah').attr('value'),'i')));}).hide(); $('#menu > div').each(function(){ if(!$(this).find('.subcat').filter(function(index){ return $(this).css('display')=='block'; }).length) $(this).prev().prev().hide(); }); } else { $('#menu > div').hide(); }"></div>
 

<noscript><div style="color: red; text-align: center; margin-top: 10px;">Ваш браузер не поддерживает Javascript или же вы его не активировали. <br /> Для полноценной работы с этой страницей мы советуем вам активировать Javascript.</div>
</noscript>

<div class="buble-form"><div class="top-right"></div><div class="top-left"></div><div id="contcat" class="contenu clearfix">

<table style="table-layout: fixed; width: 100%;"><tr><td id="menu">

<a class="cattuto" onclick="discat(1)">КАТЕГОРИЯ 1</a>
<!-- subcat1 -->  <div id="subcat1">
<a class="subcat" href="/-t1.htm">Тема 1.1</a>
<a class="subcat" href="/-t1.htm">Тема 1.2</a>
<a class="subcat" href="/-t1.htm">Тема 1.3</a>
</div> <!-- end subcat1 -->


<a class="cattuto" onclick="discat(2)">КАТЕГОРИЯ 2</a>
<!-- subcat2 -->  <div id="subcat2">
<a class="subcat" href="/-t1.htm">Тема 2.1</a>
<a class="subcat" href="/-t1.htm">Тема 2.2</a>
<a class="subcat" href="/-t1.htm">Тема 2.3</a>
</div> <!-- end subcat2 -->


<a class="cattuto" onclick="discat(3)">КАТЕГОРИЯ 3</a>
<!-- subcat3 -->  <div id="subcat3">
<a class="subcat" href="/-t1.htm">Тема 3.1</a>
<a class="subcat" href="/-t1.htm">Тема 3.2</a>
<a class="subcat" href="/-t1.htm">Тема 3.3</a>
</div> <!-- end subcat3 -->


<a class="cattuto" onclick="discat(4)">КАТЕГОРИЯ 4</a>
<!-- subcat4 -->  <div id="subcat4">
<a class="subcat" href="/-t1.htm">Тема 4.1</a>
<a class="subcat" href="/-t1.htm">Тема 4.2</a>
<a class="subcat" href="/-t1.htm">Тема 4.3</a>
</div> <!-- end subcat4 -->


</td><td id="contuto"><div id="title-tuto"></div><div id="body-tuto"></div></td></tr></table>

<script type="text/javascript">
   $('#menu > div').hide(); $('#subcat1').show();
   function getTuto(obj) {
         $('#title-tuto').html($(obj).clone());
         jQuery.get(jQuery(obj).attr('href'),function(data){ jQuery('#body-tuto').html(jQuery(data).find('#main .entry-content div table.styk').html()); })
         return false;
         
   }
   $('.subcat').click(function(){ return getTuto(this); });
</script>

</div><div class="bottom-right"></div><div class="bottom-left"></div><div class="clear"></div><br></div>
</div> <!-- close #main -->
</div> <div class="push"></div>
 
</div> <!-- close #content -->

Сохраняете.

Затем приступаете к настройкам. Меню слева состоит из блоков: категории, в которой вложены ссылки на темы:

Код:

<a class="cattuto" onclick="discat(1)">КАТЕГОРИЯ 1</a>
<!-- subcat1 -->  <div id="subcat1">
<a class="subcat" href="/-t1.htm">Тема 1.1</a>
<a class="subcat" href="/-t1.htm">Тема 1.2</a>
<a class="subcat" href="/-t1.htm">Тема 1.3</a>
</div> <!-- end subcat1 -->

Для того, чтобы после клика на ссылке "Тема 1.1" в окошке справа появилась информация из одноименной темы, Вам надо заменить номер, стоящий по умолчанию (t1) на номер указанной темы.

пример:

Замените, сохраните, проверьте. После клика по ссылке справа должно появиться содержимое темы: