Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» совет админамавтор лексей2222 Сентябрь 24th 2024, 05:54
» Пропали иконки редактирования - HEEELP
автор Archaea Сентябрь 23rd 2024, 18:11
» [решено]Редактирвоание темы
автор лексей2222 Сентябрь 23rd 2024, 17:37
» Как загружать ролики и мультики по ссылкам напрямую
автор лексей2222 Сентябрь 14th 2024, 19:22
» Интернет адрес форума
автор Mierena Сентябрь 7th 2024, 15:24
» некоторые форумы долго загружаются
автор Raumt Сентябрь 6th 2024, 15:06
» На форуме Пропали кнопки модерации тем
автор лексей2222 Август 16th 2024, 22:36
» Проблема с метатегом Description
автор VeraLV Июнь 14th 2024, 17:06
» [решено] Исчезли картинки кнопок
автор VeraLV Май 26th 2024, 13:04
» Как убрать подпись о редактировании записи
автор Фея Май 9th 2024, 21:11
HTML-страница форума как "Туториалы"
Участников: 2
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
HTML-страница форума как "Туториалы"
Всем здравствуйте и у меня снова вопрос.
Возможно ли сделать на отдельной HTML-странице форума, как в Туториалах, т.е. выбрал что тебе надо в левой колонке, жмяк, а в правой появляться информация??
Возможно ли сделать на отдельной HTML-странице форума, как в Туториалах, т.е. выбрал что тебе надо в левой колонке, жмяк, а в правой появляться информация??
★ ПоБум ★-
-
Сообщения : 99
Возраст : 27
Регистрация : 2010-10-23
Благодарности : 7
Re: HTML-страница форума как "Туториалы"
Возможно. Информация в "Туториалах" берется непосредственно из тем на форуме и копируется в контейнер на html-странице.
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Re: HTML-страница форума как "Туториалы"
Ага, возможно значит. А можете подсказать, как всё это в кодах выглядит, ибо сама вряд ли догадаюсь?
★ ПоБум ★-
-
Сообщения : 99
Возраст : 27
Регистрация : 2010-10-23
Благодарности : 7
Re: HTML-страница форума как "Туториалы"
Вариант для BB2, правильно понимаю?
Где находится CSS? Па > Оформление > Цвета > Каскадная таблица стилей CSS Где искать основные шаблоны? ПА > Оформление > Шаблоны > Общие настройки Где находится раздел для подключения скриптов ПА > Модули > Управление кодами Javascript |
Re: HTML-страница форума как "Туториалы"
Нет. На том форуме у меня стоит punbb.
★ ПоБум ★-
-
Сообщения : 99
Возраст : 27
Регистрация : 2010-10-23
Благодарности : 7
Re: HTML-страница форума как "Туториалы"
Для PUN будет так.
1. Создаете (редактируете) необходимую тему - помещаете содержимое, которое надо будет отображать на странице в таблицу с классом styk
Посмотрите и запишите номер созданной темы
В указанном примере это t8
2. В ПА > Модули > Управление страницами HTML жмете Добавить страницу HTML
В настройках указываете:
Вы хотите использовать верх и низ вашего форума? - да
В содержимое ставите код:
Затем приступаете к настройкам. Меню слева состоит из блоков: категории, в которой вложены ссылки на темы:
Замените, сохраните, проверьте. После клика по ссылке справа должно появиться содержимое темы:
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 -->
- пример:
- В примере номер темы 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 |
Бесплатный форум: форум поддержки :: Взаимопомощь и Поддержка :: Оформление вашего форума :: [Архив] Оформление форума
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения