Вторая Строка Меню И Тд.
#1
Отправлено 28 Июль 2014 - 11:39
Рис 1:
1. Поднять контакты повыше.
2. Переместить корзину и поиск в обозначенные места.
3. Добавить вторую строку меню. Соответствующие настройки в Сайт-Меню-Верхнее2 уже сделаны.
4. Убрать указанную надпись.
5. Передвинуть плюсики в меню Каталога правее.
Рис 2:
6. Убрать указанную надпись.
Рис 3:
7. Надпись переместить в центр, изменить шрифт и цвет шрифта.
#2
Отправлено 28 Июль 2014 - 12:18
alexfeb27 (28 Июль 2014 - 11:39) писал:
Рис 1:
1. Поднять контакты повыше.
2. Переместить корзину и поиск в обозначенные места.
3. Добавить вторую строку меню. Соответствующие настройки в Сайт-Меню-Верхнее2 уже сделаны.
4. Убрать указанную надпись.
5. Передвинуть плюсики в меню Каталога правее.
Рис 2:
6. Убрать указанную надпись.
Рис 3:
7. Надпись переместить в центр, изменить шрифт и цвет шрифта.
В main.css:
1. Строку:
h4{padding-bottom:20px;color:#444444;font-weight:600;font-size:14px;line-height:21px;margin-bottom:10px}
замените на:
h4{padding-bottom:20px;color:#444444;font-weight:600;font-size:14px;line-height:21px;}
2. Строку:
#search_block_top{position:static;float:right;margin:26px 10px 0 0}
на
#search_block_top{position: absolute; right: 0;}
строки:
#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('http://design.yamama27.ru/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: absolute;width:170px;clear:both;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background:#f7f7f7 url('http://design.yamama27.ru/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);top: 80px;right: 0;}
3. В шаблоне 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 %}
и замените его на:
{% IFNOT menu_empty %} <ul class="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 %} <ul style="top:114px;" class="megamenu"> {% FOR menu %} {% FOR header2 %} {% FOR links %} <li class="root_menu {% IF menu.header2.links.SELECTED %}active{% ENDIF %}" > <a href="{menu.header2.links.URL}" class="root_link" {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %} >{menu.header2.links.NAME}</a> </li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>
В main.css найдите код:
#megamenu{position:absolute;height:54px;top:90px;left:238px;} #megamenu:after{display:block;content:"";clear:both} #megamenu li.root_menu{padding:25px 5px 3px 5px;float:left;position:relative;top: 15px} #megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:14px; text-decoration: none;} #megamenu li .root_link:hover, #megamenu li.active .root_link {color:#FF000D} /* END Меню в шапке */ /* Меню в подвале */ #megamenu_bottom{min-width:360px} #megamenu_bottom li a {text-decoration: none;padding: 7px 10px;display:inline-block;} #megamenu_bottom li {display: block;float: left;margin: 15px 10px 12px 1px;background: #ffffff;-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;} #megamenu_bottom li a:hover, #megamenu_bottom li.active a {color: #DA3B44;}
и замените на:
.megamenu{position:absolute;height:54px;top:90px;left:238px;} .megamenu:after{display:block;content:"";clear:both} .megamenu li.root_menu{padding:25px 5px 3px 5px;float:left;position:relative;top: 15px} .megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:14px; text-decoration: none;} .megamenu li .root_link:hover, .megamenu li.active .root_link {color:#FF000D} /* END Меню в шапке */ /* Меню в подвале */ .megamenu_bottom{min-width:360px} .megamenu_bottom li a {text-decoration: none;padding: 7px 10px;display:inline-block;} .megamenu_bottom li {display: block;float: left;margin: 15px 10px 12px 1px;background: #ffffff;-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;} .megamenu_bottom li a:hover, .megamenu_bottom li.active a {color: #DA3B44;}
4. Добавьте строку:
.rte > h2 {display:none;}
5. Строку:
.accordion em.open-close {background:url("http://design.yamama27.ru/sprites.png") no-repeat -130px -48px; padding:8px 14px; position:absolute; right:0; top:0;}
на
.accordion em.open-close {background:url("http://design.yamama27.ru/sprites.png") no-repeat -130px -48px; padding: 8px 10px; position:absolute; right:0; top:0;}
(второй padding изменился с 14 на 10, можете менять его сами, чтобы перемещать плюсик).
6. Добавьте строку:
.special_procducts h4 {display:none;}
7. Строку:
.autumnshowcase_block h4{display:block;float:left;color:#444444;font-size:18px;line-height:24px;padding:0;margin:0;background:none;text-shadow:none;text-transform:none}
на
.autumnshowcase_block h4{font-family: Courier; display:block;color:#444444;font-size:18px;line-height:24px;padding:0;margin:0;background:none;text-shadow:none;text-transform:none;text-align: center;}
Вместо Courier установите свой шрифт, а вместо 444444 - цвет.
#3
Отправлено 28 Июль 2014 - 12:47
Dars (28 Июль 2014 - 12:18) писал:
1. Строку:
h4{padding-bottom:20px;color:#444444;font-weight:600;font-size:14px;line-height:21px;margin-bottom:10px}
замените на:
h4{padding-bottom:20px;color:#444444;font-weight:600;font-size:14px;line-height:21px;}
2. Строку:
#search_block_top{position:static;float:right;margin:26px 10px 0 0}
на
#search_block_top{position: absolute; right: 0;}
строки:
#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('http://design.yamama27.ru/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: absolute;width:170px;clear:both;list-style:none;background-clip:padding-box;-moz-background-clip:padding-box;-webkit-background-clip:padding-box;background:#f7f7f7 url('http://design.yamama27.ru/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);top: 80px;right: 0;}
3. В шаблоне 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 %}
и замените его на:
{% IFNOT menu_empty %} <ul class="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 %} <ul style="top:114px;" class="megamenu"> {% FOR menu %} {% FOR header2 %} {% FOR links %} <li class="root_menu {% IF menu.header2.links.SELECTED %}active{% ENDIF %}" > <a href="{menu.header2.links.URL}" class="root_link" {% IF menu.header2.links.TITLE %}title="{menu.header2.links.TITLE}"{% ENDIF %} >{menu.header2.links.NAME}</a> </li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>
В main.css найдите код:
#megamenu{position:absolute;height:54px;top:90px;left:238px;} #megamenu:after{display:block;content:"";clear:both} #megamenu li.root_menu{padding:25px 5px 3px 5px;float:left;position:relative;top: 15px} #megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:14px; text-decoration: none;} #megamenu li .root_link:hover, #megamenu li.active .root_link {color:#FF000D} /* END Меню в шапке */ /* Меню в подвале */ #megamenu_bottom{min-width:360px} #megamenu_bottom li a {text-decoration: none;padding: 7px 10px;display:inline-block;} #megamenu_bottom li {display: block;float: left;margin: 15px 10px 12px 1px;background: #ffffff;-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;} #megamenu_bottom li a:hover, #megamenu_bottom li.active a {color: #DA3B44;}
и замените на:
.megamenu{position:absolute;height:54px;top:90px;left:238px;} .megamenu:after{display:block;content:"";clear:both} .megamenu li.root_menu{padding:25px 5px 3px 5px;float:left;position:relative;top: 15px} .megamenu li .root_link{color:#666666;text-transform:uppercase;font-size:14px; text-decoration: none;} .megamenu li .root_link:hover, .megamenu li.active .root_link {color:#FF000D} /* END Меню в шапке */ /* Меню в подвале */ .megamenu_bottom{min-width:360px} .megamenu_bottom li a {text-decoration: none;padding: 7px 10px;display:inline-block;} .megamenu_bottom li {display: block;float: left;margin: 15px 10px 12px 1px;background: #ffffff;-moz-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);box-shadow: 0 0 0 1px rgba(0,0,0,0.095) ,0 1.5px 1.5px 0 rgba(0,0,0,0.2),0 2px 1.5px 0 rgba(0,0,0,0.1);border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;} .megamenu_bottom li a:hover, .megamenu_bottom li.active a {color: #DA3B44;}
4. Добавьте строку:
.rte > h2 {display:none;}
5. Строку:
.accordion em.open-close {background:url("http://design.yamama27.ru/sprites.png") no-repeat -130px -48px; padding:8px 14px; position:absolute; right:0; top:0;}
на
.accordion em.open-close {background:url("http://design.yamama27.ru/sprites.png") no-repeat -130px -48px; padding: 8px 10px; position:absolute; right:0; top:0;}
(второй padding изменился с 14 на 10, можете менять его сами, чтобы перемещать плюсик).
6. Добавьте строку:
.special_procducts h4 {display:none;}
7. Строку:
.autumnshowcase_block h4{display:block;float:left;color:#444444;font-size:18px;line-height:24px;padding:0;margin:0;background:none;text-shadow:none;text-transform:none}
на
.autumnshowcase_block h4{font-family: Courier; display:block;color:#444444;font-size:18px;line-height:24px;padding:0;margin:0;background:none;text-shadow:none;text-transform:none;text-align: center;}
Вместо Courier установите свой шрифт, а вместо 444444 - цвет.
Спасибо! Всё получилось. Только один нюанс. Верхнее меню не активно, т. е. не работает как ссылка.
#4
Отправлено 28 Июль 2014 - 12:52
alexfeb27 (28 Июль 2014 - 12:47) писал:
строку:
.megamenu li.root_menu{padding:25px 5px 3px 5px;float:left;position:relative;top: 15px}
замените на:
.megamenu li.root_menu{padding:0 5px 3px 5px;float:left;position:relative;top: 40px;}
строку:
.megamenu{position:absolute;height:54px;top:90px;left:238px;}
на
.megamenu{position:absolute;top:90px;left:238px;}
#5
Отправлено 28 Июль 2014 - 13:09
Dars (28 Июль 2014 - 12:52) писал:
строку:
.megamenu li.root_menu{padding:25px 5px 3px 5px;float:left;position:relative;top: 15px}
замените на:
.megamenu li.root_menu{padding:0 5px 3px 5px;float:left;position:relative;top: 40px;}
строку:
.megamenu{position:absolute;height:54px;top:90px;left:238px;}
на
.megamenu{position:absolute;top:90px;left:238px;}
Спасибо, исправил.
А ещё подскажите:
1. Как сделать так, чтобы в товарной категории при отображении товара в виде таблицы указывался его размер? Если делать отображение в виде списка, то размер указывается, а в виде таблицы нет.
2. Возможно ли сделать размер фотографий в товарной категории одинаковым?
3. Как название карусели Новинки на главной странице сделать ниже, чтобы увеличить интервал с каруселью Товаров на главной?
#6
Отправлено 28 Июль 2014 - 13:25
alexfeb27 (28 Июль 2014 - 13:09) писал:
А ещё подскажите:
1. Как сделать так, чтобы в товарной категории при отображении товара в виде таблицы указывался его размер? Если делать отображение в виде списка, то размер указывается, а в виде таблицы нет.
2. Возможно ли сделать размер фотографий в товарной категории одинаковым?
3. Как название карусели Новинки на главной странице сделать ниже, чтобы увеличить интервал с каруселью Товаров на главной?
3. В файле style.css вставьте код
.autumnshowcase_block.group.new_products { margin-top: 20px; }число 20 замените на нужное.
#8
Отправлено 28 Июль 2014 - 21:18
alexfeb27 (28 Июль 2014 - 14:32) писал:
<h5><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h5>и сразу после нее вставьте
{% IF goods.DESCRIPTION_SHORT %}{goods.DESCRIPTION_SHORT}{% ENDIF %}
2. в файле style.css найдите
#category_view_type.grid_view #product_list .product_image{max-width:184px;margin:auto;height:auto;z-index:1}замените на
#category_view_type.grid_view #product_list .product_image{margin:auto;height:auto;z-index:1}
#9
Отправлено 29 Июль 2014 - 03:57
support 2.0 (28 Июль 2014 - 21:18) писал:
<h5><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h5>и сразу после нее вставьте
{% IF goods.DESCRIPTION_SHORT %}{goods.DESCRIPTION_SHORT}{% ENDIF %}
2. в файле style.css найдите
#category_view_type.grid_view #product_list .product_image{max-width:184px;margin:auto;height:auto;z-index:1}замените на
#category_view_type.grid_view #product_list .product_image{margin:auto;height:auto;z-index:1}
Спасибо.
#11
Отправлено 29 Июль 2014 - 09:01
alexfeb27 (29 Июль 2014 - 04:25) писал:
Обнаружился нюанс.
В каталоге фото товаров получаются обрезанными с боков. А если далее зайти в группу товаров, то там всё нормально. Помогите исправить.
Найти на 413 строке:
#category_view_type.grid_view #product_list .product_image{margin:auto;height:auto;z-index:1}
Заменить:
#category_view_type.grid_view #product_list .product_image{max-width:184px;margin:auto;height:auto;z-index:1}
#12
Отправлено 29 Июль 2014 - 10:27
Castiel (29 Июль 2014 - 09:01) писал:
Найти на 413 строке:
#category_view_type.grid_view #product_list .product_image{margin:auto;height:auto;z-index:1}
Заменить:
#category_view_type.grid_view #product_list .product_image{max-width:184px;margin:auto;height:auto;z-index:1}
До этого так и было, но в этом случае в группе товаров фото разного размера получаются. Как сделать чтобы и там и там все фото были одинакового размера?
#13
Отправлено 29 Июль 2014 - 10:36
alexfeb27 (29 Июль 2014 - 10:27) писал:
Правильным решением будет загружать все фотографии одного размера, если у вас такой возможности нет, то можно ограничить вывод фото по высоте и ширине.
В файле "main.css".
Найти:
#category_view_type.grid_view #product_list .product_image{max-width:184px;margin:auto;height:auto;z-index:1}
Заменить:
#category_view_type.grid_view #product_list .product_image{max-width:184px;margin:auto;height:240px;z-index:1}
#14
Отправлено 29 Июль 2014 - 10:53
Castiel (29 Июль 2014 - 10:36) писал:
В файле "main.css".
Найти:
#category_view_type.grid_view #product_list .product_image{max-width:184px;margin:auto;height:auto;z-index:1}
Заменить:
#category_view_type.grid_view #product_list .product_image{max-width:184px;margin:auto;height:240px;z-index:1}
Спасибо, так лучше.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных