Сообщений в теме: 118

[fredshka]

Также мне нужно сделать белым выделенный оранжевым цветом фрагмент. А также убрать белую часть, которая зачеркнута красным.

Еще нужно сделать меню как показано на второй картине. А также, чтобы страница заканчивалась горизонтальной черной полоской (как на картинке в общем)

Как так сделать?

Пожалуйста, не забывайте обо всех вопросах. Спасибо!

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

• 
• 

[Ирина345]

fredshka (08 Июль 2014 - 14:21) писал:

Получилось! Также хотелось бы добавить поиск по сайту в этот бар! Как это сделать?
В горизонтальном меню нужно сделать так, чтобы кнопки растянулись по ширине.

Здравствуйте, что бы начать работать с поиском верните его на страницу, найдите в main.css код

#panelsite div.centercol .search {
background: url("http://design.tort-tut.ru/searchbg.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 41px;
margin: 20px 0 0 73px;
padding: 10px 0 0;
width: 749px;
display:none;
}

замените на

#panelsite div.centercol .search {
background: url("http://design.tort-tut.ru/searchbg.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
float: left;
height: 41px;
margin: 20px 0 0 73px;
padding: 10px 0 0;
width: 749px;

}

в HTML найдите

 <div class="test">

замените на

<div class="test">
<div class="search">
<form action="http://{NET_DOMAIN}/search" id="searchform" method="get">
<div>
<input type="text" 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="text" name="q" />
<input type="image" class="button" src="{ASSETS_IMAGES_PATH}spacer.gif" />
</div>
</form>
</div>

[Castiel]

fredshka (08 Июль 2014 - 14:28) писал:

Также мне нужно сделать белым выделенный оранжевым цветом фрагмент. А также убрать белую часть, которая зачеркнута красным.

Еще нужно сделать меню как показано на второй картине. А также, чтобы страница заканчивалась горизонтальной черной полоской (как на картинке в общем)

Как так сделать?

Пожалуйста, не забывайте обо всех вопросах. Спасибо!

Добавили необходимые изменения по подвалу.

В подвале создали 4 блока для меню. Для того чтобы добавить в данные блоки свои пункты, в разделе Сайт - Меню создаем новые блоки с названиями MENU1 MENU2 MENU3 MENU4 и в них добавляем нужные пункты меню (Образец создан с названием MENU1)

Код меню в подвале, в файле HTML

<div class="footer_menu">
	<div class="fblock">
	<h2>Название Меню</h2>
	  <ul>
		{% FOR menu %}
		  {% FOR MENU1 %}
			{% FOR links %}<li {% IF menu.MENU1.links.first %}class="main"{% ENDIF %} ><a href="{menu.MENU1.links.URL}" {% IF menu.MENU1.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.MENU1.links.TITLE %}title="{menu.MENU1.links.TITLE}"{% ENDIF %}>{menu.MENU1.links.NAME}</a></li>{% ENDFOR %}
		  {% ENDFOR %}
		{% ENDFOR %}
	  </ul>
	</div>
	<div class="fblock">
	<h2>Название Меню</h2>
	  <ul>
		{% FOR menu %}
		  {% FOR MENU2 %}
			{% FOR links %}<li {% IF menu.MENU2.links.first %}class="main"{% ENDIF %} ><a href="{menu.MENU2.links.URL}" {% IF menu.MENU2.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.MENU2.links.TITLE %}title="{menu.MENU2.links.TITLE}"{% ENDIF %}>{menu.MENU2.links.NAME}</a></li>{% ENDFOR %}
		  {% ENDFOR %}
		{% ENDFOR %}
	  </ul>
	</div>
	<div class="fblock">
	<h2>Название Меню</h2>
	  <ul>
		{% FOR menu %}
		  {% FOR MENU3 %}
			{% FOR links %}<li {% IF menu.MENU3.links.first %}class="main"{% ENDIF %} ><a href="{menu.MENU3.links.URL}" {% IF menu.MENU3.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.MENU3.links.TITLE %}title="{menu.MENU3.links.TITLE}"{% ENDIF %}>{menu.MENU3.links.NAME}</a></li>{% ENDFOR %}
		  {% ENDFOR %}
		{% ENDFOR %}
	  </ul>
	</div>
	<div class="fblock">
	<h2>Название Меню</h2>
	  <ul>
		{% FOR menu %}
		  {% FOR MENU4 %}
			{% FOR links %}<li {% IF menu.MENU4.links.first %}class="main"{% ENDIF %} ><a href="{menu.MENU4.links.URL}" {% IF menu.MENU4.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.MENU4.links.TITLE %}title="{menu.MENU4.links.TITLE}"{% ENDIF %}>{menu.MENU4.links.NAME}</a></li>{% ENDFOR %}
		  {% ENDFOR %}
		{% ENDFOR %}
	  </ul>
	</div>
  </div>

Стили для этого меню в файле main.css

.fblock {
  width:25%;
  position: relative;
  float: left;
}
.fblock h2 {
  padding:10px 20px; 
}
.fblock ul li a {
padding-left: 20px;
}

[fredshka]

Спасибо за помощь! Как мне переместить вправо поиск? А то, что-то не могу найти как его двигать...

[MikDark]

fredshka (08 Июль 2014 - 15:53) писал:

Спасибо за помощь! Как мне переместить вправо поиск? А то, что-то не могу найти как его двигать...

В шаблон main.css добавьте:

.search{float:right;}

[fredshka]

Добавил, она просто переместилась вправо, а мне нужно регулировать на сколько px вправо нужно перепестить

[MikDark]

fredshka (08 Июль 2014 - 16:30) писал:

Добавил, она просто переместилась вправо, а мне нужно регулировать на сколько px вправо нужно перепестить

Если оставляем поиск слева, то добавляем:

.search{margin-left:20px;}

20px - это смещение вправо.

[fredshka]

как регулировать длину поиска (белой полоски)?

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

• 

[Taisia]

Для этого в конец файла стилей добавьте код

input#s {
	width: 150px;
}

меняйте значение этого параметра на нужное вам.

[fredshka]

Спасибо! Как сделать так, чтобы когда человек ставил курсор в поисковую строку, фраза "Поиск по сайту" убиралась и появлялась возможность писать с нуля запрос на поиск?

Еще мне нужно поставить текст на бар сверху, как сделать это?

[MikDark]

fredshka (09 Июль 2014 - 13:39) писал:

Спасибо! Как сделать так, чтобы когда человек ставил курсор в поисковую строку, фраза "Поиск по сайту" убиралась и появлялась возможность писать с нуля запрос на поиск?

Еще мне нужно поставить текст на бар сверху, как сделать это?

В шаблоне HTML найдите код:
Находим:

<input type="text" 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="text" name="q" />

Заменяем на:

<input type="text" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по сайту{% ENDIF %}" onfocus="if(this.value=='Поиск по сайту'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по сайту';}" id="s" class="text" name="q" />

Чтобы добавить текст, Вы просто после код:

<input type="text" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{% ELSE %}Поиск по сайту{% ENDIF %}" onfocus="if(this.value=='Поиск по сайту'){this.value='';}" onblur="if(this.value==''){this.value='Поиск по сайту';}" id="s" class="text" name="q" />
<input type="image" class="button" src="{ASSETS_IMAGES_PATH}spacer.gif" />
</div>
</form>
</div>

добавьте такую конструкцию:

<div style="float:left;">Нужный текст</div>

[fredshka]

Со строкой поиска все получилось, спасибо!

А вот с добавление текста не получилось ничего! Помогите, пожалуйста.

Еще хотелось бы меню растянуть по ширине, а в идеале, добавить background к нему какой нибудь... (потом решу какой, главное какой код нужен для этого?)

[MikDark]

fredshka (09 Июль 2014 - 14:15) писал:

Со строкой поиска все получилось, спасибо!

А вот с добавление текста не получилось ничего! Помогите, пожалуйста.

Еще хотелось бы меню растянуть по ширине, а в идеале, добавить background к нему какой нибудь... (потом решу какой, главное какой код нужен для этого?)

Я не увидел у Вас добавленной строки.

[fredshka]

Вот

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

• 

[Castiel]

fredshka (09 Июль 2014 - 14:33) писал:

Вот

Здравствуйте, к сожалению мы не обнаружили данный код, пожалуйста пересохраните ваши изменения.

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

• 

[fredshka]

Все получилось! Спасибо!
Единственное, как двигать и изменять цвет добавленного текста.

Еще хотелось бы меню растянуть по ширине, а в идеале, добавить background к нему какой нибудь... (потом решу какой, главное какой код нужен для этого?)

[MikDark]

fredshka (09 Июль 2014 - 15:59) писал:

Все получилось! Спасибо!
Единственное, как двигать и изменять цвет добавленного текста.

Еще хотелось бы меню растянуть по ширине, а в идеале, добавить background к нему какой нибудь... (потом решу какой, главное какой код нужен для этого?)

После float:left; добавьте background:#000000;color:#ffffff;margin-left:20px;

Отвечают соответственно за фон, цвет текста и отступ слева.

[fredshka]

А с меню что?
Еще нужно полоску добавить вот такую в конец страницы.

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

• 

[MikDark]

fredshka (09 Июль 2014 - 16:20) писал:

А с меню что?
Еще нужно полоску добавить вот такую в конец страницы.

Растянуть меню по ширине не получится, а чтобы заменить фон в main.css находим:

#panelsite div.centercol { background: url("http://s687346.storeland.net/panel-bgx.png") repeat-x scroll 0 0 transparent; width: 960px; }

и меняем на:

#panelsite div.centercol { background: #000; width: 960px; }

где #000 - код фонового цвета.

Полоску сделали.

[fredshka]

Нужно растянуть меню так, чтобы начало кнопок начиналось с красной рамки, а конец ее, соответственно, заканчивался на ее конце.

Полоска имелась ввиду черная, а не белая... Что-то вы не так сделали, похоже..

Еще, как сделать эти кнопки в баре?

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

• 
•