LedyMari (08 Сентябрь 2015 - 09:26) писал:
здравствуйте,
http://xn--d1abblbnk7a.xn--p1ai/
1. под слайдами расположены баннеры из шаблона (доставка, оплата и т.д.) как мне поменять картинки и сделать переходы с этих баннеров на разделы сайта?
2. как сделать переходы со слайдов на нужные разделы сайта?
шаблон "лазурь"
Здравствуйте.
1. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
#topsl .block .block-title span:after {position: absolute;content: "";background: url("{ASSETS_IMAGES_PATH}ico-shoppolicy.png") no-repeat -78px top;left: 50%;top: 4px;margin-left: -39px;height: 78px;width: 78px;}
#topsl .block.money-back .block-title span:after {background-position: -234px top;}
#topsl .block.orders-247 .block-title span:after {background-position: -390px top;}
#topsl .block.secured-payment .block-title span:after {background-position: -546px top;}
#topsl .block .block-title:hover {cursor:pointer;}
#topsl .block:hover .block-title {color: #3cabda;}
#topsl .block:hover .block-title:before {border-color: #3cabda;cursor:pointer;}
#topsl .block:hover .block-title span:before {background: #3cabda;opacity: 1;filter: alpha(opacity=100);}
#topsl .block:hover .block-title span:after {background-position: 0px top;}
#topsl .block.money-back:hover .block-title span:after {background-position: -156px top;}
#topsl .block.orders-247:hover .block-title span:after {background-position: -312px top;}
#topsl .block.secured-payment:hover .block-title span:after {background-position: -468px top;}
Замените на:
#topsl .block .block-title span:after {position: absolute;content: "";/* background: url("{ASSETS_IMAGES_PATH}ico-shoppolicy.png") no-repeat -78px top; */left: 50%;top: 4px;margin-left: -39px;height: 78px;width: 78px;}
#topsl .block.free-shipping .block-title span:after {background: url("{ASSETS_IMAGES_PATH}название изображения1") no-repeat;}
#topsl .block.money-back .block-title span:after {background: url("{ASSETS_IMAGES_PATH}название изображения2") no-repeat;}
#topsl .block.orders-247 .block-title span:after {background: url("{ASSETS_IMAGES_PATH}название изображения3") no-repeat;}
#topsl .block.secured-payment .block-title span:after {background: url("{ASSETS_IMAGES_PATH}название изображения4") no-repeat;}
#topsl .block .block-title:hover {cursor:pointer;}
#topsl .block:hover .block-title {color: #3cabda;}
#topsl .block:hover .block-title:before {border-color: #3cabda;cursor:pointer;}
#topsl .block:hover .block-title span:before {background: #3cabda;opacity: 1;filter: alpha(opacity=100);}
#topsl .block:hover .block-title span:after {/* background-position: 0px top; */}
#topsl .block.money-back:hover .block-title span:after {/* background-position: -156px top; */}
#topsl .block.orders-247:hover .block-title span:after {/* background-position: -312px top; */}
#topsl .block.secured-payment:hover .block-title span:after {/* background-position: -468px top; */}
Вместо название изображения1 - название изображения4 вставьте названия иконок соответственно, которые вы загрузите по кнопке "Добавить файлы" в Редакторе шаблонов.
Размер иконок должен составлять 78x78px.
2. Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, добавьте в конце код:
.slides_container img {transform:none !important;}
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Шаблоны -> HTML, найдите код:
<div u="slides" class="slides_container">
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" />
</div>
<div>
<img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" />
</div>
</div>
Замените на:
<div u="slides" class="slides_container" >
<div>
<a href="ссылка на страницу 1"><img u="image" src="{ASSETS_IMAGES_PATH}slide1.png?design=azure" /></a>
</div>
<div>
<a href="ссылка на страницу 2"><img u="image" src="{ASSETS_IMAGES_PATH}slide2.png?design=azure" /></a>
</div>
<div>
<a href="ссылка на страницу 3"><img u="image" src="{ASSETS_IMAGES_PATH}slide3.png?design=azure" /></a>
</div>
<div>
<a href="ссылка на страницу 4"><img u="image" src="{ASSETS_IMAGES_PATH}slide4.png?design=azure" /></a>
</div>
<div>
<a href="ссылка на страницу 5"><img u="image" src="{ASSETS_IMAGES_PATH}slide5.png?design=azure" /></a>
</div>
</div>
Вместо слов ссылка на страницу 1 - ссылка на страницу 5 вставьте ссылки соответственно.