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


Ряд Изменений

Автор Александр86, 15 дек. 2015 11:39

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

#1 Александр86

Александр86

    Продвинутый пользователь

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

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

Здравствуйте, перешел на новую тему. Хотел бы внести ряд изменений.
1. В подвале сделать полоску под заголовками в размер текста.
2. Уменьшить отступ в подвале.
3. Уменьшить блок с наименованием магазина.
4. Расположить логотип по ширине свободного окна.
5. Сдвинуть верхнее меню чуть левее.
6. Уменьшить отступ перед слайдером.
7. Также в верхнем меню вместо значка адрес, прописать адрес буквами. И хотелось бы, чтобы при нажатии на текст адреса клиент переходил на страницу в раздел контакты.
Буду очень признателен за помощь)

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

  • верхнее меню.jpg
  • подвал.jpg

#2 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (15 Декабрь 2015 - 11:39) писал:

Здравствуйте, перешел на новую тему. Хотел бы внести ряд изменений.
1. В подвале сделать полоску под заголовками в размер текста.
2. Уменьшить отступ в подвале.
3. Уменьшить блок с наименованием магазина.
4. Расположить логотип по ширине свободного окна.
5. Сдвинуть верхнее меню чуть левее.
6. Уменьшить отступ перед слайдером.
7. Также в верхнем меню вместо значка адрес, прописать адрес буквами. И хотелось бы, чтобы при нажатии на текст адреса клиент переходил на страницу в раздел контакты.
Буду очень признателен за помощь)


Здравствуйте,


1) в main.css найдите код:

#footer-middle .footer-title h4:after {width: 35px;border-bottom: 2px solid #fff;content: "";position: absolute;bottom: -5px;left: 0;}

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

#footer-middle .footer-title h4:after {width: 180px;border-bottom: 2px solid #fff;content: "";position: absolute;bottom: -5px;left: 0;}

Это код для всех пунктов одинаковый, к сожалению, разную длину поставить не получится.

2)  Там же найдите код:

#footer-middle {padding: 30px 0px 20px;}

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

#footer-middle {padding: 30px 0px 0px;}

а так же код:

#footer-middle .footer-content .link-follow {overflow: hidden;width: 200px;margin: 20px auto;}

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

#footer-middle .footer-content .link-follow {overflow: hidden;width: 200px;margin: 20px auto 0px auto;}



3) Опять там же найдите и удалите код:

#footer-bottom .container {padding: 15px;}

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

#header .container .row .col-md-3.col-xs-12 {
padding: 0;
}

Он у Вас расположен по всей ширине, скорее всего, Вы имели ввиду, чтобы и высота соответствовала, но для этого лучше загрузить логотип с высотой такой же как у этого блока, иначе, будет выглядеть некрасиво
QIP Shot - Screen 060.png

5) В конце main.css добавьте код:

#header .container .row .col-md-9.col-xs-12 {
	padding-left: 0;
}

6) там же найдите и удалите код:

#header {margin-bottom: 20px;}

7) Адрес у Вас прописан, Вам требуется убрать значок?
QIP Shot - Screen 061.png

#3 Александр86

Александр86

    Продвинутый пользователь

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

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

Спасибо, а какой размер логотипа должен быть, чтобы полностью разместить его в окне?

#4 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (15 Декабрь 2015 - 15:56) писал:

Спасибо, а какой размер логотипа должен быть, чтобы полностью разместить его в окне?

Примерно 300 пикселей ширина и 90 пикселей высота, и кратное этому.

#5 Александр86

Александр86

    Продвинутый пользователь

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

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

Спасибо) Еще вопрос возник, а возможно вместо каталога на главной установить баннер.Каталог спустить ниже. Адаптироваться будет также?

#6 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (15 Декабрь 2015 - 17:03) писал:

Спасибо) Еще вопрос возник, а возможно вместо каталога на главной установить баннер.Каталог спустить ниже. Адаптироваться будет также?


Адаптивность останется. Чтобы добавить баннер в шаблоне HTML найдите код:

		 <!-- Левый блок -->
		 <div class="col-md-3 col-xs-12 col-left" {% IF MOD_LNAME=cart || MOD_LNAME=goods %}style="display: none;"{% ENDIF %}>
		 {% IF MOD_LNAME = user && CLIENT_IS_LOGIN %}
		 <div class="block user-menu">
			 <div class="block-title"><h5><span>Меню</span></h5></div>
			 <div class="block-menu-content">
			 <ul>
				 <li><a href="{USER_SETTINGS_URL}" {% IF CURRENT_URL = USER_SETTINGS_URL %}class="active"{% ENDIF %}>Мой кабинет</a></li>
				 <li><a href="{FAVORITES_URL}" {% IF CURRENT_URL = FAVORITES_URL %}class="active"{% ENDIF %}>Избранное</a></li>
				 <li><a href="{USER_HISTORY_LIST_URL}" {% IF CURRENT_URL = USER_HISTORY_LIST_URL %}class="active"{% ENDIF %}>История заказов</a></li>
				 <li><a href="{COMPARE_URL}" {% IF CURRENT_URL = COMPARE_URL %}class="active"{% ENDIF %}>Сравнение</a></li>
				 <li><a href="{USER_LOGOUT_URL}" {% IF CURRENT_URL = USER_LOGOUT_URL %}class="active"{% ENDIF %}>Выход</a></li>
			 </ul>
			 </div>
		 </div>
		 {% ENDIF %}


после него добавьте код:

<div class="banner"><img src="ссылка на изображение" alt="" title="" /></div>


в main.css после кода :

@media all and (max-width: 991px) {

добавьте код:

.banner {display:none;}

Добавляйте свое изображение и изменяйте "ссылка на изображение"

#7 Александр86

Александр86

    Продвинутый пользователь

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

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

Сделал, скажите, еще вопрос, нельзя ли сделать небольшой отступ от картинки и каталога.И возможно ли по такой же инструкции добавить несколько баннеров? И еще вопрос возник, а возможно ли кнопки соцсетей заменить иконками, н чтобы также остался переход на страницы соцсетей?
Спасибо огромное за помощь))

#8 Danil

Danil

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

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

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

Просмотр сообщенияАлександр86 (15 Декабрь 2015 - 18:48) писал:

Сделал, скажите, еще вопрос, нельзя ли сделать небольшой отступ от картинки и каталога.И возможно ли по такой же инструкции добавить несколько баннеров? И еще вопрос возник, а возможно ли кнопки соцсетей заменить иконками, н чтобы также остался переход на страницы соцсетей?
Спасибо огромное за помощь))
В конец main.css добавьте
.banner img {
margin: 10px 0 10px 0;
}
В шаблоне html найдите код
<div class="banner"><img src="http://games-and-phones.storeland.net/banners-attack_84211.jpg?4356&502379383891" alt="" title="" /></div>
и замените на 
<div class="banner">
<img src="http://games-and-phones.storeland.net/banners-attack_84211.jpg?4356&502379383891" alt="" title="" />
<img src="ссылка на изображение1" alt="" title="" />
<img src="ссылка на изображение2" alt="" title="" />
<img src="ссылка на изображение3" alt="" title="" />
</div>

#9 Александр86

Александр86

    Продвинутый пользователь

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

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

Спасибо, все работает) А по поводу социальных сетей, возможно ли вставить для них цветные иконки? И еще эти баннеры возможно сделать кликабельными?

#10 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (16 Декабрь 2015 - 11:09) писал:

Спасибо, все работает) А по поводу социальных сетей, возможно ли вставить для них цветные иконки? И еще эти баннеры возможно сделать кликабельными?


1) Соц. сети. Да, можно, для этого Вам необходимо найти картинки и добавить их в редакторе шаблонов. Далее инструкции мы Вам вышлем.

2) В шаблоне Html найдите код:

<div class="banner">
<img src="http://games-and-phones.storeland.net/banners-attack_84211.jpg?4356&502379383891" alt="" title="" />
<div class="banner"><img src="http://games-and-phones.storeland.net/2491345611.png?2384&805188492638" alt="" title="" /></div>
<div class="banner"><img src="http://games-and-phones.storeland.net/ps43.jpg?2776&554231645771" alt="" title="" /></div>
<div class="banner"><img src="http://games-and-phones.storeland.net/297108_640989652594544_154753120_n-1.jpg?2817&312376589281" alt="" title="" /></div>
<div class="banner"><img src="http://games-and-phones.storeland.net/297108_640989652594544_154753120_n-1.jpg?2817&312376589281" alt="" title="" /></div>
</div>

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

<div class="banner"><a href="ссылка" ><img src="http://games-and-phones.storeland.net/banners-attack_84211.jpg?4356&502379383891" alt="" title="" /></a></div>
<div class="banner"><a href="ссылка" ><img src="http://games-and-phones.storeland.net/2491345611.png?2384&805188492638" alt="" title="" /></a></div>
<div class="banner"><a href="ссылка" ><img src="http://games-and-phones.storeland.net/ps43.jpg?2776&554231645771" alt="" title="" /></a></div>
<div class="banner"><a href="ссылка" ><img src="http://games-and-phones.storeland.net/297108_640989652594544_154753120_n-1.jpg?2817&312376589281" alt="" title="" /></a></div>
<div class="banner"><a href="ссылка" ><img src="http://games-and-phones.storeland.net/297108_640989652594544_154753120_n-1.jpg?2817&312376589281" alt="" title="" /></a></div>

"ссылка" замените на нужные Вам ссылки

#11 Александр86

Александр86

    Продвинутый пользователь

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

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

Спасибо, а какого размера необходимы картинки?

#12 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (16 Декабрь 2015 - 12:38) писал:

Спасибо, а какого размера необходимы картинки?

где-то 1920*700 px и кратные этому значения

#13 Александр86

Александр86

    Продвинутый пользователь

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

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

Здравствуйте, картинки добавил, хотел бы добавить иконки соцсетей, и расположить их в верхней шапке, рядом с телефоном и email. С белым фоном.Такое возможно ?

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

  • верхнее меню1.jpg

#14 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (17 Декабрь 2015 - 11:29) писал:

Здравствуйте, картинки добавил, хотел бы добавить иконки соцсетей, и расположить их в верхней шапке, рядом с телефоном и email. С белым фоном.Такое возможно ?

Здравствуйте, да, конечно. В шалоне Html найдите код:

<div class="header_phone">
						 {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<p class="phone"><em class="fa fa-phone">&nbsp;</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_EMAIL_MAIN %}<p class="email"><em class="fa fa-envelope">&nbsp;</em><span class="ft-content"><a href="mailto:{SETTINGS_STORE_EMAIL_MAIN}">{SETTINGS_STORE_EMAIL_MAIN}</a></span></p>{% ENDIF %}
						 {% IF SETTINGS_STORE_WORK_TIME %}<p class="worktime"><em class="fa fa-clock-o">&nbsp;</em><span class="ft-content">{SETTINGS_STORE_WORK_TIME}</span></p>{% ENDIF %}
											 </div>

после него добавьте код:

<div class="header-social">
		 <a class="social vk" href="ssilka"><img src="{ASSETS_IMAGES_PATH}icons-files-extensions.gif" alt="" title="" /></a>
		 <a class="social tw" href="ssilka"><img src="{ASSETS_IMAGES_PATH}Twitter_banner-590x278.jpg" alt="" title="" /></a>
		 <a class="social instagram" href="ssilka"><img src="{ASSETS_IMAGES_PATH}Instagram Logo.jpg" alt="" title="" /></a>
		 <a class="social ok" href="ssilka"><img src="{ASSETS_IMAGES_PATH}112015_009378297400.jpg" alt="" title="" /></a>
	 </div>


"ssilka" замените на ссылки на ваши соц.сети

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

a.social img {
height: 30px;
margin-right: 5px;
}
.header-social {
float: right;
position: absolute;
transform: translate(1012px, -47px);
}

Должно получится так:

QIP Shot - Screen 068.png

#15 Александр86

Александр86

    Продвинутый пользователь

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

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

Спасибо, все получилось. А возможно их сделать чуть меньше? по высоте как телефон и email?

#16 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (17 Декабрь 2015 - 12:04) писал:

Спасибо, все получилось. А возможно их сделать чуть меньше? по высоте как телефон и email?

Да, в коде 

a.social img {
height: 30px;
margin-right: 5px;
}

меняйте значение height

#17 Александр86

Александр86

    Продвинутый пользователь

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

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

Спасибо большое) И последний вопрос, возможно ли сделать информационный блок также кликабельным?

#18 Юля123

Юля123

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

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

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

Просмотр сообщенияАлександр86 (17 Декабрь 2015 - 12:13) писал:

Спасибо большое) И последний вопрос, возможно ли сделать информационный блок также кликабельным?

Да, можно, в шаблоне HTML найдите код:

<!-- Информационный блок -->
{% IF index_page %}
<div id="block-info">
	 <div class="container">
	 <div class="row">
		 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
		 <div class="icon-block"><em class="fa fa-truck">&nbsp;</em></div>
		 <div class="text-block">
			 <h4>Гибкий график доставки</h4>
		 </div>
		 </div>
		 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
		 <div class="icon-block"><em class="fa fa-unlock-alt">&nbsp;</em></div>
		 <div class="text-block">
			 <h4>Консультация специалистов 24 часа</h4>
		 </div>
		 </div>
		 <div class="clear-resp"></div>
		 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
		 <div class="icon-block"><em class="fa fa-rotate-left">&nbsp;</em></div>
		 <div class="text-block">
			 <h4>12 месяцев гарантии</h4>
		 </div>
		 </div>
		 <div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
		 <div class="icon-block"><em class="fa fa-phone">&nbsp;</em></div>
		 <div class="text-block">
			 <h4>Прием заказов 24/7</h4>
		 </div>
		 </div>
	 </div>
	 </div>
</div>
{% ENDIF %}
<!-- /END Информационный блок -->

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

<!-- Информационный блок -->
{% IF index_page %}
<div id="block-info">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
<a href="ssilka" title="Подсказка">
<div class="icon-block"><em class="fa fa-truck">&nbsp;</em></div>
<div class="text-block">
<h4>Гибкий график доставки</h4>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
<a href="ssilka" title="Подсказка">
<div class="icon-block"><em class="fa fa-unlock-alt">&nbsp;</em></div>
<div class="text-block">
<h4>Консультация специалистов 24 часа</h4>
</div>
</a>
</div>
<div class="clear-resp"></div>
<div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
<a href="ssilka" title="Подсказка">
<div class="icon-block"><em class="fa fa-rotate-left">&nbsp;</em></div>
<div class="text-block">
<h4>12 месяцев гарантии</h4>
</div>
</a>
</div>
<div class="col-md-3 col-sm-6 col-sms-6 col-smb-12 block-top-content">
<a href="ssilka" title="Подсказка">
<div class="icon-block"><em class="fa fa-phone">&nbsp;</em></div>
<div class="text-block">
<h4>Прием заказов 24/7</h4>
</div>
</a>
</div>
</div>
</div>
</div>
{% ENDIF %}
<!-- /END Информационный блок -->


здесь все "ssilka" замените на соответствующие  ссылки, а "Подсказка" на текст, который должен всплывать при наведении:
QIP Shot - Screen 069.png

#19 Александр86

Александр86

    Продвинутый пользователь

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

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

Спасибо)

#20 Александр86

Александр86

    Продвинутый пользователь

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

Отправлено 22 Декабрь 2015 - 12:07

Здравствуйте, снова возник вопрос, точнее два, буду очень признателен за помощь.
1. После подтверждения почты на  Google, появилась полоска сверху и значки в правом углу. Видимо что-то не так сделал, не подскажите как убрать?
2. Добавил почту, она оказалась чуть шире прежнй, поэтому время работы наехало на значки соцсетей. Можно это также исправить?

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

  • шапка2.jpg

Обратно в Шаблон Спорт


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

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

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