Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » Создаем полноценный Портал на форумах MyBB!


Создаем полноценный Портал на форумах MyBB!

Сообщений 1 страница 20 из 1004

1


http://s5.uploads.ru/zrHiO.png

Вышла вторая версия порталаСсылка п.72.

Наши наработки (Обязательно посмотрите!)

Наши наработки:

Вариант портала от Kolobdur74 - Ссылка пост 96.

Улучшеная версия портала от Kolobdur74 - Ссылка пост 116.

Портал вкачестве главной (без редиректа) Создаем полноценный Портал на форумах MyBB! пост 35.

Портал вкачестве главной (с кукисами) Создаем полноценный Портал на форумах MyBB! пост 136.

Новости подфорумно Создаем полноценный Портал на форумах MyBB! пост 157.

Еще одна версия подфорумного портала Создаем полноценный Портал на форумах MyBB! пост 169.

Пагинатор для портала (переключатели страниц) Создаем полноценный Портал на форумах MyBB! пост 187.

Вариант портала с красивыми переходами между страницами. Создаем полноценный Портал на форумах MyBB! пост 336.

*Последний вариант портала с упрощенным заполнением: Создаем полноценный Портал на форумах MyBB!

* к нему же
вариант портала конструктор - это пост 839

Таблицы селекторов: пост 838

Полноценный Портал на форумы. C3La-NS, Romych. © Версия 1.

Для всех тех, кто мечтает о полноценном портале на MYBB. Мне удалось написать код полноценного портала на ваши форумы!
Выглядит очень классно, даже ничуть не хуже чем на других сайтах не на майбб.
Ну, а теперь, если Вы не смыслите в HTML, разберем все по порядку. Пример можно посмотреть у меня: Ссылка  :flirt:
P.S. Профи, тоже сильно не пинать, я только учусь. :crazyfun:


<style type="text/css">
div.color {
  width:auto;
  border-width:0px;
  border-style:solid;
  border-color:;
  }
</style>

         
<style>
.Box1 {
    margin-bottom:5px;
        width:auto;
        height: auto;
        background-color: #ffffff;
        border: 2px solid #D4D4D4;
        border-radius: 0 0 8px 8px;
        -moz-border-radius:0 0 8px 8px;
        -khtml-border-radius: 0 0 8px 8px;
        box-shadow: 0 0 15px #A9A9A9;
        padding:20px 40px;
}
</style>

<style>
#BoxRSS {
  margin: auto;
  width: 30% !important;
  min-width: 30% !important;
  max-width: 30% !important;
  position: absolute;
  }
</style>


<style>
#bib p iframe {max-height: 600px;max-width: 600px;}
#bib p img {max-width: 600px;}
</style>

<table style="height: 300px; ; width: 100%;" border="0" frame="void" rules="none" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="70%">
<br>
<br>
<div class="color"><h1>Новостная лента</h1>
<div class="BoxRSS" style="height: auto;">
<script type="text/javascript">
$(function(){
$('div#pun-pages div#pun-main div.BoxRSS').append('<div id="RSS" style="width: 100%;border: 0px solid #778899;margin-left: 0;background: white;"><table id="bib" cellspacing="0" width=100% align="center"><tr><th width=100%><b>Последние сообщения форума</b></th></tr></table></tr></table></div>');
$.get('/export.php','',processXML);
function processXML(data){
$(data).find('item:lt(10)').each(function(){ 
var JAuthor=$(this).find('author').text().slice(14,-1);var JTitle=$(this).find('title').text();
var JLink=$(this).find('link').text();var JCont=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-9);
$('#bib').append('<tr><td><a href="'+ JLink +'">'+JTitle+'</a><br><br>'+JCont+'<br></br><strong>Написал — </strong><b>'+ JAuthor +'</b> '+ JPosted +'</td></tr>'); });
} });
</script>

</div></div></td>
<td valign="top" width="30%">
<div class="color"><h1>Заголовок 1-го блока</h1>
<div class="Box1" style="hieght: 250px;">Текст 1-го блока</div></div>
<br>
<div class="color"><h1>Заголовок 2-го блока</h1>
<div class="Box1">
Текст 2-го блока
</div></div>
<br>
<div class="color"><h1>Заголовок 3-го блока</h1>
<div class="Box1" style="hieght: 200px;">Текст 3-го блока
</div></div>
<br>
<div class="color"><h1>Заголовок 4-го блока</h1>
<div class="Box1" style="hieght: 70px;">Текст 4-го блока.
</div></div>
<br>
</td>
</tr>
</tbody>
</table>

Важно: при редактировании страницы не используйте визуальный редактор, в противном случае портал перекособочит!
Что представляет данная страница? — условно я поделил ее на две части, использовав невидимую таблицу. Левая часть — самая большая 70% от размера форума, соответственно правая — 30%. Но, я думаю, Вы это уже поняли, испытав код.


Фиолетовое — вообще не трогаем, это мой бред, чтобы вся конструкция держалась четко.

Зеленое в тегах <style> — отвечает за стиль оформления наших боковых блоков (в правой части). Меняем на свое, чтобы настроить.
Все блоки DIV с названием Box1 — это наши боковые блоки. Их стиль определяется по первому зеленому Style. Однако некоторые из них имеют и свои настройки, как например 3 и 4 блок. В нашем случае это определенная высота.

<style></style> с содержимым оливкового цвета отвечает лишь за один самый большой блок.


Это мы только рассмотрели каркас нашего портала. Теперь давайте двинемся дальше и посмотрим как сделать ленту новостей!

Красное — это и есть скрипт, который выводит все свежие новости форума. Впринципе, все автоматизировано, так что ничего менять/указывать не надо. Можно оставить как есть.

Есть другая проблема: дело в том, что изображения большого разрешения будут выезжать за пределы новостной ленты и наезжать на другие блоки. Не хорошо. Исправляем это голубым кодом. Сами настраивайте максимальную ширину и длину изображений и фреймов для своего форума. Теперь картинки высокого разрешения будут ужиматься сами до максимально-допустимого значения. Э, фреймы тоже.


На этом все. Дальше сами наполняйте свой портал контентом, не стесняйтесь менять что-нибудь на свой лад. ;)

Обо всех ошибках пишите сюда, попытаемся устранить.
• пока я сам нашел только один недочет: огромный непрерывный текст (без пробелов) выезжает за пределы новостной ленты, но это постараемся исправить в ближайших апдейтах.


Ставим Плюсики если понравилось  :jumping:

Отредактировано C3La-NS (Вт, 1 Окт 2013 18:07:27)

+14

2

Прошу переместить тему в раздел "Новые возможности форумов"!

+1

3

C3La-NS
Нун вообще то делать под две боковых и центральную,
http://all-best.pro/portal.php?sid=06b8 … 047bf26f83
ненужные боковые колонки - левую - правую - у пользователя должна быть возможность скрытть css - для этого в каждой колонке всем ячейкам даем уникальный класс и скрытие будет просто по классу

к примеру

td.Left {
display:none;
}

2. В принципе Достаточно часто на портале востребованы часы с Автоустановкой по текущему юзеру,

3. На подходе фича, расширяющая портальные возможности

4. Неплохо бы всунуть в минибар мини-навигатор по форумам - категориям

Отредактировано Deff (Пт, 19 Апр 2013 04:14:03)

0

4

:flag: А - так - плюс!

0

5

Да - и главное - запросы нун кешировать на LocalStorage - иначе у Админа опять будут недоволки все возрастающими нагрузками

0

6

Deff написал(а):

Нун вообще то делать под две боковых и центральную,
http://all-best.pro/portal.php?sid=06b8 … 047bf26f83
ненужные боковые колонки - левую - правую - у пользователя должна быть возможность скрытть css - для этого в каждой колонке всем ячейкам даем уникальный класс и скрытие будет просто по классу

Это тогда напишу.

Deff написал(а):

2. В принципе Достаточно часто на портале востребованы часы с Автоустановкой по текущему юзеру,

Попробую найти. Но вприципе, сам код я оставил "чистым" для того, чтобы юзер сам наполнял портал контентом.

Deff написал(а):

Да - и главное - запросы нун кешировать на LocalStorage - иначе у Админа опять будут недоволки все возрастающими нагрузками

Вот с этим я не знаком. Поможете сделать этот LocalStorage  :question:

+1

7

C3La-NS написал(а):

Поможете сделать этот LocalStorage

http://www.xiper.net/learn/html/up-and- … orage.html
http://htmlbook.ru/html5/storage

0

8

Я бы еще сделал обрезание текста до n-ого кол-ва символов, поскольку видно, что пост идет целиком, а это не есть гуд. В остальном, страница играет ту самую роль портала, который многим будет по душе в таком исполнении :)

0

9

Reysler
Да, о проблеме знаю. Исправлю. Лишь бы меня кто-нибудь толкнул как это слелать.
Я так понимаю нужно использовать maxlength?

0

10

C3La-NS написал(а):

Прошу переместить тему в раздел "Новые возможности форумов"!

:cool:  :cool:  :cool:
Перемещаю под свою ответственность.

+1

11

C3La-NS написал(а):

Да, о проблеме знаю. Исправлю. Лишь бы меня кто-нибудь толкнул как это слелать.

Ну к примеру так :
Ограничиваем первой картинкой и 500 символами

<script type="text/javascript">
var txtLength = 500; //Ограничение по символам
$(function(){
$('div#pun-pages div#pun-main div.BoxRSS').append('<div id="RSS" style="width: 100%;border: 0px solid #778899;margin-left: 0;background: white;"><table id="bib" cellspacing="0" width=100% align="center"><tr><th width=100%><b>Последние сообщения форума</b></th></tr></table></tr></table></div>');
$.get('/export.php','',processXML);
function processXML(data){
$(data).find('item:lt(6)').each(function(){ 
var JAuthor=$(this).find('author').text().slice(14,-1);var JTitle=$(this).find('title').text();
var JLink=$(this).find('link').text();var JCont=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-9);
var JCont=$('<div>'+JCont+'</div>');
var firstImg = JCont.find('img:first').clone();
if(firstImg.length){firstImg2=firstImg.wrap('<div></div>').parent();
JCont.find('img:first').replaceWith('[img:first]');}
JCont  = JCont.text().substr(0,txtLength)+' ...';
if(firstImg.length){JCont=JCont.replace('[img:first]',firstImg2.html()); };firstImg=null;

$('#bib').append('<tr><td><a href="'+ JLink +'">'+JTitle+'</a><br><br>'+ JCont +'<br></br><strong>Написал — </strong><b>'+ JAuthor +'</b> '+ JPosted +'</td></tr>'); });
} });
</script>

Отредактировано Deff (Пт, 19 Апр 2013 21:37:32)

0

12

Deff написал(а):

Ну к примеру так :
Ограничиваем первой картинкой и 500 символами

Отредактировано Deff (Сегодня 21:37:32)

Вполне неплохо. Но можете ли подправить код, чтобы:
1. Картинки отделялись от текста переносом на новую строку.
2. Вернуть поддержку BB-кодов.

0

13

C3La-NS
Ну отделить - нет проблем,

var JCont=$('<div>'+JCont+'</div>');
var firstImg = JCont.find('img:first').clone();
if(firstImg.length){firstImg2=firstImg.wrap('<div></div>').parent();
JCont.find('img:first').replaceWith('\n[img:first]\n');}
JCont  = JCont.text().substr(0,txtLength)+' ...';
if(firstImg.length){JCont=JCont.replace('[img:first]',firstImg2.html()); };firstImg=null;

А вот с BB - кодами - сложнее - посколь мы HTML - превращаем в текст(см красное), где нет уже тегов, иначе подсчет букв превратицо в головоломную задачу,
Ксать на всех порталах с RSS - лишь первая картинка и 200 -300 знаков текста - позволяющая всунуть 10-30 постов на страницу портала => http://all-best.pro/portal.php?sid=eeb3 … 49d9f8560f
Главное это картинка и ссылка и первые две строки

Отредактировано Deff (Пт, 19 Апр 2013 23:02:37)

0

14

Deff
Жалко. Так как без бб-кодов (html) будет сложно отличить, например, цитаты и ответы на них.

0

15

C3La-NS
При  двух строках текста - нафег они нужны - а при небольшой активности - пусть полноценная версия будет
Собственно так

<script type="text/javascript">
var txtLength = 500; //Ограничение по символам/Если цифру не прописываем = без ограничений
$(function(){
$('div#pun-pages div#pun-main div.BoxRSS').append('<div id="RSS" style="width: 100%;border: 0px solid #778899;margin-left: 0;background: white;"><table id="bib" cellspacing="0" width=100% align="center"><tr><th width=100%><b>Последние сообщения форума</b></th></tr></table></tr></table></div>');
$.get('/export.php','',processXML);
function processXML(data){
$(data).find('item:lt(6)').each(function(){ 
var JAuthor=$(this).find('author').text().slice(14,-1);var JTitle=$(this).find('title').text();
var JLink=$(this).find('link').text();var JCont=$(this).find('description').text();
var JPosted=$(this).find('pubDate').text().slice(4,-9);
if(txtLength){
var JCont=$('<div>'+JCont+'</div>');
var firstImg = JCont.find('img:first').clone();
if(firstImg.length){firstImg2=firstImg.wrap('<div></div>').parent();
JCont.find('img:first').replaceWith('\n[img:first]\n');}
JCont  = JCont.text().substr(0,txtLength)+' ...';
if(firstImg.length){JCont=JCont.replace('[img:first]',firstImg2.html()); };firstImg=null;}
$('#bib').append('<tr><td><a href="'+ JLink +'">'+JTitle+'</a><br><br>'+ JCont +'<br></br><strong>Написал — </strong><b>'+ JAuthor +'</b> '+ JPosted +'</td></tr>'); });
} });
</script>

0

16

сам выдаваемый контент по количеству символов можно ограничить и проще, через .slice
например так от 0 до 100:

var JCont=$(this).find('description').text().slice(0,100);

но целесообразнее было бы вообще выдавать только первые 2 строки через регулярку, независимо от тог что в них вместилось, а на остальной текст ссылка, типа:

Читать далее...

0

17

Romych написал(а):

var JCont=$(this).find('description').text().slice(0,100);

Да ограничение сделать не проблема  и так и эдак - там весь геммор к выпарсу картинки и обратной вставки

0

18

:cool:

0

19

C3La-NS написал(а):

1. Картинки отделялись от текста переносом на новую строку.

Можно картинке придать блочные свойства:

#bib p img {max-width: 600px; display: block;}

тогда картинка будет всегда отделена от текста..Кстати, у меня с р не регулируются картинки, только без р: #bib img {max-width: 600px;}

0

20

kolobdur74
Учту..


На следующей неделе постараюсь выпустить 2-ю версию портала.

0


Вы здесь » Единый форум поддержки » Новые возможности форумов » Создаем полноценный Портал на форумах MyBB!