Twitter Bootstrap Question posted in

Twitter bootstrap – How to set up a custom template in djangocms

I’ve successfully installed djangocms on a Ubuntu machine, and now I would like to integrate a custom template bought from Envato.

After I have installed it, djangocms came with its own simple template files which are located in mysite/templates:

base.html

{% load cms_tags staticfiles sekizai_tags menu_tags %}
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{% block title %}This is my new project home page{% endblock title %}</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.min.css">
        {% render_block "css" %}
    </head>
    <body>
        {% cms_toolbar %}
        <div class="container">
            <div class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        {% show_menu 0 1 100 100 "menu.html" %}
                    </ul>
                </div>
            </div>
            {% block content %}{% endblock content %}
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
        {% render_block "js" %}
    </body>
</html>

feature.html 

{% extends "base.html" %}
{% load cms_tags %}

{% block title %}{% page_attribute "page_title" %}{% endblock title %}

{% block content %}
    <div class="jumbotron">
        {% placeholder "feature" %}
    </div>
    <div>
        {% placeholder "content" %}
    </div>
{% endblock content %}

menu.html

{% load i18n menu_tags cache %}

{% for child in children %}
    <li class="{% if child.ancestor %}ancestor{% endif %}
        {% if child.selected %} active{% endif %}
        {% if child.children %} dropdown{% endif %}">
        {% if child.children %}
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                {{ child.get_menu_title }} <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
            </ul>
        {% else %}
            <a href="{{ child.get_absolute_url }}"><span>{{ child.get_menu_title }}</span></a>
        {% endif %}
    </li>
    {% if class and forloop.last and not forloop.parentloop %}{% endif %}
{% endfor %}

page.html 

{% extends "base.html" %}
{% load cms_tags %}

{% block title %}{% page_attribute "page_title" %}{% endblock title %}

{% block content %}
    {% placeholder "content" %}
{% endblock content %}

I have read their documentation but I haven’t found anything related to some custom template integration. Could anyone please lead me in the right direction ?

EDIT1:

I have added in CMS_TEMPLATES:

CMS_TEMPLATES = (
    ## Customize this
    ('page.html', 'Page'),
    ('feature.html', 'Page with Feature'),
    ('index.html', 'oriel.io') # this is what I added
)

but nothing happened.

Tags:

2

Answers


  1. 0

    Add your templates to CMS_TEMPLATES in your settings file.

    Login or Signup to reply.
  2. 0

    I recently met the same problem! So let me try to explain

    1) You should extend PageAdmin in admin.py

    In admin side, when you want to choose template for page (‘advanced settings’) it will call AdvancedSettingsForm by default. but we must to extend too to give your templates.

    class ExtendedPageAdmin(PageAdmin):
    def get_form_class(self, request, obj=None, **kwargs):
        if 'advanced' in request.path_info:
            return ExtendedAdvancedSettingsForm
        elif 'permission' in request.path_info:
            return PagePermissionForm
        elif 'dates' in request.path_info:
            return PublicationDatesForm
        return self.form

    and DO NOT forget unregister and register

    admin.site.unregister(Page)
admin.site.register(Page, ExtendedPageAdmin)

    2) OK) You have choosen (‘advanced settings’) and there must be choice among your custom templates. 

    class ExtendedAdvancedSettingsForm(AdvancedSettingsForm):
    def __init__(self, *args, **kwargs):
        super(ExtendedAdvancedSettingsForm, self).__init__(*args, **kwargs)

    template_choices = [(x, _(y)) for x, y in get_cms_setting('TEMPLATES')]
    self.fields['template'] = forms.ChoiceField(choices=template_choices)

    3) Ok, wee see custom templates for page, but there will be error if you want to save it. It’s because of Page model. It looks like this:

    @python_2_unicode_compatible
class Page(six.with_metaclass(PageMetaClass, MP_Node)):
    """
    A simple hierarchical page model
    """
    ...
    template_choices = [(x, _(y)) for x, y in get_cms_setting('TEMPLATES')]
    ...
    template = models.CharField(_("template"), max_length=100, 
               choices=template_choices, default=TEMPLATE_DEFAULT
               help_text=_('The template used to render the content.'))

    4) So you should change template_choice during init the Page object. Let’s use signals

    def after_page_init(sender, instance, **kwargs):
    instance._meta.get_field_by_name('template')[0]._choices = []

def patch_cms_page():
    from cms.models import Page
    from django.db.models.signals import post_init
    post_init.connect(after_page_init, sender=Page)

    and finally call patch_cms_page() in urls.py )

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search