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


Нужна Полоса Как У Шаблона Лотус


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

#1 Антон 5554

Антон 5554

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

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

Отправлено 03 Январь 2019 - 23:52

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

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

  • Скриншот 03-01-2019 235036.jpg


#2 stasia

stasia

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

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

Отправлено 06 Январь 2019 - 14:03

Просмотр сообщенияАнтон 5554 (03 Январь 2019 - 23:52) писал:

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

Здравствуйте. Зайдите в раздел Сайт---Редактор шаблонов---HTML и найдите код:

	  <!-- Верхняя часть Шапки -->
	  <div id="header-top" class="wrap">
		<div class="container">

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

	  <!-- Верхняя часть Шапки -->
	  <div id="header-top" class="wrap">
	 <!-- Верхняя часть -->
	  <div class="announcement-bar">
		<div class="text">Скидка 5% при первом заказе! Используйте промокод <span>“SALE5”</span>. <a href="{CATALOG_URL}" title="Перейти к покупкам">Перейти к покупкам</a></div>
		<div class="close"><i class="material-icons">close</i></div>
	  </div>
		<div class="container">




Зайдите в Редактор шаблонов --- main.css и найдите код:

#wrapper {position: relative;}
#wrapper:before {content: '';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #fff;width: 100%;height: 100%;z-index: -1;}

И сразу после добавьте данный код:

.announcement-bar {
	padding: 10px 50px 10px 15px;
	text-align: center;
	color: #fff;
	background-color: #212121;
}
.announcement-bar a {
	color: #009250;
}
 .announcement-bar .text {
	line-height: 20px;
}
 .announcement-bar .close {
	display: block;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 5px;
	right: 20px;
	color: #fff;
	cursor: pointer;
	text-align: center;
}
 .announcement-bar .close i {
	display: none;
}
.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}  
 .announcement-bar .text span {
	font-weight: bold;
}



Найдите данный код:

@media all and (max-width: 641px) {
  #thumblist-image li {	max-width: 337px;}

#topsl {display:none;}


И сразу после добавьте данный код:

.announcement-bar {display: none;}


#3 Антон 5554

Антон 5554

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

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

Отправлено 06 Январь 2019 - 21:39

Просмотр сообщенияstasia (06 Январь 2019 - 14:03) писал:

Здравствуйте. Зайдите в раздел Сайт---Редактор шаблонов---HTML и найдите код:

<!-- Верхняя часть Шапки -->
<div id="header-top" class="wrap">
<div class="container">

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

<!-- Верхняя часть Шапки -->
<div id="header-top" class="wrap">
<!-- Верхняя часть -->
<div class="announcement-bar">
<div class="text">Скидка 5% при первом заказе! Используйте промокод <span>“SALE5”</span>. <a href="{CATALOG_URL}" title="Перейти к покупкам">Перейти к покупкам</a></div>
<div class="close"><i class="material-icons">close</i></div>
</div>
<div class="container">




Зайдите в Редактор шаблонов --- main.css и найдите код:

#wrapper {position: relative;}
#wrapper:before {content: '';display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: #fff;width: 100%;height: 100%;z-index: -1;}

И сразу после добавьте данный код:

.announcement-bar {
padding: 10px 50px 10px 15px;
text-align: center;
color: #fff;
background-color: #212121;
}
.announcement-bar a {
color: #009250;
}
.announcement-bar .text {
line-height: 20px;
}
.announcement-bar .close {
display: block;
position: absolute;
width: 30px;
height: 30px;
top: 5px;
right: 20px;
color: #fff;
cursor: pointer;
text-align: center;
}
.announcement-bar .close i {
display: none;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
.announcement-bar .text span {
font-weight: bold;
}



Найдите данный код:

@media all and (max-width: 641px) {
#thumblist-image li { max-width: 337px;}

#topsl {display:none;}


И сразу после добавьте данный код:

.announcement-bar {display: none;}

Всё классно, кнопки закрытия этой полоски нет. ( точнее поле есть но ни крестика ни действия закрытия нет(.
Посмотрите пожалуйста.

#4 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 10 Январь 2019 - 01:28

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.js - в самом конце вставьте:
// Закрытие верхней части шапки
$(document).ready(function (){
	$('#header-top .announcement-bar .close').on('click', function (event) {
	event.preventDefault();
	if ($('#header-top .announcement-bar').hasClass('active')) {
	  $('#header-top .announcement-bar').removeClass('active');
			$(this).removeClass('active');
			$('#header-top .announcement-bar').slideDown();
		} else {
			$('#header-top .announcement-bar').addClass('active');
			$(this).addClass('active');
			$('#header-top .announcement-bar').slideUp();
	}
	});
});

далее зайдите в main.css - найдите и удалите:
 .announcement-bar .close i {
		display: none;
}


#5 Антон 5554

Антон 5554

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

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

Отправлено 10 Январь 2019 - 11:40

Просмотр сообщенияVaccina (10 Январь 2019 - 01:28) писал:

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - main.js - в самом конце вставьте:
// Закрытие верхней части шапки
$(document).ready(function (){
$('#header-top .announcement-bar .close').on('click', function (event) {
event.preventDefault();
if ($('#header-top .announcement-bar').hasClass('active')) {
	 $('#header-top .announcement-bar').removeClass('active');
$(this).removeClass('active');
$('#header-top .announcement-bar').slideDown();
} else {
$('#header-top .announcement-bar').addClass('active');
$(this).addClass('active');
$('#header-top .announcement-bar').slideUp();
}
});
});

далее зайдите в main.css - найдите и удалите:
 .announcement-bar .close i {
	 display: none;
}

S P A S I B O




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

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