kody wywołujące z joomli
Wyniki 1 do 4 z 4

Temat: kody wywołujące z joomli

  1. #1
    Senior moje awatar
    Dołączył
    08-01-2008
    Skąd
    Silesia
    Wpisy
    6 057
    Punkty
    188

    Domyślny kody wywołujące z joomli

    Witam, nie wiem czy dobrze zamieszczam, ale poszukuje kodów wywołujących menu joomli - mam rozsuwane menu i chciałem je wykorzystać jako moduł, żebym nie musiał wpisywać zmian ręcznie.
    Przy zrobieniu z tego modułu miałaby mi ktoś pomóc, a przynajmniej sprawdzić, po jego wykonaniu.
    Moduł byłby potem dostępny za free.
    Webdeveloper do usług ;)

  2. Pani Reklamowa
    Pani Reklamowa jest aktywna
    Avatar Panny Google

    Dołączył
    19-08-2010
    Skąd
    Internet
    Postów
    milion
    Pochwał
    setki
  3. #2
    Senior zwiastun awatar
    Dołączył
    20-09-2005
    Wpisy
    27 315
    Punkty
    1142

    Domyślny

    Jeśli znasz angielski - na joomla.org jest tutorial nt. szablonow w 1.5 a tam rozdział o tym, jak do menu w Joomla! można wykorzystać dowolne menu CSS
    Korzystaj i ciesz się!
    ===============
    Zwiastun
    Biblioteka Elektronicznej Dokumentacji Joomla!

  4. #3
    Senior moje awatar
    Dołączył
    08-01-2008
    Skąd
    Silesia
    Wpisy
    6 057
    Punkty
    188

    Domyślny

    Tylko, że to moje menu jest oparte na listach definicyjnych i jest wspomagane JS'em.
    Webdeveloper do usług ;)

  5. #4
    Senior zwiastun awatar
    Dołączył
    20-09-2005
    Wpisy
    27 315
    Punkty
    1142

    Domyślny

    Nie wiem, co to są listy definicyjne - DL DT DD ???? - jeśli tak to co? (pominąwszy wybór rodzaju listy). Zajrzał?

    Poniżej robocze tłumaczenie :

    Menu w szablonie
    W rozdziale 5, „Tworzenie menu i nawigacji” widzieliśmy, że podczas dodawania modułu menu można określić kilka ustawień, w tym wybrać jeden z kilku stylów – właściwy dla Joomla 1.5 – lista oraz w trybie zgodności z Joomla 1.0: pionowo w tabeli, poziomo w tabeli, poziomo lub pionowo.

    Podobnie, korzystając z CSS raczej niż z tabel rezultatem jest zredukowany kod i łatwiejsze oznaczanie. Jeśli dla wszystkich menu ustawimy styl lista, będziemy mieć jedynie 12 tabel (później zobaczymy, jak usunąć pozostałe, korzystając z podmiany szablonów). Pamiętaj, styl Lista jest nowym stylem w Joomla 1.5, podobny do niego w Joomla 1.0 Lista – poziomo lub pionowo – w 1.5 działa tylko w trybie zgodności (oba zdeprecjonowane).



    Listy są lepszym rozwiązaniem niż tabele, ponieważ zarówno w przypadku przeglądarek tekstowych, jak i czytników ekranu, urządzeń nieobsługujących CSS oraz botów przeszukujących i indeksujących Internet, dostęp do treści jest łatwiejszy i szybszy.
    Inną zaletą stosowania CSS dla menu jest duża ilość dostępnego na witrynach projektantów kodu, który można wykorzystać.

    Na stronach http://css.maxdesign.com.au/ znajdziesz 30 menu, wszystkie używające tego samego podstawowego kodu. Nazwane są Listamatic. Istnieje pewna różnica w kodzie, tak że musimy nieco zmienić, żeby dostosować to menu do Joomla.
    Listy używają następującego kodu:
    Kod:
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href=" #" id="current">Item one</a></li>
    <li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Item two</a></li>
    <li><a xhref="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Item three</a></li>
    <li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Item four</a></li>
    <li><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Item five</a></li>
    </ul>
    </div>
    Menu objęte jest elementem <div> nazwanym navcontainer i utworzone jest z listy z identyfikatorem navlist. Aby osiągnąć ten efekt w Joomla, możemy skorzystać z przyrostków stylu modułów. Jak pamiętasz zapewne, ramka typu XHTML daje nam w rezultacie następujący kod wynikowy:
    Kod:
    <div class="moduletable">
      <h3>modChrome_xhtml</h3>
      modChrome_xhtml
    </div>
    Jeśli dodamy przyrostek klasy, otrzymamy:
    Kod:
    <div class="moduletablesuffix">
      <h3>modChrome_xhtml</h3>
      modChrome_xhtml
    </div>
    Tym sposobem, jeśli skorzystamy z menu Listmatic, wystarczy że zastąpimy klasę navcontainer klasą moduletablesuffix.
    UWAGA
    Przyrostki klasy CSS w modułach w pewnym zakresie zacierają podział między projektowaniem witryny a administrowaniem. Jednym z celów rozwoju Joomla! jest wyraźnie rozdzielić te role. Prawdopodobne jest więc, że w następnych wersjach przyrostki klas zostaną zaniechane.
    Zastosowanie przyrostka klasy jest użyteczne (przydatne, wygodne). Umożliwia np. uzyskiwanie różnych wariantów kolorystycznych tylko prostą zmianą przyrostka klasy modułu.
    Minimum do zapamiętania
    Najlepiej zawsze stosować styl listy niepunktowanej albo lista – pionowo lub poziomo jako kod wyjściowy menu. Można wówczas skorzystać z wielu zasobów CSS dostępnych w Sieci.
    Dla naszej witryny użyjemy projektu List 10 opracowanego przez Marka Newhouse. Oto nasz CSS:
    Kod:
    .moduletablemenu {
    color:#333;
    margin-bottom:1em;
    padding:0;
    }
    .moduletablemenu h3 {
    background:#666;
    color:#fff;
    text-align:center;
    font-size:1.1em;
    border-bottom:1px solid #fff;
    margin:0;
    padding:0.25em 0;
    }
    .moduletablemenu ul {
    list-style:none;
    margin:0;
    padding:0;
    }
    .moduletablemenu li {
    border-bottom:1px solid #ccc;
    margin:0;
    }
    .moduletablemenu li a {
    display:block;
    border-left:10px solid #333;
    border-right:10px solid #9D9D9D;
    background-color:#666;
    color:#fff;
    text-decoration:none;
    padding:3px 5px 3px 0.5em;
    }
    html>body .moduletablemenu li a {
    width:auto;
    }
    .moduletablemenu li a:hover,a#active_menu:link,a#active_menu:visited {
    border-left:10px solid #1c64d1;
    border-right:10px solid #5ba3e0;
    background-color:#2586d7;
    color:#fff;
    }
    W parametrach modułu wyświetlającego menu musimy dodać przyrostek modułu: menu (bez znaku podkreślenia czy myślnika w tym przypadku) do modułów menu, w których chcemy zastosować opracowany sposób prezentacji menu. Wynik zaprezentowany jest na ilustracji 9.7
    [2008-10-26 21:12:16] Stefan Wajda napisał(a): Do każdego modułu menu, które chcemy wyświetlać w ten sposób, musimy dodać przyrostek klasy modułu menu: .


    WSKAZÓWKA
    Gdy tworzysz konkretne menu, skorzystaj z przydatnej wskazówki: stwórz domyślną instalację Joomla!, podejrzyj źródło, odszukaj kod generowany przez główne menu (mainmenu), skopiuj go i wklej do edytora HTML (jak Dreamweaver). Następnie zastąp wszystkie odnośniki (adresy) kzyżykiem # (hasz), a następnie dodawaj reguły CSS, aż osiągniesz oczekiwany efekt. Kod pozwalający wystylizować menu jest poniżej:
    Kod:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!-- .astyle { } -->
    </style>
    </head>
    <body>
    <div class="moduletable">
    <h3>Menu witryny</h3>
    <ul class="mainmenu">
      <li id="current" class="item1 active"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Home</a></li>
      <li class="item2"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Joomla! Overview</a></li>
      <li class="item3"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">What's New in 1.5?</a></li>
      <li class="item4"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Joomla! License</a></li>
      <li class="item5"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">More about Joomla!</a></li>
      <li class="item6"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">FAQ</a></li>
      <li class="item7"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">The News</a></li>
      <li class="item8"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">Web Links</a></li>
      <li class="item9"><a href="http://www.compassdesigns.net/tutorials/joomla-tutorials/joomla-1.5-template-tutorial_4.html">News Feeds</a></li>
    </ul>
    </div>
    </body>
    </html>
    CSS został włączony do dokumentu, aby uprościć edycję kodu.
    Korzystaj i ciesz się!
    ===============
    Zwiastun
    Biblioteka Elektronicznej Dokumentacji Joomla!

Reguły pisania

  • Nie możesz zakładać nowych tematów
  • Nie możesz dodawać wypowiedzi
  • Nie możesz dodawać załączników
  • Nie możesz poprawiać swoich postów
  •