Extensions » Tweet Display Back

Tweet Display Back

Customizing the Templates

Tweet Display Back ships with four templates that are ready to use but also easy to customize with a few CSS rules.

Customize an Existing Template

Customizing the existing templates is actually quite simple.  Either a template override can be created, a CSS override can be created, or both for full control.  To override the CSS, copy the file from /media/mod_tweetdisplayback/css/<template>.css to /templates/<your_template>/css/mod_tweetdisplayback/<template>.css where <template> is the name of the template you've chosen and <your_template> is the name of your site's template. To override the layouts, copy the file from /modules/mod_tweetdisplayback/tmpl/<template>.php to /templates/<your_template>/html/mod_tweetdisplayback/<template>.php.

Build My Own Template?

If you want to design your own template, it is quite easy to do that.  Just remember that you need to save a backup of your template's files as they may be deleted on updates.

The first step is to select a template for your base.  In the module's tmpl folder, select the file and make a copy of it, then give it a distinctive name (but NOT index.html or index.php).  Then in the /templates/<your_template>/css/mod_tweetdisplayback folder, add the corresponding CSS files.

All of the logic to declare the CSS is done in the module dispatcher, so it is important that you follow the advice in the previous paragraph otherwise you will get a broken module display.  All of the logic to add the Web Intents script is also handled in the dispatcher, so you can focus solely on your template styling.

Aside from these requirements, the rest of the template can be fully customized.  Ensure you pay attention to which divs are inside the foreach statement; this is where each tweet is rendered.  All data that is processed is output on the template, so you don't need to read through the code to figure it out.  The templates all include logic to add classes based on certain conditions; whether there is an avatar or not and the class suffixes are the common ones.  This is done to allow as much of the CSS to be reusable as possible without redefinition.

Certain elements are not defined in the templates though.  As part of the logic in the helper.php file, the footer's elements are completely coded into the PHP object.  Same goes for the tweet actions and the classes added for @user and #hash links.