Добавил Телефон И Время Работы В Шапку, В Нижнее Время Съехало
#1
Отправлено 14 Ноябрь 2015 - 19:23
Здравствуйте,
как добавить телефон в шапку телефон и график работы как в конце страницы, только в шапке и в строчку ? Чтобы также по нажатию звонить можно было?
Примерно как должно быть прикрепил фотографию.
Попробовал скопировать код:
<div class="footer-contact">
<p class="worktime"><em class="fa fa-clock-o"> </em><span class="ft-content">с 10:00 до 19:00</span></p>
<p class="phone"><em class="fa fa-phone"> </em><span class="ft-content"><a href="tel:+7495123-45-67">+7(495)123-45-67</a></span></p>
</div>
в шапку, получилось , но телефоны внизу страницы разъехались. Вот не знаю как сделать.
#2
Отправлено 15 Ноябрь 2015 - 10:16
Oshepkovm (14 Ноябрь 2015 - 19:23) писал:
Здравствуйте,
как добавить телефон в шапку телефон и график работы как в конце страницы, только в шапке и в строчку ? Чтобы также по нажатию звонить можно было?
Примерно как должно быть прикрепил фотографию.
Попробовал скопировать код:
<div class="footer-contact">
<p class="worktime"><em class="fa fa-clock-o"> </em><span class="ft-content">с 10:00 до 19:00</span></p>
<p class="phone"><em class="fa fa-phone"> </em><span class="ft-content"><a href="tel:+7495123-45-67">+7(495)123-45-67</a></span></p>
</div>
в шапку, получилось , но телефоны внизу страницы разъехались. Вот не знаю как сделать.
Здравствуйте!
В шаблоне html замените строки
<div class="footer-contact911"> <div class="phone911"> <p class="phone"><em class="fa fa-phone"> </em><span class="ft-content"><a href="tel:+7495123-45-67">+7(495)123-45-67</a></span></p> </div> <div class="worktime911"> <p class="worktime"><em class="fa fa-clock-o"> </em><span class="ft-content">с 10:00 до 19:00</span></p> </div> </div>на
<div class="tel-left"><em class="fa fa-phone"> </em><a href="tel:+7495123-45-67">+7(495)123-45-67</a></div> <div class="time-left"><em class="fa fa-clock-o"> </em>с 10:00 до 20:00</div>В шаблоне main.css удалите строки
.footer-contact911 { float: left; position: relative; top: 10px; left: 30px; color: #696c79; font-size: 18px; }В конец этого шаблона добавьте:
.tel-left { float: left; position: relative; top: 5px; left: 30px; color: #696c79; font-size: 16px; } .time-left { float: left; position: relative; top: 5px; left: 50px; color: #696c79; font-size: 16px; }Далее найдите строку
@media all and (max-width: 991px) {и после нее вставьте
.tel-left {display:none} .time-left {display:none}
#3
Отправлено 19 Ноябрь 2015 - 18:34
RedHead (15 Ноябрь 2015 - 10:16) писал:
В шаблоне html замените строки
<div class="footer-contact911"> <div class="phone911"> <p class="phone"><em class="fa fa-phone"> </em><span class="ft-content"><a href="tel:+7495123-45-67">+7(495)123-45-67</a></span></p> </div> <div class="worktime911"> <p class="worktime"><em class="fa fa-clock-o"> </em><span class="ft-content">с 10:00 до 19:00</span></p> </div> </div>на
<div class="tel-left"><em class="fa fa-phone"> </em><a href="tel:+7495123-45-67">+7(495)123-45-67</a></div> <div class="time-left"><em class="fa fa-clock-o"> </em>с 10:00 до 20:00</div>В шаблоне main.css удалите строки
.footer-contact911 { float: left; position: relative; top: 10px; left: 30px; color: #696c79; font-size: 18px; }В конец этого шаблона добавьте:
.tel-left { float: left; position: relative; top: 5px; left: 30px; color: #696c79; font-size: 16px; } .time-left { float: left; position: relative; top: 5px; left: 50px; color: #696c79; font-size: 16px; }Далее найдите строку
@media all and (max-width: 991px) {и после нее вставьте
.tel-left {display:none} .time-left {display:none}
#4
Отправлено 05 Март 2016 - 18:24
Помогите сделать тел. и поиск в шапку. Чтобы также по нажатию звонить можно было, и если включить слайдер чтобы тел. с поиском и графиком не прилипли к слайдеру. Пытался сделать по выше указанной инструкции, не получилось.
#5
Отправлено 09 Март 2016 - 23:39
#6
Отправлено 10 Март 2016 - 04:15
<div class="col-md-3 col-xs-12"> <div id="logo"> <a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}"><img src="{ASSETS_IMAGES_PATH}logo.png?design=sport" alt="{SETTINGS_STORE_NAME}"></a> </div> </div> <div class="col-md-9 col-xs-12"> <!-- Меню навигации в шапке --> <div id="custommenu"> <!-- Каталог в шапке --> <!-- Для отображения каталога товаров в шапке, замените на следующей строке {% IF MENU_CATALOG %} на {% IFNOT catalog_full_empty %} --> {% IF MENU_CATALOG %} <ul class="mainnav"> {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub {% IF catalog_full.LEVEL > 2 %}hide-cat{% ENDIF %} {% IF catalog_full.LEVEL = 1 %}dropdown-menu{% ENDIF %}">{% ENDIF %}{% ENDIF %} <li 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 %}">{catalog_full.NAME}</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 %} </ul> {% ELSE %} <!-- Меню в шапке --> <ul class="menunav"> {% 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> {% ENDIF %} </div> <div id="mommenu" class="menu-collapse"> <span class="btn btn-navbar menusidebar collapsed" data-toggle="collapse" data-target="#menu_collapse"> <i class="fa fa-bars"></i> </span> <span class="menu_catalog">Каталог</span> <div class="menu_collapse_wrap"> <div id="menu_collapse" class="mainnav collapse"> <ul> {% IFNOT catalog_full_empty %} {% FOR catalog_full %} {% IF catalog_full.FIRST %}{% IFNOT catalog_full.LEVEL = 0 %}<ul class="sub">{% ENDIF %}{% ENDIF %} <li class="level{catalog_full.LEVEL} {% IF catalog_full.ISSET_SUB %}parent{% ENDIF %} {% IF catalog_full.LEVEL = 0 %}subhead{% ENDIF %} {% IF catalog_full.CURRENT || catalog_full.CURRENT_PARENT %}active{% ENDIF %}"> <a href="{catalog_full.URL}" class="title-lv{catalog_full.LEVEL} {% IF catalog_full.CURRENT %}active{% ENDIF %}">{% IF catalog_full.ISSET_SUB %}<span class="open-menu {% IF catalog_full.CURRENT_PARENT || catalog_full.CURRENT %}active{% ENDIF %}"></span>{% ENDIF %}{catalog_full.NAME}</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 %} </ul> </div> </div> </div> <!-- /END Меню навигации в шапке -->
вставьте:
<div class="col-md-12 col-sm-12 col-sms-12 col-smb-12"> <div class="col-md-8 col-sm-7 col-sms-12 col-smb-12"> <div class="search-hover"> <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" title="Поиск по магазину" onsubmit="if($(this).find('.form-search').val()) return false;"> <div class="form-search"> <input type="text" name="q" value="{SEARCH_QUERY}" class="input-text search-string" placeholder="Поиск по магазину..."> <input type="hidden" name="goods_search_field_id" value="0"> <button type="submit" title="Искать" class="fa fa-search"></button> </div> </form> </div> </div> <div class="col-md-4 col-sm-5 col-sms-12 col-smb-12"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p class="phone"><em class="fa fa-phone"> </em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></span></p>{% ENDIF %} {% IF SETTINGS_STORE_WORK_TIME %}<p class="worktime"><em class="fa fa-clock-o"> </em><span class="ft-content">{SETTINGS_STORE_WORK_TIME}</span></p>{% ENDIF %} </div> </div>
В main.css найдите:
div#custommenu {transform: translateY(42px);}
замените на:
div#custommenu { margin-top: 20px; } #header .input-text.search-string { width: 90%; height: 30px; display: inline-block; line-height: 30px; border: 1px solid #2BA2E7; padding: 0 10px; } #header .form-search .fa-search { background: #2BA2E7; border: 1px solid #2BA2E7; color: #fff; height: 30px; width: 9%; display: inline-block; } #header .phone, #header .phone a { color: #2BA2E7; font-size: 24px; }
#8
Отправлено 10 Март 2016 - 12:20
1) в шаблоне HTML перед кодом:
добавьте код:
<div class="col-smb-12 mocontact"> {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p class="phone"><em class="fa fa-phone"> </em><span class="ft-content"><a href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></span></p>{% ENDIF %} {% IF SETTINGS_STORE_WORK_TIME %}<p class="worktime"><em class="fa fa-clock-o"> </em><span class="ft-content">{SETTINGS_STORE_WORK_TIME}</span></p>{% ENDIF %} </div>
В конце main.css добавьте код:
.mocontact { display: none; } .mocontact .phone { width: 50%; float: left; margin: 0; } .mocontact .worktime { width: 50%; float: right; margin: 0; }
после кода:
@media all and (max-width: 991px) {
добавьте код:
.mocontact { display: block; } .col-md-4.col-sm-5.col-sms-12.col-smb-12 { display:none; } .search-hover { margin: 10px; } input.input-text.search-string { width: 84% !important; } #header .phone a { font-size: 16px; } span.ft-content { font-size: 12px; }
далее после кода:
@media all and (max-width: 481px) {
добавьте код:
span.ft-content { font-size: 90%; } span.ft-content { font-size: 12px; }
поиск оставила на месте, уточните, пожалуйста, Вам нужно его скрыть в мобильной версии?
#10
Отправлено 11 Март 2016 - 02:49
@media all and (max-width: 481px) {
пропишите:
#header .col-md-9.col-xs-12 .search-hover { display: none; }
Egik (10 Март 2016 - 19:42) писал:
Перед каким?
Скорее всего перед:
<div id="mommenu" class="menu-collapse"> <span class="btn btn-navbar menusidebar collapsed" data-toggle="collapse" data-target="#menu_collapse"> <i class="fa fa-bars"></i> </span> <span class="menu_catalog">Каталог</span>
#12
Отправлено 11 Март 2016 - 17:21
Egik (11 Март 2016 - 17:06) писал:
Здравствуйте, в main.css rкод:
.mocontact { display: block; } .col-md-4.col-sm-5.col-sms-12.col-smb-12 { display:none; } .search-hover { margin: 10px; } input.input-text.search-string { width: 84% !important; } #header .phone a { font-size: 16px; }
замените на код:
.mocontact { display: block !important; height: 26px; } .col-md-4.col-sm-5.col-sms-12.col-smb-12 { display:none; } .search-hover { margin: 10px; } input.input-text.search-string { width: 84% !important; } #header .phone a { font-size: 16px !important; } #header .col-md-9.col-xs-12 .search-hover { display: none; }
далее код:
.mocontact .phone { width: 50%; float: left; margin: 0; } .mocontact .worktime { width: 50%; float: right; margin: 0; }
замените на код:
.mocontact .phone { width: 50%; display: inline; margin: 0; } .mocontact .worktime { width: 50%; display: inline; margin: 0; }
#14
Отправлено 11 Март 2016 - 20:38
Egik (11 Март 2016 - 17:52) писал:
Еще заметил вот такой недочет планшет скрин2
Здравствуйте. В шаблоне main.css после строки:
@media all and (max-width: 1199px) {вставьте:
.col-md-4.col-sm-5.col-sms-12.col-smb-12 {padding-left: 0px;padding-right: 0px;}
перед строкой:
@media all and (min-width: 768px) {вставьте
@media all and (max-width: 351px) { #header .phone, #header .phone a {font-size: 18px;} }
#19
Отправлено 12 Декабрь 2016 - 18:56
Egik (04 Декабрь 2016 - 14:39) писал:
Это код не могу найти. Хотел также сделать поиск и тел. в шапку
Здравствуйте.
Извините за долгое ожидание ответа. Ваш вопрос еще актуален? Насколько сейчас видно поиск и телефон у Вас уже добавлены в шапку.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных