Эта модификация добавляет всплывающий виджет Twitter на ваш форум
Нужно сделать 3 небольшие правки.
Обратите внимание, что это работает почти на всех версиях VB, я проверял его на 3.8.x и 4.x. НДля VB 4.x необходимо добавить коды в additional.css шаблон, а в версию VB 3.8 добавить в его в основную таблицу CSS.
Итак начнем:
1) Зайдите на AdminCP, а затем стили и шаблоны. Найти шаблон, и в большинстве случаев "headinclude" это лучшее место, чтобы добавить свой Javascript или Jquery кодов. В самый низ, и добавить следующий код
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".twitbox").hover(function(){
jQuery(".twitbox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".twitbox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
2) Теперь мы должны добавить CSS, вернитесь к стилям шаблонов в (AdminCP) и в шаблонах выбрать «Основные CSS!" В самом низу в последнее окно "Дополнительные CSS Определения" добавьте следующий код ниже всех других кодов:
Code:
.twitbox {
float:right;
width:288px;
height:345px;
background: url(images/twitbox.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap iframe {margin:-1px}
3) Перейдите на этот сайт
https://twitter.com/about/resources/widgets
Сделайте и выберите свой виджет который больше всего понравиться!
Когда вы попадете на страницу виджетов вы должны нажать вебсайт и выбрать наиболее подходящий виджет.
Теперь вы увидите 4 различные параметры виджета, я рекомендую профиль виджет! Это идеально подходит обновления новостей в Twitter. Так что выбирайте профиль виджет.
Настройки: Вы можете оставить размер как он есть, или выбрать другой размер в ширину и высоту. Он также попросит вас сделать прокрутку, вы убедитесь, что нажали пометить ДА!
Когда вы закончите, нажмите Готово!
4) Теперь добавьте в код ниже, свой код в место указанное синим цветом. После добавления кода, полный код должен быть готов!
Обратите внимание на синий текст в код ниже:
Code:
<div class="twitbox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='twitboxwrap'>PUT THE WIDGET CODE HERE</div></span></div></div>
Синий текст должен быть заменен кодом IFRAME:
Замените этот код на свой IFRAME полученный в виджетах Твиттера-> "PUT THE WIDGET CODE HERE" IFRAME.
5) Когда все доделали поместите этот код в шаблон Forumhome шаблона.
6) Теперь загрузите изображение "twitbox.png", в корень форума в папку "
images"
Все готово!
Внимание если виджет не будет скользить внутри форума вместе с прокруткой, попробуйте добавить код в HEADINCLUDE например после кода
Code:
<!-- CSS Stylesheet -->
Источник:
http://www.vbulletin.org/forum/showthread.php?p=2354715
Twitter SlideBox (Виджет)
