Виджет "Последние темы раздела"

Привет, с этого урока я покажу вам, как вставить виджет в ваш форум, который будет отображать последние темы в определенном подфоруме. Пример:


1 - Шаг:
Давайте создадим виджет:

Код:

<div id="newsareal1" class="newsareal"> </div>

Теперь сохраните.

2 - Шаг:
Создаем новый Javascript

Теперь вставляем следующий код, ВНИМАНИЕ,  каждая платформа имеет свой код:


phpBB2:

Код:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/INSERIRE QUI IL LINK div.topictitle:lt(11)");
});

phpBB3:

Код:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/INSERIRE QUI IL LINK div.topic-title-container:lt(11)");
});

PunBB И Invision:

Код:

jQuery(document).ready(function(){
jQuery("#newsareal1").load("/INSERIRE QUI IL LINK a.topictitle:lt(11)");
});

Не забудьте забить

Все страницы

Теперь найдите

Код:

INSERIRE QUI IL LINK

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

Код:

f4-blabla-comunicazione

Когда закончите, сохраните и все.

4 - Шаг:
Теперь мы идем, чтобы добавить CSS-код, версия:

phpBB2:

Код:

.newsareal div.topictitle {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 30px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
}
.newsareal div.topictitle:hover {
background-color: #D8DEDE;
}
.newsareal div.topictitle a {
color: #708090 !important;
text-decoration: none !important;
text-shadow: #fff 1px 1px 0px
}

phpBB3:

Код:

.newsareal div.topic-title-container {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 30px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
}
.newsareal div.topic-title-container:hover {
background-color: #D8DEDE;
}
.newsareal div.topic-title-container a {
color: #708090 !important;
text-decoration: none !important;
text-shadow: #fff 1px 1px 0px
}

PunBB И Invision:

Код:

.newsareal a.topictitle {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 30px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
text-decoration: none !important;
}
.newsareal a.topictitle:hover {
background-color: #D8DEDE;
color: #708090 !important;
text-shadow: #fff 1px 1px 0px
}

Немного о настройках:
Зайдите на форум, который Вы хотите поместить в виджет и посмотрите в адресную строку в конец ссылки. Увидите вроде этого /f15-forum.
Замените на свою. (11) - количество последних тем в показе.
Изображение в настройках CSS поставить можете на свое усмотрение. Главное, подогнать в нужный размер. У меня 18*18px. Можно разместить несколько виджетов, меняя переменные /f15 и #newsareal1 на нужные. Скрипты можно разместить несколько в одном, а вот виджеты каждый отдельно. В таблице верхнюю часть кода со ссылкой придется так же писать отдельно. В двух пониже можно через запятую прописать эти переменные.

Пример:

Код:

#newsareal1,#newsareal2,#newsareal3 div.topic-title-container:hover ....

ну и далее по тексту.