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

[Vaccina]

В main.css после:

.logo a img {
	max-width: 250px;
	padding: 5px;
}

Добавьте:

.adres, .contacts {
	padding: 10px;
	vertical-align: middle;
	font: 12px Comfortaa;
	float: left;
}

В шаблоне HTML перед:

<!-- Поиск -->
						 <form id="search_mini_form2" action="http://{NET_DOMAIN}/search" method="get">
						 <div class="form-search">
								 <input id="search" type="text" name="q" value="" class="search-string" placeholder="Поиск по магазину...">
								 <button type="submit" title="Искать" class="button search-submit"></button>
						 </div>
						 </form>

вставьте:

<div id="login">
{%IF CLIENT_IS_LOGIN%}
<a href="/user/settings" class="second">Личный кабинет</a> | <a href="/user/logout" class="first">Выход</a>
{%ELSE%}
<a href="/user/login" class="second">Войти на сайт</a> | <a href="/user/register" class="first">Регистрация</a>
{%ENDIF%}
</div>

и в main.css после:

.logo a img {
	max-width: 250px;
	padding: 5px;
}

вставьте:

#login{
	float:right;
	padding: 10px;
	vertical-align: middle;
	font: 12px Comfortaa;
}

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

[Stas_Y]

Вот привожу для сравнения))) у нас немного не то)) и полосу надо покрасить только не зеленым а красным)

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

• 

[Vaccina]

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

.header-top {
background-color: #FFF;
height: 50px;
}

замените на:

.header-top {
background-color: #CA4B61;
height: 65px;
color: #fff;
}
.header-top a {
color: #fff;
}

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

.header-top .header-top-right .header-right-mobile {
float: right;
}

замените на:

.header-top .header-top-right .header-right-mobile {
float: left;
margin-top: 7px;
}

В шаблоне HTML найдите:

<div class="adres col-lg-3 col-md-2 col-xs-12">
																													 Новосибирск, Красный проспект 87
																								 </div>

замените на:

<div class="adres col-lg-2 col-md-2 col-xs-12">
Новосибирск,<br/>
Красный проспект 87
</div>

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

<div class="header-top-right col-lg-6 col-md-3 col-sm-6 col-xs-12">
						 <div id="login">

замените на:

<div class="header-top-right col-lg-7 col-md-3 col-sm-6 col-xs-12">
						 <div id="login">

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

#login {
float: right;
padding: 10px;
vertical-align: middle;
font: 12px Comfortaa;
}

замените на:

#login {
float: right;
padding: 10px;
vertical-align: middle;
font: 12px Comfortaa;
margin-top: 12px;
}

Должен получиться следующий результат:

[Stas_Y]

#login не могу такую строку найти((

ИИ второй вопрос а можно у поиска убрать оранжевый фон и сделать его на на моем примере?))

[Vaccina]

Цитата

#login не могу такую строку найти((

Данный должен был быть добавлен по инструкции из сообщения: #21

Цитата

ИИ второй вопрос а можно у поиска убрать оранжевый фон и сделать его на на моем примере?))

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

/* Поиск */
.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 50px;border-left: 1px solid #f2f2f2;position: relative;background-color: rgba(247,146,66,.5);}
.header-top .header-top-right #search_mini_form .form-search {opacity: 1; filter:alpha(opacity = 100);visibility:visible;z-index:1;position: absolute;top: 0;right: 0;height: 50px;}
.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: 11px 12px;width: 52px;height: 50px;cursor:pointer;}
.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 50px;border: 7px solid transparent;border-color: #f79242;width: 200px;font-size: 100%;}

в нем измените значение цвета в стилях border-color: #f79242; и background-color: rgba(247,146,66,.5);

[Stas_Y]

Что-то пошло не так))
в ie так показывает((

И... лупа нужна внутри поисковой строки и скруглить углы)

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

• 

[Ирина345]

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

Что-то пошло не так))
в ie так показывает((

И... лупа нужна внутри поисковой строки и скруглить углы)

Здравствуйте, найдите в файле main.css

.header-top .header-top-right .header-right-mobile {
float: left;
margin-top: 7px;
}

замените на

.header-top .header-top-right .header-right-mobile {
	float: right;
	margin-top: 7px;
	margin-right: 6%;
}

[Stas_Y]

Спасибо поучилось) а перенести значок поиска во внутрь и закруглить углы поможете?

[Alekseys]

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

Спасибо поучилось) а перенести значок поиска во внутрь и закруглить углы поможете?

Здравствуйте. Уточните на скриншоте, куда Вы желаете переместить значок поиска. Закруглить углы в IE не выйдет, поскольку данная стилистика в ранних версиях IE к реализации невозможна.

[Stas_Y]

Ну так дело в том что и в других браузерах все квадратное)

[Alekseys]

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

Ну так дело в том что и в других браузерах все квадратное)

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

.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 50px;border-left: 1px solid #f2f2f2;position: relative;background-color: rgba(247,146,66,.5);}

на

.header-top .header-top-right #search_mini_form {background-image: url('{ASSETS_IMAGES_PATH}ico-search.png?design=orange');background-repeat: no-repeat;background-position: 10px 12px;width: 52px;height: 50px;border-left: 1px solid #f2f2f2;position: relative;background-color: rgba(247,146,66,.5);border-radius: 0 5px 5px 0;}

и

.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 50px;border: 7px solid transparent;border-color: #f79242;width: 200px;font-size: 100%;}

замените на

.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 50px;border: 7px solid transparent;border-color: #f79242;width: 200px;font-size: 100%;border-radius: 5px 0 0 5px;}

[Stas_Y]

ТО что нужно)) можно еще чуть скруглить углы)

[Firefly]

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

ТО что нужно)) можно еще чуть скруглить углы)

Здравствуйте.
Зайдите в админ. панель -> Сайт -> Редактор шаблонов -> Стили -> main.css, найдите код:

.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 50px;border: 7px solid transparent;border-color: #f79242;width: 200px;font-size: 100%;border-radius: 5px 0 0 5px;}

Замените на:

.header-top .header-top-right #search_mini_form .form-search #search {position: absolute;top: 0;right: 52px;float: right;height: 50px;border: 7px solid transparent;border-color: #f79242;width: 200px;font-size: 100%;border-radius: 8px 0 0 8px;}

Найдите код:

.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: 11px 12px;width: 52px;height: 50px;cursor:pointer;}

Замените на:

.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: 11px 12px;width: 52px;height: 50px;cursor:pointer;border-radius: 0 8px 8px 0;}

[Stas_Y]

Отлично!) Еще сузить по высоте

Хотя нет ребят отбой Все норм)

[Stas_Y]

Теперь нужно во вторую линию сделать: каталог, главная, доставка оплата контакты и корзину со стилистикой как на примере!)

[Alekseys]

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

Теперь нужно во вторую линию сделать: каталог, главная, доставка оплата контакты и корзину со стилистикой как на примере!)

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

ul.top-navbar-links li {
	background-color: rebeccapurple;
}

заменив цвет на нужный, и в разделе Сайт - Меню - Верхнее {menu.header} добавьте нужные пункты меню.

[Stas_Y]

Alekseys (09 Сентябрь 2015 - 19:03) писал:

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

ul.top-navbar-links li {
background-color: rebeccapurple;
}

заменив цвет на нужный, и в разделе Сайт - Меню - Верхнее {menu.header} добавьте нужные пункты меню.

Спасибо)) а цвет шрифта как изменить?

[Vaccina]

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

.header-top .header-top-left .top-navbar-links li a {
	padding: 18px 18px 12px;
	display: block;
	font-size: 115%;
}

замените на:

.header-top .header-top-left .top-navbar-links li a {
	padding: 18px 18px 12px;
	display: block;
	font-size: 115%;
	color: #000;
}

[Stas_Y]

Все отлично) Убрать у них при наведении оранжевую подсветку, изменять цвет должны только слова)

[Stas_Y]

Vaccina (08 Сентябрь 2015 - 03:21) писал:

Уточните пожалуйста, что именно понравилось вам в исполнении данного меню?
Так как без подключения сторонних файлов он вполне реализуем, необходимо реализовать обычный выпадающий каталог при наведении и в зависимости от категорий выводить тот или иной фон.

Нужен выпадающий каталог со вторым уровнем. Раскрываться он должен не при наведении на кнопку, а при нажатии)) При раскрытии списка, возможность вставить на фон картинки.) Вот такая задача. Выше я приводил примеры, но подключать что-либо не обязательно, возможно вам быстрее и удобнее сделать то же самое по своим возможностям!)) Я НЕ ПРОТИВ