Устаканить
#1
Отправлено 28 Март 2014 - 18:09
Прикладываю скрин, то что необходимо сделать. На других сайтах получались некоторые штуки (например сдвиг слайдера и меню), но здесь почему то не получается (все съезжает)
1. Слайдер сдвинуть вправо до упора,
2. Левое меню поднять под шапку
3. Верхнее меню каждую кнопку сделать отдельным блоком и залить свой фон
4. В этом блоке - Название магазина и координаты
5. Этот блок для АКЦИИ
6. Этот блок - для заказать обратный звонок с картинкой
7, Корзина - весь блок заменить на свою картинку (чтобы осталось все кликабельно)
8. Поиск выровнять с меню
#2
Отправлено 28 Март 2014 - 19:13
Samcopy (28 Март 2014 - 18:09) писал:
Прикладываю скрин, то что необходимо сделать. На других сайтах получались некоторые штуки (например сдвиг слайдера и меню), но здесь почему то не получается (все съезжает)
1. Слайдер сдвинуть вправо до упора,
2. Левое меню поднять под шапку
3. Верхнее меню каждую кнопку сделать отдельным блоком и залить свой фон
4. В этом блоке - Название магазина и координаты
5. Этот блок для АКЦИИ
6. Этот блок - для заказать обратный звонок с картинкой
7, Корзина - весь блок заменить на свою картинку (чтобы осталось все кликабельно)
8. Поиск выровнять с меню
1,2. В шаблоне HTML перенесите код
{% IF index_page %} <div class="flexslider" id="autumn-slider" style=" height: 300px; width: 600px; "> <ul class="slides"> <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li> <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li> <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg"></a></li> </ul> </div> {% ENDIF %}чуть ниже, вставьте его после
<div class="column two-third">
3. Вставляйте код в style.css
#megamenu li:nth-child(1) { background: #F00;}для каждого пункта меню, номер которого указан в круглых скобках. Приведенный код зальет первый пункт меню красным. Следующий, например, зальет первый - красным, второй - синим.
#megamenu li:nth-child(1) { background: #f00;} #megamenu li:nth-child(2) { background: #00f;}
7. Если просто картинку хотите, тогда в HTML замените код
<!-- Корзина --> <div id="header_shopping_cart"> <div id="shopping_cart"> <a href="{CART_URL}" title="Перейти в корзину"> {% IF cart_count_empty %} <span class="ajax_cart_no_product">Корзина пуста</span> {% ELSE %} <span class="ajax_cart_quantity">{CART_COUNT_TOTAL} товар{CART_COUNT_TOTAL | gen_word_end("","а","ов")}</span> {% ENDIF %} <span class="down_arrow_dark"></span> </a> </div> </div>на такой
<!-- Корзина --> <div id="header_shopping_cart"> <a href="{CART_URL}" title="Перейти в корзину"></a> </div>Далее в style.css замените
#header_shopping_cart{position: static;width:170px;float:right;clear:both;margin-top:26px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box; background:#f7f7f7 url('{ASSETS_IMAGES_PATH}cart_red.png') no-repeat 12px;border:1px solid #cecece;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px; box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05);-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.05)}на такой код
#header_shopping_cart{position: static;float:right;clear:both;margin-top:26px;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;}и после него добавьте
#header_shopping_cart a { display: block; width: 100px; height: 100px; background: url({ASSETS_IMAGES_PATH}cart_img.png) no-repeat center center;}width: 100px; height: 100px; - ширина и высота картинки соответственно, cart_img.png - ее имя.
8. Сперва в HTML перенесите блок кода
<div id="header_user_info"> <!-- Если в тарифном плане подключен модуль сравнения товаров --> {% IF TARIFF_FEATURE_GOODS_COMPARE %} <!-- Если не выключен модуль сравнения товаров, то покажем этот блок --> {% IFNOT SETTINGS_COMPARE_DISABLE %} {% IF COMPARE_GOODS_COUNT=0 %} <div class="menuCompare" style="visibility: hidden;"> <em>Ваш список сравнения пуст</em> </div> {% ELSE %} <div class="menuCompare"> <em>Сейчас на <a href="{COMPARE_URL}">сравнении</a> {COMPARE_GOODS_COUNT} товар{COMPARE_GOODS_COUNT | gen_word_end("","а","ов")}.</em><br /> </div> {% ENDIF %} {% ENDIF %} {% ENDIF %} <!-- END Если в тарифном плане подключен модуль фильтров по товарам --> </div>ниже, после строки
<!-- /Форма поиска -->он выводит "На сравнении n товаров" - будет перекрываться, если просто подвинуть поиск выше.
Теперь отрегулируем отступ сверху у поиска. В шаблоне style.css в коде
#search_block_top{position:static;float:right;margin:26px 10px 0 0}замените 26 на 15 - по усмотрению.
Остальные изменения скорее всего повлекут нарушение адаптивности. Если вас это устроит, мы напишем инструкцию.
#3
Отправлено 28 Март 2014 - 21:04
- после изменения п.1 и 2 - организовалось пространство между левым меню и контентом. Скорее всего контент надо сдвинуть влево как-то
- по пунктам 4-5-6 не соглашусь по поводу потери адаптивности, на сайте косметики Аккаунт SL-237674 у меня вставлены в шапку два блока, но по опыту знаю, что они двигают за собой корзину с поиском, поэтому и попросилась тут на подмогу (я буду неделю их возить туда-сюда). Была реализована вставка картинки и откоординачена как надо
#4
Отправлено 29 Март 2014 - 04:46
.two-third { float: right; width: 1030px; }замените на:
.two-third { float: right; width: 75%; }при моем разрешении, блок каталога был ниже контента.
4,5,6. В style.css найдите:
#megamenu { clear: both; height: 54px; left: 400px; padding-top: 1px; position: absolute; }замените на:
#megamenu { float: left; height: 54px; padding-top: 1px; }далее в HTML вставляем блоки:
<!-- Блок навигации --> {% IFNOT menu_empty %} <ul id="megamenu"> {% FOR menu %} {% FOR header %} {% FOR links %} <li class="root_menu {% IF menu.header.links.SELECTED %}active{% ENDIF %}" > <a href="{menu.header.links.URL}" class="root_link" {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %} >{menu.header.links.NAME}</a> </li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul> {% ENDIF %}перед ним вставляем:
<div style="float:left;">после него:
<div class="clear"></div> <div class="banner">текст\картинка внутри баннера</div> <div class="banner">текст\картинка внутри баннера</div> <div class="banner">текст\картинка внутри баннера</div> <div class="clear"></div> </div>и в style.css добавляем:
.banner{ float:left; width:200px; /* ширина блоков */ }далее внесите свою информацию в данные баннеры
#5
Отправлено 29 Март 2014 - 09:11
Требую добавить в интерфейс прыгающий от счастья смайлик -)))))))))))
1. По инструкции у меня только надписи в шапке вышли (без блоков), вставила свои картинки (наверно не правильно), и они не желают расширяться. Как регулировать их ширину? Мне нужно, чтобы они уперлись в Корзину.
2. Вдогонку спрашиваю - справа от слайдера у меня есть место, хочется туда поставить тоже блок с картинкой. Это возможно?
3. Левое меню: у меня есть картинка, которую хочется использовать в виде подсветки на позицию меню, при указателе мыши на него. Как это осуществить? Уточняю, не просто выбрать цвет, а именно использовать блок с картинкой.(как на скрине)
#6
Отправлено 29 Март 2014 - 16:15
Samcopy (29 Март 2014 - 09:11) писал:
Требую добавить в интерфейс прыгающий от счастья смайлик -)))))))))))
1. По инструкции у меня только надписи в шапке вышли (без блоков), вставила свои картинки (наверно не правильно), и они не желают расширяться. Как регулировать их ширину? Мне нужно, чтобы они уперлись в Корзину.
2. Вдогонку спрашиваю - справа от слайдера у меня есть место, хочется туда поставить тоже блок с картинкой. Это возможно?
3. Левое меню: у меня есть картинка, которую хочется использовать в виде подсветки на позицию меню, при указателе мыши на него. Как это осуществить? Уточняю, не просто выбрать цвет, а именно использовать блок с картинкой.(как на скрине)
Начну с конца:
3)Загрузите картинку в раздел Сайт - Редактор шаблонов (допустим картинка с именем bg.jpg) и в style.css добавьте:
.accordion li:hover { background: url({ASSETS_IMAGES_PATH}bg.jpg) }
2) В шаблоне HTML найдите код
{% IF index_page %} <div class="flexslider" id="autumn-slider" style=" height: 300px; width: 600px; "> <ul class="slides"> <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg"></a></li> <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide2.jpg"></a></li> <li><a href="#"><img src="{ASSETS_IMAGES_PATH}slide3.jpg"></a></li> </ul> </div> {% ENDIF %}и после него добавьте:
<div class="headimage"><img src="{ASSETS_IMAGES_PATH}image.jpg"></div>
image.jpg - это название картинки, загруженной в раздел Сайт - Редактор шаблонов.
Далее в style.css добавьте:
.headimage { float:right; }
1) Вы хотите растянуть картинки или увеличитьпространство между блоками?
#7
Отправлено 29 Март 2014 - 21:42
2. Картинку вставила, но она не рядом со слайдером встала ( на Главной), а с контентом. И также она отображается на всех остальных страницах (что не нужно, особенно на каталоге, где нарушает выдачу категорий). И заодно ее ширину как регулировать?
3. Подсветка встала, а нельзя ее идентично образцу реализовать? На скрине видно - она немного сдвинута влево относительно строк меню
#8
Отправлено 30 Март 2014 - 21:38
#9
Отправлено 31 Март 2014 - 07:54
Samcopy (30 Март 2014 - 21:38) писал:
1) Что касается изображений. У вас шаблон адаптивный и при разных экранах изображения расстояние до края совершенно разные, поэтому нельзя точно подобрать значение, на которое нужно увеличить.
2) Сейчас картинки нет, добавьте ее на сайт, нужно наглядно посмотреть. Только код:
<div class="headimage"><img src="{ASSETS_IMAGES_PATH}image.jpg"></div>заключите в
{% IF index_page %} <div class="headimage"><img src="{ASSETS_IMAGES_PATH}image.jpg"></div> {% ENDIF % }
3) Единственное что можно сделать, это: Найдите в main.css строчки:
.accordion li:hover { ... }
и между скобок добавьте:
margin-left: -10px; padding-left: 10px; background-repeat: no-repeat;
#10
Отправлено 31 Март 2014 - 09:35
п.3 - сдвиг образовался, но исчезла зеленая накладка, как ее вернуть
#11
Отправлено 31 Март 2014 - 09:59
Samcopy (31 Март 2014 - 09:35) писал:
п.3 - сдвиг образовался, но исчезла зеленая накладка, как ее вернуть
изменения произвели.
#12
Отправлено 31 Март 2014 - 10:20
Большущее спасибо.
#13
Отправлено 31 Март 2014 - 14:14
1.На главной карусель уехала за экран.
2.Как мне поставить картинку (не сменить цвет) на кнопку быстрого заказа. Смогла добавить туда подсветку (чтобы она не исчезла), это в каталоге, а на главной в карусели не добавилась. Нужно, чтобы и там и там сменилось.
3.Как расположить в Каталоге товары по 5 шт в ряд и соответственно уменьшить размер блока с картинками категорий
4.Можно ли в блок с категориями товаров в Каталоге вставить свою подложку-картинку (чтобы не на белом фоне картинки были)? Для примера загрузила подложку - bg4.png
#14
Отправлено 31 Март 2014 - 17:22
#15
Отправлено 01 Апрель 2014 - 04:24
2.В style.css найдите примерно сл.код(ищите по первой строке):
input.exclusive, #paymentForm input, a.exclusive { -moz-box-sizing: border-box; background: #573D2E !important; border: 1px solid #A40F18; border-radius: 2px; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px 0 rgba(0, 0, 0, 0.2); color: #FAFAFA !important; cursor: pointer; display: inline-block; font: inherit !important; padding: 6px 12px; text-decoration: none; }и измените
#573D2E !importantна
url('ссылка на фон для кнопки') no-repeat left topточку с запятой не потеряйте в конце)
3.конкретное кол-во категорий лучше не выставлять иначе адаптивность улетит далеко и надолго, а уменьшить блоки можно, в style.css найдите:
#category_view_type.grid_view #product_list li { border: 0 none; display: -moz-inline-stack; margin: 0 15px; min-height: 200px; padding: 0; position: relative; text-align: center; vertical-align: top; width: 200px; z-index: 100; } #category_view_type.grid_view #product_list .product_image_wrapper { background: none repeat scroll 0 0 #FFFFFF; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1); height: 200px; overflow: hidden; padding: 8px; position: relative; width: 200px; }и уменьшите значение width(ширина) и height(высота) в обоих блоках
4.в style.css найдите:
#category_view_type.grid_view #product_list .product_image_wrapper { background: #FFFFFF; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.094), 0 1.5px 1.5px 0 rgba(0, 0, 0, 0.2), 0 2px 1.5px 0 rgba(0, 0, 0, 0.1); height: 200px; overflow: hidden; padding: 8px; position: relative; width: 100px; }и измените значение background по примеру 2го пункта
#16
Отправлено 01 Апрель 2014 - 10:00
2. Если менять в этом коде бекграунд, то меняется только кнопка "Показать" в фильтре (сама в шоке)
3. Получилось как хотела, но теперь названия категорий не лезут и названия товаров, как подправить?
4. Встало, но кособоко почему-то
Посмотрите пжлст еще код фильтра, в нтмл он отсутствует, с товара не смогла вытащить, мне нужно его поставить в левое меню.
В категории BANAX-BURST почему то не выводится в фильтре шкала с ценой
Прозевала момент, когда в футере все съехало (бэкапы не помогают вернуть), пропал раздел Статьи и Видеообзоры, с них содержимое переехало в Новости
#17
Отправлено 01 Апрель 2014 - 13:27
#18
Отправлено 02 Апрель 2014 - 09:21
Samcopy (01 Апрель 2014 - 10:00) писал:
2. Если менять в этом коде бекграунд, то меняется только кнопка "Показать" в фильтре (сама в шоке)
3. Получилось как хотела, но теперь названия категорий не лезут и названия товаров, как подправить?
4. Встало, но кособоко почему-то
Посмотрите пжлст еще код фильтра, в нтмл он отсутствует, с товара не смогла вытащить, мне нужно его поставить в левое меню.
В категории BANAX-BURST почему то не выводится в фильтре шкала с ценой
Прозевала момент, когда в футере все съехало (бэкапы не помогают вернуть), пропал раздел Статьи и Видеообзоры, с них содержимое переехало в Новости
Help....help....
#19
Отправлено 02 Апрель 2014 - 12:12
#20
Отправлено 02 Апрель 2014 - 13:03
2) У Вас сейчас стоит изображение на этих кнопках. Если нужно его заменить, то найдите код в style.css
input.exclusive, #paymentForm input, a.exclusive{display:inline-block;background: url({ASSETS_IMAGES_PATH}cat-bg.png) no-repeat left top;color:#fafafa!important;border:1px solid #a40f18;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;
и поменяйте cat-bg.png на нужное изображение.
3) В style.css найдите:
#category_view_type.grid_view #product_list h5 a { display: block; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 150px; }
и замените на:
#category_view_type.grid_view #product_list h5 a { display: block; height: 35px; overflow: hidden; text-overflow: ellipsis; width: 150px; }
4) Если Вы о том, что правая и нижняя часть подложки не видна, то нужно просто чуть уменьшить фоновое изображение.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных