Dj-tabs w Joomla 2-5

- Sawomir Pieszczek

Spis treci

Wstp.............................................................................................................................3

Instalacja komponentu DJ-Tabs....................................................................................5

Utwrz now grup (kategori) w komponencie DJ-Tabs.............................................9

Dodaj now zawarto zakadek (kart) w komponencie DJ-Tabs...............................11

Pojedynczy artyku..................................................................................................12

Kategoria artykuw.................................................................................................13

Modu.......................................................................................................................14

Video Link................................................................................................................15

Wywietl zakadki (karty, taby) DJ-Tabs w serwisie....................................................17

Utwrz now pozycj w menu.................................................................................17

Utwrz modu DJ-Tabs............................................................................................21

Dodaj zakadki DJ-Tabs w artykule.........................................................................24

Zmodyfikuj szablon DJ-Tabs.......................................................................................27

Dzikuj Ci za wspln podr z CMS Joomla! .........................................................32

Joomla! 2.5. Praktyczny kurs......................................................................................33

2

Wstp - Sawomir Pieszczek

Wstp

Jednym z najwaniejszych czynnikw decydujcych o popularnoci

danego serwisu jest ciekawa TRE!

Jeeli uytkownicy znajd w Twoim serwisie to, co jest dla nich ciekawe

i intrygujce, rozwizuje ich problemy, to s bardzo due szanse na to, e

bdziesz mie wiele odwiedzin kadego dnia :-)

Treci, ktre publikujesz MUSZ by po prostu interesujce!

No tak, ale zaraz powiesz, e dzisiaj nie ma ju serwisw, ktre oferuj

sam tre! Zgadzam si z Tob! Wspczesny internauta jest dzisiaj

bardzo wymagajcy i chce, aby ta tre bya przedstawiona w ciekawy

i atrakcyjny sposb! No Wanie! Znajd cho jeden wspczesny portal,

ktry nie ma ani jednej grafiki!

Chyba znasz powiedzenie "jeden obraz wart jest tysica sw" - czy

jako tak ;-)

Jednym z wielu uytecznych rozszerze, jakie znajdziesz w serwisie:

DJ-Extensions, jest umoliwiajcy prezentacj treci w rny, atrakcyjny

sposb, komponent DJ-Tabs.

Jest to bardzo interesujcy komponent, za pomoc ktrego, treci

prezentowane w Twoim serwisie moesz umieci w formie:

zakadek;

rozwijanych belek (tzw. akordeonu):

Tre ci prezentowane w ten sposb, mog zawiera pojedynczy artyku,

kategori artykuw, dowolny modu lub link video.

Po instalacji komponentu DJ-Tabs masz do dyspozycji a 12 rnych

szablonw ale najciekawsze jest to, e wikszo z nich moesz

3

Wstp - Sawomir Pieszczek

samodzielnie edytowa! Oczywicie moliwe jest take tworzenie wasnych

szablonw.

Zobacz przykad prezentowania treci za pomoc DJ-Tabs w formie

zakadek:

A teraz zerknij na te same treci, ale prezentowane w formie

rozwijanych belek (tzw. Akordeonu):

Moliwoci komponentu DJ-Tabs moesz przetestowa pod adresem:

http://demo.dj-extensions.com/dj-tabs/

4

Instalacja komponentu DJ-Tabs - Sawomir Pieszczek

Instalacja komponentu DJ-Tabs

DJ-Tabs, to komercyjne rozszerzenie, ktrego proczna subskrypcja

w dniu pisania tego e-booka wynosi 30$, czyli niecae 100 z.

Aby zainstalowa komponent DJ-Tabs, zaloguj si do zaplecza swojego

serwisu, a nastpnie kliknij w menu Rozszerzenia pozycj Instalacje:

5


W sekcji Instaluj z pakietu, kliknij przycisk Przegldaj. Wybierz

zapisany wczeniej plik instalacyjny komponentu DJ-Tabs i kliknij przycisk

Wczytaj plik i zainstaluj.

Po instalacji zobaczysz komunikaty informujce o prawidowym

zainstalowaniu komponentu:

6


Aby wywietli pulpit komponentu DJ-Tabs, kliknij w menu Komponenty

pozycj DJ-Tabs:

W oknie pulpitu DJ-Tabs zobaczysz cztery zakadki: Control Panel, Groups,

Items i Themes oraz 8 przyciskw, ktre prowadz do najwaniejszych

funkcji komponentu. Po prawej stronie znajduje si sekcja informujca

o aktualnie zainstalowanej wersji DJ-Tabs, autorze rozszerzenia,

najnowszej dostpnej wersji a take informacja dotyczca licencji.

7


Aby zarejestrowa komponent w swoim serwisie i otrzymywa informacje

dotyczce aktualizacji oraz uzyska wsparcie techniczne, kliknij

gdziekolwiek w obszarze z komunikatem: ENTER YOUR LOCENCE CODE

FOR,a nastpnie w okienku modalnym w polu Licence wklej numer

swojej licencji. Kliknij przycisk Submit, aby zapisa zmiany.

Jeeli wprowadzony kod jest prawidowy, zobaczysz stosowny komunikat

wraz z informacj, do kiedy wprowadzony kod jest wany. Kliknij przycisk

Close, aby zamkn okno modalne.

8

Utwrz now grup (kategori) w komponencie DJ-Tabs - Sawomir Pieszczek

Utwrz now grup (kategori) w komponencie DJ-Tabs

Zanim zaczniesz korzysta z DJ-Tabs, najpierw musisz utworzy now

grup, poniewa kada zawarto, jaka ma by wywietlana za pomoc

DJ-Tabs, musi nalee do jakiej grupy.

List grup wywietlisz klikajc przycisk Groups lub zakadk Groups:

Aby doda now grup, kliknij przycisk New Group znajdujcy si na

pulpicie komponentu DJ-Tabs:

9

Utwrz now grup (kategori) w komponencie DJ-Tabs - Sawomir Pieszczek

lub jeeli masz otwarte okno DJ-Tabs >> Groups, kliknij przycisk

Utwrz.

Podczas tworzenia nowej grupy w polu Tytu wpisz nazw nowotworzonej

grupy, pole Alias pozostaw puste system sam je zdefiniuje na podstawie

wpisu w polu Tytu. W polu Stan zdecyduj o stanie publikacji grupy

(Opublikowano/Nieopublikowano).

Aby zapisa wprowadzone zmiany kliknij przycisk Zapisz i zamknij.

10

Dodaj now zawarto zakadek (kart) w komponencie DJ-Tabs - Sawomir Pieszczek

Dodaj now zawarto zakadek (kart) w komponencie DJ-Tabs

Aby doda now zawarto (kart, zakadk, tab), kliknij przycisk New

Item znajdujcy si na pulpicie komponentu DJ-Tabs:

lub w oknie DJ-Tabs >> Items (przycisk lub zakadka Items), kliknij

przycisk Utwrz.

11


W polu Name wpisz nazw tworzonej zakadki, w polu Group wybierz

z listy grup, do ktrej ma by przypisana, natomiast w polu Type

wybierz z listy typ treci jakie maj by prezentowane w tej zakadce.

W zalenoci od tego jaki typ zawartoci wybierzesz, po prawej stronie

bd dostpne kolejne opcje konfiguracyjne.

Pojedynczy artykuJeeli chcesz, aby nowotworzona zakadka zawieraa tylko jeden konkretny

artyku, to w polu Name wpisz nazw zakadki (w moim przykadzie

wpisuj: Artyku), w polu Group wybierz z listy grup do ktrej ma by

przypisana nowotworzona zakadka (w moim przykadzie: Nowa grupa),

natomiats w polu Type, wybierz z listy pozycj: Single Article.

Teraz w sekcji Basic Options w polu Icon wybierz z listy ikon jaka

bdzie widoczna w tworzonej zakadce lub pozostaw pozycj: [no icon].

W polu Article kliknij przycisk Change, a nastpnie w oknie modalnym

kliknij nazw artykuu, ktry ma by wywietlany w tworzonej zakadce.

Kliknij teraz belk: Article Options, aby przej do opcji zwizanych

z wywietlaniem wybranego artykuu.

Jeeli w polach z listami wyboru pozostawisz pozycj Use Global, bdzie

to oznaczao, e do wywietlania danej zawartoci zostan uyte opcje

tzw. globalne zdefiniowane w opcjach konfiguracyjnych komponentu

(przycisk Opcje na pulpicie).

Na razie zostaw wszystkie ustawienia domylne i kliknij przycisk Zapisz

i nowy aby utworzy now zakadk.

12


Kategoria artykuwJeeli chcesz, aby nowotworzona zakadka zawieraa list artykuow z

okrelonej kategorii, to w polu: Name wpisz nazw zakadki (w moim

przykadzie wpisuj: Kategoria), w polu Group wybierz z listy grup do

ktrej ma by przypisana nowotworzona zakadka, natomiats w polu

Type, wybierz z listy pozycj: Article Category.

Teraz w sekcji Basic Options w polu Icon wybierz z listy ikon jaka

bdzie widoczna w tworzonej zakadce lub pozostaw pozycj: [no icon].

W polu Category wybierz z listy kategori artykuw. Poniewa bazuj na

typowej instalacji Joomla! 2.5 z przykadowymi danymi, wybieram jedn

z kategorii, np. Joomla!

W polu Articles Limit wpisz maksymaln ilo artykuw, jaka ma by

wywietlana w nowotworzonej zakadce. Ja wpisuj: 10 ;-)

Kliknij belk Article Options, aby przej do opcji zwizanych

z wywietlaniem artykuw.

13


Podobnie jak w przypadku typu Single Article, jeeli w polach z listami

wyboru pozostawisz pozycj Use Global, bdzie to oznaczao, e do

wywietlania danej zawartoci zostan uyte opcje tzw. globalne

zdefiniowane w opcjach konfiguracyjnych komponentu (przycisk Opcje na

pulpicie).

Na razie zostaw wszystkie ustawienia domylne i kliknij przycisk Zapisz

i nowy aby utworzy now zakadk.

ModuJeeli chcesz, aby nowotworzona zakadka wywietlaa jeden z moduw

utworzonych w Twoim serwisie, to w polu: Name wpisz nazw zakadki (w

moim przykadzie wpisuj: Modu), w polu Group wybierz z listy grup do

ktrej ma by przypisana nowotworzona zakadka, natomiats w polu

Type, wybierz z listy pozycj: Module Position.

W sekcji Basic Options w polu Icon wybierz z listy ikon jaka bdzie

widoczna w tworzonej zakadce lub pozostaw pozycj: [no icon].

W polu Position wpisz nazw pozycji jak przypiszesz do moduu, ktry

powinien wywietla si w nowotworzonej zakadce. Ja wpisuj:

modul_nowa_grupa.

14


Na koniec kliknij przycisk Zapisz i nowy, aby zapisa wprowadzone

zmiany i utworzy kolejn zakadk.

Video LinkJeeli chcesz, aby nowotworzona zakadka wywietlaa film video z serwisu

YouTube lub Vimeo, to w polu: Name wpisz nazw zakadki (w moim

przykadzie wpisuj: Video), w polu Group wybierz z listy grup do ktrej

ma by przypisana nowotworzona zakadka, natomiats w polu Type,

wybierz z listy pozycj: Video Link.

W sekcji Basic Options w polu Icon wybierz z listy ikon jaka bdzie

widoczna w tworzonej zakadce lub pozostaw pozycj: [no icon].

W polu Video Link wklej link do wideo umieszczonego w serwisie

YouTube lub Vimeo.

Na koniec kliknij przycisk Zapisz i zamknij, aby zapisa wprowadzone

zmiany.

15


16

Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek

Wywietl zakadki (karty, taby) DJ-Tabs w serwisie

Istniej trzy moliwoci wywietlania zakadek utworzonych

w komponencie DJ-Tabs.

Utwrz now pozycj w menuKliknij w menu Menu, a nastpnie poka wskanikiem myszy nazw

menu, do ktrego chcesz doda pozycj, po klikniciu ktrej zostan

wywietlone zakadki DJ-Tabs i kliknij pozycj Utwrz pozycj menu.

W polu Typ pozycji menu kliknij przycisk Wybierz i w oknie modalnym

w sekcji DJ-Tabs, kliknij pozycj Accordion Views. Wwczas Twoje

zakadki bd si wywietla w widoku rozwijanych belek (tzw.

Akordeonu);

17


W polu Tytu menu wpisz nazw pozycji menu. Ja wpisuj: Accordion

Views ;-)

Teraz w sekcji Opcje podstawowe w polu Select Group wybierz z listy

grup zakadek, jaka ma si wywietla po klikniciu tej pozycji menu

(w moim przykadzie, to: Nowa grupa).

W polu Select Theme wybierz szablon definiujcy wygld wybranej grupy

zakadek DJ-Tabs.

Na koniec kliknij przycisk Zapisz i nowy, aby zapisa wprowadzone

zmiany i utworzy now pozycj menu.

Kolejn pozycj menu utwrz w nastpujcy sposb:

W polu Typ pozycji menu kliknij przycisk Wybierz i w oknie modalnym

w sekcji DJ-Tabs, kliknij pozycj Tabs View. Wwczas Twoje zakadki

bd si wywietla w widoku zakadek (tabw);

W polu Tytu menu wpisz nazw pozycji menu. Ja wpisuj: Tabs View

Views ;-)

18



grup zakadek, jaka ma si wywietla po klikniciu tej pozycji menu

(w moim przykadzie, to: Nowa grupa).


zakadek DJ-Tabs.


zmiany.

Otwrz stron gwn swojego serwisu i kliknij w menu pozycj:

Accordion View, aby zobaczy wygld zakadek wywietlanych za

pomoc komponentu DJ-Tabs.

19


Kliknij w menu pozycj: Tabs View, aby zobaczy inny wygld zakadek

wywietlanych za pomoc komponentu DJ-Tabs.

20


Utwrz modu DJ-TabsOtwrz okno menadera moduw: menu Rozszerzenia pozycja Moduy:

Odszukaj modu o nazwie DJ-Tabs, a nastpnie kliknij na jego nazwie,

aby edytowa jego ustawienia.

W polu Tytu moesz zmieni nazw dla tego moduu, w polu Pozycja

wybierz pozycj w szablonie Twojego serwisu na jakiej ma si wywietli

modu DJ-Tabs. W przypadku domylnego szablonu Beez2 moesz

zastosowa pozycj: position-1. W polu Status wybierz pozycj

Opublikowano.

W sekcji Przypisz do pozycji menu, wybierz pozycj Na wszystkich

stronach lub inn, jeeli chcesz, aby modu by wywietlany tylko na

wybranych pozycjach menu.

Pamitaj, e domylnie modu nie jest przypisany do adnej

pozycji menu, wic nie bdzie widoczny w Twoim serwisie, nawet

wwczas, gdy zostanie opublikowany!


grup zakadek, jaka ma si wywietla w tym module. W moim

przykadzie to: Nowa grupa.

21



zakadek DJ-Tabs.

W polu Select layout wybierz z listy:

Tabs jeeli chcesz wywietli swoje zakadki w widoku zakadek;

Accordion jeeli chcesz wywietli swoje zakadki w widoku

rozwijanych belek (tzw. Akordeonu);


zmiany.

22


Wygld moduu DJ-Tabs po wybraniu w polu Select layout pozycji: Tabs:

Wygld moduu DJ-Tabs po wybraniu w polu Select layout pozycji:

Accordion:

23


Dodaj zakadki DJ-Tabs w artykuleAby doda zakadki DJ-Tabs w artykule, edytuj wybrany artyku,

a nastpnie umie kursor tekstowy w miejscu, w ktrym chcesz umieci

zakadki utworzone w komponencie DJ-Tabs i kliknij przycisk DJ-Tabs

znajdujcy si pod edytorem.

W oknie modalnym w polu Select Group wybierz z listy grup zakadek,

jaka ma si wywietla w tym module.


zakadek DJ-Tabs.

W polu Select Layout wybierz z listy:

Tabs jeeli chcesz wywietli swoje zakadki w widoku zakadek;

24


Accordion jeeli chcesz wywietli swoje zakadki w widoku

rozwijanych belek (tzw. Akordeonu);

Kliknij przycisk Insert:

Zauwa, e w edytorze w miejscu przez Ciebie wskazanym pojawia si

ikonka komponentu DJ-Tabs :-)

Kliknij przycisk Zapisz i zamknij, aby zakoczy edycj artykuu.

25


Wygld artykuu z zakadkami DJ-Tabs po wybraniu w polu Select Layout

pozycji: Tabs:

Wygld artykuu z zakadkami DJ-Tabs po wybraniu w polu Select Layout

pozycji: Accordion:

26

Zmodyfikuj szablon DJ-Tabs - Sawomir Pieszczek

Zmodyfikuj szablon DJ-Tabs

Po instalacji komponentu DJ-Tabs, masz do dyspozycji a 12 rnych

szablonw:

8 szablonw, ktre moesz samodzielnie edytowa;

4 szablony nieedytowalne;

Moesz take tworzy wasne szablony korzystajc z opcji dostpnych

z poziomu komponentu.

Aby wywietli list dostpnych szablonw, kliknij na pulpicie przycisk

Themes lub kliknij zakadk: Themes.

Od razu zauwaysz, e nie moesz edytowa czterech szablonw: dj-

black, dj-orange, dj-green, dj-blue. Natomiast szablony, ktre

w nazwie maj sowo: custom moesz modyfikowa.

27


Aby dostosowa do wasnych potrzeb istniejcy szablon, wystarczy, e

klikniesz nazw wybranego szablonu.

Zarwno tworzc nowy szablon, jak i edytujc istniejcy, masz do

dyspozycji trzy sekcje: Edit, Basic Styling i Other Styling.

Sekcja Edit zawiera nastpujce pola:

pole Tytu wpisz lub zmie nazw szablonu

pole Stan - zdecyduj o stanie publikacji szablonu

pole Random - zdecyduj, czy szablon ma by wczony do puli

szablonw losowych, kiedy wybierzesz opcj >>RANDOM


Tab color kolor zakadki;

Active tab color kolor aktywnej zakadki;

Tab title color kolor tekstu w zakadce;

Active tab title color kolor tekstu w aktywnej zakadce;

Panel color kolor ta w panelu;

Active panel color kolor ta w aktywnym panelu;

Panel title color kolor tekstu w panelu;

Active panel title color kolor tekstu w aktywnym panelu;

29


Sekcja Other Styling, zawiera jedenacie pl, ktrych zmiana wpywa na

takie szczegy jak kolor i rodzaj obramowania, a take promie

zaokrglenia niektrych elementw elementw szablonu DJ-Tabs.

Date color kolor wywietlanej daty

Panel borders style styl linii obramowania panelu;

Active panel brdrs style styl linii obramowania aktywnego

panelu;

Panel borders color - kolor obramowania panelu

Active panel brdrs color - kolor obramowania aktywnego panelu;

Toggler color kolor kolor przecznika;

Active toggler color kolor aktywnego przecznika;

Tab border radius promie zaokrglenia krawdzi zakadek;

Panel border radius promie zaokrglenia obramowania panelu;

Toggler border radius promie zaokrglenia obramowania

przecznika;l

Image border radius promie obramowania grafiki;

30


31

Dzikuj Ci za wspln podr z CMS Joomla! - Sawomir Pieszczek

Dzikuj Ci za wspln podr z CMS Joomla!

Jeeli jeste w tym miejscu, to oznacza, e

przeczytae i mam nadziej e potrafisz tworzy

fantastyczne zakadki za pomoc komponentu DJ-

Tabs. Dla mnie, jako autora tego e-booka, to

ogromna satysfakcja!

Wicej niezwykle uytecznych rozszerze

znajdziesz w serwisie DJ-Extensions.

Wiele porad dotyczcych CMS Joomla! znajdziesz take na moim blogu

(www.slawop.net).

Na blogu w zakadce SZKOLENIA (www.slawop.net/szkolenia) moesz

znale informacje na temat moich szkole oraz planw na najbliszy

czas.

Jeeli chcesz si ze mn skontaktowa w sprawie szkole, konsultacji lub

po prostu masz jakie pytanie, pisz na adres: [email protected].

Jeeli chcesz by na bieco i otrzymywa powiadomienia o moich

kolejnych wpisach lub projektach, zapisz si na mj newsletter

(www.slawop.net/newsletter).

Jeeli spodoba si Tobie ten poradnik, pomg rozwiza cz Twoich

problemw, napisz prosz par sw opinii korzystajc z formularza:

OPINIE (www.slawop.net/opinie).

Do zobaczenia!

Sawomir Pieszczek

32

Joomla! 2.5. Praktyczny kurs - Sawomir Pieszczek

Joomla! 2.5. Praktyczny kurswww.slawop.net/info/joomla_2-5_praktyczny_kurs.php

33

WstpInstalacja komponentu DJ-TabsUtwrz now grup (kategori) w komponencie DJ-TabsDodaj now zawarto zakadek (kart) wkomponencie DJ-TabsPojedynczy artykuKategoria artykuwModuVideo Link

Wywietl zakadki (karty, taby) DJ-Tabs w serwisieUtwrz now pozycj w menuUtwrz modu DJ-TabsDodaj zakadki DJ-Tabs w artykule

Zmodyfikuj szablon DJ-TabsDzikuj Ci za wspln podr zCMS Joomla! Joomla! 2.5. Praktyczny kurs

Documents

Dj-tabs w Joomla 2-5