0
Warenkorb leer

Please feel free to report any bugs related to EF4 framework and JM Services - free template.
It will help us to improve the framework and the template which results in providing the better high-quality free stuff for you :)

Contact us here

Extremely powerful framework for Joomla! 3
Among tons of very helpful and powerful features EF4 allows you to adjust the template design and layout - the most wanted features if you would like to customize the template without touching the code!
With the theme customizer you will modify the template with ease, just need to select the parameters from the list!
Layout builder gives the possibility to adjust the template layout to desktop and mobile devices!
At the template user-friendly back-end, you will discover extended template features!
Try our free Joomla! 3 template based on the EF4 framework to explore all EF framework features and check its easy configuration.

Technische Anforderungen

Die technischen Voraussetzungen für die Ausführung von EF4 Framework entsprechen den Voraussetzungen für die Ausführung von Joomla 3.x.

Software:

  • PHP 5.3.10 +

    Datenbank:

    • MySQL (InnoDB-Unterstützung erforderlich) 5.1 +
    • SQL Server 10.50.1600.1 +
    • PostgreSQL 8.3.18 +

      Webserver:

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

        Lokaler Server:

        Wenn Sie Joomla und EF4 Framework auf einem lokalen Computer installieren möchten, können Sie eine der folgenden Webserver-Lösungen verwenden:

        • LAMP für Linux
        • WAMP für Windows
        • MAMP für Macintosh
        • XAMPP für Linux, Windows und Macintosh

          Weitere Informationen zu den technischen Voraussetzungen für Joomla finden Sie hier:
          http://www.joomla.org/technical-requirements.html

          Zusätzliche Anforderungen:

          • 128 MB oder mehr PHP-Speicherbeschränkung

            Herunterladen

            Um Dateien herunterzuladen, müssen Sie die folgenden Schritte ausführen:

            Schritt 1: Melden Sie sich bei Joomla-Monster.com an oder melden Sie sich an.

            Bei Joomla-Monster.com registrieren oder anmelden

            Schritt 2: Nach der Anmeldung müssen Sie zu folgendem Speicherort wechseln:

            Mein Konto -> Downloads

            Downloads

            Schritt 3: Dateien herunterladen

            Laden Sie das EF4 Framework-Plugin von folgendem Speicherort herunter:

            Mein Konto -> Downloads -> Frameworks

            Downloads

            Wählen Sie die Vorlagendateien zum Herunterladen aus. In unserem Beispiel handelt es sich um eine kostenlose JM Services-Vorlage für Joomla 3.x:

            Mein Konto -> Downloads -> Kostenlose Vorlagen -> JM Services für J3.x

            Downloads

            Manuelle Installation

            Wenn Sie bereits Joomla installiert haben, können Sie das EF4 Framework-Plugin und die Vorlage manuell installieren, anstatt das Quickstart-Paket zu installieren, das eine exakte Kopie der Live-Demo ist.

            Installieren der Vorlage

            Melden Sie sich wie folgt im Backend Ihrer Website an: www.yoursite.com/administrator

            Klicken Sie in der oberen Leiste auf:

            Erweiterungen -> Extension Manager

            Auf dieser Seite können Sie eine Vorlage, eine Komponente, ein Modul, ein Plugin oder ein Sprachpaket installieren.

            Schritt 1: Durchsuchen Sie auf der Registerkarte "Paketdatei hochladen" Ihre Festplatte und wählen Sie das Vorlagenpaket aus. Klicken Sie auf "Hochladen und installieren".

            Vorlage installieren

            Schritt 2: Sie sollten eine Meldung erhalten, die besagt, dass die Installation der Vorlage erfolgreich war.

            Vorlage installieren

            Installieren des EF4 Framework-Plugins

            Die Installation des Plugin-Pakets ähnelt stark der Installation des Vorlagenpakets. In Ihrem Downloadbereich auf Joomla-Monster.com müssen Sie das EF4 Joomla-Monster Framework-Plugin herunterladen. Das Paket heißt "plg_EF4-framework.zip" und wird in diesem Schritt benötigt.

            Klicken Sie in der oberen Leiste auf:

            Erweiterungen -> Extension Manager

            Schritt 1: Durchsuchen Sie auf der Registerkarte "Paketdatei hochladen" Ihre Festplatte und wählen Sie das Plug-in-Paket aus. Klicken Sie auf "Hochladen und installieren".

            Plugin installieren

            Schritt 2: Sie sollten eine Meldung erhalten, die besagt, dass die Installation des Plugins erfolgreich war.

            Plugin installieren

            Schritt 3: Klicken Sie in der oberen Leiste auf:

            Erweiterungen -> Plugin Manager

            Auf dieser Seite sehen Sie eine Liste der verfügbaren Plugins in Ihrem Joomla. Suchen Sie nach dem Plugin "EF4 Joomla-Monster Framework" und stellen Sie sicher, dass es veröffentlicht ist.

            Plugin installieren /> </ p></div></div></div><div
class=

            EF4 Framework gives a wide range of settings that will help you to configure template fast and easy. Let's take a closer look at them.

            The template parameters are located in the back-end of the template:

            Extensions -> Template Manager -> [template_name]

             

            Basic Settings

            Logo and favicon

            EF4 Basic Settings

            Logo – choose an image to upload as a logo for your site.
            Leave empty or click on the cross button if you do not want to display a logo or you want to display a logo text only.

            Logo text - enter a logo text as an alternative to a logo image.
            Logo text will be displayed only when you have not chosen an image to display as a logo.

            Site description – enter a site description.
            It is usually displayed under logo or next to it.

            Favicon image - choose an image to upload as a favicon for your site.
            It is usually displayed in the browser's address bar, on the browser's tab or in a list of bookmarks. Recommended size for a favicon is 16x16 pixels.

            Site tools

            EF4 Basic Settings

            Font size switcher – enable or disable font size switcher.
            It is usually displayed above the component area in the template. This tool allows to enlarge or reduce the font size of the component area.

            Back to top button – enable or disable "back to top" button.
            It is usually displayed in the bottom corner or in the footer area of the template. This button allows smoothing scroll to the top of the page.

            Off-canvas sidebar

            EF4 Basic Settings

            Off-canvas sidebar - choose if you want to display the off-canvas sidebar. Off-canvas is a sidebar with additional module position that can be displayed by clicking on a custom button.

            Off-canvas width - enter the off-canvas sidebar width in pixels.

            Off-canvas position - choose whether to display the off-canvas sidebar on the left or right side of your template.

             

            How to display the off-canvas sidebar on a website?

            To display the off-canvas sidebar on your website you need to follow these steps:

            Step 1: Make sure that you have enabled the off-canvas feature in the template parameters as described above.

            Step 2: Create a custom HTML module with the following code:

            <a class="toggle-nav menu"><span class="icon-align-justify"></span></a>

            Publish the module on one of the available module positions in your template. It contains a button that a user can click to show or hide the off-canvas sidebar.

            Step 3: Publish a module on the "off-canvas" module position. It is a module position inside the off-canvas sidebar.

            TIPHow to create a custom HTML module?

            Coming soon page

            EF4 Basic Settings

            Coming soon - choose if you want to display the coming soon page. It displays a countdown clock to count the time left to launch a website.

            Coming soon date - choose a date when you plan to launch a website. The countdown clock will count the time left to that date.

            Error page

            EF4 Basic Settings

            Error page - select an article that you wish to display as custom 404 error page. Otherwise, the standard error page will be used.

            Other settings

            EF4 Basic Settings

            Responsive layout – enable or disable the responsive layout for tablets and mobile.
            When disabled, your site will have the same width for all devices: desktops, tablets, and mobiles.

            Disable component – select the pages on which you want to hide the component area.
            This feature can be useful for you if you decide to publish only modules on one of your site's pages.

             

            Layout Builder

            EF4 Layout Builder

            INFOWe have a separate section dedicated to the Layout Builder. Check it

             

            Font Settings

            EF4 Font Settings

            On the Font Settings tab, you are able to change the font size and font family of the following texts and headings:

            Base font – settings related to the whole template.
            Base font is usually displayed for article and module content.

            Horizontal menu – settings related to the horizontal menu.
            It is usually published on the top of the template. In our commercial J3 templates we use DJ-MegaMenu and DJ-Menu for free ones.

            Module headings – settings related to the module headings.

            Blog article headings – settings related to the article headings on the blog page.

            Single article headings – settings related to the article headings on the single article page.

            Other settings:

            Generate Web Font upload - here you can upload a Web Font. Find out more in the font types explanation below.

            Font Awesome support - enable this option if you want to load Font Awesome into the template's head.

            Font styles for specific selectors – settings related to the specified selectors.
            In the Selectors field, you need to enter id's or classes for any template part to modify font settings. Remember to use a comma to separate selectors. For example: h1, #jm-top

            There are 3 font types available to choose:

            1. Font from the list

            EF4 Font Settings

            You can choose from the following web safe fonts:

            • 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

            EF4 Font Settings

            All Google Fonts you can browse here: http://www.google.com/fonts

            3. Generated web font

            EF4 Font Settings

            Uploading a generated web font:

            EF4 Font Settings

            To upload a new font to your server in order to use it on your site:

            Step 1: Click on Browse to select the font files from your disk.

            Step 2: Click on Upload to upload the font files on your server.

            NOTEUpload at least 3 font formats and make sure the font files are named exactly the same.
            Accepted font file extensions: *.ttf, *.eot, *.woff, *.svg. Example: arial.ttf, arial.eot, arial.woff, arial.svg.

             

            Color Modifications

            EF4 Color Modifications

            On the Color Modifications tab, you can change colors related to the template design such as backgrounds, border colors, font colors and more.
            Which elements will be available to change their colors on this tab, it depends on the template design.

            How to change a color?

            EF4 Color Modifications

            Step 1: Choose a color from the palette or enter a hex code of the desired color.

            Step 2: Save settings.

            INFOHow to add a new parameter to the Color Modifications tab?

            NOTEIf you want to restore the default color values, simply remove the values from all fields and click on Save.

             

            Advanced Features

            Theme Customizer

            EF4 Advanced Features

            Theme Customizer – enable or disable the Theme Customizer panel on the front-end.

            Theme Customizer login – enable or disable the Theme Customizer login form on the front-end.
            If you log in to the Theme Customizer panel you will see additional buttons to save your settings.

            Administrator restriction – when enabled only those users that are logged in and have administrator or manager permissions will be able to use Theme Customizer

            INFOWe have a separate section dedicated to the Theme Customizer. Check it

            Developer tools

            EF4 Advanced Features

            Source Map (LESS) – enable or disable a source map for every LESS file that has been compiled to CSS. This way you will be able to inspect the code using a web developer tools to find a file location and line number of LESS styles. Please note that a web inspector must support source maps.

            Code injection - add custom code into the head section if needed.
            Here you can paste Google Analytics script, Google Webmaster meta tag or any other custom code which needs to be pasted into the head section of the template.

            Optimization

            EF4 Advanced Features

            Compress CSS/Compress JS – enable or disable CSS/JS compressor. It will help you to optimize the load speed of your site.
            How do the compressors work?
            - files are merged into one file
            - comments, tabs, spaces, new lines and other unuseful signs are removed
            - response time is reduced

            Compress HTML - enable or disable HTML compressor. The compressor removes comments, spaces and line breaks from the HTML code output.

            Skip JS & CSS - add CSS or JS files (file name or whole path) to be skipped during the compression. Each file should be added to a new line.

            Purge cached files - use this button to delete merged JS and CSS files from the template cache folder.

            Defer scripts loading - enable or disable defer loading of all scripts.
            This option can improve your page speed loading, but turning it on may also cause javascript errors. You can exclude individual scripts which are causing bugs by listing them in the "Exclude scripts" field. jQuery and Mootools libraries are excluded from deferring loading by default.

            Excluded scripts - list of scripts that are excluded from deferring loading by default, because of script dependencies.

            Exclude scripts - add scripts (file name or part of the path) to be excluded from deferring loading. Each file should be added to a new line.

            Debug optimization - enable this option to display information on how the optimization process manipulates the scripts and styles. This option should be disabled on a live website.

            Lazy loading - enable lazy loading of images and iframes on your website. This feature can reduce your page loading time and save a lot of unnecessary data transfer.

            Exclude from lazy loading - you need to be aware that lazy loading can conflicts with 3rd party extensions or other lazy loading scripts, so you can exclude specific images and iframes on the list below from lazy loading. Use part of image path, iframe URL, CSS class or any IMG attribute to exclude the images which contain it. Put each of them on a new line.

            Minimum width - set the minimum image width for lazy loading. Images with lower width will be excluded from lazy loading.

            Minimum height - set the minimum image height for lazy loading. Images with lower height will be excluded from lazy loading.

            Open Graph

            EF4 Advanced Features

            Facebook Open Graph - enable the Facebook Open Graph protocol. It includes META tags that help your website to become a rich object for social graphs. This feature is related to Joomla content component.

            Facebook APP ID - it is optional. The unique ID that lets Facebook know the identity of your site. This is crucial for Facebook Insights to work properly. Please see Facebook's documentation to learn more.

             

            Settings Storage

            EF4 Settings Storage

            Stored settings - a list of previously saved settings files.
            Choose the file and click the Load button to load settings or download them as a file using the Download Settings button.

            Upload settings - choose a file with stored settings and upload it.
            The file will appear on the list of Stored settings option.

            NOTEIE browser does not support uploading.

            Save settings - save the template settings as a file.
            The file will appear on the list of Stored settings option.

            NOTEYou have to save the template settings first in order to save them as a file.

            Storage location – location of the stored settings files on your server.

             

            Updates

            EF4 Updates

            On the Updates tab, you can check the installed template and EF4 Framework version.

            How to update framework?

            Automatically:

            Once there is an update of the EF4 Framework available you should be notified in the control panel of your Joomla. You can also navigate to:

            Extensions -> Updates

            If you do not see any updates on the list, click "Purge" and then "Find Updates" from the top toolbar.

            EF4 Updates

            To update simply tick the EF4 Framework from the list and click on the "Update" button from the top toolbar.

            Manually:

            You can also update the EF4 Framework manually. To do that, simply download the framework zip package from your download area at Joomla-Monster.com and navigate to:

            Extensions -> Manage -> Install

            Browse the framework zip package and click on the "Upload & Install" button.

            EF4 Updates

            How to disable template update notifications?

            Since EF 4.7 version there is a notification for Joomla-Monster.com template updates. If you are using a Joomla-Monster.com template and a new version will be available then you will get a standard update notification in the control panel of your Joomla.

            You can disable this notification in the plugin parameters:

            Extensions -> Plugins -> EF4 Joomla-Monster Framework

            EF4 Updates

             

            Introduce

            Layout Builder is a tool included to EF4 Framework that allows customizing layout of your template using a user-friendly interface.

            Layout Builder Introduce

            The template layout consists of multiple blocks. Each block may contain one or more module positions. Using Layout Builder you are able to:

            • change the template width in pixels or percent
            • change the gutter size
            • change the order of blocks
            • enable or disable the full-width recalculation
            • enable or disable full width for a section
            • change the order of main columns
            • change the width of main columns basing on Bootstrap grid size
            • choose the number of modules in a flexiblock
            • assign module positions
            • exclude unused blocks
            • hide a block or a single module depending on the screen size
            • change the width of modules in a flexiblock depending on the screen size
            • save your settings and assign them to selected menu items

            Layout configuration has never been easier.

             

            Configuration

            Layout Builder is located in the back-end of your template:

            Extensions -> Template Manager -> [template_name]

            Click on the Layout Builder tab:

            Layout Builder Tab

            Current Layout - choose a layout from the dropdown that you want to edit. This area allows you to:

            • save changes in layout
            • duplicate layout
            • remove layout
            • set layout as default
            • restore layout to default settings

            Template width – enter the template width in percent or pixels.

            Gutter size – enter the gutter size in percent or pixels.
            The gutter is a space between blocks, modules and other elements on the site.

            There are 2 sections that you may customize: layout structure and responsive layout.

            Layout Builder Tabs

            Customize layout structure

            Change the order of blocks:

            TIP: Hover on the image to see the animation.

            Layout Builder Order Blocks

            Enable or disable the full-width recalculation:
            Read more about this feature

            TIP: Hover on the image to see the animation.

            Layout Builder Full Width Recalculations

            Enable or disable full width for a section:

            TIP: Hover on the image to see the animation.

            Layout Builder Full Width Section

            Change the order of main columns:

            TIP: Hover on the image to see the animation.

            Layout Builder Order Columns

            Change the width of main columns:

            TIP: Hover on the image to see the animation.

            Layout Builder Columns Width

            Choose the number of modules in a flexiblock:

            TIP: Hover on the image to see the animation.

            Layout Builder Modules in Flexiblock

            Assign module positions:

            TIP: Hover on the image to see the animation.

            Layout Builder Assign Positions

            Exclude unused blocks:

            TIP: Hover on the image to see the animation.

            Layout Builder Exclude Blocks

            Customize responsive layout

            On the top, you can choose which layout you want to customize.

            Available layouts:

            • Large Screen - 1200px and above, usually desktops
            • Normal Screen - 980px-1199px, usually landscape tablets and desktops
            • Medium Screen - 768px-979px, usually tablets
            • Small Screen - 481px-767px, usually portrait tablets and landscape mobiles
            • Extra Small Screen - 480x and below, usually mobiles

            Layout Builder Responsive Layout

            Hide a block or a single module depending on the screen size:

            TIP: Hover on the image to see the animation.

            Layout Builder Hide Block or Position

            Change the width of modules in a flexiblock depending on the screen size:

            TIP: Hover on the image to see the animation.

            Layout Builder Resize Module

             

            What does the full-width recalculation mean?

            There are two ways of displaying modules in a flexiblock.

            Option 1: Full width recalculation enabled (default)

            In a flexiblock, if any module will be not published, then the width of the rest modules will be automatically recalculated to fit the full width.

            Let's see on examples:

            a) modules are equally divided on the responsive layout tab:

            Layout Builder Responsive Layout

            Basing on the Bootstrap grid size, each module has the span3 width:
            span3 | span3 | span3 | span3

            If one of them is missing, then each module has the span4 width:
            span4 | span4 | span4

            If two are missing, then each module has the span6 width:
            span6 | span6

            If only one module is displayed then it has the span12 width.

            b) modules are not equally divided on the responsive layout tab:

            Layout Builder Responsive Layout

            Basing on the Bootstrap grid size, let's suppose that the first module has the span6 width, all the rest modules has the span2 width:
            span6 | span2 | span2 | span2

            If we unpublish the second module, its width will be divided starting from the next module to the missing one (span1 per module):
            span6 | span3 | span3

            Option 2: Full-width recalculation disabled

            If you want to have more control to the width of modules in a flexiblock, you can disable the full-width recalculation. All modules will take exactly the same size which you have set on the responsive layout tab.

            NOTEIf one of the modules will be not published in a flexiblock then there will be an empty gap on your site.

            INFOIf you want to display a different number of modules in a flexiblock on some pages, you can simply copy the layout, change the number of modules and assign it to the menu items you need.

             

            Add a new layout

            There is a possibility to create as many layouts as you need. This feature may be useful for you if you would like to assign different layout styles to selected pages on your site.

            There are 2 different ways to add a new layout: copy layout in Layout Builder or add a file manually.

            Copy layout in Layout Builder

            Go to the Layout Builder tab in the template parameters. Simply click on "Copy layout" and follow the onscreen instructions:

            Step 1:

            Layout Builder New Layout

            Step 2:

            Layout Builder New Layout

            The new layout will be available on the list as well as it will appear as a file in the following directory:

            /templates/[template_name]/tpl/

            Add a file manually

            Go to the following directory on your server:

            /templates/[template_name]/tpl/

            Copy the default.php file and save as another file in the same directory.

            Layout Builder New Layout

             

            Assign a layout to menu items

            Once you have created a new layout, you can assign it to selected menu items. This option is very useful if you want to use different layouts for many pages. It is also very useful if you have disabled the full-width recalculation and you want to display a different number of modules in a flexiblock on some pages.

            To assign a layout to menu items you need to click on the following tab:

            Layout Builder Assign Layout

            Select menu items for which you want to assign a layout:

            Layout Builder Assign Layout

             

            Blocks structure

            Each layout contains blocks and modules. Using Layout Builder, you are able to change the order of blocks, you can assign module positions and lot more. However, if you would like to add a new block or edit the block structure then you need to edit a layout file.

            Once you have created a new layout file, you can edit it and customize.
            The block structure is defined using the following code:

            // 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');

            If you would like to add a new block to a layout, you can do it as follows:

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

            The block name used in the above code should be the same as the block file name. More about creating a new block you will find out in the next chapter.

             

            Add a new block

            Once you have added a new block to a layout, you need to create a block file.

            All blocks are located in the following directory:

            /templates/[template_name]/tpl/blocks/

            The created block should have the same name as the block name in a layout file.

            Layout Builder Add Block

             

            Add a new module position

            There are two ways of including module positions to a block file: single module and flexiblock.

            Single module

            If you need to add a single module, then the code looks as follows:

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

            Take a look on example:

            <?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

            Using a flexiblock you can display up to 6 modules in a row. A flexiblock gives you additional settings in Layout Builder:

            Customize layout structure tab:

            Layout Builder New Position

            Customize responsive layout tab:

            Layout Builder New Position

            If you need to add a flexiblock, then the code looks as follows:

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

            Take a look on example:

            <?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; ?>

            Define a module position

            Once you have created a module position, you need to define it in the following file:

            /templates/[template_name]/templateDetails.xml

            You can do it as follows:

            <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>

             

            Load a style sheet

            For each layout, you can load a specific style sheet. This feature may be useful for you when you have some different styles for a layout and you do not want to include them to all layouts. It may have a positive impact on the speed of your site loading.

            Step 1: Create a LESS file

            First of all, you need to create a less file. The file should be located in the following directory:

            /templates/[template_name]/less/

            Step 2: Load the created file

            Next, edit a layout file from the following directory:

            /templates/[template_name]/tpl

            In the head section, you need to add the following code:

            <?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>

            Take a look on example:

            <head>
                <?php $this->renderBlock('head'); ?>
                <?php $this->addCompiledStyleSheet(JMF_TPL_URL.DIRECTORY_SEPARATOR.'less'.DIRECTORY_SEPARATOR.'new-layout.less', true, JMF_TH_TEMPLATE); ?>    
            </head>

            Step 3: Add styles

            Now, you can add LESS or CSS styles to the created LESS file.
            You should remember to import variables and mixins if you want to take advantage of them:

            /* ====================
               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";

Video Tutorials

EF4 Framework for Joomla! 3 - introduction

Joomla! 3 Quickstart Installation Guide

Speed up your website! Must watch video!

How to create Joomla article?

Joomla ReCaptcha - how to set up?

How to use Joomla editors?

How to display a module in Joomla article?

How to configure Joomla contact form?

How to check Joomla module positions names?

How to configure your language for Joomla 3?

How to create Joomla custom HTML module?

How to create Joomla menu?

INDICO S.C.

ul. Wałowa 10/3, 84-200 Wejherowo, registered in Centralna Ewidencja i Informacja o Działalnosci Gospodarczej
NIP/VATID: PL5882424318

Copyright © 2009-2019 Vorlagenstudio, All rights reserved. Joomla! is Free Software released under the GNU/GPL License.
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries. Joomla-Monster.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.