Seznam kategorií a změna layout

24. kvě 2015 12:33 #121891

Seznam kategorií a změna layout od iamdave

Uživatel

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

Moderátor

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

Uživatel

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

Moderátor

Základní styl by mohl vypadat např. takto:

Code:

.categories-list > div {
  float: left;
  width: 33.33%;
  text-align: center;
}

Poděkovali: iamdave

26. kvě 2015 23:00 #121924

Odpověď od iamdave

Uživatel

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

Uživatel

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 :-)