Na diskuzním fóru Realmac se poslední dobou stále častěji psalo o možných úpravách hover boxu v pluginu Collage 2, které byly mimo jiné vyvolány nedávnou změnou stránek tvůrce pluginu Collage, Yourhead.com.



Standardně umožňuje Collage připojit komentář ke každému náhledu, ale pouze v obdélníkovém boxu, u kterého můžete ovlivnit barvu výplně a sílu a barvu rámečku a barvu a velikost textu. To je poměrně dost možností, ale potíž je v samotném boxu - obyčejný jednobarevný obdélník často neladí s designem stránek. Pokud chcete mít hover box, který má atypický tvar, oblé rohy nebo průhlednou výplň, můžete si pomoci malou dílčí úpravou CSS kódu.

---

První úprava odstaňuje pozadí boxu. Do paletky Page Inspector / Header / CSS vložte tento kód:

.CollageHVBox {margin-top: -10px; margin-left: 0px;}

.CollageHVBox {background: 0 !important; border: 0 !important; text-align: center;}

Hodnota margin-top určuje vertikální odsazení textu od obrázku. Tato úprava CSS pouze odstraní pozadí boxu, ostatní parametry zůstanou zachovány tak, jak jsou nastaveny v paletce. Šířka a výška určují, do jaké plochy se bude text formátovat.

---

Druhá úprava umožňuje přidat libovolný box ke každému náhledu. Vytvořte obrázky boxů pro jednotlivé náhledy včetně textu - pozadí boxu může samozřejmě být transparentní. Uložte ve formátu PNG a vložte do paletky Page Inspector / Header / Assets.



Do pole Hover Text u každého náhledu vložte odkaz na obrázek příslušného boxu:

<img src="assets/bubble1.png"/img>

Dále do paletky Page Inspector / Header / CSS vložte stejný kód jako v první úpravě. Pokud má box atypický tvar, budete zřejmě muset upravit i hodnotu margin-left, tedy vodorovné zarovnání pod náhledem.

Ukázka

tag: CSS, layout, Collage, fotografie, rollover