Размещение бегущей строки
Обращаем Ваше внимание:
Служба технической поддержки не предоставляет консультаций по редактированию шаблонов.
При необходимости Вы можете разместить на какой-либо из страниц своего сайта (или в дополнительных блоках) бегущую строку. Пример того, как может выглядеть строка на сайте, Вы можете посмотреть, пройдя по следующей ссылке.
Существуют два способа размещения бегущей строки:
- Реализация стандартными средствами HTML. О том, как это сделать, Вы можете прочитать в соответствующей инструкции.
- Реализация средствами Javascript, основное отличие тут - более плавная прокрутка. Именно этот способ мы и рассмотрим в инструкции ниже.
Для того чтобы самостоятельно создать бегущую строку, Вам необходимо получить расширенные права доступа к системе управления. Получить их Вы можете самостоятельно, следуя инструкции по ссылке.
После того как расширенные права доступа получены, можно приступать к работе.
Рассмотрим весь процесс размещения строки на примере приведенного выше образца.
Шаг 1
Перейдите к разделу "Настройки" - "Шаблоны и файлы".
Шаг 2
Выберите и откройте для редактирования нужный Вам шаблон. В нашем случае - это "_Главная. Верх".
Шаг 3
В открывшемся шаблоне пропишите путь до глобального скрипта.
<script type="text/javascript" src="/g/module/megamarquee/js//jquery.megamarquee.js"></script>
Также необходимо проверить наличие в шаблоне следующего пути (и тоже прописать, если такая строка отсутствует):
<script type="text/javascript" src="/g/libs/jquery/1.10.2/jquery.min.js"></script>
Шаг 4
Сохраните изменения в шаблоне.
Шаг 5
Далее перейдите в список файлов.
Шаг 6
В открывшемся окне найдите и откройте файл styles.less.
Или же styles.less.css - если именно он был изменен позднее (дата изменения в строке этого файла позднее, чем у styles.less).
В случае если и этот файл отсутствует, то необходимо найти файл styles.scss либо styles.css.
Шаг 7
В открывшемся файле вставьте стили для блока.
/*********marquee***********/
.marquee13 {margin:0 auto; padding:20px 30px; width:720px; position:relative;}
.marquee13 .marquee-wrapper {border:1px solid #999; margin:0; padding:0; width:100%; overflow:hidden;}
.marquee {margin:0; padding:20px 30px; position:relative;}
.marquee .marquee-wrapper {border:1px solid #999; margin:0; padding:0; width:100%; overflow:hidden;}
.marquee-inner {margin:0; padding:0; width:30000px; float:left; display:inline;}
.marquee-item {margin:0; padding:0; float:left; display:inline;}
.marquee-item p {margin:0;}
.marquee-cleaner {margin:0; padding:0; height:0; font-size:0; line-height:0; overflow:hidden; clear:both;}
Обратите внимание!
- Вы можете изменять значения в стилях, если хотите отредактировать длину и отступы бегущей строки.
Шаг 8
И сохраните изменения в файле.
Шаг 9
Затем снова вернитесь к редактированию шаблона "_Главная. Верх".
Шаг 10
И вставьте скрипт бегущей строки, обернув его в {literal}.
Шаг 11
Сохраните изменения в шаблоне.
Шаг 12
Теперь Вам необходимо разместить строку на нужной странице или в нужном блоке. Для этого перейдите к разделу "Страницы".
Шаг 13
Нажмите на нужную Вам страницу и выберите в раскрывшемся списке пункт "Редактировать содержимое".
Шаг 14
Откройте текст страницы (или, если Вы хотите разместить текст в общих блоках, перейдите к вкладке "Общие блоки" и откройте для редактирования нужный блок).
Шаг 15
В текстовом редакторе перейдите к HTML-редактору.
Шаг 16
Разместите код бегущей строки с нужным Вам текстом.
<div class="marquee13">
<div class="marquee-wrapper">
<div class="marquee-inner">
<div class="marquee-item">ТЕКСТ БЕГУЩЕЙ СТРОКИ</div>
</div>
<div class="marquee-cleaner"></div>
</div>
</div>
Шаг 17
Нажмите "Ок" в HTML-редакторе (или "Обновить", в зависимости от версии редактора).
Шаг 18
И сохраните изменения в текстовом редакторе.
Шаг 19
Перейдите на сайт. На нужной странице должна появиться бегущая строка.
Обратите внимание!
- Длина строки, отступы сверху, снизу, справа и слева будут зависеть от параметров, указанных Вами в файле стиля (шаг 7).
Обратите внимание!
- Данная инструкция является примером реализации описанного функционала. Показанные в инструкции результаты могут отличаться от реальных по причине специфики шаблонов конкретного сайта или иных технических нюансов.