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


Изменение Шаблона

Автор BooModa, 19 сент. 2014 13:43

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

#1 BooModa

BooModa

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

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

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

Здравствуйте! Хотелось бы сделать следующее:
1. Полностью убрать скрывающуюся область (с надписью добро пожаловать на сайт)
2. Поиск сместить в строку меню
3. Соответственно немного расширить строку меню, чтобы убрался поиск

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

  • Снимок.JPG

#2 AnnaM

AnnaM

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

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

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

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 13:43) писал:

Здравствуйте! Хотелось бы сделать следующее:
1. Полностью убрать скрывающуюся область (с надписью добро пожаловать на сайт)
2. Поиск сместить в строку меню
3. Соответственно немного расширить строку меню, чтобы убрался поиск
1. в HTML удалите код
Скрытый текст
2. в шаблоне HTML вставьте  код 
<!-- Форма поиска -->
		 <div id="search">
			 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;">
			 <button title="Искать" type="submit" value="Поиск" class="button-search"></button>
			 <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = &#39;&#39;;" onkeydown="this.style.color = &#39;#000000&#39;;"/>
			 </form>
		 </div>
		 <!-- /Форма поиска -->
  перед строчками 
</div>

		 <!-- Если в тарифном плане подключен модуль сравнения товаров -->

#3 BooModa

BooModa

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

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

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

Теперь хотелось бы зафиксировать строку поиска параллельно корзине, немного расширить её влево и фон сделать белым))

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

  • Снимок3.JPG

#4 AnnaM

AnnaM

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

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

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

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 15:26) писал:

Теперь хотелось бы зафиксировать строку поиска параллельно корзине, немного расширить её влево и фон сделать белым))
Пришлите пожалуйста скриншот с указанием точного расположения и вида поиска.

#5 BooModa

BooModa

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

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

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

Просмотр сообщенияAnnaM (19 Сентябрь 2014 - 15:30) писал:

Пришлите пожалуйста скриншот с указанием точного расположения и вида поиска.

Выше прикреплен :)

#6 AnnaM

AnnaM

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

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

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

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 15:32) писал:

Выше прикреплен :)
Для такого отображения вам необходимо было как в инструкции выше поставить блок 
<!-- Форма поиска -->
				 <div id="search">
						 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;">
						 <button title="Искать" type="submit" value="Поиск" class="button-search"></button>
						 <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = &#39;&#39;;" onkeydown="this.style.color = &#39;#000000&#39;;"/>
						 </form>
				 </div>
				 <!-- /Форма поиска -->
перед кодом 
</div>
				 <!-- Если в тарифном плане подключен модуль сравнения товаров -->
Все это в шаблоне HTML.

#7 BooModa

BooModa

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

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

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

Просмотр сообщенияAnnaM (19 Сентябрь 2014 - 15:46) писал:

Для такого отображения вам необходимо было как в инструкции выше поставить блок 
<!-- Форма поиска -->
				 <div id="search">
						 <form id="search_mini_form" action="http://{NET_DOMAIN}/search" method="get" onsubmit="if($(this).find('#search').val()=='Поиск по магазину...') return false;">
						 <button title="Искать" type="submit" value="Поиск" class="button-search"></button>
						 <input type="text" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по магазину...{% ENDIF %}" onfocus="if(this.value=='Поиск по магазину...'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по магазину...';}" onclick="this.value = &#39;&#39;;" onkeydown="this.style.color = &#39;#000000&#39;;"/>
						 </form>
				 </div>
				 <!-- /Форма поиска -->
перед кодом 
</div>
				 <!-- Если в тарифном плане подключен модуль сравнения товаров -->
Все это в шаблоне HTML.

Готово) А как область поиска вытянуть влево (до начала слова покупок в корзине) и сделать белый фон внутри окошка?

#8 AnnaM

AnnaM

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

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

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

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 15:56) писал:

Готово) А как область поиска вытянуть влево (до начала слова покупок в корзине) и сделать белый фон внутри окошка?
В main.css замените 
input[type='text'], input[type='password'], textarea, .inputText {
padding: 4px;
background: #f8f8f8;
border: 1px solid;
border-color: #ddd #eee #eee #ddd !important;
border-radius: 2px !important;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
margin-left: 0;
margin-right: 0;
}
на 
input[type='text'], input[type='password'], textarea, .inputText {
padding: 4px;
background: #fff;
border: 1px solid;
border-color: #ddd #eee #eee #ddd !important;
border-radius: 2px !important;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
margin-left: 0;
margin-right: 0;
}

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 15:56) писал:

Готово) А как область поиска вытянуть влево (до начала слова покупок в корзине) и сделать белый фон внутри окошка?
В main.css замените 
#header #search {
position: relative;
float: right;
right: 0px;
margin-bottom: 9px;
width: 225px;
z-index: 15;
}
на 
#header #search {
position: relative;
float: right;
right: 0px;
margin-bottom: 9px;
width: 247px;
z-index: 15;
}
и 
#header #search input {
width: 160px;
height: 21px;
padding: 8px;
}
на 
#header #search input {
width: 184px;
height: 21px;
padding: 8px;
}

#9 BooModa

BooModa

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

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

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

Просмотр сообщенияAnnaM (19 Сентябрь 2014 - 16:05) писал:

В main.css замените 
input[type='text'], input[type='password'], textarea, .inputText {
padding: 4px;
background: #f8f8f8;
border: 1px solid;
border-color: #ddd #eee #eee #ddd !important;
border-radius: 2px !important;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
margin-left: 0;
margin-right: 0;
}
на 
input[type='text'], input[type='password'], textarea, .inputText {
padding: 4px;
background: #fff;
border: 1px solid;
border-color: #ddd #eee #eee #ddd !important;
border-radius: 2px !important;
-moz-border-radius: 2px !important;
-webkit-border-radius: 2px !important;
margin-left: 0;
margin-right: 0;
}

В main.css замените 
#header #search {
position: relative;
float: right;
right: 0px;
margin-bottom: 9px;
width: 225px;
z-index: 15;
}
на 
#header #search {
position: relative;
float: right;
right: 0px;
margin-bottom: 9px;
width: 247px;
z-index: 15;
}
и 
#header #search input {
width: 160px;
height: 21px;
padding: 8px;
}
на 
#header #search input {
width: 184px;
height: 21px;
padding: 8px;
}


Спасибо вам огромное :rolleyes: Ещё несколько вопросов:
1. Как передвинуть строку меню влево, чтобы все было на одной линии (фото прилагается)
2. Как сменить цвет этой строки на цвет, которым написано название и нарисована корзина (малиновый)
3. Как сменить нижнюю область сайта на этот же цвет.
4. Как если что вернуть прежний (серый цвет), по отдельности для 2 и 3 пункта =)

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

  • Снимок5.JPG
  • Снимок6.JPG

#10 AnnaM

AnnaM

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

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

Отправлено 19 Сентябрь 2014 - 17:22

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 17:19) писал:

Спасибо вам огромное :rolleyes: Ещё несколько вопросов:
1. Как передвинуть строку меню влево, чтобы все было на одной линии (фото прилагается)
2. Как сменить цвет этой строки на цвет, которым написано название и нарисована корзина (малиновый)
3. Как сменить нижнюю область сайта на этот же цвет.
4. Как если что вернуть прежний (серый цвет), по отдельности для 2 и 3 пункта =)
1. в main.css замените 
#header .links {
padding-right: 10px;
float: left;
margin-left: 30px;
clear: both;
}
на 
#header .links {
padding-right: 10px;
float: left;
margin-left: -9px;
clear: both;
}
2. в main.css Замените 
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
}
на 
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: #FF0552;
}

#11 AnnaM

AnnaM

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

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

Отправлено 19 Сентябрь 2014 - 17:29

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 17:19) писал:

Спасибо вам огромное :rolleyes: Ещё несколько вопросов:
1. Как передвинуть строку меню влево, чтобы все было на одной линии (фото прилагается)
2. Как сменить цвет этой строки на цвет, которым написано название и нарисована корзина (малиновый)
3. Как сменить нижнюю область сайта на этот же цвет.
4. Как если что вернуть прежний (серый цвет), по отдельности для 2 и 3 пункта =)
3.в main.css замените 
#footer {
clear: both;
margin-top: 30px;
min-height: 100px;
padding: 0 0 30px 0;
border-top: 4px solid #333333;
background-color: #f0f0f0;
}
на 
#footer {
clear: both;
margin-top: 30px;
min-height: 100px;
padding: 0 0 30px 0;
border-top: 4px solid #333333;
background-color: #FF0552;
}
4. За цвет в этих пунктах отвечает параметр color:#FF0552;  Вы просто заменяете его на прежний.

#12 BooModa

BooModa

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

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

Отправлено 19 Сентябрь 2014 - 17:56

Просмотр сообщенияAnnaM (19 Сентябрь 2014 - 17:22) писал:

1. в main.css замените 
#header .links {
padding-right: 10px;
float: left;
margin-left: 30px;
clear: both;
}
на 
#header .links {
padding-right: 10px;
float: left;
margin-left: -9px;
clear: both;
}
2. в main.css Замените 
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
}
на 
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: #FF0552;
}

Изменился цвет букв, а нужно было изменить серый фон строки на малиновый

Просмотр сообщенияAnnaM (19 Сентябрь 2014 - 17:29) писал:

3.в main.css замените 
#footer {
clear: both;
margin-top: 30px;
min-height: 100px;
padding: 0 0 30px 0;
border-top: 4px solid #333333;
background-color: #f0f0f0;
}
на 
#footer {
clear: both;
margin-top: 30px;
min-height: 100px;
padding: 0 0 30px 0;
border-top: 4px solid #333333;
background-color: #FF0552;
}
4. За цвет в этих пунктах отвечает параметр color:#FF0552;  Вы просто заменяете его на прежний.

Так получился белый фон, но он мне даже больше понравился)))

#13 BooModa

BooModa

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

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

Отправлено 19 Сентябрь 2014 - 18:10

Так как мне изменить серый цвет на малиновый а цвет надписей главная, доставка и т.д. вернуть черный?

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

  • Снимок7.JPG

#14 Alekseys

Alekseys

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

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

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

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 18:10) писал:

Так как мне изменить серый цвет на малиновый а цвет надписей главная, доставка и т.д. вернуть черный?
Здравствуйте. В main.css замените в блоке
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: #FF0552;
}
color: #FF0552; на color: black; затем в блоке
.header_top {
width: 100%;
margin: 0 auto;
min-height: 40px;
background-color: #f5f5f5;
}

замените background-color: #f5f5f5; на background-color: #FF0552;

#15 BooModa

BooModa

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

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

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

Просмотр сообщенияAlekseys (19 Сентябрь 2014 - 18:16) писал:

Здравствуйте. В main.css замените в блоке
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: #FF0552;
}
color: #FF0552; на color: black; затем в блоке
.header_top {
width: 100%;
margin: 0 auto;
min-height: 40px;
background-color: #f5f5f5;
}

замените background-color: #f5f5f5; на background-color: #FF0552;

Фон изменился, а цвет букв на черный не поменялся

#16 Alekseys

Alekseys

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

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

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

Просмотр сообщенияBooModa (19 Сентябрь 2014 - 18:48) писал:

Фон изменился, а цвет букв на черный не поменялся
Вы не до конца выполнили инструкцию. Замените
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: #FF0552;
}
на
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: black;
}

#17 BooModa

BooModa

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

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

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

Просмотр сообщенияAlekseys (19 Сентябрь 2014 - 18:58) писал:

Вы не до конца выполнили инструкцию. Замените
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: #FF0552;
}
на
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: black;
}

Может я заменила не там? У меня ничего не меняется, цвет все тот же..

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

  • Снимок8.JPG

#18 Alekseys

Alekseys

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

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

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

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

Может я заменила не там? У меня ничего не меняется, цвет все тот же..
Проблема из-за того, что таких блоков было два. Найдите и удалите
#header .links a {
float: left;
display: block;
padding: 11px 10px 9px 10px;
text-decoration: none;
font-size: 12px;
color: #FF0552;
}

#19 AnnaM

AnnaM

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

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

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

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

Может я заменила не там? У меня ничего не меняется, цвет все тот же..
У вас в main.css Данный блок встречается 2 раза. А изменения только в первом. Второй на строке 646.

#20 BooModa

BooModa

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

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

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

А как мне изменить цвет вот этой строки?

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

  • Снимок9.JPG

Обратно в Изменение общей стилистики


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

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

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