7.1 Theme implementation

An Integrated theme can be implemented in any Twig template folder, in the application or in a vendor bundle. A theme contains Twig views with:

• Base layout(s)
• Content type item views
• Block views

When a view is not available in the theme it will default to the view provided by the default theme or the general default one. This will be a view with a basic Bootstrap based layout.

A theme can be used for multiple websites.

Directory structure for a single theme application

When an application contains only one theme, you can use the default Twig templates folder:

- templates
- - base.html.twig
- - - blocks
- - - - content
- - - - - articles.html.twig
- - - content
 - - - article
- - - - - default.html.twig

Integrated will find base view, content item views and block views this way. Off course, other directories and views can be added when needed in your application.

The configuration for the theme will look like:

1
2
3
4
5
6

# config/packages/integrated.yaml
integrated_theme:
    themes:
        my:
            paths:
                - ''

Directory structure for a multi theme application

When an application contains multiple theme it is recommended to add a "themes" folder to your Twig templates folder:

- templates
- - themes
- - - themename
- - - - base.html.twig
- - - - - blocks
- - - - - - content
- - - - - - - articles.html.twig
- - - - - content
- - - - - - article
- - - - - - - default.html.twig

The configuration for the theme will look like:

1
2
3
4
5
6

# config/packages/integrated.yaml
integrated_theme:
    themes:
        my:
            paths:
                - 'themes/themename'

Directory structure for bundles

When a bundle contains a theme, the directory structure of it will look like:

- Resources
- - views
- - - themes
- - - - themename
- - - - - base.html.twig
- - - - - - blocks
- - - - - - - content
- - - - - - - - articles.html.twig
- - - - - - content
- - - - - - - article
- - - - - - - - default.html.twig

Integrated will find base view, content item views and block views this way. Off course, other directories and views can be added when needed in your application.

The configuration for a theme will look like:

1
2
3
4
5
6
7
8
9
10

# config/packages/integrated.yaml
integrated_theme:
    themes:
        default:
            paths:
                - '@IntegratedWebsite/Resources/views/themes/default'
            fallback: ~
        my_theme:
            paths:
                - '@My/Resources/views/themes/my_theme'

Page editing

Integrated is able to provide page editing with blocks and columns. You have to define the area(s) which can be filled with blocks. In most situations this is the complete content area between the header and the footer, but you can define multiple areas as well.

To define an area (called "main"):

1

    {{ integrated_grid('main') }} 

Editable navigation menu

With an editable navigation menu, users can edit the website navigation menu. You can define multiple navigation menus. A menu can be defined with:

1

 {{ integrated_menu('main', { 'template': 'AppBundle:themes/mytheme:templates/main_menu.html.twig' }) }}

A menu view may look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

{% extends 'BraincraftedBootstrapBundle:Menu:bootstrap.html.twig' %}
{% import 'BraincraftedBootstrapBundle:Menu:bootstrap.html.twig' as knp %}
 
{% block list %}
    {% if item.hasChildren and options.depth is not sameas(0) and item.displayChildren %}
 
        {% set listAttributes = listAttributes|merge({ 'class': (listAttributes.class|default('')|trim ~ ' nav navbar-nav pull-left-md')|trim }) %}
 
        {% if item.level is sameas(0) %}
 
            {% set listAttributes = listAttributes|merge({ 'itemscope': '', 'itemtype': 'http://schema.org/SiteNavigationElement' }) %}
 
        {% endif %}
 
        <ul{{ knp.attributes(listAttributes) }}>
            {{ block('children') }}
        </ul>
 
    {% endif %}
 
{% endblock %}
 
 
 
{% block item %}
 
    {% if item.displayed %}
 
        {% set attributes = item.attributes|merge({ 'class': (item.attributes.class|default('')|trim ~ ' nav-item')|trim }) %}
 
 
 
<li{{ knp.attributes(attributes) }}>
 
    <a href="{{ item.uri }}" class="nav-link" itemprop="url">
 
        <span itemprop="name">{{ block('label') }}</span>
 
    </a>
 
</li>
 
 
 
        {% if not item.isLast|default %}
 
            <li class="navbar-divider"></li>
 
        {% endif %}
 
    {% endif %}
 
{% endblock %}