Přihlásit se

Seznam kategorií a změna layout

24. kvě 2015 12:33 #121891
Zdravím, řeším teď takový problém a nevím si rady. Chtěl bych změnit layout seznamu kategorií. V menu jsem si vytvořil nový odkaz, který směřuje na "List all categories". Takže mám nějakou kategorii a v ní další kategorie, které se mi zobrazí po kliknutí na položku v menu. Problém je ten, že se řadí pod sebe, zatímco já bych chtěl, aby se řadili vedle sebe např. po 3... každá má svůj obrázek, takže chci aby to vypadalo jako taková galerie.

Používám Joomlu 3.4.1 Stable a template Purity III.

Vim, že v kodu se to da zmenit v templates/purity_iii/html/com_content/categories/default_items.php nebo mozna v nejakem CSS souboru, ale bohuzel nejsem programator a nevim si s tim rady. Pripadne jde to nejak jednoduseji primo v adminu Joomly? Tam jsem to nenasel.

Muzete mi poradit?

Dekuju mnohokrat

24. kvě 2015 22:23 #121895
Odpověď od Cony
Ne, v administraci to "naklikat" nelze. Nejjednodušší by mělo být upravit CSS. Zkuste dát odkaz na konkrétní stránku.

26. kvě 2015 12:47 #121909
Odpověď od iamdave
Stránka: wwww.shishaport.cz

Web teprve vytvarim, takze jsem to dal hned jako uvodni stranu. Pod sebou tam jsou jednotlive kategorie a ja bych je chtel vedle sebe, pravdepodobne po 3 nebo po 4. S tim, ze by se radili horizontalne podle abecedy.

Web je uzamčen, pro prihlaseni pouzijte prosim:
user: jlex
pass: 123456

Děkuji moc za případné rady

26. kvě 2015 22:21 #121920
Odpověď od Cony
Základní styl by mohl vypadat např. takto:
Code:
.categories-list > div { float: left; width: 33.33%; text-align: center; }

26. kvě 2015 23:00 #121924
Odpověď od iamdave
Super, to je naprosto přesně, co jsem chtěl :-) děkuji moc

Jen teda nastal jiný problém. Template se přizpůsobuje zařízení, takže na tabletu a telefonu je to teď takový nepěkný. Tam by bylo potřeba dát ten předešlý styl. Nevíte, jak nastavit různý css styl podle zařízení?

26. kvě 2015 23:44 #121925
Odpověď od iamdave
Tak už není potřeba, trochu jsem zagooglil a použil jsem v CSS stylu následující:

Code:
@media screen and (max-width: 768px){ .categories-list > div { float: left; width: 50%; text-align: center; } } @media screen and (min-width: 769px){ .categories-list > div { float: left; width: 33.33%; text-align: center; } }

Metodou pokus omyl a zapojením hlavy jsem nakonec docílil svého :-)

Ale ještě jednou děkuji za pomoc :-)

Powered by Fórum