Jak zrobić aby produkty były obok siebie oraz jak poszerzyć linie.

Formoza2010

Avatar: Formoza2010

2010-07-12 20:05

Witam.
Jak zrobić aby produkty dodane na strone główną nie były pod sobą tylko obok siebie.
Tak to wygląda u mnie:
www.nowaeralazienki.pl

A chciałbym aby produkty były wyświetlane tak jak na tej stronie:
http://www.e-pamir.pl/index.html

Ale tylko na stronie głównej.

2 pytanie.
Jak przedłużyć linie aby pasowały do szerokości strony? Z produktami już ten problem rozwiązałem ale z resztą nie mogę poradzić.
www.nowaeralazienki.pl

Pozdrawiam i czekam na pomoc!

» Quick.Cart v3.x

euphoria-art

Avatar: euphoria-art

2010-07-12 23:43

hej, z produktami mogę pomóc:

otwórz templates/default.css i znajdź wpis:

#products li{clear:both;float:left;width:96%;padding:5px 2% 10px;border-bottom:1px solid #d1bd9d;}
zmień na :
#products li{float:left;width:28%;padding:5px 2% 10px;border-bottom:1px solid #d1bd9d;}
oraz niżej znajdź:
#products li.pages{border:0;background:inherit;color:#69401f;}
i zamień na :
#products li.pages{border:0;background:inherit;color:#69401f; width:96%;}
masz szerszy sklep wiec pokombinuj z % i marginesem, w zależności od ustawień można zrobić od 2 do 6 kolumn

przed operacją radze zapisać oryginalny plik default.cssi na dysku, jak zmiana się nie powiedzie to nadpisywać nim do skutku ten sam plik na którym została dokonana wcześniej zmiana. jest jeszcze wtyczka w dziale download ale myślę że ta metoda jest prostsza. Następnie radzę sprawdzić sklep w różnych przeglądarkach :IE MOZILLA CHROME. Jak nie chcesz się męczyć to zapraszam na http://www.quickcarttemplates.info po zarejestrowaniu się na stronie odblokowują się nowe zakładki i jest do pobrania za free mnóstwo gotowych szablonów wstawionych w sklep - piękne szaty graficzne, galerie zdjęć i produkty w poziomie

http://www.obrazygaleria.pl

Formoza2010

Avatar: Formoza2010

2010-07-13 17:52

Wszystko obok siebie jest ale nie równe.
A jaka nazwa jest tej wtyczki?

Proszę o pomoc!

Formoza2010

Avatar: Formoza2010

2010-07-13 18:16

Wtyczke wgrałem ale dalej produkty są nierówno...

euphoria-art

Avatar: euphoria-art

2010-07-14 08:21

też miałem ten sam problem z produktami, kiedys przekopałem całe forum i nic nie znalazłem na ten temat, jak narazie jedyny sposób to wgrywać takiej samej wielkości zdjęcia. Może ktoś wie jak to zrobić?, chętnie i ja skorzystam z porady

http://www.obrazygaleria.pl

Makaron

Avatar: Makaron

2010-07-14 16:35

Chyba jedyny sposób, aby wyrównać ten typ wyświetlania produktów to zastosowanie szablonu opartego na tabeli.

www.mak-web.pl - modyfikacje QC i QCMS

Formoza2010

Avatar: Formoza2010

2010-07-15 12:41

A może ktoś podać taki szablon?

boboo

Avatar: boboo

2010-07-15 16:11

Mam inne rozwiązanie.
Na razie na "twardo zadrutowane" na miniaturki 100 pixeli.
Jak ktoś chce większą funkcjonalność (inne rozmiary miniaturek [custom]), to może się pobawić i poexperymentować.
Idea jest taka:
w /libraries/FotoJobs.php
tak gdzieś w 325 linijce jest:
$mImgDest = imagecreatetruecolor( $this->iThumbX, $this->iThumbY );

zamieniamy to na "twarde" 100 pixeli:
$mImgDest = imagecreatetruecolor( 100, 100 );

Następnie wypełniamy białym tłem (lub dowolnym):
$colorWeiss = imagecolorallocate($mImgDest, 255,255,255);
imagefilledrectangle($mImgDest,0,0,100,100, $colorWeiss);
(te wartości 255,255,255 w $colorWeiss, to Red,Green,Blue)

Następnie pytamy o "kwadratowość" miniaturki i w zależności od obrazka pionowego, poziomego lub kwadratowego ustalamy koordynaty na tle, które ma rozmiar 100x100:
if ($this->iThumbY > $this->iThumbX){
$iYstart = 0;
$iXstart = (int)(100 - $this->iThumbX)/2;
}
elseif ($this->iThumbX > $this->iThumbY){
$iXstart = 0;
$iYstart = (int)(100 - $this->iThumbY)/2;
}
else{
$iYstart = 0;
$iXstart = 0;
}

Teraz wstawiamy te koordynaty w funkcję kilka linijek niżej, czyli zamieniamy:

if( !$sCreateFunction( $mImgDest, $mImgCreate, 0, 0, 0, 0, $this->iThumbX + 1, $this->iThumbY + 1, $iImgCreateX, $iImgCreateY ) ) {

na:

if( !$sCreateFunction( $mImgDest, $mImgCreate, $iXstart, $iYstart, 0, 0, $this->iThumbX + 1, $this->iThumbY + 1, $iImgCreateX, $iImgCreateY ) ) {

Od tego momentu wszystkie wykreowane miniaturki będą KWADRATOWE 100x100 pixeli. W przypadku obrazków wyjściowych niekwadratowych, treść obrazka zostanie wypośrodkowana (pionowo lub poziomo) na białym (w tym przykładzie) tle.
Oznacza to, że miniaturki już nie będą zakłócać porządku ani w pionie, ani w poziomie.
Ale

http://skupienie.kimla.de/

boboo

Avatar: boboo

2010-07-15 18:59

Ale właśnie, musiałem wyjść i nie dokończyłem:
Szanowni Programiści z OpenSolution,
wrzućcie to (zapewne poprawione i dostosowane do różnych wymiarów) do następnej wersji QC.

http://skupienie.kimla.de/

euphoria-art

Avatar: euphoria-art

2010-07-15 22:49

hej. jak by się jeszcze dało to samo zrobić z galerią zdjęć co z produktami to by było super bajerancko

http://www.obrazygaleria.pl

srebny

Avatar: srebny

2010-07-16 00:27

Euphoria podałeś kilka postów wyżej strone z templatkami i w zakładka do sklepu pod numerem ID 58 jest sklep z pięknym podziałem na 5 produktów w lini. Zciągnij wzór i najego podstawie łatwo zrobisz taki podział produktów :). Co do galeri t z tego co pamiętam był ten temat (zwiększenia funkcjonalności galeri lite ) poruszany kilka krotnie na forum CMS, poszukaj tam:)

Kamil Nowak

euphoria-art

Avatar: euphoria-art

2010-07-16 08:55

Srebny galeria w poziomie jest niedopracowana na forum, przejrzałem wszystkie posty nie działają podpisy pod zdjęciami no i nieładnie wygląda, dzięki za podpowiedź właśnie ze strony o templatkach ściągnąłem prosty wzór, o dziwo działa podpisywanie zdjęć i galeria wygląda schludniej http://quickcarttemplates.info/showcase/id61df/?gallery,19 zaraz wrzucę opis dla innych jak to zrobić ;)

http://www.obrazygaleria.pl

Formoza2010

Avatar: Formoza2010

2010-07-16 09:18

Bardzo dziękuję za podanie kodu związanego z rozmiarami obrazków ale to też nie do końca pomogło. Narazie zostawię to w spokoju ale pozostaje jedna rzecz.
Jak można wyrównać opis danej strony? Chodzi o to aby tekst był wyrównany do środka oraz aby linie były też wyrównane do szerokości.

Czekam na odpowiedź.
Pozdrawiam.

www.nowaeralazienki.pl

Formoza2010

Avatar: Formoza2010

2010-07-16 09:19

www.nowaeralazienki.pl <-- można zobaczyć o co mi chodzi.

www.nowaeralazienki.pl

srebny

Avatar: srebny

2010-07-16 09:57

Formoza poszerzyłeś sklep w body ale nie zwiększyłeś w /*right column styles*/
zrób w #page width na 95% jeśli to nie pomorze albo tak masz to porubuj z width w lini wyżej #content.
tak mi się wydaj na pierwsz rzut oka ;)

Kamil

euphoria-art

Avatar: euphoria-art

2010-07-16 11:14

hej na 100 % pomorze z produktami w poziomie tylko musisz sobie dostosować marginesy, produkty są w tabeli ;)
w default.css /* PRODUCTS LIST */ zmień

#products{float:left;width:100%;list-style:none;}
#products li{clear:both;float:left;width:96%;padding:5px 2% 10px;border-bottom:1px solid #d1bd9d;}
* html #products li{width:100%;}
#products li .photo{float:left;margin:0 7px 5px 0;font-size:0px;line-height:0px;}
#products li .photo img{border:0}
#products li .photo a:hover img{border:0}
#products li h3{padding:5px 8px 0;background:inherit;font-weight:normal;font-size:1.5em;border:0;}
#products li h3 a{background:inherit;color:#d01c02;text-decoration:none;}
#products li h3 a:hover{text-decoration:underline;}
#products li h4{padding:2px 8px 7px;font-weight:normal;font-size:0.917em;}
#products li h4, #products li h4 a{background:inherit;color:#a78b65;}
#products li h4 em{padding:0 5px;}
#products li h4 a:hover{background-color:inherit;color:#d01c02;}
#products li h5{font-size:1em;font-weight:normal;}
#products li h5 a{background:inherit;color:#666;}
#products li .price, #products li .noPrice{float:right;margin:14px 0 5px 0;padding:6px 0 0;background-color:inherit;color:#ee0f04;text-decoration:none;}
#products li .price em{padding:0 4px 0 0;background:inherit;color:#a78b65;font:bold 1.083em Verdana, sans-serif;font-style:normal;}
#products li .price strong, #products li .noPrice strong{font:bold 1.167em Verdana, sans-serif;}
#products li .price span{padding-left:4px;font:bold 1.083em sans-serif;}
#products li .basket{float:right;margin:17px 0 5px 10px;font-size:0.8em;font-weight:bold;}
#products li .basket a{display:block;padding:3px 25px 3px 5px;border:1px solid #f00;background:url('img/cart_bg2.png') no-repeat right center;background-color:inherit;color:#fff;text-decoration:none;}

#products li.pages{border:0;background:inherit;color:#69401f;}
#products li.pages a{background:inherit;color:#7f7f66;}
#products li.pages a:hover{background:inherit;color:#d01c02;}



na kod:


#products{float:left;width:100%;list-style:none;}
#products li{float:left;width:180px;padding:8px 10px 20px 15px;background:url(img/productsaa.gif) repeat-x; border:1px solid #c0c0c0; margin:4px;}
* html #products li{width:200px;padding:8px 0 20px 0;}
#products li .photo{ height:110px; text-align:center;}
#products li .photo img{border:0;}
#products li .photo a:hover img{border:0;}
#products li h3{font-size:12px;border:0; text-align:center; height:30px; line-height:15px; padding:0 5px;}
#products li h3 a{}
#products li h3 a:hover{}
#products li h4{padding:2px 8px 7px 0;font-weight:normal;font-size:11px; display:none;}
#products li h4, #products li h4 a{background:inherit;}
#products li h4 em{padding:0 5px;}
#products li h4 a:hover{}
#products li h5{font-size:11px;font-weight:normal; text-align:justify; display:none;}
#products li h5 a{background:inherit;}
#products li .price, #products li .noPrice{margin:0;padding:0;color:#333;text-decoration:none; text-align:center; font-size:22px; height:30px; font-weight:normal;}
#products li .price em{padding:0 4px 0 0;background:inherit;color:#a78b65;font:bold 1.083em Verdana, sans-serif;font-style:normal; display:none;}
#products li .price strong, #products li .noPrice strong{ font-weight:normal;}
#products li .price span{padding-left:4px; font-size:18px;}
#products li .basket{ text-align:center;}
.basketlink { color:#FF0000; font-weight:bold;}
.basketlink:hover { color:#FF0000;}

#products li.pages{border:0; width:94%; padding:4px 3% 0;}
*html #products li.pages{border:0; width:100%; padding:4px 3% 0;}
#products li.pages a{}
#products li.pages a:hover{}

http://www.obrazygaleria.pl

euphoria-art

Avatar: euphoria-art

2010-07-16 11:22

kod jest do przerobienia , trzeba się przyjrzeć oryginałowi i dopasować ustawienia zwinąłem go ze stronki http://www.shop.lux-presov.sk/

http://www.obrazygaleria.pl

euphoria-art

Avatar: euphoria-art

2010-07-16 11:35

jak ktoś już przerobi to prosiłbym o wklejenie gotowego kodu dla wszystkich ;)

http://www.obrazygaleria.pl

Do góry
o nas | kontakt