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

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


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

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



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

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


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

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

альтернатива бегущей строке, с мини управлением.

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

альтернатива бегущей строке, с мини управлением.

Сообщение автор socroment в Вт 4 Июн - 10:21

Это мой первый тутториал, поэтому не судите строго, но может кому пригодиться!

Это альтернативный вариант, бегущей строки на форуме,для phpBB2
(подойдет ли на другие версии движка, не знаю, не пробовала)


Вот так это все будет выглядеть!

и так, как это все делается:
во-первых, Вам понадобятся кнопки управления (картинки)


во-вторых, нужен JS, который я уже загрузила на http://yourjavascript.com/
и получила готовую ссылку...

далее, нужен доступ к шаблонам...
идем в ПА-оформление-шаблоны - общие настройки
выбираем шаблон, где бы Вы хотели видеть бегущую строку
я установила в overall_header

и вставляем вот это код!

Код:
<!-- ротатор новостей -->
<script type="text/javascript" src="http://yourjavascript.com/4383618131/jquery-ticker.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/8143136016/site.js"></script>
<link href="css/ticker-style.css" rel="stylesheet" type="text/css" />
<script src="jquery.ticker.js" type="text/javascript"></script>
<ul id="js-news" class="js-hidden">
<li class="news-item"><a href="#">текст</a></li>
</ul></ul>
<!-- ротатор новостей --> 

сохраняем и публикуем шаблон.

Далее добавляем еще один код в стили css
идем в ПА - оформление - цвета - каскадная таблица стилей css
и добавляем туда вот этот код

Код:
/*блок новостей*/
          .ticker-wrapper.has-js {
     margin: 20px 0px 20px 0px;
     padding: 0px 20px;
     width: 1000px; /*ширина*/
     height: 35px; /*высота*/
     display: block;
     -webkit-border-radius: 10px; /*закругление углов*/
     -moz-border-radius: 10px;  /*закругление углов*/
     border-radius: 10px; 
     background-color: #dadded;
     font-size: 0.72em;
          float: center; /*расположение*/
          border-width: 2px;
          border-style: solid;
          border-color: #57757f;
          }
          .ticker {
     width: 930px;
     height: 23px;
     display: block;
     position: relative;
     overflow: hidden;
     background-color: #dadded;
          }
          .ticker-title {
     padding-top: 10px;
     color: #990000;
     font-weight: bold;
     background-color: #dadded;
       text-transform: uppercase;
          }
          .ticker-content {
     margin: 0px;
     padding-top: 10px;
     position: absolute;
     color: #1F527B;
     font-weight: bold;
     background-color: #dadded;
     overflow: hidden;
     white-space: nowrap;
     line-height: 1.21em;
          }
          .ticker-content:focus {
     none;
          }
          .ticker-content a {
     text-decoration: none;   
     color: #1F527B;
          }
          .ticker-content a:hover {
       text-decoration: underline;   
     color: #0D3059;
          }
          .ticker-swipe {
     padding-top: 11px;
     position: absolute;
     top: 0px;
     background-color: #dadded;
     display: block;
     width: 970px;
     height: 23px;
          }
          .ticker-swipe span {
     margin-left: 1px;
     background-color: #dadded;
     border-bottom: 1px solid #1F527B;
       height: 12px;
     width: 7px;
     display: block;
          }
          .ticker-controls {
     padding: 8px 0px 0px 0px;
     list-style-type: none;
     float: left;
          }
          .ticker-controls li {
     padding: 0px;
     margin-left: 5px;
     float: left;
     cursor: pointer;
     height: 16px;
          width: 16px;
          display: block;
          }
          .ticker-controls li.jnt-play-pause {
          background-image: url('http://s001.radikal.ru/i193/1306/a9/d6faf66c2b38.png');
          background-position: 32px 16px;
          }
          .ticker-controls li.jnt-play-pause.over {
          background-position: 32px 32px;
          }
          .ticker-controls li.jnt-play-pause.down {
          background-position: 32px 0px;
          }
          .ticker-controls li.jnt-play-pause.paused {
          background-image: url('http://s001.radikal.ru/i193/1306/a9/d6faf66c2b38.png');   
          background-position: 48px 16px;
          }
          .ticker-controls li.jnt-play-pause.paused.over {
          background-position: 48px 32px;
          }
          .ticker-controls li.jnt-play-pause.paused.down {
          background-position: 48px 0px;
          }
          .ticker-controls li.jnt-prev {
          background-image: url('http://s001.radikal.ru/i193/1306/a9/d6faf66c2b38.png');
          background-position: 0px 16px;      
          }
          .ticker-controls li.jnt-prev.over {
          background-position: 0px 32px;      
          }
          .ticker-controls li.jnt-prev.down {
          background-position: 0px 0px;      
          }
          .ticker-controls li.jnt-next {
          background-image: url('http://s001.radikal.ru/i193/1306/a9/d6faf66c2b38.png');   
          background-position: 16px 16px;   
          }
          .ticker-controls li.jnt-next.over {
          background-position: 16px 32px;   
          }
          .ticker-controls li.jnt-next.down {   
          background-position: 16px 0px;   
          }
          .js-hidden {
          display: none;
          }
          .no-js-news {
          padding: 0px 0px 0px 0px;
          color: #F8F0DB;
          }
            .left .ticker-swipe {
          /*left: 80px;*/
          }
          .left .ticker-controls,
          .left .ticker-content,
          .left .ticker-title,
          .left .ticker {
          float: left;
          }
          .left .ticker-controls {
          padding-left: 6px;}
          .right .ticker-swipe {
          /*right: 80px;*/
          }
          .right .ticker-controls, .right .ticker-content, .right .ticker-title, .right .ticker {
          float: right;}
          .right .ticker-controls {
          padding-right: 6px;
          }     
/*блок новостей*/

смотрим что получилось =)

на последок....
Можно добавить множество новых строк (сообщений) в ротатор, в том числе можно сделать их кликабельными добавив ссылку вместо #! (в коде, который устанавливали в шаблон)
Код:
<li class="news-item"><a href="ссылка">текст сообщения</a></li>

Всем приятного дня и по больше креативных мыслей! fun

socroment
 
 

Пол : Женщина
Сообщения : 167
Возраст : 29
Карма : Без предупреждений
Благодарности : 9
Регистрация : 2012-12-08

http://www.tosa-style.com/

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

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


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