Dokumentacja Porto

1. Przegląd Porto to profesjonalny, uniwersalny motyw Drupal idealny dla każdej strony internetowej...
2. Tylko motyw
3. Pełna instalacja Drupala
4. Podtemat Porto
5. Menu
6. Moduły
7. Ogólne wymagane moduły
8. Suwaki obrazu
9. NivoSlider
10. Pierwsza strona
11. Strona jednej strony
12. Menu jednej strony
13. Ustawienia motywu
14. Niestandardowe typy zawartości
15. Kolumny portfela
16. Powiązane projekty:
17. Filtry portfela:
18. Zespół
19. Filtry zespołu:
20. Karuzela
21. Referencje
22. FAQ
23. Paralaksa
24. Posty na blogu)
25. Autor bio
26. Regiony blokowe
27. Regiony blokowe nagłówków
28. Regiony blokujące treść
29. Footer Block Regions
30. Dodatki
31. Przykłady kodu
32. Kanał Flickr
33. Widget na Twitterze
34. Lightbox
35. Ikony społecznościowe
36. Przełącznik
37. Animacje CSS3
38. Dziękuję Ci

Przegląd

Porto to profesjonalny, uniwersalny motyw Drupal idealny dla każdej strony internetowej firmy lub portfolio. Aby uzyskać wsparcie tematyczne, którego nie można znaleźć w tej dokumentacji, odwiedź naszą forum wsparcia . Po zarejestrowaniu się skontaktuj się z nami za pośrednictwem Strona autora ThemeForest z nazwą użytkownika forum, dzięki czemu możesz uzyskać prawa do publikowania.

Zaktualizowano: 04/01/14
Autor: Refaktor
Dokumenty obsługiwane przez: TOC
Oryginalny projekt wg Crivos

Instalacja

Istnieje kilka sposobów zainstalowania Porto. W przypadku istniejących witryn, które już zawierają treści, pierwsza metoda będzie obejmować tylko instalację i aktywację motywu. Druga opcja obejmuje pełną instalację Drupala 7 z tym samym plikiem bazy danych SQL, który został użyty do utworzenia dema motywu. Wybierz, która metoda instalacji jest dla Ciebie najlepsza i postępuj zgodnie z instrukcjami. Zalecamy wykonanie pełnej instalacji, zwłaszcza jeśli planujesz korzystanie z funkcji Commerce.

Tylko motyw

Opcja 1:

• Odwiedź stronę twojadomena.com/admin/appearance/install
• Prześlij plik Porto.zip
• Włącz i ustaw na domyślne

Opcja 2:

• Rozpakuj plik Porto.zip i prześlij go przez FTP do / sites / all / themes
• Odwiedź stronę twojadomena.com/admin/appearance/
• Przewiń w dół do „TEMATY WYŁĄCZONE” i ustaw i włącz Porto

Pełna instalacja Drupala

Poniższe kroki są przeznaczone dla osób, które mają doświadczenie w ręcznym instalowaniu baz danych Drupal i importowaniu. Jeśli nie czujesz się komfortowo samodzielnie wykonując te czynności, skontaktuj się z administratorem serwera w celu uzyskania pomocy. UWAGA ta opcja służy do zupełnie nowej instalacji Drupala. Nie importuj dostarczonego pliku SQL do istniejącej bazy danych Drupal lub stracisz wszystkie swoje dane!

1. Utwórz bazę danych dla tej instalacji Drupala i zaimportuj plik SQL, który został dołączony do motywu.
2. Śledzić te wskazówki utworzyć plik settings.php. Zapisz ten plik gdzieś, abyś mógł skopiować go do dostarczonej przez nas instalacji Drupala.
3. Skopiuj całą zawartość folderu / demo / porto do lokalizacji na serwerze WWW, do której chcesz uzyskać dostęp. Jeśli chcesz, aby Twoja domena podstawowa wskazywała na instalację Porto, skopiuj wszystko do folderu głównego. Jeśli chcesz, aby Twoja witryna była dostępna jako podsekcja Twojej domeny (na przykład: twojadomena.com/drupal), po prostu zmień nazwę folderu / demo / porto na żądaną nazwę i prześlij do katalogu głównego serwera. Upewnij się również, że skopiowałeś plik settings.php wspomniany w poprzednim kroku
4. Zaloguj się do swojej witryny za pomocą nazwy użytkownika Steve i hasła admin oraz odwiedź stronę / admin / people, aby zmienić nazwę użytkownika i hasło administratora.
5. Przejdź przez konfigurację Drupala znajdującą się w opcjach / admin / config i zaktualizuj wszystkie niezbędne informacje, aby odzwierciedlić Twoją witrynę. Pamiętaj też, aby odwiedzić / admin / config / media / file-system i zmienić katalog tymczasowy.

Podtemat Porto

Uwaga: od wersji 1.1.2 temat podrzędny jest domyślnym tematem aktywnym w pełnej instalacji demonstracyjnej.

Porto jest dostarczane z sub-motywem powłoki o nazwie Porto_sub, którego można użyć do dostosowania stylu i struktury szablonu motywu nadrzędnego bez konieczności modyfikowania samego motywu nadrzędnego. Jest to przydatne, jeśli planujesz aktualizację motywu nadrzędnego, gdy publikujemy aktualizacje ThemeForest. Jeśli wykonałeś pełną instalację, zobaczysz już Porto_sub na liście dostępnych tematów. Jeśli zainstalowałeś samodzielną instalację, możesz znaleźć plik Porto_sub.zip w katalogu głównym pobieranych plików i zainstalować go jak każdy inny motyw.

Jest już zdefiniowany pusty arkusz stylów, który jest /css/custom.css (wewnątrz folderu Porto_sub). Użyj tego pliku, aby dodać cały niestandardowy arkusz CSS, którego używasz. Możesz także skopiować dowolny plik szablonu z folderu / Porto / templates do folderu / Porto_sub / templates i najpierw będzie on słuchał pliku szablonu podtematów. Umożliwi to zaktualizowanie motywu nadrzędnego podczas aktualizowania bez utraty dostosowań. Po prostu zwróć uwagę na dziennik zmian i porównaj macierzyste pliki tematyczne z plikami i dokonaj niezbędnych zmian.

Konieczne będzie skonfigurowanie ustawień motywu pod-motywów oddzielnie od motywu nadrzędnego, dlatego odwiedź / admin / appearance / settings / porto_sub, aby skonfigurować ustawienia motywu dla pod-motywu. Musisz także skonfigurować regiony bloku osobno.

Menu

Porto ma obszar bloków o nazwie Menu nagłówka, którego można użyć do dodania dowolnego bloku menu. Demo używa po prostu domyślnego bloku menu głównego, ale możesz utworzyć własny blok menu, jeśli chcesz.

Uwaga: upewnij się, że zaznaczyłeś pole „pokaż jako rozwinięte” na wszystkich elementach macierzystych z dziećmi, aby upewnić się, że menu rozwijane działa poprawnie.

Moduły

Możesz znaleźć wszystkie moduły użyte w demonstracji w folderze modułów w katalogu głównym folderu pobranego z ThemeForest. Nie wszystkie moduły są wymagane do korzystania z motywu, ale poniżej znajduje się lista modułów, które będą potrzebne do wykorzystania różnych elementów motywu

Ogólne wymagane moduły

NivoSlider

Kontakt

Dane treści Porto

Jeśli użyłeś opcji „tylko motyw”, aby zainstalować motyw na istniejącej instalacji, która ma już zawartość, zalecamy skorzystanie z modułu Porto Content Data, aby utworzyć dodatkowe typy treści, pola i widoki potrzebne do pełnego wykorzystania motywu. Znajdziesz go w folderze zasobów w katalogu głównym folderu pobranego z ThemeForest. Ten moduł jest niestandardowy funkcje moduł i nie będzie działać bez niego. Zalecamy skopiowanie wszystkich modułów z folderu / demo / porto / sites / all / modules do instalacji, jeśli jeszcze ich nie masz. Po tym, jak wszystkie moduły po prostu załadują i aktywują moduł Porto Content Data, a typy zawartości, pola i widoki zostaną automatycznie utworzone.

Suwaki obrazu

Mega Slider

Porto zawiera Drupala Mega Slider moduł. Moduł ten oferuje niewiarygodną liczbę opcji, aby stworzyć dokładny suwak odpowiadający Twoim potrzebom. Aby rozpocząć konfigurowanie suwaka, odwiedź / admin / structure / md-slider i naciśnij link „dodaj nowy suwak”. Dokumentację suwaka znajdziesz w folderze modułu md_slider i możesz odwołać się do poniższego filmu.

NivoSlider

Jeśli chcesz użyć suwaka obrazu NivoSlider na swojej stronie, po prostu zainstaluj moduł NivoSlider i odwiedź / admin / structure / nivo-slider, aby skonfigurować i skonfigurować suwak. Dla suwaka tworzony jest region bloku, którego można użyć w dowolnym wybranym regionie bloku.

Pierwsza strona

Pierwsza strona na demo Porto składa się z różnych regionów blokowych. Niektóre są generowane przez moduły (np. Mega Slider), inne przez Widoki, a niektóre są niestandardowymi blokami ze specjalnymi znacznikami. Możesz znaleźć wszystkie znaczniki używane na stronie głównej demo w folderze / examples / front-blocks-stron w katalogu głównym folderu motywu.

Strona jednej strony

Nowością w wersji 1.1 jest obsługa strony w stylu „jednej strony”, na której cała zawartość znajduje się na jednej stronie. Przykład tego, co to wygląda, można znaleźć na stronie demonstracyjnej tutaj. Utworzono niestandardowy szablon strony o nazwie page - onepage.tpl.php, który jest przeznaczony do pracy ze stroną o aliasie url „jedna strona”. Nowy region bloków o nazwie „Jedna strona” został utworzony w celu użycia go z tym szablonem strony. Jest całkowicie opcjonalny, ale pozwala ci lepiej śledzić różne bloki.

Menu jednej strony

Szablon jednej strony obsługuje również płynny efekt przewijania elementów #anchor. Na przykład masz cztery sekcje na swojej stronie: #, #services, #team, #contact. Każdy element menu może łączyć się z tymi elementami zakotwiczenia, używając następującej struktury adresu URL: „węzeł / ID / # kontakt”. Identyfikator w tym przypadku to identyfikator węzła strony, którą utworzyłeś dla szablonu „jednej strony”. Aby znaleźć id, po prostu odwiedź / admin / content i naciśnij edit na tej stronie. Adres URL wyświetli identyfikator.

Jeśli używasz bloku Najnowsze projekty, możesz połączyć się z #projektami. Jeśli korzystasz z bloku One Page Team, możesz utworzyć link do #team. Jeśli chcesz połączyć się z blokiem niestandardowym z własnym znacznikiem, po prostu dodaj atrybut id = "" do głównej div zawartości bloku, która pasuje do łącza menu.

Ustawienia motywu

Odwiedź / admin / appearance / settings / Porto, aby skonfigurować ustawienia motywu. Możesz wybrać schemat kolorów, dodać własny niestandardowy CSS, dodać własne niestandardowe logo itp.

Niestandardowe typy zawartości

Teczka

Pola:

• Obraz: Domyślne pole obrazu używane do przesyłania obrazów.
• Kategoria portfela: Jest to pole referencyjne, które jest powiązane ze słownikiem stworzonym specjalnie dla tego typu treści.

Blok portfela - przykład: http://refaktorthemes.com/porto/portfolio-4-kolumny

Jest to standardowy styl Portfolio, który wykorzystuje widok „Portfolio Block Page”. Jeśli nie używasz pełnej wersji demonstracyjnej lub nie korzystałeś z modułu Treści niestandardowej, możesz użyć kodu z /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików do pobrania ThemeForest), aby zaimportować ten widok. Następnie po prostu umieść „Widok: Blok portfela” w obszarze Zawartość i skonfiguruj ustawienia widoczności bloków według własnych upodobań.

Pliki szablonów

• /templates/node/node--portfolio.tpl.php
• /templates/field--field_image--portfolio.tpl.php
• /templates/node/node--view--portfolio--block.tpl.php
• /templates/views/views-view--portfolio-block.tpl.php

Kolumny portfela

Aby zmienić liczbę elementów wyświetlanych w wierszu w bloku Portfolio, odwiedź ustawienia motywu (/ admin / wygląd / ustawienia / Porto).

Powiązane projekty:

Porto oferuje również wsparcie dla bloku „Powiązane projekty”, którego można użyć do prezentacji dodatkowych elementów Portfela na pojedynczych stronach węzła Portfolio lub w dowolnym innym miejscu. Jeśli nie używasz pełnej wersji demonstracyjnej lub nie korzystałeś z modułu Treści niestandardowej, możesz użyć kodu z /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików do pobrania ThemeForest), aby zaimportować ten widok. Następnie po prostu umieść „Widok: powiązane projekty” w obszarze Zawartość i skonfiguruj ustawienia widoczności bloków według własnych upodobań.

Pliki szablonów

• /templates/node/node--view --related-projects--block.tpl.php
• /templates/views/views-view --related-projects.tpl.php

Filtry portfela:

Portfolio zawiera wsparcie dla efektu filtra izotopowego zasilanego przez warunki taksonomiczne. Aby użyć tego efektu, odwiedź / admin / structure / taxonomy i utwórz nowe słownictwo (przykład: Portfolio). Po utworzeniu słownika możesz utworzyć warunki, których chcesz użyć do kategoryzacji elementów portfela. To słownictwo taksonomiczne można powiązać z typem zawartości Portfolio za pomocą pola odwołania do terminu, dzięki czemu można wybrać kategorię lub kategorie, w których chcesz umieścić swoje przedmioty.

Filtry są zasilane przez widok o nazwie Filtry portfela, który jest umieszczony w nagłówku widoku jako globalny obszar widoku. Jeśli nie masz jeszcze tego widoku, możesz użyć kodu z /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików do pobrania ThemeForest), aby zaimportować go jako widok do umieszczenia w nagłówku widoku widoku Portfolio .

Pliki szablonów

• /templates/views/views-view-list--portfolio-filters.tpl.php
• /templates/views/views-view-fields--portfolio-filters.tpl.php

Zespół

Blok drużyny - przykład: http://refaktorthemes.com/porto/team

Pola:

• Obraz: Domyślne pole obrazu używane do przesyłania obrazów.
• Kategoria portfela: Jest to pole referencyjne, które jest powiązane ze słownikiem stworzonym specjalnie dla tego typu treści.
• Zespół Bio: pole tekstowe używane do wprowadzenia krótkiego opisu członka zespołu.
• Łącze Facebook: Służy do dodawania linku do strony Facebook członka zespołu.
• Link do Twittera: Służy do dodawania linku do strony Twittera członka zespołu.
• LinkedIn Link: Służy do dodawania linku do strony LinkedIn członka zespołu.

Nieco podobny do Portfela, blok Zespołu może być wykorzystany do prezentacji Twojej witryny lub członków zespołu firmy. Jeśli nie używasz pełnej wersji demonstracyjnej lub nie korzystałeś z modułu Treści niestandardowej, możesz użyć kodu z /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików do pobrania ThemeForest), aby zaimportować ten widok. Następnie po prostu umieść „Widok: Zespół” w obszarze Zawartość i skonfiguruj ustawienia widoczności bloków według własnych upodobań.

Pliki szablonów

• /templates/node/node--view--team--block.tpl.php
• /templates/views/views-view--team.tpl.php

Filtry zespołu:

Widok bloku drużyn obejmuje również obsługę efektu filtra izotopowego zasilanego przez warunki taksonomiczne. Aby użyć tego efektu, odwiedź / admin / structure / taxonomy i utwórz nowe słownictwo (przykład: Team). Po utworzeniu słownika możesz utworzyć warunki, których chcesz użyć do kategoryzacji elementów portfela. To słownictwo taksonomiczne można powiązać z typem zawartości zespołu za pomocą pola referencyjnego, dzięki czemu można wybrać kategorię lub kategorie, w których chcesz umieścić swoje przedmioty.

Filtry są zasilane przez widok o nazwie Filtry zespołowe, który jest umieszczony w nagłówku widoku jako globalny obszar widoku. Jeśli nie masz jeszcze tego widoku, możesz użyć kodu z /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików pobierania ThemeForest), aby zaimportować go jako widok do umieszczenia w nagłówku widoku widoku zespołu .

Pliki szablonów

• /templates/views/views-view-list--team-filters.tpl.php
• /templates/views/views-view-fields--team-filters.tpl.php

Karuzela

Ten typ zawartości pozwala utworzyć karuzelę graficzną zasilaną przez Flexslider. Wykorzystuje tylko standardowe pole obrazu (field_image) ustawione, aby umożliwić nieograniczoną liczbę obrazów.

Pola:

• Obraz: Domyślne pole obrazu używane do przesyłania obrazów.

Pliki szablonów

• /templates/node/node--carousel.tpl.php
• /templates/views/views-view--client-carousel.tpl.php
• /templates/views/views-view-unformatted--client-carousel.tpl.php

Kod eksportu /views-exports/carousel.txt może być użyty do utworzenia widoku karuzeli, który używa wyświetlacza bloku. Ten blok można następnie dodać do wybranego regionu.

Referencje

Pola:

• Treść referencyjna: używana do pisemnej treści opinii.
• Testimonial Image: Domyślne pole obrazu używane do przesyłania obrazu autora opinii.
• Nazwa referencyjna: pole tekstowe na nazwisko autora referencji.
• Informacje referencyjne: pole tekstowe do dodawania dodatkowych informacji o autorze referencji, np. O firmie lub organizacji.

Pliki szablonów

• /templates/node/node--testimonials.tpl.php
• /templates/views/views-view--testimonials.tpl.php
• /templates/views/views-view-unformatted--testimonials.tpl.php

Kod eksportu /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików do pobrania ThemeForest) może zostać użyty do utworzenia Widoku referencji, który używa wyświetlacza Blok. Ten blok można następnie dodać do wybranego regionu.

FAQ

Pola:

• Aktywny: Jest to prosty typ pola logicznego używany do określania, czy element FAQ jest otwarty czy „aktywny” domyślnie.

Pliki szablonów

• /templates/node/node--faq.tpl.php
• /templates/views/views-view--faq.tpl.php
• /templates/views/views-view-unformatted--faq.tpl.php

Kod eksportu /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików do pobrania ThemeForest) może zostać użyty do utworzenia widoku FAQ, który używa wyświetlania bloku. Ten blok można następnie dodać do wybranego regionu.

Paralaksa

Pola:

• Obraz tła: standardowe pole obrazu do przesłania tła obrazu dla zawartości Paralaksy.
• Ikona Parallax: Dodaj klasę czcionek Font Awesome do użycia w bloku. Zajęcia można znaleźć tutaj.
• Big Caption: Użyj tego pola, aby dodać podpis do dużego rozmiaru do treści.
• Mały napis: użyj tego pola, aby dodać podpis do małego rozmiaru.
• Kolor tekstu: wybierz kolor tekstu czarny lub biały.
• Kategoria paralaksy: pole odniesienia terminu, aby dodać skojarzenie terminu taksonomicznego z treścią Paralaksy ..

Pliki szablonów

• /templates/node/node--parallax.tpl.php
• /templates/views/views-view--parallax.tpl.php
• /templates/views/views-view-unformatted--parallax.tpl.php

Kod eksportu /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików do pobrania ThemeForest) może być użyty do utworzenia widoku Parallax, który używa wyświetlaczy Blok. Te bloki można następnie dodać do wybranego regionu.

Posty na blogu)

Demo Porto używa widoku, aby wyświetlić węzły typu treści artykułu. Jeśli nie masz jeszcze tego widoku przy użyciu jednej z naszych różnych metod instalacji, możesz użyć kodu znalezionego w /assets/views_exports/portfolio-filters.txt (w katalogu głównym plików pobierania ThemeForest), aby zaimportować widok i wszystkie jego ustawienia . Aby zmienić styl obrazu na stronie Widok, możesz użyć opcji Obraz widoku blogu w ustawieniach motywu (/ admin / wygląd / ustawienia / Porto).

Autor bio

Aby wyświetlić mały biuletyn autora na stronie węzła artykułu, zainstaluj Moduł Profil2 i wykonaj następujące kroki, aby go skonfigurować:

1. Odwiedź / admin / structure / profiles i utwórz nowy typ profilu o nazwie „main”. Jeśli to już istnieje, przejdź do następnego kroku.
2. Dodaj pole do tego profilu o nazwie „Bio”. Jeśli to istnieje, przejdź do następnego kroku.
3. Odwiedź / admin / people i edytuj użytkownika. Następnie kliknij kartę „Profil główny” w prawym górnym rogu obok linku „Konto”, aby dodać biografię autora.

Regiony blokowe

Porto oferuje 16 blokowych regionów, w których można dodawać własne niestandardowe treści. Odwiedź stronę twojadomena.com/admin/structure/block, aby dodać własną zawartość do zdefiniowanych regionów bloku. Naciśnij „Dodaj blok”, aby utworzyć nowy niestandardowy blog lub wybierz istniejący blok z listy Wyłączone poniżej zdefiniowanych regionów bloku.

Regiony blokowe nagłówków

W Porto znajdują się cztery obszary nagłówka: marki nagłówka, nagłówka, menu nagłówka i ikony nagłówka. Możesz użyć linku „demonstruj regiony bloków” na / admin / structure / block, aby zobaczyć, gdzie dokładnie się one znajdują, ale nazwy są dość oczywiste. Jeśli chcesz naśladować region ikony społeczności widoczny obok menu demo, możesz użyć następującego znacznika w bloku:

<div class = "social-icons"> <ul class = "social-icons"> <li class = "facebook"> <a href = "http://www.facebook.com/" target = "_ blank" title = "Facebook"> Facebook </a> </li> <li class = "twitter"> <a href="http://www.twitter.com/" target="_blank" title="Twitter"> Twitter </a> </li> <li class = "linkedin"> <a href="http://www.linkedin.com/" target="_blank" title="Linkedin"> Linkedin </a> </ li> </ul> </div>

Regiony blokujące treść

Porto ma łącznie 5 regionów bloków treści: Przed treścią, Treścią, Paskiem bocznym W lewo, Paskiem bocznym W prawo i Po treści. Podobnie jak opisane powyżej obszary nagłówka, regiony te są dość oczywiste. Należy zwrócić uwagę na to, że obszary zawartości przed i po są nazywane poza głównym opakowaniem treści, dzięki czemu można używać zawartości o pełnej szerokości (np. Suwaka obrazu) lub używać własnych niestandardowych opakowań. Te regiony mają robić wszystko, co ci się podoba, i nie są ograniczone żadnym dodatkowym znacznikiem.

Porto obsługuje również Flexslider, a do wyświetlania pokazu slajdów w swoich artykułach wystarczy przesłać więcej niż jedno zdjęcie do ustawienia pola Obraz podczas edycji węzła artykułu.

Footer Block Regions

Na koniec dostępnych jest 6 regionów bloku stopki, cztery pojedyncze cztery regiony kolumn i dwa dodatkowe sześć regionów kolumn poniżej.

Dodatki

Zakładka Ostatnie / Popularne posty bloków

Włączyliśmy obsługę bloku z najnowszymi / popularnymi postami obsługiwanymi przez widoki. Jeśli nie pracujesz nad pełną instalacją i nie korzystasz z niestandardowego modułu treści do tworzenia wszystkich typów zawartości pól, pól i widoków, możesz zaimportować /assets/views_exports/tabbed-recent-posts.txt i / assets / views_exports /tabbed-popular-posts.txt widoki (w tej kolejności), które utworzą niezbędne widoki. Od tego miejsca dodaj blok „Popularne posty z kartami” do wybranego regionu (nie ostatniego bloku postów, który jest używany w popularnym bloku widoków postów). Możesz również dodać opcjonalne pole „miniatura” do typu zawartości artykułu, aby przesłać mały obraz miniaturki, który jest używany w bloku.

Przykłady kodu

Do katalogu / assets / examples dołączono kilka przykładów kodu w katalogu głównym folderu pobranego z ThemeForest, z kilkoma znacznikami na kilku szablonach strony demonstracyjnej.

Kanał Flickr

Następujący znacznik może zostać użyty do wygenerowania kanału Flickr w dowolnym miejscu w witrynie:

<script> jQuery (document) .ready (funkcja ($) {$ ('ul.flickr-feed'). jflickrfeed ({limit: 6, qstrings: {id: '93691989 @ N03'}, itemTemplate: '<li > <a rel="flickr[pp_gal]" href="{{image_b}}"> <span class = "thumbnail"> <img alt = "{{title}}" src = "{{image_s}}" / > </span> </a> </li> '});}); </script>

Widget na Twitterze

Zanim będziesz mógł korzystać z widżetu Twitter, musisz skonfigurować opcje Twittera w ustawieniach motywu (/ admin / appearance / settings / porto). Aby uzyskać niezbędne klucze uwierzytelniające, musisz je odwiedzić https://dev.twitter.com/apps i zaloguj się na swoje konto na Twitterze. Tam możesz utworzyć aplikację i wygenerować klucze OAuth potrzebne do wprowadzenia do ustawień motywu. Po wprowadzeniu tych znaków możesz użyć następującego znacznika w bloku (upewnij się, że ustawiłeś filtr tekstu na kod PHP):

<h6 class = "whitetext bold meta"> PortoON TWITTER </h6> <div class = 'tweet query midtoppadding "> </div> <typ skryptu =" text / javascript "> jQuery (document) .ready (funkcja ($ ) {$ (". tweet"). tweet ({modpath: '<? php global $ rodzic_root; echo $ parent_root;?> / includes / twitter /', nazwa użytkownika: "envato", rozmiar_atwaru: 34, liczba: 3, loading_text: "ładowanie tweetów ..."});}); </script>

Lightbox

Oto przykład tego, jak możesz stworzyć bardzo prosty lightbox w treści twojego węzła:

<a class="thumbnail lightbox pull-left" href="path/to/img.jpg" data-plugin-options='{"type":"image"}'> <img src = "ścieżka / do / img .jpg "> <span class =" zoom "> <i class =" icon-16 icon-shadow-icon-search "> </i> </span> </a>

Ikony społecznościowe

Możesz łatwo wyświetlać ikony społeczności z efektem przewijania z następującym znacznikiem:

<div class = "social-icons"> <ul class = "social-icons"> <li class = "facebook"> <a href = "http://www.facebook.com/" target = "_ blank" title = "Facebook"> Facebook </a> </li> <li class = "twitter"> <a href="http://www.twitter.com/" target="_blank" title="Twitter"> Twitter </a> </li> <li class = "linkedin"> <a href="http://www.linkedin.com/" target="_blank" title="Linkedin"> Linkedin </a> </ li> </ul> </div>

Oto lista następujących obsługiwanych ikon:

• digg
• dryblować
• Facebook
• flickr
• pierwszy
• Google Plus
• html5
• icloud
• Ostatnia stacja FM
• linkedin
• moja przestrzeń
• paypal
• picasa
• pinterest
• reddit
• rss
• skype
• stumbleupon
• tumblr
• świergot
• vimeo
• wordpress
• wieśniak
• youtube
• github
• behance
• skowyt
• Poczta
• instagram
• foursqaure
• zeruje

Przełącznik

Jeśli chcesz ręcznie utworzyć sekcję przełączania, taką jak strona FAQ, możesz użyć następującego znacznika:

<div class = "toogle"> <section class = "toggle active"> <label> Curabitur eget leo at velit imperdiet vague iaculis vitaes? </label> <div class = "toggle-content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc. &lt;/p> </div> </section> <section class = "toggle"> <label> Curabitur eget leo at imperdiet vaguees iaculis vitaes? </label> <div class = "toggle-content "> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eget leo at velit imperdiet varius. In eu ipsum vitae velit congue iaculis vitae at risus. Nullam tortor nunc, bibendum vitae semper a, volutpat eget massa. </p> </div> </section> </div>

Animacje CSS3

Wersja 1.1.2 motywu wprowadziła obsługę animacji CSS3, które można zobaczyć tutaj na naszej stronie demo> . Odwołaj się do pliku /examples/animations.php, aby znaleźć przykłady kodu dla każdej z animacji.

Dziękuję Ci

Dziękujemy bardzo za zakup motywu Porto Responsive Drupal 7. Jeszcze raz, jeśli masz jakieś problemy lub opinie, połącz się za pośrednictwem Strona autora ThemeForest . Ciesz się korzystaniem z Porto!

& copy 2014 Refaktor.