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


Форма Для Емейл Подписки

Автор Ольга 94, 25 апр. 2016 18:05

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

#181 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 22 Июнь 2016 - 10:14

Просмотр сообщенияОльга 94 (21 Июнь 2016 - 16:52) писал:

Ответьте пожалуйста

помогите пожалуйста с вопросом!

#182 Vaccina

Vaccina

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

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

Отправлено 23 Июнь 2016 - 03:19

Просмотр сообщенияОльга 94 (20 Июнь 2016 - 21:35) писал:

Здравствуйте! Кнопку сохранила. проверьте пожалуйста в чем проблема..

В main.css найдите:
.slide_but {
	font-size: 30px;
	display: inline-block;
	height: 65px;
	top: 378px;
	left: 320px;
	background: #fff;
	outline: 0;
	position: absolute;
	z-index: 99;
	text-align: center;
	width: 700px;
	font-family: arial;
	border-color: transparent;
	transform: none;
	line-height: 65px;
}

замените на:
.slide_but {
	font-size: 30px;
	display: block;
	height: 65px;
	top: 50%;
	left: 50%;
	background: #fff;
	outline: 0;
	position: absolute;
	z-index: 99;
	text-align: center;
	width: 700px;
	font-family: arial;
	border-color: transparent;
	transform: none;
	line-height: 65px;
	margin-left: -350px;
	margin-top: -30px;
}

данное изменение должно выровнять кнопку, а по поводу размеров, связано это с самим слайдером, слайдер в зависимости от разрешения экрана масштабирует все внутри себя, можно отключить это добавив в main.css:
#slider > div {
	transform: none !important;
}

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


Просмотр сообщенияОльга 94 (20 Июнь 2016 - 21:35) писал:

помогите еще пожалуйста вот с такой вот штукой)Если можно реализовать нечто подобное каталогу слева только с фильтром. А именно интересует цена и размер всегда активные вкладки. а остальные характеристики были бы в завернутом состоянии) спасибо. скрин внизу
В конец main.js вставьте:
$(document).ready(function() {
  $('.filter > .contentTbodySearchFilterBlock').hide();
  $('.filter > .str').click(function() {
	$(this).closest('.filter').find('.contentTbodySearchFilterBlock').toggle();
  });
});

#183 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 23 Июнь 2016 - 12:32

Просмотр сообщенияVaccina (23 Июнь 2016 - 03:19) писал:

В main.css найдите:
.slide_but {
font-size: 30px;
display: inline-block;
height: 65px;
top: 378px;
left: 320px;
background: #fff;
outline: 0;
position: absolute;
z-index: 99;
text-align: center;
width: 700px;
font-family: arial;
border-color: transparent;
transform: none;
line-height: 65px;
}

замените на:
.slide_but {
font-size: 30px;
display: block;
height: 65px;
top: 50%;
left: 50%;
background: #fff;
outline: 0;
position: absolute;
z-index: 99;
text-align: center;
width: 700px;
font-family: arial;
border-color: transparent;
transform: none;
line-height: 65px;
margin-left: -350px;
margin-top: -30px;
}

данное изменение должно выровнять кнопку, а по поводу размеров, связано это с самим слайдером, слайдер в зависимости от разрешения экрана масштабирует все внутри себя, можно отключить это добавив в main.css:
#slider > div {
transform: none !important;
}

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



В конец main.js вставьте:
$(document).ready(function() {
$('.filter > .contentTbodySearchFilterBlock').hide();
$('.filter > .str').click(function() {
$(this).closest('.filter').find('.contentTbodySearchFilterBlock').toggle();
});
});


Спасибо, кнопка в слайдере все равно в пиксел не попадает. но ее размещение относительно слайдера поменялось.. и что значит "но тогда сами картинки в слайдере тоже увеличатся, как вариант, можно кнопку попробовать вынести немного выше в слайдере."?
Далее по поводу второго вопроса, получился функционал такой какой и нужен был, только вот с отображением беда, во первых рисунок мышки при наведении не меняетсяя поэтому крайне не понятно что туда можно нажать.. и можно сделать дизайн как на скрине?

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

  • Безымянный.png

#184 Vaccina

Vaccina

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

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

Отправлено 24 Июнь 2016 - 04:22

В main.css найдите:
.block.filters .filter {
	margin: 5px 0;
	font-size: 14px;
	color: #333744;
}

замените на:
.block.filters .filter {
	margin: 5px 0;
	font-size: 14px;
	color: #333744;
	padding: 10px;
	border-bottom: 1px solid #eee;
}

далее найдите:
.str {
	text-transform: uppercase;
	font-size: 14px;
}

замените на:
.str {
	text-transform: uppercase;
	font-size: 14px;
	display: block;
	cursor: pointer;
}

Просмотр сообщенияОльга 94 (23 Июнь 2016 - 12:32) писал:

Спасибо, кнопка в слайдере все равно в пиксел не попадает. но ее размещение относительно слайдера поменялось.. и что значит "но тогда сами картинки в слайдере тоже увеличатся, как вариант, можно кнопку попробовать вынести немного выше в слайдере."?

Я имела ввиду перенести в слайдере кнопку:
<a href="#" class="slide_but">В КОРЗИНУ</a>

выше, поставив после:
<div id="slider">
		<!-- Slides Container -->

#185 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 24 Июнь 2016 - 11:28

Просмотр сообщенияVaccina (24 Июнь 2016 - 04:22) писал:

В main.css найдите:
.block.filters .filter {
margin: 5px 0;
font-size: 14px;
color: #333744;
}

замените на:
.block.filters .filter {
margin: 5px 0;
font-size: 14px;
color: #333744;
padding: 10px;
border-bottom: 1px solid #eee;
}

далее найдите:
.str {
text-transform: uppercase;
font-size: 14px;
}

замените на:
.str {
text-transform: uppercase;
font-size: 14px;
display: block;
cursor: pointer;
}



Я имела ввиду перенести в слайдере кнопку:
<a href="#" class="slide_but">В КОРЗИНУ</a>

выше, поставив после:
<div id="slider">
	 <!-- Slides Container -->

Класс.спасибо

#186 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 24 Июнь 2016 - 12:07

Просмотр сообщенияОльга 94 (23 Июнь 2016 - 12:32) писал:

Спасибо, кнопка в слайдере все равно в пиксел не попадает. но ее размещение относительно слайдера поменялось.. и что значит "но тогда сами картинки в слайдере тоже увеличатся, как вариант, можно кнопку попробовать вынести немного выше в слайдере."?
Далее по поводу второго вопроса, получился функционал такой какой и нужен был, только вот с отображением беда, во первых рисунок мышки при наведении не меняетсяя поэтому крайне не понятно что туда можно нажать.. и можно сделать дизайн как на скрине?

скажите пожалуйста как сделать "open-sub"? и что бы вкладка РАЗМЕР была активная

#187 Stasya

Stasya

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

  • Модератоpы
  • 4 007 сообщений

Отправлено 29 Июнь 2016 - 14:36

Просмотр сообщенияОльга 94 (24 Июнь 2016 - 12:07) писал:

скажите пожалуйста как сделать "open-sub"? и что бы вкладка РАЗМЕР была активная

Для того чтобы это реализовать Вам необходимо:
1. В шаблоне HTML найти строку
<span class="str"><b>{filter_prop_list.NAME}</b></span>
И заменить ее на 
  <div class="name_filter">
<b>{filter_prop_list.NAME}</b><span class="open-sub"></span>
</div>
Затем найти вот такую строку
<span class="str"><b>{filter_attr_list.NAME}</b></span>
И заменить ее на  
<div class="name_filter">
<b>{filter_attr_list.NAME}</b><span class="open-sub"></span>
</div>

2) В файле main.js находим блок 
/*раскрывающийся фильтр*/
$(document).ready(function() {
  $('.filter > .contentTbodySearchFilterBlock').hide();
  $('.filter > .str').click(function() {
		$(this).closest('.filter').find('.contentTbodySearchFilterBlock').toggle();
  });
});
И заменяем его на 
$(document).ready(function() {
  $('.filter > .contentTbodySearchFilterBlock').hide();
  $('.filter:first> .contentTbodySearchFilterBlock').show();
  $('.filter:first').addClass('active');
  $('.filter:first .open-sub').addClass('active');
  $('.filter > .name_filter').click(function() {
		$(this).closest('.filter').find('.contentTbodySearchFilterBlock').toggle();
		if ($(this).parent().hasClass('active')){
			  $(this).children('.open-sub').removeClass('active');
			  $(this).parent().removeClass('active');
		}else{
		$(this).parent().addClass('active');
		$(this).children('.open-sub').addClass('active');
		}
  });
});

3) Теперь в конец файла main.css добавляем 
.filter .open-sub:before {
	content: "\f107";
	font-family: 'FontAwesome';
	color: #111111;
}
.filter .open-sub {
	float: right;
	right: 5px;
	position: absolute;
	padding: 0 10px;
}
.filter.active .open-sub.active:before {
	content: "\f106";
	color: #111111;
}

#188 Ольга 94

Ольга 94

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

  • Пользователи
  • PipPipPipPip
  • 348 сообщений
  • ГородПермь

Отправлено 11 Июль 2016 - 10:50

Просмотр сообщенияStasya (29 Июнь 2016 - 14:36) писал:

Для того чтобы это реализовать Вам необходимо:
1. В шаблоне HTML найти строку
<span class="str"><b>{filter_prop_list.NAME}</b></span>
И заменить ее на
<div class="name_filter">
<b>{filter_prop_list.NAME}</b><span class="open-sub"></span>
</div>
Затем найти вот такую строку
<span class="str"><b>{filter_attr_list.NAME}</b></span>
И заменить ее на  
<div class="name_filter">
<b>{filter_attr_list.NAME}</b><span class="open-sub"></span>
</div>

2) В файле main.js находим блок
/*раскрывающийся фильтр*/
$(document).ready(function() {
$('.filter > .contentTbodySearchFilterBlock').hide();
$('.filter > .str').click(function() {
	 $(this).closest('.filter').find('.contentTbodySearchFilterBlock').toggle();
});
});
И заменяем его на 
$(document).ready(function() {
$('.filter > .contentTbodySearchFilterBlock').hide();
$('.filter:first> .contentTbodySearchFilterBlock').show();
$('.filter:first').addClass('active');
$('.filter:first .open-sub').addClass('active');
$('.filter > .name_filter').click(function() {
	 $(this).closest('.filter').find('.contentTbodySearchFilterBlock').toggle();
	 if ($(this).parent().hasClass('active')){
			 $(this).children('.open-sub').removeClass('active');
			 $(this).parent().removeClass('active');
	 }else{
	 $(this).parent().addClass('active');
	 $(this).children('.open-sub').addClass('active');
	 }
});
});

3) Теперь в конец файла main.css добавляем
.filter .open-sub:before {
content: "\f107";
font-family: 'FontAwesome';
color: #111111;
}
.filter .open-sub {
float: right;
right: 5px;
position: absolute;
padding: 0 10px;
}
.filter.active .open-sub.active:before {
content: "\f106";
color: #111111;
}

Спасибо, можно еще помочь настроить отображение.
Значки сдвинуть влево, на уровне с теми которые находятся в каталоге. А скролл сдвинуть в самое крайнее правое положение.

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

  • Снимок.PNG

#189 Danil

Danil

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

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

Отправлено 11 Июль 2016 - 18:12

Просмотр сообщенияОльга 94 (11 Июль 2016 - 10:50) писал:

Спасибо, можно еще помочь настроить отображение.
Значки сдвинуть влево, на уровне с теми которые находятся в каталоге. А скролл сдвинуть в самое крайнее правое положение.
Здравствуйте.
В main.css найдите код 
.filter .open-sub {
	float: right;
	right: 5px;
	position: absolute;
	padding: 0 10px;
}
и замените на 
.filter .open-sub {
	float: right;
	right: 22px;
	position: absolute;
	padding: 0 10px;
}
найдите 
.block.filters .filter {
	margin: 5px 0;
	font-size: 14px;
	color: #333744;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
и замените на 
.block.filters .filter {
	margin: 5px 0;
	font-size: 14px;
	color: #333744;
	overflow-y: auto;
	padding: 10px;
	border-bottom: 1px solid #eee;
}
найдите
.contentTbodySearchFilterBlock {
	margin-top: 10px;
	margin-bottom: 15px;
	max-height: 200px;
	overflow-y: auto;
	min-height: 60px;
}
и замените на 
.contentTbodySearchFilterBlock {
	margin-top: 10px;
	margin-bottom: 15px;
	max-height: 200px;
	min-height: 60px;
}

Обратно в Шаблон Лето


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

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

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