zdjęcia w poziomie

mirage

2011-09-09 16:41

Witam, wiem że ten temat już się przewijał wcześniej, ale nie pasuje w nowej wersji QuickCms3.1. Chciałabym, żeby zdjęcia wyświetlały się w liście obok siebie a nie w pionie.
ma być mniej więcej tak:

Zdjęcie1, zdjęcie 2, zdjęcie3,....

Kombinowałam z opcją float i clear w default.css ale nie pomaga.

Ma ktoś jakiś pomysł?

» Quick.Cms v3.x

Makaron

2011-09-12 15:41

Kupić wersję płatną: http://opensolution.org/os/templates/pl_Quick.Cms_features_3.x.html#gallery

I helped? Like it: www.facebook.com/makwebpl

RobenPL

2011-09-12 15:50

W default.css w sekcji /* Images Styles
Zamień istniejące style na:
[quote]
.imagesList{list-style:none;display:inline; border:1px solid #808080;margin:5px 0 0px 0;height:150%;background:#f3edc8;}
.imagesList li{display:inline;padding:15px;margin:5px 0 0px 0;color:#5b5b5b;font-size:0.917em;}
.imagesList li img{border:5px solid #dcdac9;margin:5px 0 10px 0;}
.imagesList li div{text-align:left;display:inline;}

#imagesList1{float:left;margin:45px 20px 50px 0;}
#imagesList2{clear:right;float:right;margin:10px 0 0 15px;}
[/quote]

Jupraw

2011-11-17 21:05

Można też inaczej zrobić zachowując układ wyboru zdjęć: z prawej (zdjęcia jak w oryginale) i dół (galeria). Testowane na Quick.Cms v.3.2.

Krok 1. W pliku config/lang_pl.php (i pozostałe pliki językowe)

tekst:
$aPhotoTypes[1] = 'Lewa';
$aPhotoTypes[2] = 'Prawa';

zmienić na:
$aPhotoTypes[1] = 'Prawa';
$aPhotoTypes[2] = 'Galeria';


Krok 2. W pliku templates/default.css:

cały kod bloku /* IMAGES STYLES */ zmienić na:
#imagesList1{margin: 10px 0px 0 400px;}
#imagesList2{clear: right;float: right;}
.imagesList{list-style:none;}
.imagesList li{float: right;height: 130px;width: 140px;color: #FFFFFF;font-size: 0.917em;text-align: center;}
.imagesList li img{border:2px solid #dcdac9;}
.imagesList li div{text-align:center;}

Krok 3. W pliku templates/pages_default.tpl

usuwamy:
$sTxtSize

natomiast tekst:
$aImages[2]
przenosimy bezpośrednio nad:
$aImages[4]

Krok 4. W zależności od szerokości strony można kombinować z marginesami z kroku 2. (dotyczy to wartości 400px oraz 130px i 140px) oraz kolorem i wielkością czcionki.

Rad

2011-11-17 23:08

A co do tego ma TxtSize?

Jupraw

2011-11-18 05:00

Przesuwa trochę w lewo pierwsze zdjęcie. Jeżeli taki feler nie przeszkadza, może pozostać.

Jupraw

2011-12-04 10:17

Tym, którzy chcą mieć wszystkie cztery opcje umiejscowienia zdjęć w QC, proponuję, do podstawowej wersji (lewa i prawa) dodać nowy temat i szablon oraz style CSS, w których należy zastosować nowy cały blok:

/* IMAGES STYLES */
#imagesList1{clear: left;float: left;}
#imagesList2{clear: left;float: left;}
.imagesList{list-style:none;}
.imagesList li{float: left;height: 125px;width: 145px;color: #2C5656;font-size: 0.917em;text-align: center;}
.imagesList li img{border:2px solid #dcdac9;}
.imagesList li div{text-align:center;}

W zależności od szerokości strony i wielkości opisów zdjęć, należy zmienić wartości height: 125px;width: 145px.
Niewielkim ograniczeniem tego rozwiązania jest to, że na jednej stronie można wykorzystać jedno z tych dwóch rozwiązań oraz to, że w panelu administracyjnym położenie zdjęć oznacza - w jednej wersji lewa i prawa, a w drugiej - lewa oznacza góra, a prawa oznacza dół. Można to jednak dowolnie sobie opisać w plikach z katalogu config.