Templates

Controlling the order of CSS includes

Submitted by Matt Clegg

Usually CSS developers are lazy -even more so than php developers! What usually happens is (as you can see in firebug) that styles get redefined by sub CSS files depeding on a parent containing div -so it's important to include these CSS files in the correct order, otherwise they will be overwritten incorrectly and the style wont appear as you wish.

Your probably already using Requirements::themedCSS but there is another function called Requirements::insertHeadTags. This is great for including custom style sheets because you can call it AFTER your usuall CSS. An example would be something like;

Automatically ?flush when in 'dev' mode

Submitted by Dan Hensby

Often when doing development work on a website - and particularly the templates - it can be a pain having to remember to add ?flush to the end of the URL to make sure all of your changes have come through.

I'm sure that all of us have had that "d'oh" moment when we have spent too much time wondering why our changes weren't working, only to find a simple flush fixed it.

If you have set up a domain in your set_dev_servers array or added Director::set_environment_type('dev') to your _config.php file then you can also add:

if (Director::isDev()) { SSViewer::flush_template_cache(); }

Select a theme using a URL parameter

Submitted by Toby Champion

When I develop SilverStripe sites, I usually get functionality working in the default theme blackcandy before getting it working in the final templates. This way, authors can start adding content and seeing how it looks on the page, and I can get early feedback about the functionality. Also, as a developer I get to see real content in the browser early in the process. So does the designer.

I'm sure this process is nothing new - and I realise form-first vs function-first is an old debate - but one thing I wanted to share is some code my team and the client found useful in a recent project.

I added the ability to select a theme based on a parameter in the URL, either for the current page request or for session. This meant we were able to throw around URLs specifying the theme, choosing a theme depending on whether we were discussing the (visual) design or the functionality and content.

Using a Print Stylesheet

Often people want to be able to print webpages without all the menus and graphics and with all the content fitting correctly onto a page. To do this you need to create a separate print stylesheet. It would look something like this:

themes/YOURTHEME/css/print.css

#sidebar, #header, #navbar, #footer { display: none; } #container, #content{ width: 100%; margin: 0; float: none; }

Using dates in foreign Languages

Submitted by Francisco Arenas

With all the translatable, i18n and other translation related stuff in silverstripe, I think more than one is wondering how to achieve something simple as using dates in a foreign language... Actually, it's ultra easy if you add this 2 lines in your silverstripe powered website: (my spanish example)

in _config.php:
setlocale(LC_ALL, 'es_ES');

in your template:
$Date.FormatI18N(%A %e de %B de %Y)

this will render:
miércoles 21 de octubre de 2009

Extending $LinkingMode to handle controller actions

Submitted by Marcus Dalgren

As some of you might have noticed, as soon as you step outside of the standard SiteTree structure you're pretty much on your own. Today I had to make a menu that mixed normal SiteTree pages and controller actions.

I wanted to be able to use LinkingMode to check if this is the currently viewed page and unfortunately the standard function does not take controller actions into account.

The Snippet
public function LinkingMode($action = null) { $controllerAction = Director::urlParam('Action'); if (is_null($controllerAction) && is_null($action)) return parent::LinkingMode(); if ($action == $controllerAction) return 'current'; else return $this->LinkOrSection(); }

Making a hierarchy aware templating system

Submitted by Marcus Dalgren

Something that has been bothering me when building larger sites with SilverStripe is that I often find myself creating new classes not to add functionality, but to just get a new template.

You can set separate templates for different actions manually but that's not what I want in this case, I want different templates for the same action on the same class.

After thinking about this for awhile I came up with a two part solution and the first part is to make the template choosing aware of the Sitetree hierarchy.

In order to get this to work I have sub classed ContentController with a class I call HierarchyController. This class only contains two methods, namely a __construct() method to kick start the parent and a method called getViewer which overrides the getViewer method of the Controller class.

The code in getViewer consists of the code from the parent method with my own code added at the end. The reason I copy the code from the parent is that I want to do the same processing it does first and then do my own. Since the parent method returns an SSViewer object with the templates already set it's too late for me to step in and make the needed changes (I think).

The Snippet

So the added code is as follows:
... if ($this->dataRecord) { $hierarchyTemplate = $templates[0]; $current = $this->dataRecord; while ($current->ParentID > 0) { $hierarchyTemplate = $current->ClassName.'_'.$hierarchyTemplate; array_unshift($templates, $hierarchyTemplate); $current = $current->Parent(); } }

Using a Thickbox Modal Window with AJAX

Submitted by Dalesaurus

Thickbox is a great javascript plugin to jQuery that you can use to create modal windows within SilverStripe pages.  You can de-clutter your interfaces and re-use small snippets of common functions when you add in AJAX.  Before we begin there is a little homework:

• Read the AJAX Basics Recipe on the Doc Wiki
• Be aware that significant javascript changes are coming in 2.4 and this example is current as of 2.3.3
  
• Its a good idea to use some kind of naming convention with your methods and template so you don't get them confused.  I typically prepend them with lower case ajax.

For this example we will be creating a simple Clock that will be returning the time through a custom template in a Thickbox.  This is not very complex but it does illustrate the possibilities with modals and AJAX calls.

Create a front end theme switcher

Submitted by Martijn van Nieuwenhoven

So you wanna make a demo site for your customers to show all your template skills in one site. A simple theme switcher can come in handy. It's quite easy to implement this.

First add two new functions to your Page_Controller :
Page_Controller : function themeSwitcher(){ $folders = scandir(Director::baseFolder()."/themes"); $exclude = array(".", "..", ".DS_Store", "_notes"); $themes = array_diff($folders, $exclude); $selected = Session::get('theme'); $fields = new FieldSet( $fields = new DropdownField('theme','theme', $themes, $selected, '', 'Select Theme') ); $actions = new FieldSet( new FormAction('switchTheme', 'Switch') ); return new Form($this, "switchTheme", $fields, $actions); } function switchTheme($data){ if($data['theme']){ Session::set('theme', $data['theme']); } else { unset($_SESSION['theme']); } Director::redirect(Director::baseURL(). $this->URLSegment); }

The first function themeSwitcher() will scan the themes folder for themes and create a dropdown menu with all templates. The exclude array and array_diff will exclude the dots and Apple DS_Store files and Dreamweaver _notes folders. You could use this array to add themes you want to exclude in the switch.

The Session::get('theme')

Clearing the Search field on click with jQuery

As with everything, it's attention to detail that makes great sites. One thing that really bugs me is when a site has a search box with the word 'search' inside it but which does not clear it self when clicked, meaning I have to clear it before I can search.Given it can be achieved with a few lines of jQuery , it's a real surprise how many sites fail to implement this, or that still use the 'onclick' inline javascript. For an example of this in action, simply click the search box to your right.

To implement this on a SilverStripe site, create a file called jquery.clear.search.js and place it in your mysite/javascript directory. Then in your Page.php innit() function (in the controller class) add the following line:
Requirements::javascript("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"); Requirements::javascript("mysite/javascript/jquery.clear.search.js"); 

This will include our file in the page as well as the latest jQuery compacted library, which is kindly hosted for us by google, meaning there is a good change that the user may have it cached already. So now lets actually add somejQuery to the file jquery.clear.search.js: