Tworzenie nowego szablonu przy użyciu Atomic

Thank you for your contribution: 

Will be translated as soon as possible to Polish


Szablon Atomic to szkielet dla twojego własnego szablonu. Zawiera on:

  • /htdocs/templates/atomic
    component.php - szablon podglądu wydruku
    error.php - strona błędu szablonu
    favicon.ico - ikona strony (Favicon)
    index.html - plik bezpieczeństwa wyświetlający pustrą stronę gdy adres wprowadzony jest bezpośrednio (także musi być skonfigurowany przez serwer www, ale najczęściej jest)
    index.php - główna strona szablonu
    templateDetails.xml - Plik konfiguracji zawierający informację o plikach, opcjach i pozycjach jest niezbędy do wyświetlenia szablonu w menadżeże szablonów  późniejszego stworzenia instalowalnego pliku zip.
    template_preview.png - Podgląd szablonu wyświetlany w menadzeże szablonów
    template_thumbnail.png - Miniaturka podglądu szablony wyświetlana w menadżeże szablonów.
  • /htdocs/templates/atomic/css
    Folder zawierający pliki CSS
  • /htdocs/templates/atomic/html
    folder dla nadpisywalnych plików - Atomic wspiera kilka nadpisań dla modułów.
  • /htdocs/templates/atomic/images
    folder zawierający grafiki
  • /htdocs/templates/atomic/js
    Folder zawierający skrypty Java script
  • /htdocs/templates/atomic/languages
    Folder zawierający pliki językowe- Atomic domyślnie jest anglojęzyczny.

Główny plik szablonu index.php

Nazwa pliku tego szablonu musi brzmieć index.php od kiedy Joomla! poszukuje kodów <jdoc> oraz poleceń PHP. Wszystkie niezbędne znaczniki HTML są obecnie wbudowane i zawierają komentarze. Możesz zmienić zawartość tego pliku w zależności od Twoich potrzeb.

Aby zrozumieć jak to działa zróbmy krótki przegląd jego zawartości:

W linii 24 możesz wybrać czy chcesz korzystać z frameworka CSS "blueprint" czy też nie

W liniach 50, 56, 62 i innych możesz zobaczyć że szablon wspiera pozycje oparte na specjalnych nazwach (atomic-search, atomic-topmenu, ...). Jeżeli chcesz używać tych nazw, musisz przypisać do nich swoje moduły. Jeżeli chcesz zmienić ich nazwy, możesz to zrobić w plikutemplatedetails.xml .

W linii 48 zobaczysz:

echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/template.js

Joomla! zna wartości z baseurl jak i nazwę twojego szablonu więc możesz się do nich odwołać zawsze gdy tego potrzebujesz.

W linii 48 zobaczysz:

echo $app->getCfg('sitename');

To wyświetli ci nazwę twojej strony.

W linii 50 zobaczysz:

if($this->countModules('atomic-search')) ...

Polecenie to liczy ilość modułów występujących w pozycji atomic-search. Stosowane jest to do dostosowywania szablonu do różnych sytuacji.

W linii 52 zobaczysz:

<jdoc:include type="modules" name="atomic-search" style="none" />

To jest komenda <jdoc> która istnieje tylko w przestrzeni nazw w Joomla!. Stosuje się ją do wstawiania typów HTML jako atrybutów. W tym przypadku oznacza to że wyjścia wszystkich modułów przypisane są do pozycji modułu o nazwie atomic search. Styl atrybutów nazywa się module chrome i może przyjmować następujące wartości:

  • table - Wyjście przedstawione zostanie jako tabela
  • horz - Wyjście jest wyświetlane poziomo w komórkach otaczających tabelę.
  • xhtml - Wyjście jest zgodne z XHTML'owskim elementem <div>.
  • rounded - Wyjście jest w formacie, w którym  mogą być wyświetlane zaokrąglone rogi. Klasa elementu jest zmieniona z moduletable do module.
  • none - brak formatowania
  • outline - rodzaj wyświetlania podglądu pozycji (?tp=1)
  • Template specific style - Niektóre szablony, jak na przykład Beez, posiadają swoje określone style. Zobacz rozdział Angie Radtke About Her Beez Template.

Kompletną listę stylów znajdziesz w dokumentacji Joomla! - What is module chrome.

Innymi typami <jdoc> są:

<jdoc:include type="head" />
<jdoc:include type="message" />
<jdoc:include type="component" style="none" />

Każda strona potrzebuje typu head, czasami message (po zapisywaniu) oraz, oczywiście, sekcji component. Jeden component może być wyświetlony na jednej stronie. component równie dobrze może korzystać z modułu chromel.

Pliki error oraz print view działają dokładnie tak jak plik main.

Folder CSS

W folderze znajdziesz następujące pliki:

  1. Plik /template.css z predefiniowanymi, skomentowanymi poleceniami CSS. Jeżeli nie używasz frameworka blueprint powinienieć znieść komentarz z kilku z nich. Linie w których się one znajdują zostały specyficznie oznaczone.
  2. Plik /template_ie.css Jest pusty. Tutaj możesz dodawać style zastępcze dla przeglądarki Internet Explorer.
  3. Plik css/template_rtl.css jest również pusty. Możesz tutaj dodać style dla języków z zapisem od prawej do lewej strony.

Framework Blueprint

Blueprint to framework CSS zaprojektowanym dla skrócenia czasu tworzenia oraz zapewnienia kompatybilności z różnymi przeglądarkami.

Kilka zdań zaczerpniętych z pliku readme :

Witaj w Blueprint! Jest to framework CSS zaprojektowany dla skrócenia czasu tworzenia szablonów CSS. Daje ci solidny fundament do pod budowę własnych poleceń CSS. Oto niektóre z funkcji które zapewnia BP:
* Łatwo konfigurowalna siatka
* Sensowną domyślną topografię
*Typograficzną linię bazową
* Perfekcyjny reset CSS w przeglądarce
*Arkusz stylów do drukowania
* Zaawansowane możliwości dostosowania
* Całkowity brak "wzdęć"

Dema i tutoriale dostępne sa na stronie projektu- http://www.blueprintcss.org/.