📖
Joomla Tutorials | NorrNext Documentation
DocumentationNorrNext
  • What is Joomla?
  • How to install Joomla
  • How to install an extension
  • How to backup your website
  • How to enable Search Engine Friendly URLs in Joomla
  • How to enable one-click update for NorrNext commercial extensions
  • Assigning ZOO elements to Apps
Powered by GitBook
On this page

Assigning ZOO elements to Apps

If you are into beginning of using ZOO CCK, you might cause a question: how to assign elements to Apps? This tutorial will save your time.

PreviousHow to enable one-click update for NorrNext commercial extensions

Last updated 2 years ago

There are two core Apps (Blog and Pages) that has been added as an example.

Let's add an instance called News with Blog App:

Create a new instance with Blog App

Click on Blog App and on the next step you should assign the App a template:

Just remember the template name you have selected since it will be required on next steps. It is default in our example. In case if the name has been forgotten or you are going to add new elements to existing site you always can change the template in App configuration (click on Config link).

Adding elements

It is time to add elements. Click on gear icon to manage elements of the App. It is also can be called as App Config, but has another features.

On next step you will must select the App to configure:

The App has various types of content related to specific features. By default there are two types in Blog: Article and Author. To the right there is a list of Template Layouts. We need to manage layouts of the template which was selected in App config (see above). In our case it was default template.

Now we can see a list of content types and template layouts. First of all, let's add new elements to the content type. Click on Edit elements link below the Article.

On the right side you can see Element Library. Click on the elements which you want to add to the App type. You also can configure elements here (see Social Share settings on the screenshot below). Let's add Social Share and Open Graph, give these elements a name, play with its settings and save the article type.

Let's construct a new view: which elements should be displayed in the selected layout.

Each template has the following layots:

  • Edit - edit layout in the item edit view.

  • Feed - feed layout for all kinds of feeds like RSS or Atom.

  • Full - item view.

  • Submission - submission layout in submission view.

  • Teaser - teaser layout in the frontpage, category, alphaindex and tag.

In our example we need Full and Teaser. Click on Teaser.

We see positions on left and elements on right. We can add required elements from right and assign them to the positions. Using drag'n'drop move Social Share element to the preferable position. Moreover, you can override its settings. You can add as many elements as it is needed.

You can add any required element to be rendered on the teaser page. Let's add the same elements to Full page too and change some params to make elements looks different. Click on Full layout. Now add Social Share element with drag'n'drop and play with its settings to make it different from teaser layout.

Using this approach you can add any elements to content types, then assign these elements to required positions and change its settings in each layout. As a result, you can customize layout views according to your needs.

Go to App config
Assign the App a template
Click on Gear button to go to App configuration
Select the Blog App to configure it
Edit elements for Article
Add new elements to Article type
Configure elements for selected layouts
Adding the element to a position and override its options
Front-end: Social Share buttons in teaser view
Adding the element to a position with custom settings
Customized Social Share buttons in full layout (Position: Fixed Left)
Create a new instance with Blog App
Edit App configuration
Assign the App a template
Go to App config
Edit elements for article type
Edit App configuration
Add new elements to Article type
Configure elements for selected layouts
Adding the element to a position
Front-end: Social Share buttons in teaser view
Adding the element to a position
Customized Social Share buttons in full layout