Wprowadzenie

Theme Customizer jest wbudowanym w Framework EF4 narzędziem, które pozwala na zmianę stylów LESS powiązanych z wygladem szablonu bez potrzeby edycji plików szablonu.
Wszystkie zmiany możesz podejrzeć na stronie używając łatwego w użyciu panelu. Możesz również zapisać zmiany bezpośrednio w parametrach szablonu.

Narzędzie to pozwala zmienić wygląd szablonu szybko i łatwo.

Konfiguracja

Włączenie panelu

Najpier włącz panel Theme Customizer.
Znajdziesz go w zapleczu szablonu:

Extensions -> Template Manager -> [template_name]

Wejdź w zakładkę Advanced Features. Zobaczysz w niej parametry Theme Customizer:

Dostosowanie i podgląd zmian

Theme Customizer na froncie strony:

Zapisywanie ustawień

Po zalogowaniu do Theme Customizer zobaczysz dodatkowe przyciski zapisywania ustawień:

1. Save.

Po kliknięciu tego przycisku ustawienia zostaną zapisane w bieżącym szablonie (domyślne style zostaną nadpisane)

2. Save as file.

Po kliknięciu przycisku "Save as file", ustawienia Theme Customizer'a zostaną zapisane w pliku konfiguracyjnym a ustawienia bieżącego szablonu pozostaną niezmienione. W razie potrzeby możesz załadować ustawienia z pliku konfiguracyjnego, nadpiszą one domyśle style szablonu. Można to zrobić w zakładce "Settings Storage" w parametrach szablonu:

Dodanie nowego parametru

W naszym przykładzie dodamy parametr zmiany tła koloru stopki. Aby wyświetlić parametr w narzędziu Theme Customizer, musi on istnieć w parametrach szablonu.

Dodanie nowego parametru to parametrów szablonu

Zacznijmy od stworzenia nowego pramateru w szablonie.

Krok 1: Dodanie styl do pliku LESS

Najpierw musimy dodać styl który będzie odpowiadał za kolor tła stopki:

#jm-footer {
background: @JMfooterBackground;
}

@JMfooterBackground – to zmienna LESS zawierająca informację o wybranym kolorze.

Styl powinien byc zapisany w pliku layout.less ponieważ ten plik zawiera wszystkie style związane z układem szablonu.

Uwaga: Nazwa zmiennej LESS musi zaczynać się od liter JM.

Krok 2: Zdefiniowanie parametru

Włącz edycję pliku templateDetails.xml znajdującego się w katalogu:

/templates/[template_name]/

Wszystkie parametry wyświetlane w zakładce Color Modifications znajdują się w poniższej grupie:

<fields name="params">

    <fieldset name="jmcolormodifications" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_COLOR_MODIFICATIONS">

    <!-- PARAMETERS -->

    </fieldset>

</fields>

Po pierwsze, zdefiniuj nową sekcję dla naszego parametru:

<field name="spacer_name" type="spacer" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER"/>

Następnie zdefiniuj sam parametr:

<field name="JMfooterBackground" default="" type="jmiriscolor" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR" 

description="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC" />

Nazwa pola musi być taka sama jak nazwa zmiennej LESS. W naszym przykładzie to: JMfooterBackground.

Krok 3: Przechowanie nowego parametru

Włącz edycję pliku jm_template.phpznajdującego się w katalogu:

/templates/[template_name]/lib/

Dodaj poniższy kode:

$footerbackground = $this->params->get('JMfooterBackground', '#333333'); 

$bootstrap_vars['JMfooterBackground'] = $footerbackground;

$footerbackground - nazwa zmiennej PHP
JMfooterBackground - nazwa zmiennej LESS
#333333 - domyslna wartość zmiennej LESS

Przykład:

class JMTemplate extends JMFTemplate {

    public function postSetUp() {

        

        /*  put your code below other code within this class */

    

        $footerbackground = $this->params->get('JMfooterBackground', '#333333'); 

        $bootstrap_vars['JMfooterBackground'] = $footerbackground;

        

        /* make sure the following code is always the last one in this class */

        

        $this->params->set('jm_bootstrap_variables', $bootstrap_vars);

    

    }

}

Krok 4: Zdfiniowanie stałych językowych

Włącz edycję pliku en-GB.tpl_[template_name].ini znajdującego się w katalogu:

/templates/[template_name]/language/en-GB/

Zdefiniuj stałe językowe używane w naszym przykładzie:

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER="Footer"

PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR="Background"

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC="Choose the footer background color instead of the white color."

Teraz nowy parametr będzie widoczny w zakładce Color Modifications:

Dadanie nowego parametru do Theme Customizer

Jesteśmy teraz gotowi do dodania nowego parametru w Theme Customizer.

Krok 1: Zdefiniowanie nowego parametru

Włącz edycję pliku templateDetails.xml znajdującego się w katalogu:

/templates/[template_name]/

Wszystkie parametry wyświetlane w Theme Customizer znajdują się w grupie:

<fields name="themecustomiser">

    <fieldset name="th-basic-settings" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FIELDSET_COLOR_MODIFICATIONS">

        <!-- COLOR PARAMETERS -->

    </fieldset>

    <fieldset name="th-font-settings" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FONT_SETTINGS_LABEL">

        <!-- FONT PARAMETERS -->

    </fieldset>

</fields>

Najpierw zdefiniuj sekcję dla nowego parametru:

<field type="jmacchelper" hidden="true" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER" name="Footer" />

Następnie zdefiniuj parametr:

<field name="JMfooterBackground" default="" type="jmiriscolor" label="PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR" />

Nazwa pola musi być taka sama jak nazwa zmiennej LESS, w naszym przykładzie to: JMfooterBackground.

Krok 2: Zdefinuj stałe językowe

Włącz edycję pliku en-GB.tpl_[template_name].ini znajdującego się w katalogu:

/templates/[template_name]/language/en-GB/

Zdefiniuj stałe językowe używane w naszym przykładzie:

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER="Footer"

PLG_SYSTEM_JMFRAMEWORK_CONFIG_BG_COLOR="Background"

PLG_SYSTEM_JMFRAMEWORK_CONFIG_FOOTER_BG_DESC="Choose the footer background color instead of the white color."

Uwaga: W naszym przykładzie stałe językowe są takie same dla parametrów szablonu i parametrów Theme Customizer, ale w razie potrzeby możesz zdefiniować różne.

Teraz nowy parametr jest widoczny w Theme Customizer:

Wprowadzenie

Layout Builder to narzędzie będące częścią EF4 Framework które umożliwia dostosowanie układu szablonu przy pomocy łatwego w obsłudze interfejsu.

Układ szablonu składa się z wielu bloków. Każdy blok może zawierać jedną lub więcej pozycji modułów. Layout Builder pozwala na:

• zmianę kolejności bloków
• zmianę kolejności kolumn głównych
• wybranie liczby modułów w flexiblock
• przypisanie pozycje modułów
• ukrycie bloku lub pojedyńczego modułu w zależności od wielkości ekranu
• zmianą szerokości modułów w flexiblock w zależności od wielkości ekranu
• zapisanie ustawień i przypisanie ich do wybranych pozycji menu

Konfiguracja

Layout Builder znajduje się w zapleczu szablonu:

Extensions -> Template Manager -> [template_name]

Kliknij w zakładkę Layout Builder:

Możliwa jest edycja dwóch elementów: struktury układu oraz układu responsywnego.

Dostosowanie struktury układu

Zmiana kolejności bloków:

Zmiana kolejności głównych kolumn:

Wybór liczby modułów w flexiblock:

Przypisanie pozycji modułów:

Dostosowanie układu responsywnego

Na górze możesz wybrać układ który chcesz edytować.

Dostępne układy:

• Duży ekran - 1200px i powyżej, zwykle komputery
• Normalny ekran - 980px-1199px, zwykle tablety trzymane poziomo i komputery
• Średni ekran - 768px-979px, zwykle tablety
• Mały ekran - 481px-767px, zwykle tablety trzymane pionowo i smartphony trzymane poziomo
• Bardzo mały ekran - 480x i poniżej, smartphony

Ukrycie bloku lub pojedynczego modułu w zależności od rozmiaru obrazu:

Zmiana szerokości modułu w flexiblock zależnie do rozmiaru ekranu:

Dodanie nowego układu

Możesz utworzyć tyle układów ile potrzebujesz. Ta funkcja może być przydatna, jeśli chcesz przypisać różne style układu do wybranych stron w Twojej witrynie.

Masz dwa sposoby na dodanie nowego układu: skopiuj układ w Layout Builder lub dodaj plik.

Kopiowanie układu w Layout Builder

Przejdź do zakładki Layout Builder w parametrach szablonu. Kliknij "Copy layout" i wykonaj wyświetlane instrukcje:

Krok 1:

Krok 2:

Nowy układ będzie dostępny na liście oraz pojawi się jako plik w katalogu:

/templates/[template_name]/tpl/

Ręczne dodanie pliku

Przejdź do następującego katalogu na swoim serwerze:

/templates/[template_name]/tpl/

Skopiuj plik default.php i zapisz jako kolejny plik w tym samym katalogu.

Struktura bloków

Każdy układ zawiera bloki i moduły. Korzystając z narzędzia Layout Builder, możesz zmienić kolejność bloków, przypisać pozycje modułów i wiele więcej. Jednakże, jeśli chcesz dodać nowy blok lub edytować strukturę bloku, to musisz edytować plik układu.

Po utworzeniu nowego plik układu, możesz go edytować.

Bloki definiuje następujący kod:

// define default blocks and their default order (can be changed in layout builder)
$blocks = $this->getBlocks('top-bar,topmenu,system-message,header,top1,top2,main,bottom1,bottom2,footer-mod,footer');

Jeśli chcesz dodać nowy blok do układu, można to zrobić w następujący sposób:

$blocks = $this->getBlocks('top-bar,topmenu,system-message,header,top1,top2,main,bottom1,bottom2,footer-mod,footer,block-name'); //block-name added

Nazwa bloku stosowana w powyższym kodzie powinna być taka sama jak nazwa pliku bloku.
Więcej informacji na temat tworzenia nowego bloku dowiesz się w następnym rozdziale.

Dodanie nowego bloku

Jeżeli już dodałeś nowy blok do układu, musisz stworzyć plik bloku.
Wszystkie bloki są zlokalizowane w poniższym folderze:

/templates/[template_name]/tpl/blocks/

Nazwa bloku i pliku muszą być takie same.

Dodanie nowej pozycji modułu

Pozycję modułu można umieścić w bloku na dwa sposoby: jako pojedyńczy moduł lub flexiblock.

Pojedyńczy moduł

Kod wstawiający pozycję pojedyńczego modułu wygląda następująco:

<jdoc:include type="modules" name="<?php echo $this->getPosition('position_name') ?>" style="jmmodule" />

Przykład:

<?php if($this->checkModules('header')) : ?>

<section id="jm-header" class="<?php echo $this->getClass('block#header') ?>">

    <div class="container-fluid">

        <jdoc:include type="modules" name="<?php echo $this->getPosition('header') ?>" style="jmmodule" />

    </div>

</section>

<?php endif; ?>

Flexiblock

Używając flexiblock możesz wyświetlić do 6 modułów w rzędzie. Flexiblock ma dodatkowe ustawienia w Layout Builder:

Edytycja struktury układu:

Edycja układu responsywnego:

Kod wstawiający flexiblock wygląda następująco:

<?php echo $this->renderFlexiblock('position_name','jmmodule'); ?>

Przykład:

<?php if($this->countFlexiblock('top1')) : ?>

<section id="jm-top1" class="<?php echo $this->getClass('block#top1') ?>">

    <div class="container-fluid">

        <?php echo $this->renderFlexiblock('top1','jmmodule'); ?>

    </div>

</section>

<?php endif; ?>

Zdefiniowanie pozycji modułu

Po stworzeniu pozycji modułu, należy zdefiniować ją w poniższym pliku:

/templates/[template_name]/templateDetails.xml

Można to wykonać w następujący sposób:

<positions>

        <position>top-bar1</position>

        <position>top-bar2</position>

        <position>top-menu-nav</position>

        <position>header</position>

        <position>position_name</position> <!-- your new module position -->

</positions>

Wgranie arkusza stylów

Dla każdego układu można załadować konkretny arkusz stylów. Ta funkcja może być przydatna, gdy masz kilka różnych stylów dla układu i nie chcesz, aby były stosowane we wszystkich układach.
Może to mieć pozytywny wpływ na szybkość ładowania strony

Krok 1: Utwórz plik LESS

Po pierwsze, trzeba utworzyć plik LESS. Plik powinien znajdować się w katalogu:

/templates/[template_name]/less/

Krok 2: Wgraj utworzony plik

Następnie wyedytuj plik znajdujący się w katalogu:

/templates/[template_name]/tpl

W sekcji <head> dodaj poniższy kod:

<?php if (defined('JMF_TPL_URL') && defined('JMF_TH_TEMPLATE')) {    
  $this->addCompiledStyleSheet(JPath::clean(JMF_TPL_URL.'less/new-layout.less'), true, JMF_TH_TEMPLATE); 
} ?>

Przykład:

<head>

  <?php $this->renderBlock('head'); ?>

    <?php if (defined('JMF_TPL_URL') && defined('JMF_TH_TEMPLATE')) {  
  
      $this->addCompiledStyleSheet(JPath::clean(JMF_TPL_URL.'less/new-layout.less'), true, JMF_TH_TEMPLATE); 
    } ?>
</head>

Krok 3: Dodaj style

Teraz możesz dodać LESS lub style CSS do utworzonego pliku.
Jeżeli chcesz wykorzystać zmienne LESS lub funkcje mixins pamiętaj o ich zaimportowaniu:

/* ====================

   VARIABLES import

   ==================== */

   

@import "template_variables.less";

@import "bootstrap_variables.less";

  

/* ====================

   MIXINS import

   ==================== */

  

@import "override/ltr/mixins.less";

@import "../../../plugins/system/jmframework/includes/assets/template/bootstrap/less-ext/mixins-ext.less"; //JM extended mixins

@import "template_mixins.less";

Basic Settings

Logo and favicon

Logo – wybierz obrazek który chcesz wstawić jako logo strony. Pozostaw puste lub kliknij krzyżyk, jeśli nie chcesz wyświetlać logo lub chcesz wyświetlić tylko logo tekstowe.

Logo text - wpisz tekst logo który będzie wyświetlony zamiast obrazka. Logo tekst będzie wyświetlany tylko wtedy, gdy nie wybrano żadnego obrazu wyświetlanego jako logo.

Site description – wprowadź opis strony. Zazwyczaj ten tekst wyświetlany jest obok logo.

Favicon image - wybierz obrazek do przesłania jako favicon na swojej stronie. Jest to obrazek wyświetlany zwykle w pasku adresu przeglądarki, na karcie przeglądarki lub na liście zakładek. Zalecana wielkość Favicon do 16x16 pikseli.

Site tools

Font size switcher – włącz lub wyłącz skrypt pozwalający użytkownikowi na zmianę rozmiaru czcionki. Przełącznik wielkość czcionki jest zwykle wyświetlany powyżej obszaru komponentu w szablonie. Narzędzie to pozwala na powiększenie lub zmniejszenie rozmiaru czcionki w obszarze komponentu.

Back to top button – włącz lub wyłącz przycisk "do góry". Przycisk zwykle wyświetlany jest w dolnym rogu lub w obszarze stopki szablonu. Pozwala na płynne powrót na górę strony.

Off-canvas sidebar

Off-canvas sidebar - wybierz, czy chcesz wyświetlić dodatkowy pasek boczny. Off-canvas to pasek boczny z dodatkową pozycją modułu, który można wyświetlić, klikając na przycisk.

Off-canvas width - wprowadź szerokość paska bocznego poza płótnem w pikselach.

Off-canvas position - wybierz, czy wyświetlać pasek boczny po lewej czy po prawej stronie szablonu.

Coming soon page

Coming soon - wybierz, czy chcesz wyświetlić stronę z informacją kiedy witryna zostanie uruchomiona. Wyświetla zegar odliczający czas pozostały do uruchomienia strony.

Coming soon date - wybierz datę

Error page

Error page - wybierz artykuł który zostanie wyświetlony w przypadku wystąpienia błędu 404.

Other settings

Responsive layout – włącz lub wyłącz responsywny układ na tablety i urządzenia mobilne.
Po wyłączeniu Twoja witryna będzie miała taką samą szerokość dla wszystkich urządzeń: komputerów stacjonarnych, tabletów i telefonów.

Disable component – wybierz strony, na których chcesz aby część komponentu została ukryta. Ta opcja może być dla Ciebie przydatna, jeśli zdecydujesz się na publikowanie modułu na tylko jednej stronie.

Layout Builder

INFO Informacje na temat narzędzia Layout Builder znajdziesz w osobnym artykule

Font Settings

W zakładce ustawień czcionek, możesz zmienić rozmiar i krój czcionki, tekstu i nagłówków:

Base font – ustawienia dotyczące całej templatki. Podstawowa czcionka używana jest zazwyczaj do artykułów oraz modułów.

Horizontal menu – ustawienia dotyczace menu poziomego. Zazwyczaj jest ono używane na samej górze templatki. W naszych szablonach używamy następujących modułów menu: DJ-MegaMenu oraz DJ-Menu.

Module headings – ustawienia dotyczące nagłówków modułów.

Blog article headings – ustawienia dotyczące bloga

Single article headings – ustawienia dotyczące nagłówków artykułów.

Other settings:

Generate Web Font upload - tutaj możesz przesłać czcionkę internetową. Dowiedz się więcej w opisie typów czcionek poniżej.

Font Awesome support - włącz tę opcję, jeśli chcesz załadować Font Awesome.

Local Google Fonts - włącz tę opcję, aby ładować czcionki Google lokalnie z własnego serwera zamiast z serwera Google.

Font styles for specific selectors – ustawienia związane z określonymi selektorami.
W polu możesz wprowadzić id lub klasę dla dowolnego elementu, aby zmodyfikować jego ustawienia czcionek. Pamiętaj, aby użyć przecinka, jeśli chcesz oddzielić selektory. Na przykład: h1, #jm-top

Do wyboru są 3 typy czcionek:

1. Font from the list

Możesz wybierać spośród następujących czcionek systemowych:

• Arial - Arial, Helvetica, sans-serif
• Arial Bold - 'Arial Black', 'Arial Bold', Gadget, sans-serif
• Arial Narrow - 'Arial Narrow', Arial, sans-serif
• Tahoma - Tahoma, Geneva, Verdana, sans-serif
• Verdana - Verdana, Geneva, Tahoma, sans-serif
• Times New Roman - 'Times New Roman', Times, serif
• Georgia - Georgia, 'Times New Roman', Times, serif
• Courier New - 'Courier New', Courier, 'Andale Mono', monospace
• Trebuchet MS - 'Trebuchet MS', 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', sans-serif
• Lucida Sans - 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', 'Trebuchet MS', sans-serif
• Impact - Impact, Haettenschweiler, 'Arial Narrow Bold', Charcoal, sans-serif
• Palatino - Palatino, 'Palatino Linotype', 'URW Palladio L', Georgia, 'Times New Roman', Times, serif
• Century Gothic - 'Century Gothic', 'Apple Gotic', 'URW Gothic L', sans-serif

2. Google web font

Wszystkie czcionki Google, które możesz przeglądać tutaj: http://www.google.com/fonts

3. Generated web font

Przesyłanie wygenerowanej czcionki internetowej:

Aby przesłać nową czcionkę na serwer:

Krok 1: Kliknij Przeglądaj, aby wybrać pliki czcionek z dysku.

Krok 2: Kliknij przycisk Prześlij, aby przesłać pliki czcionek na serwer.

INFOPrześlij co najmniej 3 formaty czcionek i upewnij się, że pliki czcionek mają dokładnie taką samą nazwę.
Akceptowane rozszerzenia plików czcionek: * .ttf, * .eot, * .woff, * .svg. Przykład: arial.ttf, arial.eot, arial.woff, arial.svg.

Color Modifications

W zakładce Color Modifications, możesz zmienić kolory używane w templatce, np. kolor tła, kolory ramek, kolory czcionek itd. To których elementów kolory będzie można zmieniać zależy od projektu templatki.

Jak zmienić kolor?

Krok 1: Wybierz kolor z palety albo wprowadź heksadecymalne (np.: #EFD9F4) oznaczenie koloru.

Krok 2: Zapisz ustawienia

INFOJak dodać nowe parametry do zakładki Modyfikacji Kolorów?

NOTE Żeby zobaczyć zmiany na stronie włączony musi być Developer Mode. Można go włączyć w zakładce Advanced Features. Jeśli chcesz przywrócić domyślne kolory, usuń wartości ze wszystkich pól i kliknij "zapisz".

Advanced Features

Theme Customizer

Theme Customizer – włącz lub wyłącz narzędzie Theme Customizer na froncie strony.

Theme Customizer login – włącz lub wyłącz logowanie do Theme Customizer. Po zalogowaniu do Theme Customizer zobaczysz dodatkowe przyciski zapisania ustawień.

Administrator restriction – po włączeniu tylko użytkownicy zalogowani i posiadający uprawnienia administratora lub menedżera będą mogli używać Theme Customizer

INFOWięcej informacji na temat narzędzia Theme Customizer znajdziesz w osobnym artykule. Zobacz

Developer tools

Source Map (LESS) – wybierz czy generować mapę źródłową dla każdego pliku LESS. W ten sposób będziesz mógł sprawdzić kod za pomocą narzędzi deweloperskich, oraz znaleźć lokalizację pliku i numer wiersza styli.

Code injection - Kod wstawiony tutaj będzie dodany do sekcjistrony. Tutaj możesz wkleić skrypt Google Analytics, zakładkę Google Webmaster, lub dowolony kod, który ma się znaleźć w sekcjistrony.

Optimization

Compress CSS/Compress JS – włącz lub wyłącz kompresję CSS/JS. Kompresja css i js zwiększy szybkość ładowania strony.
Jak działaja kompresja?
- pliki danego typu (css, js) są łączone.
- komentarze, tabulatory, spacje, nowe linie oraz inne niepotrzebne znaki, są usuwane
- czas odpowiedzi jest zredukowany

Compress HTML - włącz lub wyłącz kompresję HTML.

Exclude files from compression - dodaj pliki CSS albo JS (nazwę pliku lub całą ścieżkę), aby je pominąć podczas kompresji. Każdy plik powinien być dodany w nowej linii.

Purge cached files - użyj tego przycisku, aby usunąć scalone pliki JS i CSS z folderu pamięci podręcznej szablonu.

Defer scripts loading - włącz lub wyłącz optymalizacje ładowania skryptów JavaScript.
Ta opcja może poprawić szybkość ładowania strony, ale jej włączenie może również powodować błędy. Możesz wykluczyć poszczególne skrypty, które powodują błędy, umieszczając je w polu "Excluded scripts". Biblioteki jQuery i Mootools są domyślnie wyłączone z tego ładowania.

Excluded scripts - lista skryptów domyślnie wykluczonych z optymalizacji ładowania.

Exclude scripts from deferring - dodaj skrypty (nazwa pliku lub część ścieżki), aby wykluczyć je z optymalizacji ładowania.

Lazy loading - włącz opóźnione ładowanie obrazów i iframe na swojej stronie. Ta funkcja może skrócić czas ładowania strony i zaoszczędzić wiele transferu danych.

Exclude from lazy loading - musisz pamiętać, że lazy loading może powodować konflikty z rozszerzeniami innych firm lub innymi skryptami ładującymi, możesz wykluczyć określone obrazy i elementy iframe. Możesz użyć części ścieżki obrazu, adresu URL elementu iframe, klasy CSS lub dowolnego atrybutu IMG, aby wykluczyć obrazydany element. Umieść każdą pozycje w nowej linii.

Minimum width - Obrazy o mniejszej szerokości niż ustawiona zostaną wyłączone z lazy loading.

Minimum height - Obrazy o mniejszej wysokości niż ustawiona zostaną wyłączone z lazy loading.

Instant Page - włącz wstępne ładowanie danych, zanim użytkownik kliknie dowolny link na Twojej stronie.

Debug optimization - włącz tę opcję, aby wyświetlić informacje o tym, jak proces optymalizacji manipuluje skryptami i stylami. Tę opcję należy wyłączyć na gotowej, działającej stronie.

Open Graph

Facebook Open Graph - włącz protokół Facebook Open Graph. Opcja dodaje tagi META, które pomagają lepiej opisać zawartość twojej strony. Funkcja dotyczy artykułów Joomla.

Facebook APP ID - opcjonaly parametr. Unikalny identyfikator, który pozwala Facebookowi poznać tożsamość Twojej witryny. Ma to kluczowe znaczenie dla prawidłowego działania Facebook Insights. Zobacz dokumentację Facebooka tutaj.

Settings Storage

Stored settings - lista zapisanych wcześniej plików z ustawieniami. Wybierz plik i kliknij przycisk Load, aby załadować ustawienia, lub pobierz plik z ustawieniami klikając na Download Settings.

Upload settings - wybierz plik z zapisanymi ustawieniami i wgraj go. Plik pojawi się na liście "Stored settings".

NOTE Przeglądarka IE nie obsługuje wgrywania.

Save settings - zapisz ustawienia szablonu w pliku. Plik pojawi się na liście "Stored settings".

NOTE żeby ściągnąć plik z ustawieniami musisz najpierw zapisać ustawienia.

Storage location – folder w którym przechowywane są pliki z ustawieniami.

Updates

Na karcie Aktualizacje możesz sprawdzić zainstalowany szablon i wersję EF4 Framework.

Jak zaktualizować?

Automatycznie:

Gdy pojawi się aktualizacja frameworka EF4, powinieneś zostać powiadomiony w panelu sterowania Joomla. Możesz także przejść do:

Extensions -> Updates

Jeśli nie widzisz żadnych aktualizacji na liście, kliknij "Purge", a następnie "Find Updates" na pasku narzędzi.

Aby przeprowadzić aktualizację, zaznacz EF4 Framework z listy i kliknij przycisk "Update".

Manualnie:

Możesz także ręcznie zaktualizować Framework EF4. Aby to zrobić, po prostu pobierz ramowy pakiet zip z obszaru pobierania na stronie Joomla-Monster.com i przejdź do:

Extensions -> Manage -> Install

Wybierz pobrany plik zip a następnie kliknij "Upload & Install".

Jak wyłączyć powiadomienia o aktualizacji szablonu?

Od wersji EF 4.7 pojawiło się powiadomienie o aktualizacjach szablonu Joomla-Monster.com. Jeśli używasz szablonu Joomla-Monster.com, a nowa wersja będzie dostępna, otrzymasz standardowe powiadomienie o aktualizacji w panelu sterowania Joomla.

Możesz wyłączyć to powiadomienie w parametrach wtyczki:

Extensions -> Plugins -> EF4 Joomla-Monster Framework

Wymagania techniczne

Wymagania techniczne Frameworku EF4 są takie same jak wymagania Joomla 3.x

Oprogramowanie:

• PHP 5.3.10 +

Baza danych:

• MySQL (InnoDB support required) 5.1 +
• SQL Server 10.50.1600.1+
• PostreSQL 8.3.18 +

Web Server:

• Apache 2.x +
• Nginx 1.0
• Microsoft IIS 7

Local Server:

Jeśli chcesz zainstalować Joomlę i EF4 Framework na lokalnym komputerze, użyj jednego z poniższych narzędzi:

• LAMP for Linux
• WAMP for Windows
• MAMP for Macintosh
• XAMPP for Linux, Windows and Macintosh

Więcej o wymaganiach technicznych niezbędnych do uruchomienia Joomli dowiesz się tutaj:
http://www.joomla.org/technical-requirements.html

Pobranie

Aby pobrać pliki, wykonaj poniższe kroki:

Step 1:Zarejestruj się lub zaloguj na Joomla-Monster.com

Step 2:Po zalogowaniu wejdź na:

My Account -> Downloads

Step 3:Pobierz pliki

Wybierz pliki szablonu do pobrania. W naszym przykładzie jest to darmowy szablon JM Services dla Joomla 3.x:

Instalacja ręczna

Jeżeli masz już stronę na Joomli, zamiast instalowania paczki Quickstart, która jest dokładną kopią strony demo, możesz chcieć zainstalować plugin EF4 Framework i szablon ręcznie.

Instalacja szablonu

Zaloguj się do zaplecza swojej strony poprzez: www.yoursite.com/administrator

Z paska głównego menu wybierz:

Extensions -> Extension Manager

Na tej stronie możesz zainstalować szablon, komponent, moduł, plugin lub paczkę językową.

Krok 1: W zakładce "Upload Package File" - wybierz odpowiedni dysk, wybierz paczkę z szablonem, kliknij "Upload & Install"

Krok 2: Powinieneś zobaczyć komunikat o poprawnej instalacji szablonu.

Instalacja pluginu EF4 Framework

Instalacja pluginu przebiega bardzo podobnie do instalacji szablonu. Z działu downloads na stronie Joomla-Monster.com należy pobrać plugin EF4 Framework. Paczka instalacyjna nazywa się "plg_EF4-framework.zip".

Z paska głównego menu wybierz:

Extensions -> Extension Manager

Krok 1: W zakładce "Upload Package File" - wybierz odpowiedni dysk , wybierz paczkę z pluginem, kliknij "Upload & Install"

Krok 2: Powinieneś zobaczyć komunikat o poprawnej instalacji pluginu.

Krok 3: Z paska głównego menu wybierz:

Extensions -> Plugin Manager

Na tej stronie zobaczysz listę zainstalowanych pluginów. Znajdź "EF4 Joomla-Monster framework" i upewnij się, że jest opublikowany.

Instalacja Quickstart

Quickstart jest dokładną kopią strony demo.
Zawiera Joomlę, szablon, plugin EF4 Framework, rozszerzenia oraz przykładowe treści.
Korzystając z Quickstart’u zaoszczędzisz mnóstwo czasu który musiałbyś wykorzystać na instalacje i konfigurację szablonu i rozszerzeń.

Proces instalacji paczki Quickstart poznasz oglądając samouczek video.