Есть Вопросы По Оформлению
#1
Отправлено 03 Февраль 2016 - 16:50
1. Перенести поле поиска на правый конец второй сверху черной полосы меню, сузить поле поиска и уменьшить шрифт в слове "Поиск".
2. После увеличения логотипа не видны контакты. Как перенести их влево (вместо поля поиска)?
3. Перенести категории по товарам со страницы "Каталог" на страницу "Главная" под баннер и название магазина ? Как убрать на странице "Главная" белое поле над баннером (чтобы баннер плотно прилегал к черной полосе меню)?
5. Изменили цвет кнопки "В корзину" на черный. Как сделать, чтобы при нажатии цвет кнопки менялся на темно-серый?
Заранее спасибо за помощь.
#2
Отправлено 03 Февраль 2016 - 17:50
pompon (03 Февраль 2016 - 16:50) писал:
1. Перенести поле поиска на правый конец второй сверху черной полосы меню, сузить поле поиска и уменьшить шрифт в слове "Поиск".
2. После увеличения логотипа не видны контакты. Как перенести их влево (вместо поля поиска)?
3. Перенести категории по товарам со страницы "Каталог" на страницу "Главная" под баннер и название магазина ? Как убрать на странице "Главная" белое поле над баннером (чтобы баннер плотно прилегал к черной полосе меню)?
5. Изменили цвет кнопки "В корзину" на черный. Как сделать, чтобы при нажатии цвет кнопки менялся на темно-серый?
Заранее спасибо за помощь.
Здравствуйте. Перед внесением изменений, создайте бэкап.
1) В шаблоне style.css замените строку
form[role="search"] {position: absolute; right: 2em;top: 2.5em;},
на:
form[role="search"] {position: absolute; right: 1em;top: 12.7em;z-index: 999;}
далее строку:
form[role="search"] input[type="search"], input#search-field, .search {vertical-align: middle;-webkit-appearance: textfield;-webkit-box-sizing:content-box;border: none;width: 81% !important;height: 2.429em;font-size: 1.167em;color: #8a8a8a;position: absolute;z-index: 1;padding: 0 0.417em;margin: 0;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);}заменить на:
form[role="search"] input[type="search"], input#search-field, .search {vertical-align: middle;-webkit-appearance: textfield;-webkit-box-sizing:content-box;border: none;width: 81% !important;height: 1.7em;font-size:12px;color: #8a8a8a;position: absolute;z-index: 1;padding: 0 0.417em;margin: 0;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);}
строку
form[role="search"] input[type="submit"], input#search-submit {position: absolute;right: 0;z-index: 2;height: 2.833em;background: #404040;padding: 0 0.833em;margin: 0;line-height: 1;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px;-moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px;}заменить на
form[role="search"] input[type="submit"], input#search-submit {font-size: 10px;position: absolute;right: 0;z-index: 2;height:2.1em;background: #404040;padding: 0 0.833em;margin: 0;line-height: 1;-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.17);-webkit-border-top-right-radius: 2px; -webkit-border-bottom-right-radius: 2px;-moz-border-radius-topright: 2px; -moz-border-radius-bottomright: 2px;}
2) В шаблоне html найдите блок кода:
<!-- Контактные телефоны --> {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_WORK_TIME || SETTINGS_STORE_SKYPE || SETTINGS_STORE_ICQ %} <div class="contacts"> <div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам"> <!-- Первый контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1} {% ENDIF %} <!-- Второй контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER2 %} <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2} {% ENDIF %} <!-- Третий контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER3 %} <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3} {% ENDIF %} </div> <!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> {SETTINGS_STORE_WORK_TIME} </div> {% ENDIF %} <!-- Skype номер --> {% IF SETTINGS_STORE_SKYPE %} <div class="contentTableHeadMainSkype"> <a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"> <img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span> </a> </div> {% ENDIF %} <!-- ICQ номер --> {% IF SETTINGS_STORE_ICQ %} <div class="contentTableHeadMainIcq"> <img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" /> <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %} </div> {% ENDIF %}переместите его, вставив перед строкой:
</header>
далее в style.css замените
.contacts { position: relative; margin-top: 80px; font-size: 14px; margin-left: 900px; }на:
.contacts { position: relative; margin-top: 25px; font-size: 14px; float: right; text-align: right; }
3) В style.css замените строку
.conta {position: relative;width: 100%;max-width: 1280px;margin: 20px auto;z-index:30;}на
.conta {position: relative;width: 100%;max-width: 1280px;margin-top: 20px;z-index:30;}
В разделе Сайт--> Главная страница, укажите "Каталог товаров", чтобы отобразить каталог в нужном месте. Если я неправильно Вас поняла, то уточните, пожалуйста вопрос.
4) В конец шаблона style.css добавьте строку:
.buy-item button:hover {background:url("http://12312312312a.storeland.net/icons.png") no-repeat scroll 10% -552px gray;}Измените цвет на необходимый.
#3
Отправлено 05 Февраль 2016 - 17:18
Получились пункты 1 и 5, в пункте 3 получилось прижать баннер вверх к черной полосе.
Пункт 3: нужно, чтобы на странице "Главная" отражались только категории товаров с фото категорий, а сам каталог (то есть все товары) отражался бы на странице "Каталог", как сейчас.
Пункт 2: С переносом контактов вправо ничего не получилось, после всех операций их видно справа под логотипом, поиск переехал вверх, а содержание страниц растягивается на всю ширину экрана.
#4
Отправлено 06 Февраль 2016 - 14:31
#5
Отправлено 08 Февраль 2016 - 12:31
pompon (05 Февраль 2016 - 17:18) писал:
Получились пункты 1 и 5, в пункте 3 получилось прижать баннер вверх к черной полосе.
Пункт 3: нужно, чтобы на странице "Главная" отражались только категории товаров с фото категорий, а сам каталог (то есть все товары) отражался бы на странице "Каталог", как сейчас.
Пункт 2: С переносом контактов вправо ничего не получилось, после всех операций их видно справа под логотипом, поиск переехал вверх, а содержание страниц растягивается на всю ширину экрана.
Здравствуйте, извините за долгое ожидание.По поводу каталога, в конце main.css добавьте код:
header.controls { display: none; } .containers.masonry { display: none; }
Пункт 2: не увидела у Вас изменений, давайте попробуем еще раз. Шаблоне HTML найдите код:
<!-- Контактные телефоны --> {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_WORK_TIME || SETTINGS_STORE_SKYPE || SETTINGS_STORE_ICQ %} <div class="contacts"> <div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам"> <!-- Первый контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1} {% ENDIF %} <!-- Второй контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER2 %} <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2} {% ENDIF %} <!-- Третий контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER3 %} <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3} {% ENDIF %} </div> <!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> {SETTINGS_STORE_WORK_TIME} </div> {% ENDIF %} <!-- Skype номер --> {% IF SETTINGS_STORE_SKYPE %} <div class="contentTableHeadMainSkype"> <a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"> <img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span> </a> </div> {% ENDIF %} <!-- ICQ номер --> {% IF SETTINGS_STORE_ICQ %} <div class="contentTableHeadMainIcq"> <img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" /> <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %} </div> {% ENDIF %} </div>
и замените на код:
</div> <!-- Контактные телефоны --> {% IF SETTINGS_STORE_PHONE_NUMBER1 || SETTINGS_STORE_PHONE_NUMBER2 || SETTINGS_STORE_PHONE_NUMBER3 || SETTINGS_STORE_WORK_TIME || SETTINGS_STORE_SKYPE || SETTINGS_STORE_ICQ %} <div class="contacts"> <div class="phone" title="Звоните, мы проконсультируем вас по любым вопросам"> <!-- Первый контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER1 %} <span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1} {% ENDIF %} <!-- Второй контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER2 %} <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2} {% ENDIF %} <!-- Третий контактный телефон --> {% IF SETTINGS_STORE_PHONE_NUMBER3 %} <br /><span class="phone-country-code">{SETTINGS_STORE_PHONE_COUNTRY_CODE3}</span> {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3} {% ENDIF %} </div> <!-- Время работы магазина --> {% IF SETTINGS_STORE_WORK_TIME %} <div class="work-time" title="Время работы нашего магазина: {SETTINGS_STORE_WORK_TIME}"> {SETTINGS_STORE_WORK_TIME} </div> {% ENDIF %} <!-- Skype номер --> {% IF SETTINGS_STORE_SKYPE %} <div class="contentTableHeadMainSkype"> <a class="valignMiddle" href="skype:{SETTINGS_STORE_SKYPE}?call" title="Свяжитесь с нами по Skype"> <img class="valignMiddle" src="{FORALL_IMAGES_PATH}icon/skype.png" width="16" height="16" alt="Свяжитесь с нами по Skype" /> <span class="valignMiddle">{SETTINGS_STORE_SKYPE}</span> </a> </div> {% ENDIF %} <!-- ICQ номер --> {% IF SETTINGS_STORE_ICQ %} <div class="contentTableHeadMainIcq"> <img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" /> <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span> </div> {% ENDIF %} </div> {% ENDIF %}
Пожалуйста, производите изменения внимательно.
#6
Отправлено 09 Февраль 2016 - 12:50
По поводу каталога на странице "Главная" - как найти файл main.css ? (Извините, я не опытный пользователь)
#8
Отправлено 09 Февраль 2016 - 17:30
И после изменения расположения телефона в шапке, у меня на страницах товаров не открывается описание товаров и доставки.
#9
Отправлено 09 Февраль 2016 - 21:01
#10
Отправлено 10 Февраль 2016 - 05:24
header.controls { display: none; } .containers.masonry { display: none; }
#11
Отправлено 11 Февраль 2016 - 16:26
Удалила в main.js "header.contorls ....", как Вы сказали. Ничего не изменилось, категории на главной странице не появились.
И ещё 1 вопрос. В мобильной версии Android в шапке: логотип слишком большой, не видно целиком, не видно телефон и время работы. Строка поиска сжата, не видно поля для запроса, и нельзя нажать кнопку запроса.
Пожалуйста, помогите.
#12
Отправлено 11 Февраль 2016 - 17:19
pompon (11 Февраль 2016 - 16:26) писал:
Удалила в main.js "header.contorls ....", как Вы сказали. Ничего не изменилось, категории на главной странице не появились.
И ещё 1 вопрос. В мобильной версии Android в шапке: логотип слишком большой, не видно целиком, не видно телефон и время работы. Строка поиска сжата, не видно поля для запроса, и нельзя нажать кнопку запроса.
Пожалуйста, помогите.
Здравствуйте, чтобы у Вас корректно отображался логотип в мобильной версии, нужно в style.css после кода:
@media only screen and (max-width: 480px) {
добавить код:
header[role="banner"] h1 a { height: auto; width: auto; } form[role="search"] { right: 4em; top: 68px; } [quote name='pompon' timestamp='1455040913' post='226218'] Дополнение к предыдущему сообщению: описание товаров не открывается только в Google Chrome. [/quote]
Этот вопрос решили?
Вам нужно, чтобы категории товаров появились на главной по слайдером? Тогда в шаблоне HTML после кода:
<!-- Главная страница --> {% IF index_page %} {% IF index_page %} <div class="banner"> <a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a> </div> {% ENDIF %}
добавьте код:
<!-- Если товаров в категории нет, то выдаем простое сообщение, мол нет ничего --> {% IF goods_empty || IS_FULL_CATALOG %} <!-- Если не применено ни одного фильтра, значит в категории нет товаров --> {% IF goods_filters_empty %} <!-- Если в категории нет товаров, но есть категории, то отобразим их --> {%IFNOT nested_categories_list_empty %} <!-- Блок навигации по категориям, вложенным в текущую категорию --> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=eternity"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul> <br clear="all"/> <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет --> {% ENDIF %} {% ENDIF %} {% ENDIF %}
#13
Отправлено 15 Февраль 2016 - 14:21
#14
Отправлено 15 Февраль 2016 - 17:20
pompon (15 Февраль 2016 - 14:21) писал:
Здравствуйте, в style.css код:
header[role="banner"] h1 a { height: auto; width: auto; } form[role="search"] { right: 4em; top: 68px; } [quote name='pompon' timestamp='1455040913' post='226218'] Дополнение к предыдущему сообщению: описание товаров не открывается только в Google Chrome. [/quote]
замените на код:
.hgroup img { width: 300px; margin: 0 auto; } header[role="banner"] h1 a { width: 100% !important; height: 60px !important; }
Каталог Вы можете перенести на главную по-другому. Для этого Главной страницей (в разделе Сайт-Главная страница) установите каталог. Если Вам нужна надпись, то можно добавить ее отдельно.
#15
Отправлено 17 Февраль 2016 - 13:58
На смартфоне с Android логотип, телефон и время работы в шапке стали показываться нормально, но строка поиска все равно деформирована, а также на главной перестал показываться баннер.
По поводу категорий товаров: мне нужно, чтобы категории показывались и на странице каталога и на главной под баннером.
Спасибо.
#16
Отправлено 17 Февраль 2016 - 16:35
pompon (17 Февраль 2016 - 13:58) писал:
На смартфоне с Android логотип, телефон и время работы в шапке стали показываться нормально, но строка поиска все равно деформирована, а также на главной перестал показываться баннер.
По поводу категорий товаров: мне нужно, чтобы категории показывались и на странице каталога и на главной под баннером.
Спасибо.
Здравствуйте, в style.css найдите код:
form[role="search"] div {width: 100%;}
и замените на код:
form[role="search"] div {width: 18.5em;} form[role="search"] { top: 5.6em !important; }
Цитата
протестировали на андроиде, баннер показывается, попробуйте очистить кеш.
Для этого Главной страницей (в разделе Сайт-Главная страница) установите каталог. Если Вам нужна надпись, то можно добавить ее отдельно.
Этот вариант Вас не устраивает?
Есть другой вариант, в шаблоне Товары код:
<ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=eternity"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul>
замените на код:
<div id="inject-goods-opinion-list"> <ul class="content_catalog_nested_categories"> {% FOR nested_categories_list %} <li> <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png?design=eternity"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div> <a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a> </li> {% ENDFOR %} </ul></div>
в шаблоне HTml после кода:
{% IF index_page %} <div class="banner"> <a href="#"><img src="{ASSETS_IMAGES_PATH}slide1.jpg?design=autumn"></a> </div> {% ENDIF %}
добавьте код:
<div id="insert-goods-opinion-list"></div> <script> $(function() { var url = 'http://{NET_DOMAIN}/catalog'; var id = '#insert-goods-opinion-list'; var injid = '#inject-goods-opinion-list'; if(id && injid && $(id).length) { $.get(url, function(html) { $(id).html($(html).find(injid).html()); }); } }); </script>
#17
Отправлено 18 Февраль 2016 - 16:39
#18
Отправлено 18 Февраль 2016 - 16:48
pompon (18 Февраль 2016 - 16:39) писал:
Тогда переместите код :
<div id="insert-goods-opinion-list"></div> <script> $(function() { var url = 'http://{NET_DOMAIN}/catalog'; var id = '#insert-goods-opinion-list'; var injid = '#inject-goods-opinion-list'; if(id && injid && $(id).length) { $.get(url, function(html) { $(id).html($(html).find(injid).html()); }); } }); </script>
после кода:
{BODY}
и в main.css найдите код:
section[role="main"] {margin-bottom: 6em;z-index: 10;}
и замените на код:
section[role="main"] {margin-bottom: 3em;z-index: 10;}
#19
Отправлено 20 Февраль 2016 - 13:06
#20
Отправлено 20 Февраль 2016 - 13:15
А в "Каталоге" категории должны быть вверху страницы перед всеми товарами.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных