Дорабоки
#1
Отправлено 07 Сентябрь 2016 - 15:26
1) выпадающее меню при наведении на "каталог" и далее, то есть если навести потом на "каталог бабочек" то должны вылазить подкатегории
2) чтобы серая полоса с логотипом ( где контакты, каталог и тд), закреплялась наверху страницы и ехала вместе с прокруткой вниз, точно также как тут ездит полоска с бабочками http://babo4ek.net/
3) самая нижняя полоска, где все права защищены и линейка со способами оплаты : сделать все в одну линейку : Права слева, оплата справа
4) Насколько я понял где то можно посмотреть варианты замены картинок в блоках "нас выбрали более 1000 покупателей" и "работать с нами просто" подскажите где?
#2
Отправлено 14 Сентябрь 2016 - 15:20
ProninT (07 Сентябрь 2016 - 15:26) писал:
1) выпадающее меню при наведении на "каталог" и далее, то есть если навести потом на "каталог бабочек" то должны вылазить подкатегории
2) чтобы серая полоса с логотипом ( где контакты, каталог и тд), закреплялась наверху страницы и ехала вместе с прокруткой вниз, точно также как тут ездит полоска с бабочками http://babo4ek.net/
3) самая нижняя полоска, где все права защищены и линейка со способами оплаты : сделать все в одну линейку : Права слева, оплата справа
4) Насколько я понял где то можно посмотреть варианты замены картинок в блоках "нас выбрали более 1000 покупателей" и "работать с нами просто" подскажите где?
1) В шаблоне HTML найдите блок
<!-- Меню в шапке --> <ul class="mainnav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>и замените его на
!-- Меню в шапке --> <ul class="mainnav"> <li><a href="/" class="active" title="Мы рады видеть Вас!">Главная</a></li> <li><a href="/page/Доставка" title="Доставка (Пример страницы)">Доставка</a></li> <li class="parent"><a href="/catalog" title="Полный список товаров на сайте">Каталог</a> <ul class="subMenu dropdown-menu"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 0 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </li> <li><a href="/feedback" title="Связь с администрацией магазина">Контакты</a></li> </ul>Далее в файле main.css в самый конец добавьте блок
#custommenu .mainnav li.parent.level0:hover .hide-cat { display: block !important; } #custommenu .mainnav li a.title-lv0 { display: block; font-size: 16px; color: #22121e; margin: 8px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; } #custommenu .mainnav li.level0 { width: 25%; float: left; padding: 0 15px; } #custommenu .mainnav li .subMenu{top:50px;}
2) В конец файла main.js вставьте блок
jQuery(document).ready(function($){ $('.header-middle').stick_in_parent({}); $('.header-middle').stick_in_parent({}); });Теперь в конец файла foral.js
/* Sticky-kit v1.0.4 | WTFPL | Leaf Corcoran 2014 | http://leafo.net */ (function(){var b,m;b=this.jQuery;m=b(window);b.fn.stick_in_parent=function(e){var u,n,f,p,B,l,C;null==e&&(e={});p=e.sticky_class;u=e.inner_scrolling;f=e.parent;n=e.offset_top;null==n&&(n=0);null==f&&(f=void 0);null==u&&(u=!0);null==p&&(p="is_stuck");B=function(a,e,l,v,y,q,t){var r,z,k,w,c,d,A,x,g,h;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);d=a.parent();null!=f&&(d=d.closest(f));if(!d.length)throw"failed to find stick parent";r=k=!1;g=b("<div />");g.css("position",a.css("position"));A=function(){var c, b;c=parseInt(d.css("border-top-width"),10);b=parseInt(d.css("padding-top"),10);e=parseInt(d.css("padding-bottom"),10);l=d.offset().top+c+b;v=d.height();c=k?(k=!1,r=!1,a.insertAfter(g).css({position:"",top:"",width:"",bottom:""}).removeClass(p),g.detach(),!0):void 0;y=a.offset().top-parseInt(a.css("margin-top"),10)-n;q=a.outerHeight(!0);t=a.css("float");g.css({width:a.outerWidth(!0),height:q,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":t});if(c)return h()};A();if(q!==v)return w= void 0,c=n,h=function(){var b,h,s,f;s=m.scrollTop();null!=w&&(h=s-w);w=s;k?(f=s+q+c>v+l,r&&!f&&(r=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom")),s<y&&(k=!1,c=n,"left"!==t&&"right"!==t||a.insertAfter(g),g.detach(),b={position:"",width:"",top:""},a.css(B).removeClass(p).trigger("sticky_kit:unstick")),u&&(b=m.height(),q>b&&!r&&(c-=h,c=Math.max(b-q,c),c=Math.min(n,c),k&&a.css({top:c+"px"})))):s>y&&(k=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")? a.outerWidth()+"px":a.width()+"px",a.css(B).addClass(p).after(g),"left"!==t&&"right"!==t||g.append(a),a.trigger("sticky_kit:stick"));if(k&&(null==f&&(f=s+q+c>v+l),!r&&f))return r=!0,"static"===d.css("position")&&d.css({position:"relative"}),a.css({position:"fixed",top:"0"}).trigger("sticky_kit:bottom")},x=function(){A();return h()},z=function(){m.off("scroll",h);b(document.body).off("sticky_kit:recalc",x);a.off("sticky_kit:detach",z);a.removeData("sticky_kit");a.css({position:"",bottom:"", top:""});d.position("position","");if(k)return a.insertAfter(g).removeClass(p),g.remove()},m.on("touchmove",h),m.on("scroll",h),m.on("resize",x),b(document.body).on("sticky_kit:recalc",x),a.on("sticky_kit:detach",z),setTimeout(h,0)}};l=0;for(C=this.length;l<C;l++)e=this[l],B(b(e));return this}}).call(this);
3) В файле main.css найдите блок
#footer .footer-bottom .copyright { text-align: center; line-height: 1.35; font-size: 75%; }и замените его на
#footer .footer-bottom .copyright { text-align: center; line-height: 1.35; font-size: 75%; float: left !important; }
4) Опишу Вам самый простой вариант замены данных картинок. Вы можете загрузить их в разделе Сайт-> Редактор шаблонов с теми же названиями что и сейчас, предварительно удалив уже существующие картинки.
Блок Нас выбрали более .....
картинка доллара - money.png
картинка менеджера - people.png
часы - time.png
список на листке - list.png
Блок Работать с нами просто
список - list2.png
оператор - help.png
кошелек - money2.png
машинка - car.png
коробка - price.png
#3
Отправлено 14 Сентябрь 2016 - 16:07
Stasya (14 Сентябрь 2016 - 15:20) писал:
<!-- Меню в шапке --> <ul class="mainnav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>и замените его на
!-- Меню в шапке --> <ul class="mainnav"> <li><a href="/" class="active" title="Мы рады видеть Вас!">Главная</a></li> <li><a href="/page/Доставка" title="Доставка (Пример страницы)">Доставка</a></li> <li class="parent"><a href="/catalog" title="Полный список товаров на сайте">Каталог</a> <ul class="subMenu dropdown-menu"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 0 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </li> <li><a href="/feedback" title="Связь с администрацией магазина">Контакты</a></li> </ul>Далее в файле main.css в самый конец добавьте блок
#custommenu .mainnav li.parent.level0:hover .hide-cat { display: block !important; } #custommenu .mainnav li a.title-lv0 { display: block; font-size: 16px; color: #22121e; margin: 8px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; } #custommenu .mainnav li.level0 { width: 25%; float: left; padding: 0 15px; } #custommenu .mainnav li .subMenu{top:50px;}
Спасибо, неплохо) а что с остальными пунктами?
#5
Отправлено 14 Сентябрь 2016 - 19:39
Stasya (14 Сентябрь 2016 - 15:20) писал:
<!-- Меню в шапке --> <ul class="mainnav"> {% FOR menu %} {% FOR header %} {% FOR links %} <li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="active"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li> {% ENDFOR %} {% ENDFOR %} {% ENDFOR %} </ul>и замените его на
!-- Меню в шапке --> <ul class="mainnav"> <li><a href="/" class="active" title="Мы рады видеть Вас!">Главная</a></li> <li><a href="/page/Доставка" title="Доставка (Пример страницы)">Доставка</a></li> <li class="parent"><a href="/catalog" title="Полный список товаров на сайте">Каталог</a> <ul class="subMenu dropdown-menu"> {%IFNOT catalog_full_empty%} {%FOR catalog_full%} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 0 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li {% IF catalog_full.HIDE %}style="display:none;"{% ENDIF %} class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.CURRENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}" title="{catalog_full.NAME}"><span>{catalog_full.NAME}</span></a> {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %} {% IF catalog_full.LAST %}{%FOR out%}</ul> {%IFNOT catalog_full.out.LAST%}</li>{%ENDIF%}{%ENDFOR%}{% ENDIF %} {%ENDFOR%} {%ENDIF%} </li> <li><a href="/feedback" title="Связь с администрацией магазина">Контакты</a></li> </ul>Далее в файле main.css в самый конец добавьте блок
#custommenu .mainnav li.parent.level0:hover .hide-cat { display: block !important; } #custommenu .mainnav li a.title-lv0 { display: block; font-size: 16px; color: #22121e; margin: 8px 0 10px 0; padding: 0 0 5px 0; border-bottom: 1px solid #e2dfdf; text-transform: uppercase; } #custommenu .mainnav li.level0 { width: 25%; float: left; padding: 0 15px; } #custommenu .mainnav li .subMenu{top:50px;}
2) В конец файла main.js вставьте блок
jQuery(document).ready(function($){ $('.header-middle').stick_in_parent({}); $('.header-middle').stick_in_parent({}); });Теперь в конец файла foral.js
/* Sticky-kit v1.0.4 | WTFPL | Leaf Corcoran 2014 | http://leafo.net */ (function(){var b,m;b=this.jQuery;m=b(window);b.fn.stick_in_parent=function(e){var u,n,f,p,B,l,C;null==e&&(e={});p=e.sticky_class;u=e.inner_scrolling;f=e.parent;n=e.offset_top;null==n&&(n=0);null==f&&(f=void 0);null==u&&(u=!0);null==p&&(p="is_stuck");B=function(a,e,l,v,y,q,t){var r,z,k,w,c,d,A,x,g,h;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);d=a.parent();null!=f&&(d=d.closest(f));if(!d.length)throw"failed to find stick parent";r=k=!1;g=b("<div />");g.css("position",a.css("position"));A=function(){var c, b;c=parseInt(d.css("border-top-width"),10);b=parseInt(d.css("padding-top"),10);e=parseInt(d.css("padding-bottom"),10);l=d.offset().top+c+b;v=d.height();c=k?(k=!1,r=!1,a.insertAfter(g).css({position:"",top:"",width:"",bottom:""}).removeClass(p),g.detach(),!0):void 0;y=a.offset().top-parseInt(a.css("margin-top"),10)-n;q=a.outerHeight(!0);t=a.css("float");g.css({width:a.outerWidth(!0),height:q,display:a.css("display"),"vertical-align":a.css("vertical-align"),"float":t});if(c)return h()};A();if(q!==v)return w= void 0,c=n,h=function(){var b,h,s,f;s=m.scrollTop();null!=w&&(h=s-w);w=s;k?(f=s+q+c>v+l,r&&!f&&(r=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom")),s<y&&(k=!1,c=n,"left"!==t&&"right"!==t||a.insertAfter(g),g.detach(),b={position:"",width:"",top:""},a.css(B).removeClass(p).trigger("sticky_kit:unstick")),u&&(b=m.height(),q>b&&!r&&(c-=h,c=Math.max(b-q,c),c=Math.min(n,c),k&&a.css({top:c+"px"})))):s>y&&(k=!0,b={position:"fixed",top:c},b.width="border-box"===a.css("box-sizing")? a.outerWidth()+"px":a.width()+"px",a.css(B).addClass(p).after(g),"left"!==t&&"right"!==t||g.append(a),a.trigger("sticky_kit:stick"));if(k&&(null==f&&(f=s+q+c>v+l),!r&&f))return r=!0,"static"===d.css("position")&&d.css({position:"relative"}),a.css({position:"fixed",top:"0"}).trigger("sticky_kit:bottom")},x=function(){A();return h()},z=function(){m.off("scroll",h);b(document.body).off("sticky_kit:recalc",x);a.off("sticky_kit:detach",z);a.removeData("sticky_kit");a.css({position:"",bottom:"", top:""});d.position("position","");if(k)return a.insertAfter(g).removeClass(p),g.remove()},m.on("touchmove",h),m.on("scroll",h),m.on("resize",x),b(document.body).on("sticky_kit:recalc",x),a.on("sticky_kit:detach",z),setTimeout(h,0)}};l=0;for(C=this.length;l<C;l++)e=this[l],B(b(e));return this}}).call(this);
3) В файле main.css найдите блок
#footer .footer-bottom .copyright { text-align: center; line-height: 1.35; font-size: 75%; }и замените его на
#footer .footer-bottom .copyright { text-align: center; line-height: 1.35; font-size: 75%; float: left !important; }
4) Опишу Вам самый простой вариант замены данных картинок. Вы можете загрузить их в разделе Сайт-> Редактор шаблонов с теми же названиями что и сейчас, предварительно удалив уже существующие картинки.
Блок Нас выбрали более .....
картинка доллара - money.png
картинка менеджера - people.png
часы - time.png
список на листке - list.png
Блок Работать с нами просто
список - list2.png
оператор - help.png
кошелек - money2.png
машинка - car.png
коробка - price.png
Сделал, но полоска выдает ошибку и перемещается только текст и лого, без полосы..\
по поводу 4 пункта.. боюсь так четко не отрисую,это единственный способ? я помню в том сайте там как то кодом картинки менялось, но она там правда подгружалась откуда то кроме как с того что залито..
#6
Отправлено 16 Сентябрь 2016 - 14:40
ProninT (14 Сентябрь 2016 - 19:39) писал:
по поводу 4 пункта.. боюсь так четко не отрисую,это единственный способ? я помню в том сайте там как то кодом картинки менялось, но она там правда подгружалась откуда то кроме как с того что залито..
jQuery(document).ready(function($){ $('.header-middle').stick_in_parent({}); $('.header-middle').stick_in_parent({}); });замените на
jQuery(document).ready(function($){ if($('.header-middle')){ $('.header-middle').stick_in_parent({ sticky_class: 'keep-menu' }); } });
в конец файла main.css добавьте
.header-middle.keep-menu { z-index: 100; background: fadeOut(#000000, 20%); position: fixed !important; top: 0px !important; }
#7
Отправлено 20 Сентябрь 2016 - 00:09
Ирина345 (16 Сентябрь 2016 - 14:40) писал:
jQuery(document).ready(function($){ $('.header-middle').stick_in_parent({}); $('.header-middle').stick_in_parent({}); });замените на
jQuery(document).ready(function($){ if($('.header-middle')){ $('.header-middle').stick_in_parent({ sticky_class: 'keep-menu' }); } });
в конец файла main.css добавьте
.header-middle.keep-menu { z-index: 100; background: fadeOut(#000000, 20%); position: fixed !important; top: 0px !important; }
На главной стало все ок, но вот в каталоге теперь http://t201630.storeland.ru/catalog ЛАГ. Я Прошу прощения, давайте все таки уберем функцию катающейся полосы.... как было раньше... как это сделать?
#8
Отправлено 20 Сентябрь 2016 - 00:27
.header-middle.keep-menu { z-index: 100; background: fadeOut(#000000, 20%); position: fixed !important; top: 0px !important; }
замените на:
.header-middle.keep-menu { z-index: 100; background: fadeOut(#000000, 20%); position: fixed !important; top: 0px !important; bottom: initial !important; }
#9
Отправлено 20 Сентябрь 2016 - 20:12
Vaccina (20 Сентябрь 2016 - 00:27) писал:
.header-middle.keep-menu { z-index: 100; background: fadeOut(#000000, 20%); position: fixed !important; top: 0px !important; }
замените на:
.header-middle.keep-menu { z-index: 100; background: fadeOut(#000000, 20%); position: fixed !important; top: 0px !important; bottom: initial !important; }
Ок, остался последний косяк( на всех страницах кроме главной от полосы едет только текст, цвет тоже хочется)
#10
Отправлено 21 Сентябрь 2016 - 06:45
.index #header .header-middle { background-color: transparent; }
#11
Отправлено 28 Сентябрь 2016 - 18:31
Есть еще пару вопросов:
1.Как добавить второй телефон?
2.Почему у меня не отображается раздел новостей?
Вообще было бы здорово сделать вот так
1.переместить меню как на скрине
2.ну и соответственно вместо меню вставить каталог
#12
Отправлено 03 Октябрь 2016 - 17:05
abram3 (28 Сентябрь 2016 - 18:31) писал:
Есть еще пару вопросов:
1.Как добавить второй телефон?
2.Почему у меня не отображается раздел новостей?
Вообще было бы здорово сделать вот так
1.переместить меню как на скрине
2.ну и соответственно вместо меню вставить каталог
1) На данный момент у Вас отображаются 2 телефона, как в шапке так и в подвале.
2) Раздел новостей у Вас так же отображается над подвалом.
Вопросы по скриншоту:
Изменения Вам произвел, проверьте.
Так же создал бэкапы для возможности отката к предыдущим изменениям.
#13
Отправлено 19 Июнь 2017 - 10:20
Можно ли сделать кликабельной картинку?(как на слайде).
Так как у людей появился стереотип: есть призыв - значит нужно где-то тыкнуть, а поблизости некуда тыкать. Будут нервничать, обзываться и т.д. Никто не будет искать мааааленькую кнопочку внизу подвала))
#14
Отправлено 19 Июнь 2017 - 17:45
Андрей М (19 Июнь 2017 - 10:20) писал:
Можно ли сделать кликабельной картинку?(как на слайде).
Так как у людей появился стереотип: есть призыв - значит нужно где-то тыкнуть, а поблизости некуда тыкать. Будут нервничать, обзываться и т.д. Никто не будет искать мааааленькую кнопочку внизу подвала))
Здравствуйте.
В данном случае вам необходимо в шаблоне html найти данный код:
<!-- Предложение --> <div id="proposition" class="main-block"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-7 col-xs-12 animated" data-animation="fadeInLeft" data-delay="0"> <h2 class="title">Выгодное предложение</h2> <h4 class="title">Подпишитесь на группу Вконтакте <br/>и делайте все заказы <br/><strong>на 5% дешевле!</strong></h4> <img src="{ASSETS_IMAGES_PATH}gift.png?design=sunrise">
И заменить его вот этим вот кодом:
<!-- Предложение --> <div id="proposition" class="main-block"> <div class="container"> <div class="row"> <div class="col-sm-6 col-md-7 col-xs-12 animated" data-animation="fadeInLeft" data-delay="0"> <h2 class="title">Выгодное предложение</h2> <h4 class="title">Подпишитесь на группу Вконтакте <br/>и делайте все заказы <br/><strong>на 5% дешевле!</strong></h4> <a href="#"><img src="{ASSETS_IMAGES_PATH}gift.png?design=sunrise"></a>
Где заместо: # - пропишите, пожалуйста, требуемую вам ссылку на социальную сеть.
#15
Отправлено 19 Июнь 2017 - 19:33
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных