Table of Contents
Django-cms-themes
Using themes form www.djangocmsthemes.com
User can use an app to download themes from the website and upload/apply them using 'admin' interface. It does not work properly at the moment
http://www.djangocmsthemes.com/getting-started
install the django-cms-themes pluggable django app. The best way to do this is to use the command “pip install django-cms-themes” (if you are using pip).
Add 'cmsthemes' to INSTALLEDAPPS in your settings file.
Make sure you have a setting in your settings.py file called PROJECTDIR, which should point to the root of your project in the filesystem, i.e. PROJECTDIR = os.path.abspath(os.path.dirname(file))
Run “python manage.py syncdb” (or “python manage.py migrate” if you have south installed).
Making your own themes based on www.djangocmsthemes.com
download and extract themes
Themes for the website are installed to 'themes' folder inside your webroot. CSS links and images are configured with this default path.
[td@localhost vfoss_cms]$ tree themes
themes
├── simple
│ ├── static
│ │ ├── css
│ │ │ └── style.css
│ │ └── images
│ │ ├── bullet.png
│ │ ├── graphic.png
│ │ ├── paperclip.png
│ │ └── pattern.png
│ └── templates
│ └── index.html
└── summer
├── static
│ ├── css
│ │ └── styles.css
│ ├── images
│ │ ├── 1.jpg
│ │ ├── 2.jpg
│ │ ├── 3.jpg
│ │ ├── 4.jpg
│ │ ├── body-bg.jpg
│ │ ├── tabs_1.gif
│ │ └── tabs_2.gif
│ └── js
│ ├── jquery-1.3.2.min.js
│ ├── jquery.cycle.all.min.js
│ ├── script.js
│ └── superfish.js
└── templates
├── content.html
└── index.html
Edit settings.py to make these themes available as templates
-------- settings.py ------------
...
77 STATICFILES_DIRS = (
78 os.path.join(PROJECT_DIR, 'static_dev'),
79 os.path.join(PROJECT_DIR, 'themes'),
80 )
...
100 CMS_TEMPLATES = (
101 ('example.html', 'Example Template'),
102 ('template_1.html', 'Template 1'),
103 ('template_2.html', 'Template 2'),
104 ('summer/templates/index.html', 'summer'), <===== make index.html a template.
105 )
106
107 ROOT_URLCONF = 'urls'
108
109 TEMPLATE_DIRS = (
110 os.path.join(PROJECT_DIR, 'templates'),
111 os.path.join(PROJECT_DIR, 'themes'), <==== add template dir.
112 )
113
...
It's avisable to use a template folder with the same structure as above. Create 'index.html'
Add 'themes' to STATICFILESDIR then use {{ STATICURL }}themename/static as path to static files **
<code>
1 {% load cmstags menutags sekizaitags %}
2 <!DOCTYPE html PUBLIC “-W3CDTD XHTML 1.0 TransitionalEN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
3 <html xmlns=“http://www.w3.org/1999/xhtml”>
4 <head>
5 <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
6 <link rel=“stylesheet” href=“static_urlthemes/summer/static/css/styles.css” type=“text/css” />
7
8 <link rel=“stylesheet” href=“static_urlvfossorgv01/static/css/styles.css” type=“text/css” />
9 <script type=“text/javascript” src=“static_urlvfossorgv01/static/js/jquery-1.3.2.min.js”></script>
10 <script type=“text/javascript” src=“static_urlvfossorgv01/static/js/jquery.cycle.all.min.js”></script>
11 <script type=“text/javascript” src=“static_urlvfossorgv01/static/js/script.js”></script>
12 <title>request.current_page.get_title</title>
13 {% renderblock “css” %}
14 </head>
15
16 <body>
17 {% cmstoolbar %}
18
19 <div id=“container”>
20
21 <div id=“container-inner”>
22
23 <div id=“header”>
24 {% placeholder “header” or %}
25 {% showplaceholder “header” request.currentpage.gethomepkcache %}
26 <!–h1><a href=“#”>sitename</a></h1>
27 <p>nice site slogan</p–>
28 {% endplaceholder %}
29 <div class=“clear”></div>
30 </div><!– end header –>
31
32 <div id=“nav”>
33 <ul>
34 {% showmenu 0 0 0 0 %}
35 </ul>
36 </div><!– end nav –>
37 {% block slider %}
38 <div id=“slider”>
39 <!– start slideshow –>
40 <div id=“slideshow”>
41 {% placeholder “sliderimages” or %}
42 {# showplaceholder “sliderimages” request.currentpage.gethomepkcache #}
43 <img src=“static_urlthemes/summer/static/images/1.jpg” alt=“image” width=“920” height=“250” border=“0” />
44 <img src=“static_urlthemes/summer/static/images/2.jpg” alt=“image” width=“920” height=“250” border=“0” />
25 {% showplaceholder “header” request.currentpage.gethomepkcache %}
26 <!–h1><a href=“#”>sitename</a></h1>
27 <p>nice site slogan</p–>
28 {% endplaceholder %}
29 <div class=“clear”></div>
30 </div><!– end header –>
31
32 <div id=“nav”>
33 <ul>
34 {% showmenu 0 0 0 0 %}
35 </ul>
36 </div><!– end nav –>
37 {% block slider %}
38 <div id=“slider”>
39 <!– start slideshow –>
40 <div id=“slideshow”>
41 {% placeholder “sliderimages” or %}
42 {# showplaceholder “sliderimages” request.currentpage.gethomepkcache #}
43 <img src=“static_urlthemes/summer/static/images/1.jpg” alt=“image” width=“920” height=“250” border=“0” />
44 <img src=“static_urlthemes/summer/static/images/2.jpg” alt=“image” width=“920” height=“250” border=“0” />
45 <img src=“static_urlthemes/summer/static/images/3.jpg” alt=“image” width=“920” height=“250” border=“0” />
46 <img src=“static_urlthemes/summer/static/images/4.jpg” alt=“image” width=“920” height=“250” border=“0” />
47 {% endplaceholder %}
48 </div>
49 <!– end #slideshow –>
50 <div class=“controls-outer”>
51 <div id=“slidecontrols”>
52 <ul id=“slidernav”>
53 </ul>
54 </div>
55 </div>
56 <div class=“clr”></div>
57 </div>
58 <!–/slider –>
59 {% endblock %}
60
61
62 <div id=“main”>
63 <div class=“sidebar”>
64 {% placeholder “sidebar” or %}
65
66 {% endplaceholder %}
67
68
69
70 </div><!– end sidebar –>
71
72 <div class=“content” id=“top”>
73 {% placeholder “content-top” or %}
74 {% endplaceholder %}
75 </div>
76 <div class=“content” id=“left”>
77 {% placeholder “content-left” or %}
78 {% endplaceholder %}
79 </div>
80 <div class=“content” id=“right”>
81 {% placeholder “content-right” or %}
82 {% endplaceholder %}
83 </div>
84 <div style=“clear: left;”></div>
85 <div class=“content” id=“bottom”>
86 {% placeholder “content-bottom” or %}
87 {% endplaceholder %}
88 </div>
89
90
91 <div class=“clear”></div>
92
93 </div><!– end main –>
94
95 </div><!– end container-inner –>
96
97 </div><!– end container –>
98
99 <div id=“footer”>
100 <p>© request.get_host 2011. Design by <a href=“http://www.electrictowelrail.org.uk” target=“blank”>Electric Towel Rail</ a> | <a href=“http://validator.w3.org/check/referer” title=“This page validates as XHTML 1.0 Transitional”><abbr title=“eXtensible Hy perText Markup Language”>XHTML</abbr></a> | <a href=“http://jigsaw.w3.org/css-validator/check/referer” title=“This page validates as C SS”><abbr title=“Cascading Style Sheets”>CSS</abbr></a></p>
101 </div><!– end footer –>
102
103 {% renderblock “js” %}
104 </body>
105 </html>
</code>
==== template tags explained ====
* https://docs.djangoproject.com/en/dev/ref/templates/builtins/?from=olddocs
* http://docs.django-cms.org/en/2.1.3/advanced/templatetags.html
* https://docs.djangoproject.com/en/dev/topics/templates/#variables
== placeholder ==
Place holder is put where dynamic content is desireable. Django-cms will allow page editor to replace it with one of the plugins.
<code>
{% placeholder “name” or %}
anything withing this block…
{% showplaceholder “header” request.currentpage.gethomepk_cache %}
… will be displayed if no plugin is input or the plugin returns no output.
{% endplaceholder %}
</code>
== show_placeholder ==
Show a specific placeholder from a given page. This is useful when a content should be used in many pages.
Arguments:
* placeholdername
* pagelookup (see Page Lookup for more information)
* language (optional)
* site (optional)
<code>
{% showplaceholder “header” request.currentpage.gethomepk_cache %}
</code>
== page lookup ==
The page_lookup argument, passed to several templatetags to retrieve a page, can be of any of the following types:
* String: interpreted as the reverse_id field of the desired page, which can be set in the “Advanced” section when editing a page.
* Integer: interpreted as the primary key (pk field) of the desired page
* dict: a dictionary containing keyword arguments to find the desired page (for instance: {'pk': 1})
* Page: you can also pass a page object directly, in which case there will be no database lookup.
If you know the exact page you are referring to, it is a good idea to use a reverseid (a string used to uniquely name a page) rather than a hard-coded numeric ID in your template. For example, you might have a help page that you want to link to or display parts of on all pages. To do this, you would first open the help page in the admin interface and enter an ID (such as help) under the ‘Advanced’ tab of the form. Then you could use that reverseid with the appropriate templatetags:
<code>
{% showplaceholder “right-column” “help” %}
<a href=“{% pageurl “help” %}”>Help page</a>
</code>
If you are referring to a page relative to the current page, you’ll probably have to use a numeric page ID or a page object. For instance, if you want the content of the parent page display on the current page, you can use:
<code>
{% showplaceholder “content” request.currentpage.parent_id %}
</code>
Or, suppose you have a placeholder called teaser on a page that, unless a content editor has filled it with content specific to the current page, should inherit the content of its root-level ancestor:
<code>
{% placeholder “teaser” or %}
{% showplaceholder “teaser” request.currentpage.get_root %}
{% endplaceholder %}
</code>
== block ==
Block tags tell template engine that a child page, which extends this template, may overwrite these portions of the template.
{% block block_name %}
