Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Поделиться ссылкой

Мы в социальных сетях



- Правила форума -

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: JPG-Net Видео фоторедактор Транслит
Видео-туториалы
Настройка шапки форума
Категории и подфорумы - 1
Создание портала
Модули
Виджеты
Как присваивать награды
Выброс кубиков
Pop-up для входа на форум
Настроение в профиле

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор ★ ПоБум ★ в Ср 10 Авг - 13:29

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

★ ПоБум ★
 
 

Пол : Женщина
Сообщения : 99
Возраст : 19
Место обитания : Планета X
Карма : Без предупреждений
Благодарности : 7
Регистрация : 2010-10-23

Вернуться к началу Перейти вниз

Решено Re: HTML-страница форума как "Туториалы"

Сообщение автор Dana Domirani в Ср 10 Авг - 13:35

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


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21914
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено Re: HTML-страница форума как "Туториалы"

Сообщение автор ★ ПоБум ★ в Ср 10 Авг - 13:45

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

★ ПоБум ★
 
 

Пол : Женщина
Сообщения : 99
Возраст : 19
Место обитания : Планета X
Карма : Без предупреждений
Благодарности : 7
Регистрация : 2010-10-23

Вернуться к началу Перейти вниз

Решено Re: HTML-страница форума как "Туториалы"

Сообщение автор Dana Domirani в Ср 10 Авг - 14:01

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


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21914
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Решено Re: HTML-страница форума как "Туториалы"

Сообщение автор ★ ПоБум ★ в Ср 10 Авг - 14:06

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

★ ПоБум ★
 
 

Пол : Женщина
Сообщения : 99
Возраст : 19
Место обитания : Планета X
Карма : Без предупреждений
Благодарности : 7
Регистрация : 2010-10-23

Вернуться к началу Перейти вниз

Решено Re: HTML-страница форума как "Туториалы"

Сообщение автор Dana Domirani в Ср 10 Авг - 19:13

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

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


Пример:
Код:
[table border="0" class="styk"][tr][td]

[b]Как попасть в вашу Панель администратора?[/b]
В верхнем меню щелкните на "Вход", откроется новая страница, впишите имя пользователя " admin " и пароль, который вы указали при регистрации. Если вы потеряли или забыли ваш пароль, [url=http://calidasa.sosbb.net/profile.forum?mode=sendpassword]щёлкните здесь[/url]. После подключения нажмите на кнопку "Панель администратора" внизу страницы.
[b]Как управлять категориями и форумами?[/b]
Вы в любой момент и без ограничений можете добавить, изменить или удалить категории и форумы, которые вы создадите. Для этого щелкните в Панели администратора по кнопке "Управление" в меню "Форум", после чего щелкните на "Добавить" (форум или категорию)

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

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

В указанном примере это 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) на номер указанной темы.
пример:
В примере номер темы t8. Т.е код в примере будет выглядеть так:
Код:
<a class="cattuto" onclick="discat(1)">КАТЕГОРИЯ 1</a>
<!-- subcat1 -->  <div id="subcat1">
<a class="subcat" href="/-t8.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 -->

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


Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript



Dana Domirani
Администратор
Администратор

Пол : Женщина
Сообщения : 21914
Возраст : 31
Место обитания : СПб
Карма : Без предупреждений
Благодарности : 8765
Регистрация : 2008-04-18

http://poltergeist-legacy.com/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу

- Похожие темы

 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения