Перейти к содержимому


Перестановки В Шапке

Автор edwin, 19 дек. 2015 19:32

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 37

#21 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 25 Декабрь 2015 - 16:16

Просьба помочь с изменениями, как на картинке:
1. Сделать нижнюю рамку под блоком меню
2. Поднять снизу блок информации, сузив его по высоте
3. Перенести Слайдер.

Изменения.jpg

#22 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 25 Декабрь 2015 - 17:56

Просмотр сообщенияedwin (25 Декабрь 2015 - 16:16) писал:

Просьба помочь с изменениями, как на картинке:
1. Сделать нижнюю рамку под блоком меню
2. Поднять снизу блок информации, сузив его по высоте
3. Перенести Слайдер.

Прикрепленный файл Изменения.jpg


Найдите в HTML код:

	<!-- Информационный блок -->
	{% IF index_page %}
	<div id="block-info">
	  <div class="container">
		<div class="row">
		  <div class="col-lg-12  col-md-12  col-sm-12  col-xs-12  ">
			<div class="row">
			  <div class="col-md-4 col-sm-4 block-item effect-bounceInRight">
				<div class="icon">
				  <span><div class="fa fa-truck">&nbsp;</div></span>
				</div>
				<div class="text">
				  <h6>Бесплатная доставка</h6>
				  <p>Доставка по городу и области Бесплатна!</p>
				</div>
			  </div>
			  <div class="col-md-4 col-sm-4 block-item effect-bounceInRight">
				<div class="icon">
				  <span><div class="fa fa-comments">&nbsp;</div></span>
				</div>
				<div class="text">
				  <h6>100% гарантия возврата средств</h6>
				  <p>Вы можете вернуть товар в течении 30 дней после получения заказа.</p>
				</div>
			  </div>
			  <div class="col-md-4 col-sm-4 block-item effect-bounceInRight">
				<div class="icon">
				  <span><div class="fa fa-share">&nbsp;</div></span>
				</div>
				<div class="text">
				  <h6>Прием заказов 24/7</h6>
				  <p>Оформите заказ в интернет-магазине "Название магазина" Прямо сейчас!</p>
				</div>
			  </div>
			</div>
		  </div>
		</div>
	  </div>
	</div>
	{% ENDIF %}
	<!-- /END Информационный блок -->




и переместите его перед кодом:


<!-- Jssor Slider Слайдер -->


В main.css найдите код:

#slider {position: relative; margin: 0 auto;top: 0px; left: 0px; width: 1920px; height: 450px; overflow: hidden;z-index:1;}

и замените на код:

#slider {position: relative; margin: 0 auto;top: 79px; left: 0px; width: 1920px; height: 450px; overflow: hidden;z-index:1;}


далее найдите код:

.header-middle.index {background: rgba(255,255,255,0.4) none repeat scroll 0 0;display: block;z-index: 11;border: 0;height: 96px;}

и замените на код:

.header-middle.index {background: rgba(255,255,255,0.4) none repeat scroll 0 0;display: block;z-index: 11;border: 0;}

#23 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 25 Декабрь 2015 - 18:23

Спасибо, отлично!
Хотелось бы еще сузить по ширине (до размеров блока товаров на главной) и вдвое по высоте информационный блок (вместе с иконками), залить его серым цветом  f5f5f5 и сузить по ширине слайдер до размеров блока товаров на главной.

#24 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 26 Декабрь 2015 - 11:14

Просмотр сообщенияedwin (25 Декабрь 2015 - 18:23) писал:

Спасибо, отлично!
Хотелось бы еще сузить по ширине (до размеров блока товаров на главной) и вдвое по высоте информационный блок (вместе с иконками), залить его серым цветом  f5f5f5 и сузить по ширине слайдер до размеров блока товаров на главной.

Здравствуйте! Перед внесением изменений, создайте бэкап.

1) В шаблоне jssor_slider.js найдите строку
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1920))
замените на
jssor_slider1.$SetScaleWidth(Math.min(bodyWidth, 1140))

далее в шаблоне main.css найдите строки
#slideshow {top: -96px;position: relative;}
#slider {position: relative; margin: 0 auto;top: 79px; left: 0px; width: 1920px; height: 450px; overflow: hidden;z-index:1;}
замените на
#slideshow {position: relative;top: 5px;}
#slider {position: relative; margin: 0 auto;left: 0px; width: 1920px; height: 450px; overflow: hidden;z-index:1;}

2) В шаблоне main.css найдите строки
#block-info {padding: 20px 0;border-top: 1px solid #dddddd;position: relative;}
#block-info .block-item .icon {display: inline-block;float: left;position: relative;width: 80px;height: 38px;background-color: rgba(0,0,0,0);margin: 23px 0;border-left: solid 1px #dddddd;border-right: solid 1px #dddddd;text-align: center;padding: 0;}
замените на
#block-info {border-top: 1px solid #dddddd;position: relative;}
#block-info .block-item .icon {top: 10px;display: inline-block;float: left;position: relative;width: 80px;height: 38px;background-color: rgba(0,0,0,0);margin: 23px 0;border-left: solid 1px #dddddd;border-right: solid 1px #dddddd;text-align: center;padding: 0; zoom: 0.7;}

затем строки
#block-info .block-item .text {padding-left: 100px;text-transform: none;}
#block-info .block-item .text h6 {color: #404040;margin-top: 20px;margin-bottom: 5px;}
заменить на
#block-info .block-item .text {margin-top: 10px;padding-left: 80px;text-transform: none;}
#block-info .block-item .text h6 {color: #404040;margin-top: 4px;}
.col-lg-12.col-md-12.col-sm-12.col-xs-12 {background: #f5f5f5;}
#block-info .container {width: 1140px;}

затем строку
.row {margin-left: -15px;margin-right: -15px;}
заменить на
.row {margin-left: -15px;margin-right: -15px;margin-top: 5px;}

1.jpg

#25 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 26 Декабрь 2015 - 15:21

Спасибо, у меня размер иконок в block-info почему-то не изменился.

Еще вопрос:

Просмотр сообщенияRedHead (26 Декабрь 2015 - 11:14) писал:

далее в шаблоне main.css найдите строки
#slideshow {top: -96px;position: relative;}
#slider {position: relative; margin: 0 auto;top: 79px; left: 0px; width: 1920px; height: 450px; overflow: hidden;z-index:1;}
замените на
#slideshow {position: relative;top: 5px;}
#slider {position: relative; margin: 0 auto;left: 0px; width: 1920px; height: 450px; overflow: hidden;z-index:1;}

Здесь 1920 не надо менять на 1140?

#26 RedHead

RedHead

    Активный участник

  • Модераторы
  • 1 052 сообщений

Отправлено 26 Декабрь 2015 - 15:46

Просмотр сообщенияedwin (26 Декабрь 2015 - 15:21) писал:

Спасибо, у меня размер иконок в block-info почему-то не изменился.
Еще вопрос:
Здесь 1920 не надо менять на 1140?

1) По поводу слайдера, да, можно в шаблоне main.css так же заменить значение ширины слайдера. В строке #slider..... Вы уже заменили, осталось только в строке
.slides_container {cursor: move; position: absolute; left: 0px; top: 0px; width: 1920px;height: 600px; overflow: hidden;}
заменить значение width: 1920px;

2) Для того, чтобы уменьшить размер иконок внутри шестиугольника, найдите строку
#block-info .block-item .icon div {font-size: 25px;position: relative;z-index: 2;margin-top: 5px;}
меняйте значение font-size в меньшую сторону.

Если необходимо шестиугольник сделать еще меньше, в строке
#block-info .block-item .icon {top: 10px;display: inline-block;float: left;position: relative;width: 80px;height: 38px;background-color: rgba(0,0,0,0);margin: 23px 0;border-left: solid 1px #dddddd;border-right: solid 1px #dddddd;text-align: center;padding: 0; zoom: 0.7;}
измените значение zoom: , например до 0,5.

расстояние от шестиугольника до текста можно изменить в строке
#block-info .block-item .text {margin-top: 10px;padding-left: 80px;text-transform: none;}
меняя значение padding-left

#27 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 26 Декабрь 2015 - 16:14

Спасибо большое, буду пробовать.

#28 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 27 Декабрь 2015 - 02:03

Просмотр сообщенияRedHead (26 Декабрь 2015 - 15:46) писал:

Если необходимо шестиугольник сделать еще меньше, в строке
#block-info .block-item .icon {top: 10px;display: inline-block;float: left;position: relative;width: 80px;height: 38px;background-color: rgba(0,0,0,0);margin: 23px 0;border-left: solid 1px #dddddd;border-right: solid 1px #dddddd;text-align: center;padding: 0; zoom: 0.7;}
измените значение zoom: , например до 0,5.

расстояние от шестиугольника до текста можно изменить в строке
#block-info .block-item .text {margin-top: 10px;padding-left: 80px;text-transform: none;}
меняя значение padding-left

как-то размеры шестиугольника не хотят меняться, сейчас стоит zoom: 0,1, а размеры такие же.

#29 Danil

Danil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 4 645 сообщений

Отправлено 27 Декабрь 2015 - 09:17

Просмотр сообщенияedwin (27 Декабрь 2015 - 02:03) писал:

как-то размеры шестиугольника не хотят меняться, сейчас стоит zoom: 0,1, а размеры такие же.
Здравствуйте.
Чтобы увидеть изменения очистите кэш браузера(ctrl+f5).

#30 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 30 Декабрь 2015 - 00:41

Просмотр сообщенияDanil (27 Декабрь 2015 - 09:17) писал:

Здравствуйте.
Чтобы увидеть изменения очистите кэш браузера(ctrl+f5).

Здравствуйте, спасибо.
Только в  Firefox почему-то никак данные изменения не отображаются, что только не предпринимал. Это глюк браузера?

#31 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 30 Декабрь 2015 - 01:27

Скорее всего браузер закешировал информацию, попробуйте вручную через настройки почистить кэш.
https://support.mozi...it-kesh-firefox

#32 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 30 Декабрь 2015 - 09:41

Спасибо!
Делал так, все равно ширина информац. блока в хроме узкая, согпасно измененному коду, а в Firefox не меняется.

#33 Firefly

Firefly

    Активный участник

  • Модераторы
  • 3 810 сообщений

Отправлено 30 Декабрь 2015 - 10:35

Просмотр сообщенияedwin (30 Декабрь 2015 - 09:41) писал:

Спасибо!
Делал так, все равно ширина информац. блока в хроме узкая, согпасно измененному коду, а в Firefox не меняется.

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:
/******************************************************************************
Фиксы для браузеров
*******************************************************************************/

Замените на:
/******************************************************************************
Фиксы для браузеров
*******************************************************************************/
.Firefox #block-info .block-item .icon {
margin:0px;
-moz-transform:scale(0.4);
transform:scale(0.4);
}

#34 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 30 Декабрь 2015 - 11:37

Да, теперь все в порядке, спасибо!

#35 edwin

edwin

    Пользователь

  • Пользователи
  • PipPip
  • 46 сообщений

Отправлено 16 Январь 2016 - 22:31

Здравствуйте!
Возможно ли блок инфо переделать так, как на рисунке?
Где-то встречался on-line генератор таких блоков, но теперь не могу найти.

инфо.png

#36 evros

evros

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 10 Февраль 2016 - 12:11

Добрый день. Помогите плиз облагородить шапку сайта, как во вложении.

Прикрепленные изображения

  • Шапка сайта.jpg

#37 Юля123

Юля123

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 2 567 сообщений

Отправлено 10 Февраль 2016 - 15:41

Просмотр сообщенияevros (10 Февраль 2016 - 12:11) писал:

Добрый день. Помогите плиз облагородить шапку сайта, как во вложении.

Здравствуйте, перед внесением изменений сделайте бекап. Далее в шаблоне HTMl найдите код:

			 <!-- Телефон в шапке -->
			 <div class="block-phone">
			 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
			 <div class="block-phone-title rhombus">
				 <i class="fa fa-phone" title="Меню">&nbsp;</i>
			 </div>
			 <div class="block-phone-contact">
				 <span class="phone"><a href="skype:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}?call">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></span>
			 </div>
			 {% ENDIF %}
			 {% IF SETTINGS_STORE_EMAIL_MAIN %}
			 <div class="block-email-title rhombus">
				 <i class="fa fa-envelope" title="Меню">&nbsp;</i>
			 </div>
			 <div class="block-email-contact">
				 <span class="email"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></span>
			 </div>
			 {% ENDIF %}
			 </div>

и замените на код:

			 <!-- Телефон в шапке -->
			 <div class="block-phone">
			 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
			 <div class="block-phone-title rhombus">
				 <i class="fa fa-phone" title="Меню">&nbsp;</i>
			 </div>
			 <div class="block-phone-contact">
				 <span class="phone"><a href="skype:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}?call">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a><i class="worktime">Режим работы: с 10:00 до 20:00</i></span>
			 </div>
			 {% ENDIF %}
			 {% IF SETTINGS_STORE_EMAIL_MAIN %}
			 <div class="block-email-title rhombus">
				 <i class="fa fa-envelope" title="Меню">&nbsp;</i>
			 </div>
			 <div class="block-email-contact">
				 <span class="email"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a><i class="worktime">круглосуточно</i></span>
			 </div>
			 {% ENDIF %}
			 <img src="{ASSETS_IMAGES_PATH}bs1.jpg" alt="" title="" class="banner-top" />
			 </div>

В этом коде добавили строки:

<i class="worktime">Режим работы: с 10:00 до 20:00</i>


<i class="worktime">круглосуточно</i>

и

<img src="ссылка на картинку" alt="" title="" class="banner-top" />


Далее в конце main.css добавьте код:

i.worktime {
display: block;
line-height: 10px;
font-size: 14px;
}

и код (для стилизации изображения):

img.banner-top {
width: 143px;
margin-left: 30px;
}

значение 143 - ширина изображения, изменяйте на нужное Вам.

#38 evros

evros

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 284 сообщений
  • ГородМосква

Отправлено 10 Февраль 2016 - 16:30

Просмотр сообщенияЮля123 (10 Февраль 2016 - 15:41) писал:

Здравствуйте, перед внесением изменений сделайте бекап. Далее в шаблоне HTMl найдите код:

			 <!-- Телефон в шапке -->
			 <div class="block-phone">
			 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
			 <div class="block-phone-title rhombus">
				 <i class="fa fa-phone" title="Меню">&nbsp;</i>
			 </div>
			 <div class="block-phone-contact">
				 <span class="phone"><a href="skype:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}?call">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a></span>
			 </div>
			 {% ENDIF %}
			 {% IF SETTINGS_STORE_EMAIL_MAIN %}
			 <div class="block-email-title rhombus">
				 <i class="fa fa-envelope" title="Меню">&nbsp;</i>
			 </div>
			 <div class="block-email-contact">
				 <span class="email"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></span>
			 </div>
			 {% ENDIF %}
			 </div>

и замените на код:

			 <!-- Телефон в шапке -->
			 <div class="block-phone">
			 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}
			 <div class="block-phone-title rhombus">
				 <i class="fa fa-phone" title="Меню">&nbsp;</i>
			 </div>
			 <div class="block-phone-contact">
				 <span class="phone"><a href="skype:{SETTINGS_STORE_PHONE_COUNTRY_CODE1}{SETTINGS_STORE_PHONE_CITY_CODE1}{SETTINGS_STORE_PHONE_NUMBER1}?call">{SETTINGS_STORE_PHONE_COUNTRY_CODE1}({SETTINGS_STORE_PHONE_CITY_CODE1}){SETTINGS_STORE_PHONE_NUMBER1}</a><i class="worktime">Режим работы: с 10:00 до 20:00</i></span>
			 </div>
			 {% ENDIF %}
			 {% IF SETTINGS_STORE_EMAIL_MAIN %}
			 <div class="block-email-title rhombus">
				 <i class="fa fa-envelope" title="Меню">&nbsp;</i>
			 </div>
			 <div class="block-email-contact">
				 <span class="email"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a><i class="worktime">круглосуточно</i></span>
			 </div>
			 {% ENDIF %}
			 <img src="{ASSETS_IMAGES_PATH}bs1.jpg" alt="" title="" class="banner-top" />
			 </div>

В этом коде добавили строки:

<i class="worktime">Режим работы: с 10:00 до 20:00</i>


<i class="worktime">круглосуточно</i>

и

<img src="ссылка на картинку" alt="" title="" class="banner-top" />


Далее в конце main.css добавьте код:

i.worktime {
display: block;
line-height: 10px;
font-size: 14px;
}

и код (для стилизации изображения):

img.banner-top {
width: 143px;
margin-left: 30px;
}

значение 143 - ширина изображения, изменяйте на нужное Вам.

Отлично! Благодарю Вас!
Обратно в Главная


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Лето
  5. → Главная
  6. Privacy Policy