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


Помогите Перекроить Шаблон

истро переделать дизайн шаб лон

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

#1 Olga89

Olga89

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

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

Отправлено 12 Сентябрь 2014 - 07:27

Здравствуйте, помогите пожалуйста переделать шаблон Бистро. Кое что пододвинуть, кое что изменить.

1. Сдвинуть меню ниже, чтобы над ним образовалось полоса. Закрасить ее в цвет. Высота этой полосы должна регулироваться.
2. Убрать поисковую строку в футер вправо.
3. Уже сделала, спасибо модераторам.
4.Контакты перенести в новое поле сверху и поставить справа как на фото в следующем порядке: телефоны, скайп, email. "Связь с нами" и "часы работы" убрать.
5.Уже сделала, спасибо модераторам.
6. Вставить слайдер из шаблона хамелеон
7. Уже сделала, спасибо модераторам.
8. Убрать логотип в новое поле сверху в левую его часть, как на фото.
9. Пункты меню должны подсвечиваться не только голубым прямоугольником но и выделяться двумя чертами белого цвета, как на фото.
10. Надпись "корзина пуста" сделать больше.
11. В футоре данные компании сделать компактнее, т. е . в две строки: на первой название компании и магазина, а на второй "все права защищены".
12. Подскажите где регулируется высота футера, он очень большой.
13. Убрать новости и меню из футера. Вставить панель с иконками видов оплаты.

Заранее благодарю за проявленное терпение.

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

  • сайт1.jpg
  • сайт2.jpg


#2 Taisia

Taisia

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

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

Отправлено 12 Сентябрь 2014 - 07:36

К сожалению в адаптивных шаблонах перенос блоков мы можем сделать только при условии что вы пришлете скриншоты расположения переносимых блоков для всех возможных размеров экранов.
Адаптивный шалон подразумевает что при различных размерах экрана внешний вид сайта меняется (адаптируется). Проверить это можно просто уменьшая размер окна браузера.
Таким образом для внесения изменений нам необходимо знать как будут вести себя переносимые блоки на новом месте при изменении размеров окна.
Нам нужны все скриншоты этих вариантов для всех блоков.

#3 Olga89

Olga89

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

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

Отправлено 12 Сентябрь 2014 - 08:20

Красные линии - это границы привязки текста или картинки.
Высоту верхней полосы предполагаю сделать 150 пикселей. Тогда контакты и логотип должны поместиться.
Варианты оплаты хочу сделать как в шаблоне Движение или на этом сайте http://xn--j1aie4bxa.xn--p1ai/
Остальное вроде как видно на фото.

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

  • сайт5.jpg
  • сайт6.jpg


#4 Olga89

Olga89

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

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

Отправлено 12 Сентябрь 2014 - 12:53

Товарищи, помогите... В понедельник магазин запускать надо уже.

#5 Olga89

Olga89

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

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

Отправлено 13 Сентябрь 2014 - 04:01

? :(

#6 Vaccina

Vaccina

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

  • Модераторы
  • 21 167 сообщений

Отправлено 13 Сентябрь 2014 - 04:23

В HTML перед:
<div class="panel-top">
расположите:
<div class="top_info">
<div class="logo">
						<a href="http://{NET_DOMAIN}/" title="{SETTINGS_STORE_NAME}">
							<img src="{ASSETS_IMAGES_PATH}logo.png" alt="{SETTINGS_STORE_NAME}. Перейти на главную" />
							<link itemprop="logo" href="{ASSETS_IMAGES_PATH}logo.png" />
							<span class="store_name">{SETTINGS_STORE_NAME}</span>
						</a>
					</div>
				   
				   
				   
		<ul id="contactShow">
						   
							{% IF SETTINGS_STORE_PHONE_NUMBER1 %}
								<li class="phone tel1">
									<span class="phoneImg"></span><a itemprop="telephone" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}{SETTINGS_STORE_PHONE_CITY_CODE1}{% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}" >{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}</a>
								</li>
							{% ENDIF %}
							{% IF SETTINGS_STORE_PHONE_NUMBER2 %}
								<li class="phone tel2">
									<span class="phoneImg"></span><a itemprop="telephone" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}" >{SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}</a>
								</li>
							{% ENDIF %}
							{% IF SETTINGS_STORE_PHONE_NUMBER3 %}
								<li class="phone tel3">
									<span class="phoneImg"></span><a itemprop="telephone" title="Номер телефона: {SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}" href="tel:{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}" >{SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}</a>
								</li>
							{% ENDIF %}
							<!-- Есл есть номер icq -->
							{% IF SETTINGS_STORE_ICQ %}
								<li class="headerIcq">
									{% IF SETTINGS_STORE_ICQ_ONLY_DIGITS %}<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус icq" width="16" height="16" />{% ENDIF %}
									{SETTINGS_STORE_ICQ}
								</li>
							{% ENDIF %}
							{% IF SETTINGS_STORE_SKYPE %}
								<li class="skype"><span class="skypeImg"></span><span>Skype:&nbsp;</span><a href="skype:{SETTINGS_STORE_SKYPE}">{SETTINGS_STORE_SKYPE}</a></li>
							{% ENDIF %}
						</ul>
</div>

далее в main.css добавьте:
.top_info{
background:#fff;
}
.max-line .logo{
float:left;
width:auto;
}
.max-line #contactShow{
float:right;
}

На счет корзины, в main.css добавьте:
.cartNameText{
font-size:16px;
}


#7 Olga89

Olga89

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

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

Отправлено 13 Сентябрь 2014 - 05:58

Получилось как то не так, как я рисовала

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

  • сайт8.jpg
  • сайт5.jpg


#8 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 13 Сентябрь 2014 - 06:38

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

<!-- Есл есть номер icq -->
														{% IF SETTINGS_STORE_ICQ %}
																<li class="headerIcq">
																		{% IF SETTINGS_STORE_ICQ_ONLY_DIGITS %}<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус icq" width="16" height="16" />{% ENDIF %}
																		{SETTINGS_STORE_ICQ}
																</li>
														{% ENDIF %}
														{% IF SETTINGS_STORE_SKYPE %}
																<li class="skype"><span class="skypeImg"></span><span>Skype:&nbsp;</span><a href="skype:{SETTINGS_STORE_SKYPE}">{SETTINGS_STORE_SKYPE}</a></li>
														{% ENDIF %}
												</ul>
</div>

заменить на

<!-- Есл есть номер icq -->
														{% IF SETTINGS_STORE_ICQ %}
																<li class="headerIcq">
																		{% IF SETTINGS_STORE_ICQ_ONLY_DIGITS %}<img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&amp;img=27" alt="Статус icq" width="16" height="16" />{% ENDIF %}
																		{SETTINGS_STORE_ICQ}
																</li>
														{% ENDIF %}
														{% IF SETTINGS_STORE_SKYPE %}
																<li class="skype"><span class="skypeImg"></span><span>Skype:&nbsp;</span><a href="skype:{SETTINGS_STORE_SKYPE}">{SETTINGS_STORE_SKYPE}</a></li>
														{% ENDIF %}
												</ul>
  <div style="clear: both;"></div>
</div>


#9 Olga89

Olga89

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

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

Отправлено 13 Сентябрь 2014 - 07:16

на первом фото то, как оно выглядит сейчас
на втором, то как оно должно быть

Вверху хотелось бы, чтобы была не белая полоса, а серовато-голубая, как на фото.

Второй телефон не помещается в одну строку.
Как сделать крупнее иконки и текст?
Как сделать текст жирнее?
Как добавить туда e-mail?

Еще под логотипом прописывается название магазина "Восток". Как его убрать и оставить только лого?

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

  • сайт9.jpg
  • сайт10.jpg


#10 Dars

Dars

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

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

Отправлено 13 Сентябрь 2014 - 07:48

Просмотр сообщенияOlga89 (13 Сентябрь 2014 - 07:16) писал:

на первом фото то, как оно выглядит сейчас
на втором, то как оно должно быть

Вверху хотелось бы, чтобы была не белая полоса, а серовато-голубая, как на фото.

Второй телефон не помещается в одну строку.
Как сделать крупнее иконки и текст?
Как сделать текст жирнее?
Как добавить туда e-mail?

Еще под логотипом прописывается название магазина "Восток". Как его убрать и оставить только лого?
1. В main.css найдите код:

.top_info{
background:#fff;
}

и замените его на:

.top_info{
background:#70a9c2;
}

2. Туда же добавьте строку:

.tel1 {height:25px;}

3, 4. Касательно иконок - имеет смысл вырезать из картинки sprites.png изображение телефона, перерисовать его в большем размере и сохранить в отдельном файле, который затем и задать в качестве фона. С текущим изображением увеличить иконку не получится.

Касательно текста: в main.css найдите строку:

.max-line #contactShow{
float:right;
}

и замените её на:

.max-line #contactShow{
float:right;
font-size: 16px;
font-weight:bold;
}

16 замените на нужный вам размер шрифта. Возможно, необходимо будет увеличить параметр height в п.2.

5. В шаблоне HTML после строк:

<li class="skype"><span class="skypeImg"></span><span>Skype:&nbsp;</span><a href="skype:{SETTINGS_STORE_SKYPE}">{SETTINGS_STORE_SKYPE}</a></li>
																												{% ENDIF %}

добавьте строку:

<li><span class="iconMail"></span><a>Ваш e-mail</a></li>

"Ваш e-mail" замените нужным вам адресом.

Затем в main.css найдите строку:

#contactShow .title .iconMail {

и замените её на:

.iconMail {

6. В шаблоне HTML найдите и удалите строку:

<span class="store_name">{SETTINGS_STORE_NAME}</span>


#11 Olga89

Olga89

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

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

Отправлено 15 Сентябрь 2014 - 03:21

Спасибо.
Но логотип и контакты остались привязаны к правому краю страницы. А мне нужно чтобы они находились как на фотографии. То есть не вылазили за гразицы меню и "корзина пуста". Высота голубой полоски очень большая. Много свободного пространства.

Нужно поставить логотип и контакты на то место, которое я нарисовала на скриншоте.

И навание магазина под логотипом не исчезло.

И иконка email на другом уровне стоит.

Просмотр сообщенияOlga89 (12 Сентябрь 2014 - 07:27) писал:

Здравствуйте, помогите пожалуйста переделать шаблон Бистро. Кое что пододвинуть, кое что изменить.


9. Пункты меню должны подсвечиваться не только голубым прямоугольником но и выделяться двумя чертами белого цвета, как на фото.
11. В футоре данные компании сделать компактнее, т. е . в две строки: на первой название компании и магазина, а на второй "все права защищены".
12. Подскажите где регулируется высота футера, он очень большой.
13. Убрать новости и меню из футера. Вставить панель с иконками видов оплаты.

Заранее благодарю за проявленное терпение.

И подскажите пожалуйста, что нужно сделать по этим пунктам?

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

  • сайт11.jpg
  • сайт2.jpg
  • сайт12.jpg


#12 AnnaM

AnnaM

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

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

Отправлено 15 Сентябрь 2014 - 06:49

Просмотр сообщенияOlga89 (15 Сентябрь 2014 - 03:21) писал:

Спасибо.
Но логотип и контакты остались привязаны к правому краю страницы. А мне нужно чтобы они находились как на фотографии. То есть не вылазили за гразицы меню и "корзина пуста". Высота голубой полоски очень большая. Много свободного пространства.

Нужно поставить логотип и контакты на то место, которое я нарисовала на скриншоте.

И навание магазина под логотипом не исчезло.

И иконка email на другом уровне стоит.



И подскажите пожалуйста, что нужно сделать по этим пунктам?
1. в шаблоне HTML удалите строку
<span class="store_name">{SETTINGS_STORE_NAME}</span>
2. в main.css замените
.logo {
display: block;
float: left;
overflow: hidden;
margin-bottom: 10%;
width: 100%;
}
на
.logo {
display: block;
float: left;
overflow: hidden;
margin: 1% 0 1% 19%;
width: 100%;
}
3. в main.css замените
.max-line #contactShow {
float: right;
font-size: 20px;
font-weight: bold;
}
на
.max-line #contactShow {
float: right;
font-size: 20px;
font-weight: bold;
margin: 1% 19% 1% 0;
}


#13 AnnaM

AnnaM

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

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

Отправлено 15 Сентябрь 2014 - 07:06

Просмотр сообщенияOlga89 (15 Сентябрь 2014 - 03:21) писал:

Спасибо.
Но логотип и контакты остались привязаны к правому краю страницы. А мне нужно чтобы они находились как на фотографии. То есть не вылазили за гразицы меню и "корзина пуста". Высота голубой полоски очень большая. Много свободного пространства.

Нужно поставить логотип и контакты на то место, которое я нарисовала на скриншоте.

И навание магазина под логотипом не исчезло.

И иконка email на другом уровне стоит.



И подскажите пожалуйста, что нужно сделать по этим пунктам?
13. удалите из шаблона HTML код
Скрытый текст
и этот
Скрытый текст
12.  в шаблоне HTML удалите
<div class="settingsStore">
					{SETTINGS_STORE_HTML_CODE}
				</div>
11. в main.css замените
.infoSite {
display: block;
float: right;
padding: 1% 1% 1% 2%;
margin: 1% 1% 0% 0%;
width: 20%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #1abc9c;
color: #d1f2eb;
line-height: 1.4;
}
на
.infoSite {
display: block;
float: right;
padding: 1% 1% 1% 2%;
margin: 1% 1% 0% 0%;
width: 21%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #1abc9c;
color: #d1f2eb;
line-height: 1.4;
}
и в шаблоне HTML замените строку
&raquo;<span itemprop="name" class="settingsStoreOrgName">{SETTINGS_STORE_ORG_NAME}</span><br />
на
&raquo;<span itemprop="name" class="settingsStoreOrgName">{SETTINGS_STORE_ORG_NAME}</span>


#14 Olga89

Olga89

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

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

Отправлено 15 Сентябрь 2014 - 08:50

Просмотр сообщенияOlga89 (12 Сентябрь 2014 - 08:20) писал:

Красные линии - это границы привязки текста или картинки.
1. Варианты оплаты хочу сделать как в шаблоне Движение или на этом сайте http://xn--j1aie4bxa.xn--p1ai/

2. Убрать поисковую строку в футер вправо.
3. Информацию о магазине сгруппировать как на фото в три строчки по центру.
4. На двух скринах видно, что логотип и контакты при изменении масштаба экрана гуляют во все стороны. Можно их как-то привязать к тем местам, к которым я хочу? Ведь "Корзина пуста" не гуляет.

Просмотр сообщенияOlga89 (15 Сентябрь 2014 - 03:21) писал:

5. И иконка email на другом уровне стоит. То есть выше чем само email.

Просмотр сообщенияOlga89 (12 Сентябрь 2014 - 07:27) писал:

Здравствуйте, помогите пожалуйста переделать шаблон Бистро. Кое что пододвинуть, кое что изменить.

.
6. Вставить слайдер из шаблона хамелеон

9. Пункты меню должны подсвечиваться не только голубым прямоугольником но и выделяться двумя чертами белого цвета, как на фото.


Заранее благодарю за проявленное терпение.

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

  • сайт14.jpg
  • сайт15.jpg
  • сайт12.jpg
  • сайт13.jpg


#15 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 15 Сентябрь 2014 - 12:27

Просмотр сообщенияOlga89 (15 Сентябрь 2014 - 08:50) писал:

2. Убрать поисковую строку в футер вправо.
3. Информацию о магазине сгруппировать как на фото в три строчки по центру.
4. На двух скринах видно, что логотип и контакты при изменении масштаба экрана гуляют во все стороны. Можно их как-то привязать к тем местам, к которым я хочу? Ведь "Корзина пуста" не гуляет.
Здравствуйте.
2. В HTML найдите блок
<div class="search">
					 <form action="http://{NET_DOMAIN}/search" id="searchform" method="get" title="Поиск по сайту">
						 <ul>
						 <li class="right">
							 <input type="submit" class="btn" title="Найти" value="" />
						 </li>
						 <li class="left">
							 <input type="text" id="s" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value = (this.value == '') ? 'Поиск' : this.value;" onfocus="this.value = (this.value == 'Поиск') ? '' : this.value;" id="s" class="" name="q" />
							 <div id="delete"></div>
						 </li>
						 </ul>
					 </form>
				 </div>
и переместите его, поставив после строки
<div class="footerCenter">
после этого в main.css в конец добавьте
.search {
float: right;
width: 280px;
margin: 1% 1% 0% 0%;
}
4. В main.css замените
.max-line {
position: relative;
z-index: 5;
display: block;
width: 100%;
box-shadow: none;
filter: none;
}
на
.max-line {
position: relative;
z-index: 5;
display: block;
max-width: 1170px;
box-shadow: none;
filter: none;
min-width: 280px;
margin: auto;
}
затем
.max-line .logo {
float: left;
width: auto;
}
замените на
.max-line .logo {
float: left;
width: auto;
margin-left: 0;
}
после чего
.max-line #contactShow {
float: right;
font-size: 20px;
font-weight: bold;
margin: 1% 19% 1% 0;
}
замените на
.max-line #contactShow {
float: right;
font-size: 20px;
font-weight: bold;
margin: 1% 0 1% 0;
}
5. В main.css замените
.max-line #contactShow {
float: right;
font-size: 20px;
font-weight: bold;
margin: 1% 0 1% 0;
}
на
.max-line #contactShow {
float: right;
font-size: 20px;
font-weight: bold;
margin: 1% 0 1% 0;
width: 255px;
}
затем в конец main.css добавьте
#contactShow li {
height: 25px;
}


#16 Olga89

Olga89

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

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

Отправлено 15 Сентябрь 2014 - 12:33

Попробовала исправить footer сама и все смешалось в доме обломских.
Я вставляла код такой:
<footer class="footer">
		 <div class="footerCenter">
			
			 <div class="footerBot">
							 <div class="four columns">
		 <h3>Варианты оплаты</h3>
		 <a class="open-close" href="#"></a>
		 <div class="wrapper">
			 <div id="payment_services">
			 <span class="icon_1" title="Мы принимаем к оплате квитанции сбербанка">&nbsp;</span>
			 <span class="icon_2" title="Мы принимаем к оплате кредитные карты VISA">&nbsp;</span>
			 <span class="icon_3" title="Мы принимаем к оплате кредитные карты MasterCard">&nbsp;</span>
			 <span class="icon_4" title="Мы принимаем оплату через кредитные карты Maestro" >&nbsp;</span>
			 <span class="icon_5" title="Мы принимаем к оплате Яндекс.Деньги">&nbsp;</span>
			 <span class="icon_6" title="Мы принимаем к оплате Webmoney">&nbsp;</span>
			 <span class="icon_7" title="Мы принимаем оплату через систему РБК money">&nbsp;</span>
			 <span class="icon_8" title="Мы принимаем оплату через SMS">&nbsp;</span>
			 <span class="icon_9" title="Мы принимаем оплату через терминалы оплаты Qiwi">&nbsp;</span>
			 <span class="icon_10" title="Мы принимаем оплату через Робокассу">&nbsp;</span>
			 </div>
		 </div>
		 </div>
		 <div class="four columns">
		
		 </div>
		 <div class="four columns">
		 <h3>Обратная связь</h3>
		 <a class="open-close" href="#"></a>
		 <div class="wrapper">
			 <div class="submit_message"></div>
			 {% IF FORM_SEND_OK %}<div class="success">Ваше сообщение успешно отправлено администрации магазина</div>{% ENDIF %}	
		
			 <form method="post" action="javascript:void(null);" id="feedbackForm" enctype="multipart/form-data">
			 {% IFNOT FORM_SEND_OK %}
				 <input type="hidden" name="hash" value="{HASH}" />
				 <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
				 {ANTISPAM_CODE}
				 <div class="left">
				 <p><label for="feedback_name" class="required">Представьтесь, пожалуйста<em>*</em></label></p>
				 <span class="forname logoinput">&nbsp;</span>
				 <input id="feedback_name" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="required"/>
				 <p><label for="feedback_email" class="required">Электронная почта<em>*</em></label></p>
				 <span class="foremail logoinput">&nbsp;</span>
				 <input id="feedback_email" type="email" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="required email input-text"/>
				 <!--<p><label for="feedback_file" class="required">Прикрепить файл</label></p>
				 <input id="feedback_file" type="file" name="form[assets_file]" value="" />-->
				 <p><label for="feedback_message" class="required">Текст сообщения<em>*</em></label></p>
				 <textarea id="feedback_message" rows="11" cols="40" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" class="required">{FORM_FEEDBACK_MESSAGE}</textarea>
				 </div>
				 <div class="clear"></div>
			 {% ENDIF %}
			 <div class="buttons">
				 <div class="left">
				 <p class="back-link">{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="buy_button">Отправить</button>{% ENDIF %}</p>
				 <div class="infoSite">
					 <div itemscope itemtype="http://schema.org/Organization" class="copy">
						 &copy; <span class="dateYear">{DATE_YEAR}</span> &laquo;<span class="settingsStoreName">{SETTINGS_STORE_NAME}</span>
						 &raquo;<span itemprop="name" class="settingsStoreOrgName">{SETTINGS_STORE_ORG_NAME}</span>
						 <span itemprop="location" class="settingsStoreRegion">{SETTINGS_STORE_REGION}</span>
					 </div>
					 <div class="copyrightFor">
						 <span>{COPYRIGHT_FOR_DESIGN_AUTUMN}</span>
						 <span>Все права защищены</span>
					 </div>
				 </div>
			 </div>
			
		 </div>
	 </footer>
</div><!-- .sb-slide .wrapper -->
<script>
	 var folderImg = '{ASSETS_IMAGES_PATH}';
	 var indexPage = "{index_page}";
</script>
</body>
</html>

1. Добавила иконки плаnежных систем, но так ничего и не появилось на сайте да и вообще дизайн этой части не похож на то, что я хотела (см. третье фото)
2. Обратная связь: поле текста сообщения очень большое, а кнопка "отправить " переехала вправо во второй столбец
3. Информация о магазине должна быть в три строки и справа, а она получилась... ну Вы сами посмотрите :)
4.  На других страницах кроме главной footer очень большой по высоте.
5. И код поисковика не могу найти и вставить в footer

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

  • сайт17.jpg
  • сайт18.jpg
  • сайт13.jpg


#17 Alekseys

Alekseys

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

  • Модераторы
  • 2 355 сообщений

Отправлено 15 Сентябрь 2014 - 14:51

Просмотр сообщенияOlga89 (15 Сентябрь 2014 - 12:33) писал:

Попробовала исправить footer сама и все смешалось в доме обломских.
Я вставляла код такой:
<footer class="footer">
		 <div class="footerCenter">
			
			 <div class="footerBot">
							 <div class="four columns">
		 <h3>Варианты оплаты</h3>
		 <a class="open-close" href="#"></a>
		 <div class="wrapper">
			 <div id="payment_services">
			 <span class="icon_1" title="Мы принимаем к оплате квитанции сбербанка">&nbsp;</span>
			 <span class="icon_2" title="Мы принимаем к оплате кредитные карты VISA">&nbsp;</span>
			 <span class="icon_3" title="Мы принимаем к оплате кредитные карты MasterCard">&nbsp;</span>
			 <span class="icon_4" title="Мы принимаем оплату через кредитные карты Maestro" >&nbsp;</span>
			 <span class="icon_5" title="Мы принимаем к оплате Яндекс.Деньги">&nbsp;</span>
			 <span class="icon_6" title="Мы принимаем к оплате Webmoney">&nbsp;</span>
			 <span class="icon_7" title="Мы принимаем оплату через систему РБК money">&nbsp;</span>
			 <span class="icon_8" title="Мы принимаем оплату через SMS">&nbsp;</span>
			 <span class="icon_9" title="Мы принимаем оплату через терминалы оплаты Qiwi">&nbsp;</span>
			 <span class="icon_10" title="Мы принимаем оплату через Робокассу">&nbsp;</span>
			 </div>
		 </div>
		 </div>
		 <div class="four columns">
		
		 </div>
		 <div class="four columns">
		 <h3>Обратная связь</h3>
		 <a class="open-close" href="#"></a>
		 <div class="wrapper">
			 <div class="submit_message"></div>
			 {% IF FORM_SEND_OK %}<div class="success">Ваше сообщение успешно отправлено администрации магазина</div>{% ENDIF %}	
		
			 <form method="post" action="javascript:void(null);" id="feedbackForm" enctype="multipart/form-data">
			 {% IFNOT FORM_SEND_OK %}
				 <input type="hidden" name="hash" value="{HASH}" />
				 <!-- Набор полей которые не видит пользователь, но видят боты. Когда они их заполняют мы точно знаем, что их прислал нам бот и мы не сохраняем подобный отзыв о товаре, а боту отправившему отзыв сообщаем, что отзыв добавлен успешно, но будет отображён здесь после прохождения модерации -->
				 {ANTISPAM_CODE}
				 <div class="left">
				 <p><label for="feedback_name" class="required">Представьтесь, пожалуйста<em>*</em></label></p>
				 <span class="forname logoinput">&nbsp;</span>
				 <input id="feedback_name" type="text" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="required"/>
				 <p><label for="feedback_email" class="required">Электронная почта<em>*</em></label></p>
				 <span class="foremail logoinput">&nbsp;</span>
				 <input id="feedback_email" type="email" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="required email input-text"/>
				 <!--<p><label for="feedback_file" class="required">Прикрепить файл</label></p>
				 <input id="feedback_file" type="file" name="form[assets_file]" value="" />-->
				 <p><label for="feedback_message" class="required">Текст сообщения<em>*</em></label></p>
				 <textarea id="feedback_message" rows="11" cols="40" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" class="required">{FORM_FEEDBACK_MESSAGE}</textarea>
				 </div>
				 <div class="clear"></div>
			 {% ENDIF %}
			 <div class="buttons">
				 <div class="left">
				 <p class="back-link">{% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="buy_button">Отправить</button>{% ENDIF %}</p>
				 <div class="infoSite">
					 <div itemscope itemtype="http://schema.org/Organization" class="copy">
						 &copy; <span class="dateYear">{DATE_YEAR}</span> &laquo;<span class="settingsStoreName">{SETTINGS_STORE_NAME}</span>
						 &raquo;<span itemprop="name" class="settingsStoreOrgName">{SETTINGS_STORE_ORG_NAME}</span>
						 <span itemprop="location" class="settingsStoreRegion">{SETTINGS_STORE_REGION}</span>
					 </div>
					 <div class="copyrightFor">
						 <span>{COPYRIGHT_FOR_DESIGN_AUTUMN}</span>
						 <span>Все права защищены</span>
					 </div>
				 </div>
			 </div>
			
		 </div>
	 </footer>
</div><!-- .sb-slide .wrapper -->
<script>
	 var folderImg = '{ASSETS_IMAGES_PATH}';
	 var indexPage = "{index_page}";
</script>
</body>
</html>

1. Добавила иконки плаnежных систем, но так ничего и не появилось на сайте да и вообще дизайн этой части не похож на то, что я хотела (см. третье фото)
2. Обратная связь: поле текста сообщения очень большое, а кнопка "отправить " переехала вправо во второй столбец
3. Информация о магазине должна быть в три строки и справа, а она получилась... ну Вы сами посмотрите :)
4.  На других страницах кроме главной footer очень большой по высоте.
5. И код поисковика не могу найти и вставить в footer
Замените в HTML
Скрытый текст
на
Скрытый текст
затем в main.css замените
.infoSite {
display: block;
float: right;
padding: 1% 1% 1% 2%;
margin: 1% 1% 0% 0%;
width: 21%;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #1abc9c;
color: #d1f2eb;
line-height: 1.4;
}
на
.infoSite {
display: block;
float: right;
padding: 1% 1% 1% 2%;
margin: 1% 1% 0% 0%;
width: 205px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #1abc9c;
color: #d1f2eb;
line-height: 1.4;
}
в конец main.css добавьте
.four.columns {
float: left;
width: 31%;
padding: 1%;
}
и
#sb-site.wrapper {
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 305px;
min-height: 100%;
height: auto;
background-color: #2C3E50;
}
замените на
#sb-site.wrapper {
position: relative;
z-index: 0;
margin: 0 auto;
min-width: 305px;
min-height: 100%;
height: auto;
background-color: white;
}


#18 Olga89

Olga89

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

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

Отправлено 16 Сентябрь 2014 - 07:06

Спасибо, а что по поводу 1,2 и 3? Мне нужно. чтобы выглядело как на фото. А сейчас вот так: http://ledvs.ru/

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

  • сайт11.jpg


#19 Ирина345

Ирина345

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

  • Модераторы
  • 5 092 сообщений

Отправлено 16 Сентябрь 2014 - 07:35

Просмотр сообщенияOlga89 (16 Сентябрь 2014 - 07:06) писал:

Спасибо, а что по поводу 1,2 и 3? Мне нужно. чтобы выглядело как на фото. А сейчас вот так: http://ledvs.ru/
Здравствуйте,
1. добавьте в конец файла main,css

#payment_services{clear: both;margin: 10px 16px;text-align: center;}
#payment_services span{width: 50px;height:30px;display: block;float: left;margin: 0 9px 10px 0;text-align: center;cursor: pointer;}
#payment_services span.icon_1{background: url("{ASSETS_IMAGES_PATH}icon_sb.png") no-repeat;}
#payment_services span.icon_2{background: url("{ASSETS_IMAGES_PATH}icon_visa.png") no-repeat;}
#payment_services span.icon_3{background: url("{ASSETS_IMAGES_PATH}icon_mastercard.png") no-repeat;}
#payment_services span.icon_4{background: url("{ASSETS_IMAGES_PATH}icon_maestro.png") no-repeat;}
#payment_services span.icon_5{background: url("{ASSETS_IMAGES_PATH}icon_yad.png") no-repeat;}
#payment_services span.icon_6{background: url("{ASSETS_IMAGES_PATH}icon_webmoney.png") no-repeat;}
#payment_services span.icon_7{background: url("{ASSETS_IMAGES_PATH}icon_rbkmoney.png") no-repeat;}
#payment_services span.icon_8{background: url("{ASSETS_IMAGES_PATH}icon_sms.png") no-repeat;}
#payment_services span.icon_9{background: url("{ASSETS_IMAGES_PATH}icon_qiwi.png") no-repeat;}
#payment_services span.icon_10{background: url("{ASSETS_IMAGES_PATH}icon_robo.png") no-repeat;margin-right: 0!important;}
#payment_services span.icon_1:hover{background: url("{ASSETS_IMAGES_PATH}icon_sb_hover.png") no-repeat;}
#payment_services span.icon_2:hover{background: url("{ASSETS_IMAGES_PATH}icon_visa_hover.png") no-repeat;}
#payment_services span.icon_3:hover{background: url("{ASSETS_IMAGES_PATH}icon_mastercard_hover.png") no-repeat;}
#payment_services span.icon_4:hover{background: url("{ASSETS_IMAGES_PATH}icon_maestro_hover.png") no-repeat;}
#payment_services span.icon_5:hover{background: url("{ASSETS_IMAGES_PATH}icon_yad_hover.png") no-repeat;}
#payment_services span.icon_6:hover{background: url("{ASSETS_IMAGES_PATH}icon_webmoney_hover.png") no-repeat;}
#payment_services span.icon_7:hover{background: url("{ASSETS_IMAGES_PATH}icon_rbkmoney_hover.png") no-repeat;}
#payment_services span.icon_8:hover{background: url("{ASSETS_IMAGES_PATH}icon_sms_hover.png") no-repeat;}
#payment_services span.icon_9:hover{background: url("{ASSETS_IMAGES_PATH}icon_qiwi_hover.png") no-repeat;}
#payment_services span.icon_10:hover{background: url("{ASSETS_IMAGES_PATH}icon_robo_hover.png") no-repeat;}

2. найдите в HTML


                          
	<div class="infoSite">
								  <div itemscope itemtype="http://schema.org/Organization" class="copy">
										&copy; <span class="dateYear">{DATE_YEAR}</span> &laquo;<span class="settingsStoreName">{SETTINGS_STORE_NAME}</span>
										&raquo;<span itemprop="name" class="settingsStoreOrgName">{SETTINGS_STORE_ORG_NAME}</span>
										<span itemprop="location" class="settingsStoreRegion">{SETTINGS_STORE_REGION}</span>
								  </div>
								  <div class="copyrightFor">
										<span>{COPYRIGHT_FOR_DESIGN_AUTUMN}</span>
										<span>Все права защищены</span>
								  </div>
замените на


<div class="poick"><div class="search">
						<form action="http://{NET_DOMAIN}/search" id="searchform" method="get" title="Поиск по сайту">
						  <ul>
							<li class="right">
							  <input type="submit" class="btn" title="Найти" value="" />
							</li>
							<li class="left">
							  <input type="text" id="s" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value = (this.value == '') ? 'Поиск' : this.value;" onfocus="this.value = (this.value == 'Поиск') ? '' : this.value;" id="s" class="" name="q" />
							  <div id="delete"></div>  
							</li>
						  </ul>
						</form>
					</div></div> 
						  <div class="four columns">
						  
								<div class="infoSite">
								  <div itemscope itemtype="http://schema.org/Organization" class="copy">
										&copy; <span class="dateYear">{DATE_YEAR}</span> &laquo;<span class="settingsStoreName">{SETTINGS_STORE_NAME}</span>
										&raquo;<span itemprop="name" class="settingsStoreOrgName">{SETTINGS_STORE_ORG_NAME}</span>
										<span itemprop="location" class="settingsStoreRegion">{SETTINGS_STORE_REGION}</span>
								  </div>
								  <div class="copyrightFor">
										<span>{COPYRIGHT_FOR_DESIGN_AUTUMN}</span>
										<span>Все права защищены</span>
								  </div>
в конец файла main.css добавьте
.poick{float: left;
width: 18%;
padding: 1%;
margin-left: 145px;}


#20 Olga89

Olga89

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

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

Отправлено 16 Сентябрь 2014 - 07:54

1. Поиск налез на информацию о сайте. Поле поиска какое-то маленькое, не такое, как должно быть в оригинале шаюлона.
2. Нужно убрать это пустое пространство в footere
3. В верхней линии страницы значек скайпа убежал выше самого скайпа. Постоянно туда сбегает. Подскажите, чем это регулируется?
4. Как убрать логотип в этом месте со всех страниц?
5. У меня на этой странице какая-то котовасия творится. Контакты уехали вправо, а должны быть над формой связи.

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

  • сайт13.jpg
  • сайт14.jpg






Темы с аналогичным тегами истро, переделать, дизайн, шаб, лон

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

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