Use case: Piwik analytics.
You want to install
Piwik analytics on your board.
Of course you can use this Custom Code extension to include tracking code from any other analytics software. But Piwik is my favourite, because with Piwik you don't hand your users' data over to a third party; you run the analytics software on your own server and so you stay master over your own data.
After installing Piwik (follow the instructions from their site), you can directly insert the tracking code in
overall_footer_after.html (copy - paste)
ACP > Extensions > Custom Code > Edit :: overall_footer_after.html
Or you could create a separate file where you copy-paste the Piwik tracking code.
ACP > Extensions > Custom Code > Files > Create file :: piwik.html
ACP > Extensions > Custom Code > Edit :: piwik.html
Copy-paste the Piwik tracking code.
Then include piwik.html in
overall_footer_after.hml
ACP > Extensions > Custom Code > Edit
Code: Select all
{%- include CUSTOMCODE_PATH ~ 'piwik.html' -%}
Note: before version 2.0.0 this was
<!-- INCLUDE ../../../../../../store/customcode/piwik.html -->
You could also create a link in the footer for easy access to the analytics data visible for admins only:
(Supposing you installed Piwik in the /piwik subdirectory from your web root.)
ACP > Extensions > Custom Code > Edit :: overall_footer_copyright_after.html
Code: Select all
{%- if U_ACP -%}<a href="./piwik">Piwik</a>{%- endif -%}
You want a picture with colored baby chickens in the background of the headerbar of prosilver.
Insert some inline styling:
ACP > Extensions > Custom Code > Edit :: overall_header_stylesheets_after.html
Code: Select all
{#- Baby chickens in headerbar styling -#}
<style>
.headerbar {
background-image: url("{{- ROOT_PATH -}}images/baby_chickens.jpg");
}
{# remove the logo and increase the height of the headerbar #}
.imageset.site_logo {
background-image: none;
padding-left: 0;
padding-top: 100px;
}
</style>
Note: {# and #} are Twig comment tags. Any text inside will not be included in the final template.
Take a picture of your colored baby chickens and crop it to a little bit more than 1100 px x 100 px and upload it as
baby_chickens.jpg to the directory
/images.
You could also make the image in the headerbar dependent on the forum which you are in:
First select and crop your images (1100x100). Save them in the /images folder.
Add inline styling (select according to the forum ids of your forum).
Edit :: overall_header_stylesheets_after.html
Code: Select all
{#- headerbar styling depending on forum -#}
<style>
.headerbar {
{%- if FORUM_ID == 2 -%}
background-image: url("{{- ROOT_PATH -}}images/bananas.jpg");
{%- elseif FORUM_ID == 9 -%}
background-image: url("{{- ROOT_PATH -}}images/apples.jpg");
{%- else -%}
background-image: url("{{- ROOT_PATH -}}images/kiwis.jpg"); /* default image */
{%- endif -%}
}
{#- remove the logo and increase the height of the headerbar -#}
.imageset.site_logo {
background-image: none;
padding-left: 0;
padding-top: 80px;
}
</style>
See here for a random header example:
viewtopic.php?f=456&t=2275361&start=165#p13910806
Tip: enable caching with header
Cache-Control: "max-age=31536000, public" (60*60*24*365 = 31536000 seconds in one year)
If you use Apache server, you can set this in the
httpd.conf file:
Code: Select all
<Directory "/some/dir/images"">
ExpiresActive On
ExpiresDefault "access plus 1 year"
Header append Cache-Control "public"
</Directory>
Or in
.htaccess
Code: Select all
Header set Cache-Control "max-age=31536000, public"
You want to show a welcome message on the Index to Anonymous guests only (everyone that's not logged in):
ACP > Extensions > Custom Code > Edit :: overall_header_content_before.html
Code: Select all
{#- Welcome message -#}
{%- if not S_USER_LOGGED_IN and SCRIPT_NAME == 'index' -%}
<div class="post welcome">
<h2>Welcome to our forum</h2>
<p>Please take some time to register yourself to have full access.</p>
</div>
{%- endif -%}
Styling
ACP > Extensions > Custom Code > Edit :: overall_header_stylesheets_after.html
Code: Select all
{# Welcome styling #}
<style>
div.welcome
{
border: 1px solid #444466;
}
</style>
Template Variables
As you can see in the examples, you can use all the available template variables.
The extension produces also template variables on its own: the query parameters
of the current url are available and can be used like this:
Code: Select all
{%- if SCRIPT_NAME == 'ucp' and marttiphpbb_customcode.query.i == 'pm' -%}
Your content for the private messages pages only ...
{%- endif -%}
Note: before version 2.0.x the format was
CUSTOMCODE_PARAM_I == 'pm'
Here a short list of some of the most useful core template variables:
SCRIPT_NAME gives the script: index, viewtopic, viewforum, ucp, mcp, faq, etc.S_USER_LANG makes it possible to render different content depending on the language, example value: en-gb.S_FIRST_ROW, .S_LAST_ROW, .S_ROW_COUNT are iteration selectors to select certain rows. For example, if you want to select the first post on the page in viewtopic <!-- IF postrow.S_FIRST_ROW --> your content <!-- ENDIF --> (see Google Adsense example below)S_USER_LOGGED_IN wether the user is logged in.U_ACP link to the acp. Useful to check if the user is an administrator.U_MCP link to mcp. Useful to check if the user has moderation rights.T_TEMPLATE_NAME. The current template i.e. prosilverFORUM_ID The current forum id (not set when not in forum context.)FORUM_NAME The current forum name (not set when not in forum context.)ROOT_PATH The web root path of your board.
If you wish to check with template variables which groups the user is in, have a look at
this extension.
Use case: Google Adsense
You want to put
Google Adsense advertisements in topics.
(For more control and launching your own ad campaigns - or mixing with Google adsense you could also consider running your own ad server with
Revive)
To insert the Google adsense code after the first post:
Edit :: viewtopic_body_postrow_post_after.html
Code: Select all
{#- Google adsense -#}
{%- if postrow.S_FIRST_ROW -%}
Your Google adsense code here...
{%- endif -%}
If you wish to insert adverts in multiple places (for example after the first, the 5th and the 10th post):
Edit :: viewtopic_body_postrow_post_after.html
Code: Select all
{# Google adsense -#}
{%- if postrow.S_FIRST_ROW or postrow.S_ROW_COUNT == 5 or postrow.S_ROW_COUNT == 10 -%}
Your Google adsense code here...
{%- endif -%}
Add some styling:
Edit :: viewtopic_body_postrow_post_after.html
Code: Select all
{#- Google adsense -#}
{%- if postrow.S_FIRST_ROW or postrow.S_ROW_COUNT == 5 or postrow.S_ROW_COUNT == 10 -%}
<div class="post adsense">
Your Google adsense code here...
</div>
{%- endif -%}
Edit :: overall_header_stylesheets_after.html
Code: Select all
{#- adsense styling -#}
<style>
div.adsense
{
background-color: #ddeedd;
}
</style>
To insert Google Adsense code in between the categories on the index page:
Edit :: forumlist_body_category_header_before.html
Code: Select all
{#- Google Adsense -#}
{%- if forumrow.S_IS_CAT and not forumrow.S_FIRST_ROW -%}
<div class="post adsense">
Your Google adsense code here...
</div>
{%- endif -%}
More hints on Google Adsense by GoBieN: viewtopic.php?f=456&t=2275361&start=180#p13913446
Use case: Message on the contact page
Edit :: overall_header_content_before.html
Code: Select all
{#- Contact message -#}
{%- if SCRIPT_NAME == 'memberlist' and marttiphpbb_customcode.query.mode == 'contactadmin' -%}
<div class="post contact">
<h2>Please,</h2>
<p>use this contact form only for urgent questions about the board and not for private help.</p>
</div>
{%- endif -%}
Styling
Edit :: overall_header_stylesheets_after.html
Code: Select all
{#- Contact styling -#}
<style>
div.contact
{
background-color: #ffeeee;
}
</style>
Including other template events In order to keep the extension simple, only a limited set of template events is included. These should cover already a lot of flexibility and use cases. If you need to put some template code on a place where this extension has no template event available, then your options are:
- Use javascript to move your code to this place. Put your code in a
div element in the overall_footer_body_after template event and then move it in its location with Javascript. See an example here
- Fork this extension and include the template event(s) you need. See here how to do this. Here is the repository on Github.
User Groups
To show content to users only of a certain group.
- Install en enable the Group Template Variables extension.
- Find out the id of the group. For example, go to 'Manage Groups' in the ACP and hover over the edit links of the groups. In the url you'll find the group id with parameter
g for example: &g=7
- Use the template variable S_GROUP_x in a conditional statement (replace x with the group id) like
Code: Select all
<!-- IF S_GROUP_7 -->
Content only visible to members of the group with id 7 ...
<!-- ENDIF -->
... html
