Помогите, пожалуйста

[luka29]

Помогите, пожалуйста выдернуть с этого сайта (ссылка) эффект при наведении на категории, имеется ввиру рамка, которая меняет цвет при наведении курсора, не могу понять какой js-файл за это отвечает. Спасибо!!!

[SaSS]

Помогите, пожалуйста выдернуть с этого сайта (ссылка) эффект при наведении на категории, имеется ввиру рамка, которая меняет цвет при наведении курсора, не могу понять какой js-файл за это отвечает. Спасибо!!!

это CSS

.product_outside:hover

[luka29]

Не помогает. И рамка не появляется. Сайт Посмотрите, пожалуйста. :rolleyes:

[Bazilio]

Сохраните страницу сайта как html с картинками. В папке и файлы скриптов сохранятся. Можно будет поковыряться.

[luka29]

Сохраните страницу сайта как html с картинками. В папке и файлы скриптов сохранятся. Можно будет поковыряться.

Так и делала в Мозиле.Целый день ковыряю и ничего не могу найти. :(

Я вот сейчас поняла, наверное нужно в public_html/catalog/view/theme/default/template/product/category.tp, а может и не сюда вставить:

<div style="opacity: 1;">

<div class="product_outside_border">

<div class="product_outside">

<div class="product_inside">

Эти дивы на том сайте находятся в <div class="product-grid">, где его найти?

В CSS я прописала, а в шаблоне не знаю где. :unsure:

[Fizik87]

Не помогает. И рамка не появляется. Сайт Посмотрите, пожалуйста. :rolleyes:

Попробуй так:

1) изменяем стили в строчке 1091 файла stylesheet.css

.product-grid > div {   
	background: url("../image/box-shadow.png") no-repeat scroll 0 bottom transparent;    
	border: 10px solid #FFFFFF; //  тут должен быть цвет фона    
	display: inline-block;    
	/*margin: 10px 8px;    
	padding-bottom: 10px;*/   
	 margin-bottom:10px;   
	 vertical-align: top;    
	width: 218px;
}

Чтобы небыло проблемм с различными браузерами, наведение я бы сделал через JS:

<script type="text/javascrip">
	$(document).ready(function() { 
	     $(".product-grid div").hover(function(){ 
		     $(this).addCalass("hover"); 
	     },function(){ 
		     $(this).removeClass("hover"); 
	     });
     });
</script>

И дописываем стиль для нового класса:

.product-grid div.hover {
	border:10px solid #000; //чвет какой хочеш
}

[luka29]

Попробуй так:

1) изменяем стили в строчке 1091 файла stylesheet.css

.product-grid > div {   
	background: url("../image/box-shadow.png") no-repeat scroll 0 bottom transparent;    
	border: 10px solid #FFFFFF; //  тут должен быть цвет фона    
	display: inline-block;    
	/*margin: 10px 8px;    
	padding-bottom: 10px;*/   
	 margin-bottom:10px;   
	 vertical-align: top;    
	width: 218px;
}

Чтобы небыло проблемм с различными браузерами, наведение я бы сделал через JS:

<script type="text/javascrip">
	$(document).ready(function() { 
	     $(".product-grid div").hover(function(){ 
		     $(this).addCalass("hover"); 
	     },function(){ 
		     $(this).removeClass("hover"); 
	     });
     });
</script>

И дописываем стиль для нового класса:

.product-grid div.hover {
	border:10px solid #000; //чвет какой хочеш
}

Спасибо за участие!

Рамка появилась, но цвет не меняет и все товары встали вертикально :unsure:

[Fizik87]

Спасибо за участие!

Рамка появилась, но цвет не меняет и все товары встали вертикально :unsure:

Чтобы они были не вертикальными, ты забыла в стилях указать - display: inline-block;

[Fizik87]

А в js, попробуй сделать изменения

$(document).ready(function() {     
	$(".product-grid div").mouseover(function(){ 
		$(this).addCalass("hover");              
	}).mouseout(function() {                      
		$(this).removeClass("hover");             
	 });     
});

Это, по-идеи, должно помочь.

[luka29]

А в js, попробуй сделать изменения

$(document).ready(function() {     
	$(".product-grid div").mouseover(function(){ 
		$(this).addCalass("hover");              
	}).mouseout(function() {                      
		$(this).removeClass("hover");             
	 });     
});

Это, по-идеи, должно помочь.

К сожалению, ничего не изменилось. JS в header.tpl нужно вставлять?

[Fizik87]

К сожалению, ничего не изменилось. JS в header.tpl нужно вставлять?

Ладно не будет мучать JS:)

Приступаем к изменениям через css.

Идем в шаблон вывода категории, для тегов div, какие находятся внутри <div class="product-grid"> добавляем класс, любой, пусть будет one_product

Затем немного изменяем css

В строке 1092 вместо того как было .product-grid > div пишем .product-grid div.one_product (и не забудь добавить display:inline-block; ,чтобы блоки стали в один ряд.)

Ниже прописываем стили для hover

.product-grid div.one_product:hover {
	border:10px solid #000; //Соответвенно тот цвет, какой хочеш.
}

[luka29]

Ладно не будет мучать JS:)

Приступаем к изменениям через css.

Идем в шаблон вывода категории, для тегов div, какие находятся внутри <div class="product-grid"> добавляем класс, любой, пусть будет one_product

Затем немного изменяем css

В строке 1092 вместо того как было .product-grid > div пишем .product-grid div.one_product (и не забудь добавить display:inline-block; ,чтобы блоки стали в один ряд.)

Ниже прописываем стили для hover

.product-grid div.one_product:hover {
	border:10px solid #000; //Соответвенно тот цвет, какой хочеш.
}

C list все понятно, а как добавить класс сюда

function display(view) {
	if (view == 'list') {
		$('.product-grid').attr('class', 'product-list');
		 
		$('.product-list > div').each(function(index, element) {
			html  = '<div class="right">';
			html += '  <div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '  <div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '  <div class="compare">' + $(element).find('.compare').html() + '</div>';
			html += '</div>';			
			
			html += '<div class="left">';
			
			var image = $(element).find('.image').html();
			
			if (image != null) { 
				html += '<div class="image">' + image + '</div>';
			}
			
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
					
			html += '  <div class="name">' + $(element).find('.name').html() + '</div>';
			html += '  <div class="description">' + $(element).find('.description').html() + '</div>';
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
				
		

			html += '</div>';			
			$(element).html(html);
		});		
		
		$('.display').html('<b><?php echo $text_display; ?></b> <?php echo $text_list; ?> <b>/</b> <a onclick="display(\'grid\');"><?php echo $text_grid; ?></a>');
		
		$.cookie('display', 'list'); 
	} else {
		$('.product-list').attr('class', 'product-grid');
		
		$('.product-grid div.one_product').each(function(index, element) {
			html = '';
			
			var image = $(element).find('.image').html();
			
			if (image != null) {
				html += '<div class="image">' + image + '</div>';
			}
			
			html += '<div class="name">' + $(element).find('.name').html() + '</div>';
			html += '<div class="description">' + $(element).find('.description').html() + '</div>';
			
			var price = $(element).find('.price').html();
			
			if (price != null) {
				html += '<div class="price">' + price  + '</div>';
			}
			
			var rating = $(element).find('.rating').html();
			
			if (rating != null) {
				html += '<div class="rating">' + rating + '</div>';
			}
						
			html += '<div class="cart">' + $(element).find('.cart').html() + '</div>';
			html += '<div class="wishlist">' + $(element).find('.wishlist').html() + '</div>';
			html += '<div class="compare">' + $(element).find('.compare').html() + '</div>';
			
			$(element).html(html);
		});	
					
		$('.display').html('<b><?php echo $text_display; ?></b> <a onclick="display(\'list\');"><?php echo $text_list; ?></a> <b>/</b> <?php echo $text_grid; ?>');
		
		$.cookie('display', 'grid');
	}
}

Я так понимаю этот кусок отвечает за вывод grid? Попыталась здесь просто заменить .product-grid > div на .product-grid div.one_product. Кстати, display:inline-block; но вид не изменился

Спасибо большое, Fizik87!!!