Dj-tabs w Joomla 2-5
-
Upload
andrzej-jankowski -
Category
Documents
-
view
230 -
download
0
description
Transcript of 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
-
Instalacja komponentu DJ-Tabs - Sawomir Pieszczek
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
-
Instalacja komponentu DJ-Tabs - Sawomir Pieszczek
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
-
Instalacja komponentu DJ-Tabs - Sawomir Pieszczek
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
-
Dodaj now zawarto zakadek (kart) w komponencie DJ-Tabs - Sawomir Pieszczek
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
-
Dodaj now zawarto zakadek (kart) w komponencie DJ-Tabs - Sawomir Pieszczek
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
-
Dodaj now zawarto zakadek (kart) w komponencie DJ-Tabs - Sawomir Pieszczek
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
-
Dodaj now zawarto zakadek (kart) w komponencie DJ-Tabs - Sawomir Pieszczek
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
-
Dodaj now zawarto zakadek (kart) w komponencie DJ-Tabs - Sawomir Pieszczek
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
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
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
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
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 zamknij, aby zapisa wprowadzone
zmiany.
Otwrz stron gwn swojego serwisu i kliknij w menu pozycj:
Accordion View, aby zobaczy wygld zakadek wywietlanych za
pomoc komponentu DJ-Tabs.
19
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
Kliknij w menu pozycj: Tabs View, aby zobaczy inny wygld zakadek
wywietlanych za pomoc komponentu DJ-Tabs.
20
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
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!
Teraz w sekcji Opcje podstawowe w polu Select Group wybierz z listy
grup zakadek, jaka ma si wywietla w tym module. W moim
przykadzie to: Nowa grupa.
21
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
W polu Select Theme wybierz szablon definiujcy wygld wybranej grupy
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);
Na koniec kliknij przycisk Zapisz i zamknij, aby zapisa wprowadzone
zmiany.
22
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
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
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
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.
W polu Select Theme wybierz szablon definiujcy wygld wybranej grupy
zakadek DJ-Tabs.
W polu Select Layout wybierz z listy:
Tabs jeeli chcesz wywietli swoje zakadki w widoku zakadek;
24
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
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
-
Wywietl zakadki (karty, taby) DJ-Tabs w serwisie - Sawomir Pieszczek
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
-
Zmodyfikuj szablon DJ-Tabs - Sawomir Pieszczek
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
-
Zmodyfikuj szablon DJ-Tabs - Sawomir Pieszczek
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
-
Zmodyfikuj szablon DJ-Tabs - Sawomir Pieszczek
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
-
Zmodyfikuj szablon DJ-Tabs - Sawomir Pieszczek
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