Zaokrąglenie prostokątów- blocków

[emteusz]

Witam, mam problem mianowicie po użyciu

-moz-border-radius:
    -webkit-border-radius:
    border-radius:

 

z wartościami blok kosza zmienia swoje 'kanty' na półogrągłe- o co mi chodziło, lecz po najechaniu myszką zmienia się do domyślnego wyglądu, czy ktoś mógłby mnie nakierować mniej więcej czemu tak się dzieje?

 

drugi problem, chciałbym w moim sklepie wszystkie bloki(prostokąty) czyt. kategorie, promocje, itp zamienić na zaokrąglone z prostokątów, nie wiem jak ugryźć ten kawałek

 

liczę na zrozumienie i odpowiedź

 

prestashop 1.5.4.1 layout domyślny- zmodyfikowany

 

pozdrawiam

[PrestaShark]

Witaj,

Ok zatem otwórz plik global.css w katalogu themes/default/css

Poszukaj lini .block .title_block, .block h4

i wstaw tam kod wygenerowany tu http://border-radius.com/

Jak widzisz można każdy róg zaokrąglić, Dobierz odpowiednią wartość i już

-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;

Dzięki temu nagłówki modułów będą zaokrąglone na górze a na dole pozostaną bez zmian.

 

Potem wszystko zależy od modułu np taki blok kategorii. Najlepiej badać kod za pomocą dodatku Firebug do Firefoxa. Podświetla on całą składnię kodu strony oznaczając granice takich modułów.

 

U mnie jest np "categories_block_left" , ale brak takiego ID w global,css zatem dodaję do niego

#categories_block_left {
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;}

Co spowoduje dodanie zaokrąglenia na dole bloku kategorii. Jak coś to podaj adres na PM albo tu na forum. Pokarzę na dokładnym przykładzie co zrobić.

 

Standardowa templatka PS jest bardzo wdzięcznym obiektem do wszelkich modyfikacji

Bardzo ją za to lubię

Edited October 22, 2013 by kisweb (see edit history)

[vekia]

co do koszyka sprawa się komplikuje bo w tym przypadku trzeba zmodyfikować również plik .js modułu, tzn. ajax-cart.js

 

jest tam kod:
 

$("#shopping_cart a:first").hover(
		function() {
			$(this).css('border-radius', '3px 3px 0px 0px');
			if (ajaxCart.nb_total_products > 0 || cart_qty > 0)
				$("#cart_block").stop(true, true).slideDown(450);
		},
		function() {
			$('#shopping_cart a').css('border-radius', '3px');
			setTimeout(function() {
				if (!shopping_cart.isHoveringOver() && !cart_block.isHoveringOver())
					$("#cart_block").stop(true, true).slideUp(450);
			}, 200);
		}
	);

	$("#cart_block").hover(
		function() {
			$('#shopping_cart a').css('border-radius', '3px 3px 0px 0px');
		},
		function() {
			$('#shopping_cart a').css('border-radius', '3px');
			setTimeout(function() {
				if (!shopping_cart.isHoveringOver())
					$("#cart_block").stop(true, true).slideUp(450);
			}, 200);
		}
	);

chodzi o fragmenty ustawiające border-radius

$('#shopping_cart a').css('border-radius', '3px 3px 0px 0px');

$('#shopping_cart a').css('border-radius', '3px');

$('#shopping_cart a').css('border-radius', '3px');

$(this).css('border-radius', '3px 3px 0px 0px');

 

polecam je usunąć //zakomentować