12 - Template content item view

Now we will discover one of most important part of flexicontent, templating system. In flexicontent we had 2 types of template :

• Item view, display only one item
• category view, display a list of items

Each template use this system

1. Got to template admin
2. Each line is a template
3. Item view
4. Category view

As you can see you can duplicate any template to create yours !

Now all your code modifications are saved, no update !

In this tutorrial we discover the basic approach, without editing anything and discover how to use setting to create a good display

Lets start with item view, we will use TABLE template, basic but powerfull template awith many position and tab function

Assign template to item

1. Got to your type
2. Edit Estate

1. Go to Layout tab
2. Choose Table template in dropdown
   
   

Do nothing in option we will check it in template directly, you can do it for all other type if you want

Item view

For simplier display we will use only one item view for all type

1. Editing table display

In fields placement you can drag and drop field in position ! that it !

that display field in desire position we can't do more easier i think !

now we will check the global setting for this template

1. Go to display parameters
2. Set html5 version (this option will be remode its an old params)
3. Got title tab
4. Set color of title

I didn't take time to discover all options, just play with it !

now title have the good color

After this we will modify label display

1. Go to label tab
2. Set color of text
3. Set background color
4. And play with space arround text for better display

Result

And now we can setup display for specific position

Tabs display

Got to field positions

1. Tabbed tab
2. Set background color of tab
3. Set color of title
4. Play with other option for best display

Result

Note you can set title of each tab here

Now we will customize top and bottom part 

1. Go to top and bottom position
2. Choose the top width, this value create the size of image regarding to left position, full with is 12, if i set 3 image can have 9 unit to display
3. Set the number of column, this setting display field in 1 or 2 columns in the position
4. Set padding in position
5. Set color of position
6. Set border radius
7. Set border width
8. Set border color

Result

Doing the same thing for bottom position like this to remove some border

Now you will have an Estate view like this

And responsive !