101 Вопрос Про Слайдер На Главной
#1
Отправлено 08 Апрель 2016 - 11:24
у меня шаблон сияние, необходимо на главную поставить простенький слайдер со сменой 3-4 картинок, перечитала несколько тем, но везде разбираются вопросы как что -либо добавить/изменить\подвинуть в уже установленном слайдере,
а мне бы его для начала просто установить
помогите пожалуйста,с чего начать?
#2
Отправлено 08 Апрель 2016 - 11:56
Veterok (08 Апрель 2016 - 11:24) писал:
у меня шаблон сияние, необходимо на главную поставить простенький слайдер со сменой 3-4 картинок, перечитала несколько тем, но везде разбираются вопросы как что -либо добавить/изменить\подвинуть в уже установленном слайдере,
а мне бы его для начала просто установить
помогите пожалуйста,с чего начать?
Здравствуйте. Все необходимые скрипты для вывода слайдера, у Вас уже подключены. Осталось только дописать код. И добавить недостающие файлы. В шаблоне html найдите строку:
{BODY}
и Перед ней! Вставляем вот такой код:
<!-- Nyvo слайдер который отображается на главной --> {% IF index_page %} <!-- Обёртка, указывающая стиль темы --> <div class="theme-default" style="padding: 1em; display: none;"> <!-- Непосредственный код слайдера --> <div id="slider"> <a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg" alt="" /></a> <a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg" alt="" /></a> <a href="#"><img src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="" /></a> <a href="#"><img src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="" /></a> </div> </div> <!-- Запуск слайдера --> <script type="text/javascript">// <![CDATA[ $(window).load(function() { $('#slider').nivoSlider().parent().show(); }); // ]]></script> {% ENDIF %}
Скачиваем прикрепленный архив, распаковываем на пк. В редакторе шаблонов, с помощью кнопки "Добавить файлы", загрузите все файлы. Чтобы изменить слайды на свои, необходимо подготовить картинки такого же размера и назвать их так же, как прикрепленные (slide1.jpg, slide2.jpg, slide3.jpg, slide4.jpg). И загрузить уже свои файлы.
Слайдер отобразится.
nyvo_slider (2).zip 560,71К 69 Количество загрузок:
#3
Отправлено 08 Апрель 2016 - 13:09
1. количество картинок в слайдере жестко закреплено? т.е. 4 и ни больше ни меньше?
2. при клике на картинку - происходит отсылка на определенный раздел и страницу?
#4
Отправлено 08 Апрель 2016 - 13:16
Veterok (08 Апрель 2016 - 13:09) писал:
1. количество картинок в слайдере жестко закреплено? т.е. 4 и ни больше ни меньше?
2. при клике на картинку - происходит отсылка на определенный раздел и страницу?
1) В шаблоне html найдите строку:
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="" /></a>
добавьте после нее еще столько таких же строк, сколько дополнительных слайдов нужно, заменив название изображения (slide4.jpg) на необходимое
2) В этих же строках, которые отвечают за добавление слайда, есть место для вставки ссылки на какую-либо страницу:
<a href="#"><img src="{ASSETS_IMAGES_PATH}slide4.jpg" alt="" /></a>
Замените во всех слайдах # на ссылки на необходимые страницы. Если # не заменять, то при клике на слайд, ничего не произойдет.
#5
Отправлено 08 Апрель 2016 - 21:04
восстановила шаблоны по бэкапу
#6
Отправлено 09 Апрель 2016 - 04:37
#7
Отправлено 09 Апрель 2016 - 04:55
Veterok (08 Апрель 2016 - 21:04) писал:
восстановила шаблоны по бэкапу
Vaccina (09 Апрель 2016 - 04:37) писал:
вот, такая красота см. картинку
все изменения я производила вчера 08 апреля, и после некорректной работы восстановила бэк ап так же от 8 апреля, который был сделан до всех изменений по слайдеру
#8
Отправлено 09 Апрель 2016 - 04:58
<body>
а необходимо перед:
{BODY}
#9
Отправлено 21 Июль 2016 - 13:05
#10
Отправлено 21 Июль 2016 - 16:35
Gerti (21 Июль 2016 - 13:05) писал:
Здравствуйте.
У Вас была не полностью выполнена инструкция из раздела FAQ.
Добавил Вам необходимые файлы и код слайдера переместил в редакторе шаблонов в шаблон Страница перед контентом.
Проверьте, пожалуйста.
#11
Отправлено 21 Июль 2016 - 16:49
Немного поясню
1) В самом верху требуется полоска черного цвета на ней город Москва написано(вернее там нужно будет установить выбор города, и на этой же полоске в правом углу корзина
2) Телефон перенести в право
3) и если можно расширить слайдер по ширине
Ну и убрать приветствие) Там еще будет много всего но помогите начать хотя бы с этого)
#12
Отправлено 22 Июль 2016 - 02:24
2. В main.css найдите:
#contactInfo { position: absolute; font-size: 1.1em; top: 10px; left: 170px; }
замените на:
#contactInfo { position: absolute; font-size: 1.1em; top: 10px; right: 0; }3. В main.css найдите:
.content_catalog { padding-top: 80px; vertical-align: top; }
замените на:
.content_catalog { padding-top: 80px; vertical-align: top; display: none; }l
далее найдите:
.content_body { vertical-align: top; }
замените на:
.content_body { vertical-align: top; width: 960px; }4. В шаблоне HTML найдите:
{% IF PAGE_NAME %} <div class="page-headline"> <h1>{PAGE_NAME}</h1> </div> {% ENDIF %}
замените на:
{% IF PAGE_NAME %} {% IFNOT index_page %} <div class="page-headline"> <h1>{PAGE_NAME}</h1> </div> {% ENDIF %} {% ENDIF %}
#13
Отправлено 22 Июль 2016 - 10:49
Пока просто город указать в левом углу на черной полосе а в правом уголке должна расположиться корзина.
А еще вот, поиск перенести на серый прямоугольник в шапке . И если можно так сделать чтобы сам прямоугольник поиска был обведен красным прямоугольником. см. скрин2
Вообще идея такова как на скрин 3 вот это хотелось бы воплотить помогите пожалуйста)
#14
Отправлено 22 Июль 2016 - 22:24
Vaccina (22 Июль 2016 - 02:24) писал:
{% IF PAGE_NAME %} <div class="page-headline"> <h1>{PAGE_NAME}</h1> </div> {% ENDIF %}
замените на:
{% IF PAGE_NAME %} {% IFNOT index_page %} <div class="page-headline"> <h1>{PAGE_NAME}</h1> </div> {% ENDIF %} {% ENDIF %}
Вот ни как не могу найти этого нет ни где (
#15
Отправлено 23 Июль 2016 - 03:51
Gerti (22 Июль 2016 - 10:49) писал:
Пока просто город указать в левом углу на черной полосе а в правом уголке должна расположиться корзина.
А еще вот, поиск перенести на серый прямоугольник в шапке . И если можно так сделать чтобы сам прямоугольник поиска был обведен красным прямоугольником. см. скрин2
Вообще идея такова как на скрин 3 вот это хотелось бы воплотить помогите пожалуйста)
<!-- Корзина --> <div id="cartInfo"> <a href="{CART_URL}">в корзине товаров на</a>: <span id="cartSum"> {% IF cart_count_empty %} <span>0</span> {CURRENCY_NAME} {% ELSE %} {% FOR cart_sum %} <span class="num">{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br /> {% ENDFOR %} {% ENDIF %} </span> </div> <!-- end Корзина -->
далее найдите:
<div class="container" id="header">
после него вставьте:
<div class="top_panel"> <!-- Геотаргетинг --> <div class="your_city"> <script type="text/javascript"> window.onload = function () { jQuery("#user-city").text(ymaps.geolocation.city); } </script> <script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script> <span>Ваш город: </span><span id="user-city"></span> </div> <!-- end Геотаргетинг --> <!-- Корзина --> <div id="cartInfo"> <a href="{CART_URL}">в корзине товаров на</a>: <span id="cartSum"> {% IF cart_count_empty %} <span>0</span> {CURRENCY_NAME} {% ELSE %} {% FOR cart_sum %} <span class="num">{cart_sum.NOW_WITH_DISCOUNT | money_format}</span><br /> {% ENDFOR %} {% ENDIF %} </span> </div> <!-- end Корзина --> </div>
В main.css найдите:
.container { position: relative; width: 960px; margin: 0px auto; }
после него пропишите:
#header { width: 100%; } .top_panel { background: #000; padding: 15px; height: 18px; } .top_panel .your_city { color: #fff; float: left; }
далее найдите:
#cartInfo { position: absolute; font-size: 13px; top: 54px; left: 380px; white-space: nowrap; overflow: hidden; height: 20px; width: 340px; }
замените на:
#cartInfo { font-size: 14px; float: right; white-space: nowrap; overflow: hidden; height: 20px; color: #fff; }
далее найдите:
#cartInfo a { color: #000; text-transform: uppercase; padding: 5px 0px 5px 45px; }
замените на:
#cartInfo a { color: #fff; text-transform: uppercase; }
В шаблоне HTML найдите:
<input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif?design=shine" />
замените на:
<input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.png?design=shine" />
и в раздел редактор шаблонов загрузите прикрепленный к этому посту файл(иконку поиска)
В main.css найдите:
.b_page {background: url({ASSETS_IMAGES_PATH}header_page.png?design=shine) no-repeat center top;}
замените на:
.b_page {background: url({ASSETS_IMAGES_PATH}header_page.png?design=shine) no-repeat center 30px;}
далее найдите:
#contactInfo { position: absolute; font-size: 1.1em; top: 10px; right: 0; }
замените на:
#contactInfo { position: absolute; font-size: 18px; top: 70px; right: 0; line-height: 24px; }
далее найдите:
#search { height: 35px; float: right; padding-top: 45px; padding-right: 15px; width: 245px; }
замените на:
#search { height: 28px; width: 245px; position: absolute; top: 105px; right: 20%; background: #fff; border: 2px solid red; }
далее найдите:
#search .submit { cursor: pointer; height: 28px; width: 28px; }
замените на:
#search .submit { cursor: pointer; height: 28px; width: 28px; background: red; }
В шабоне HTML после:
<div class="clr"></div> </div> </form> </div> <!-- end Поиск -->
вставьте:
<div class="catalog"><div class="catalog"> <div>Каталог товаров <div class="hide_block"> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li {% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}> <a href="{catalog.URL}">{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul> </div> </div> </div>
В main.css добавьте:
.catalog { position: absolute; top: 105px; right: 50%; } .catalog > div { background: #fff; padding: 10px; position: relative; width: 100%; } .catalog .hide_block { position: absolute; top: 35px; left: 0; background: #fff; border: 1px solid #ccc; width: 100%; display: none; z-index: 99; } .catalog:hover .hide_block { display: block; } .catalog .hide_block li a { display: block; padding: 10px; color: #000; }
Gerti (22 Июль 2016 - 22:24) писал:
Вот ни как не могу найти этого нет ни где (
Простите, перепутала, искать данный код необходимо в шаблоне Страница
#16
Отправлено 23 Июль 2016 - 10:48
Единственно вот по поводу иконки для скачивания, что то я как то ее совсем не найду((
И еще как бы расширить по длине строку поиска, чтобы был чуть меньше серой области
#17
Отправлено 23 Июль 2016 - 11:02
position: absolute;
top: 105px;
right: 50%;
}
.catalog > div {
background: #fff;
padding: 10px;
position: relative;
width: 100%;
}
.catalog .hide_block {
position: absolute;
top: 35px;
left: 0;
background: #fff;
border: 1px solid #ccc;
width: 100%;
display: none;
z-index: 99;
}
.catalog:hover .hide_block {
display: block;
}
.catalog .hide_block li a {
display: block;
padding: 10px;
color: #000;
}
После последних действий все уехало вверх... как подправить?
И еще почему то под страницей которая уехала в верх на шапке еще и каталог отображается... тоже как то так вылез там
И сразу вопрос про кнопки как на скрине 3 очень желаю сделать такие же)) Только кнопка КАТАЛОГ ФАБРИКИ салатного цвета как в логотипе, а остальные такие как на скрине... Возможно ли это реализовать?
#18
Отправлено 25 Июль 2016 - 11:04
#19
Отправлено 25 Июль 2016 - 11:29
Gerti (23 Июль 2016 - 11:02) писал:
position: absolute;
top: 105px;
right: 50%;
}
.catalog > div {
background: #fff;
padding: 10px;
position: relative;
width: 100%;
}
.catalog .hide_block {
position: absolute;
top: 35px;
left: 0;
background: #fff;
border: 1px solid #ccc;
width: 100%;
display: none;
z-index: 99;
}
.catalog:hover .hide_block {
display: block;
}
.catalog .hide_block li a {
display: block;
padding: 10px;
color: #000;
}
После последних действий все уехало вверх... как подправить?
И еще почему то под страницей которая уехала в верх на шапке еще и каталог отображается... тоже как то так вылез там
И сразу вопрос про кнопки как на скрине 3 очень желаю сделать такие же)) Только кнопка КАТАЛОГ ФАБРИКИ салатного цвета как в логотипе, а остальные такие как на скрине... Возможно ли это реализовать?
В шаблоне HTML найдите блок
<div class="catalog"><div class="catalog"> <div>Каталог товаров <div class="hide_block"> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li {% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}> <a href="{catalog.URL}">{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul> </div> </div> </div>и замените его на
<div class="catalog"> <div>Каталог товаров <div class="hide_block"> <ul> {%IFNOT catalog_empty %} {% FOR catalog %} {% IFNOT catalog.HIDE %} <li {% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}> <a href="{catalog.URL}">{catalog.NAME}</a> </li> {% ENDIF %} {% ENDFOR %} {% ENDIF %} </ul> </div> </div> </div>
Не могли бы Вы уточнить как именно Вы хотите расширить поле Поиска? По высоте или по длине?
Что касаемо иконки, то видимо модератор забыла прикрепить ее к сообщению. Уточните, пожалуйста, как должна выглядеть иконка? Как на присланном скриншоте?
Вы можете загрузить любую иконку с именем search_but.png в разделе Сайт-> Редактор шаблонов-> в левой колонке Добавить файл .
#20
Отправлено 25 Июль 2016 - 11:39
И далее по поводу кнопок все в силе вопрос. И еще на кнопке КАТАЛОГ ФАБРИКИ при нажатии не выходит каталог а хотелось бы чтобы открывался см скрин.
Количество пользователей, читающих эту тему: 1
0 пользователей, 1 гостей, 0 анонимных