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

[Stas_Y]

Не совсем то что хотелось бы)

[Alekseys]

Stas_Y (25 Сентябрь 2015 - 13:38) писал:

Не совсем то что хотелось бы)

Здравствуйте. Укажите схематично на скриншоте, как в итоге должно отображаться.

[Stas_Y]

Вот)

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

• 

[Alekseys]

Stas_Y (25 Сентябрь 2015 - 16:09) писал:

Вот)

В main.css замените

.header-top .header-top-right #search_mini_form {width: 100%;height: 82px;position: absolute;background-color: #fff;left: 0;			top: 42px;display:none;}

на

.header-top .header-top-right #search_mini_form {width: 100%;height: 150px;position: absolute;background-color: #fff;left: 0;			top: 42px;display:none;}

затем замените

.header-top .header-top-right #search_mini_form:hover {background-color: rgba(247,146,66,.5);}

на

.header-top .header-top-right #search_mini_form:hover {/*background-color: rgba(247,146,66,.5);*/}

после этого замените

.header-top .header-top-right #search_mini_form .form-search #search {float: left;height: 42px;border: 7px solid transparent;border-color: #f79242;width: 80%;font-size: 100%;}

на

.header-top .header-top-right #search_mini_form .form-search #search {float: left;height: 42px;width: 80%;font-size: 100%;font-size: 26px;text-transform: uppercase;}

затем

.header-top .header-top-right #search_mini_form .form-search .button {float: right;background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: center center;width: 10%;height: 42px;cursor:pointer;border-radius:0;border-left:10x solid #fff;}

замените на

.header-top .header-top-right #search_mini_form .form-search .button {float: left;width: 10%;height: 42px;cursor:pointer;background-color: #fff;}

и

.header-top .header-top-right #search_mini_form .close {
		float: right;
		width: 10%;
		text-align: center;
		text-transform: uppercase;
		margin-top: -20px;
		font-size: 20px;
		cursor:pointer;
}

замените на

.header-top .header-top-right #search_mini_form .close {
		float: right;
		width: 10%;
		text-align: center;
		text-transform: uppercase;
		margin-top: -20px;
		font-size: 28px;
		cursor:pointer;
		color: #000;
}

и в конец main.css добавьте

::-webkit-input-placeholder {color:#000;}
::-moz-placeholder		  {color:#000;}/ Firefox 19+ /
:-moz-placeholder		   {color:#000;}/ Firefox 18- /
:-ms-input-placeholder	  {color:#000;}

и в шаблоне HTML замените

				  <p>Чтобы начать поиск, введите описание или артикул</p><div class="close">x</div>

на

				  <div class="close">x</div><p>Чтобы начать поиск, введите описание или артикул</p>

[Stas_Y]

Четко!) Спасибо! Осталось доработать:
1) Слово "Искать" сделать больше
2) Отодвинуть от левого края обе строки
3) Кнопка Х не работает, не закрывает окно

[Alekseys]

Stas_Y (25 Сентябрь 2015 - 17:33) писал:

Четко!) Спасибо! Осталось доработать:
1) Слово "Искать" сделать больше
2) Отодвинуть от левого края обе строки
3) Кнопка Х не работает, не закрывает окно

В main.css замените

.header-top .header-top-right #search_mini_form .form-search #search {float: left;height: 42px;border: 7px solid transparent;border-color: #fff;width: 90%;font-size: 100%;}

на

.header-top .header-top-right #search_mini_form .form-search #search {float: left;height: 42px;width: 60%;font-size: 100%;font-size: 26px;text-transform: uppercase;border:none;}

[Stas_Y]

В точку)  ток строки отодвинуть от левого края

2) Чтобы курсор сразу стоял у слова "искать"

[Alekseys]

Stas_Y (25 Сентябрь 2015 - 18:07) писал:

В точку)  ток строки отодвинуть от левого края

2) Чтобы курсор сразу стоял у слова "искать"

Уточните, слово Искать и текст должны появляться под лупой?

[Stas_Y]

Нет, под логотипом и по высоте пониже

[Alekseys]

Stas_Y (25 Сентябрь 2015 - 18:31) писал:

Нет, под логотипом и по высоте пониже

Попробуйте заменить

.header-top .header-top-right #search_mini_form.active{display:block;}

на

.header-top .header-top-right #search_mini_form.active{display:block;padding: 1% 19%;}

[Stas_Y]

Все четко! Осталось ток сделать чтоб курсор сразу стоял у слова "Искать"
+ давайте тени сделаем у выпадающего белого блока по правому и нижнему краям

[Vaccina]

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

.header-top .header-top-right #search_mini_form.active {
	display: block;
	padding: 1% 19%;
}

замените на:

.header-top .header-top-right #search_mini_form.active {
	display: block;
	padding: 1% 19%;
	box-shadow: 1px 1px 5px #ccc;
}

В main.js найдите:

$(function(){
$('.search_head .hide_search, .search_head .close').click(function(){
  $('.search_head #search_mini_form').toggleClass('active');
});
});

замените на:

$(function(){
$('.search_head .hide_search, .search_head .close').click(function(){
  $('.search_head #search_mini_form').toggleClass('active');
  $('.search_head #search_mini_form #search').focus();
});
});

[Stas_Y]

Офигенно!) Тени такие же можно сделать еще на выпадающее меню?

[Vaccina]

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

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul {
	position: absolute;
	left: 0px;
	top: 50px;
	background: #FFF;
	width: 100%;
	display: none;
}

после него пропишите:

.header-top .header-top-left .navbar-collapse > .top-navbar-links > li > ul {
	box-shadow: 1px 4px 5px #ccc;
}

[Stas_Y]

Четко!)) вот маленькие доработки:
1) Как можно сдвинуть название категории чуть правее?
2) Провести 2 разделителя
3) Подвинуть вторую колонку ближе к первой

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

• 

[Vaccina]

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

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul li a {
	border-bottom: 1px solid #CCC;
	color: #000;
	line-height: 0px;
	padding: 10px;
	margin: 5px;
}

замените на:

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul li a {
	border-bottom: 1px solid #CCC;
	color: #000;
	line-height: 0px;
	padding: 10px 10px 10px 40px;
	margin: 5px;
}

2-3. В main.css найдите:

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
	float: none;
	border: none;
	clear: both;
	display: inline-block;
	width: 45%;
}

замените на:

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
	float: none;
	border-right: 1px solid #ccc;
	clear: both;
	display: inline-block;
	width: 35%;
}

[Stas_Y]

Вот пункт "Свадебная флористика" и "Композиции"  "кому" "повод" как то корявенько встают))

[Vaccina]

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
		float: none;
		border-right: 1px solid #ccc;
		clear: both;
		display: inline-block;
		width: 35%;
}

замените на:

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
		float: none;
		border-right: 1px solid #ccc;
		clear: both;
		display: inline-block;
		width: 45%;
}

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

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul li {
	display: inline-block;
	padding-right: 10px;
	border-right: 1px solid #CCC;
	height: 100%;
}

замените на:

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul li {
	display: inline-block;
	padding-right: 10px;
	border-right: 1px solid #CCC;
	height: 100%;
	width: 50%;
}

[Stas_Y]

И проблемка(( при наведении на пункты выпадающего меню все границы чуть чуть смещаются

[Vaccina]

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

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
	float: none;
	border-right: 1px solid #CCC;
	clear: both;
	display: inline-block;
	width: 45%;
}

попробуйте заменить на:

.header-top .header-top-left .navbar-collapse > .top-navbar-links ul ul li {
	float: none;
	border-right: 1px solid #CCC;
	clear: both;
	display: inline-block;
	width: 49%;
}