Using Theme Key to specify a theme to display for a particular page

What is Themekey?

Many Powerbase sites have more than one custom theme.

Themekey allows you to choose which of your custom themes should be used for a given page. For example, if you have a special event, you could create a custom theme for that event and only display that theme for the given event's registration page.

Basic Usage

To use themekey, click:

• From the top menu: Administer -> Drupal Administration and then
• From the left sidebar Administration -> Configuration -> User Interface -> Themekey

By default, your themekey settings page will look like this:

There are four settings the indicate which theme is used by default for:

• profiles
• mailings (unsubscribe links, etc)
• contributions
• events

Typically, all of these pages will use your main custom theme (in the screen grab above it displays a theme called "demo" - your main custom theme will likely be named after your site).

However, suppose you have a second theme called special event and you want that theme to show up only for the event with id 34 (hint - you can see which IDs are assigned to your event when you view the Manage Events page and look in the parentheses next to the event name).

You can add a new entry by selected "civicrm:event:event_id" from the New Rule drop down.

Next, click save.

At this point, the rule will be at the bottom. Themekey will pick the first theme that matches a rule. So, if you leave it at the bottom, it will never match because the default settings will always take precedence.

So, next grab your new rule by the snowflake-like button and drag it to the top of the page. Then click Save Configuration again.

Using this method, you can specify a different theme for pages by contribution id, contribution type, event id and even event type:

Webforms

If you want a webform to use a certain them, you can specify the webform by it's "nid" - or Node ID.

To figure out which "nid" is being used by your webform, click the "edit" link for the webform and you will see it in the location bar of your browser. It will look something like https://YOURSITE.ourpowerbase.net/node/23/edit. In that examle, your nid is the number 23.

Once you know the nid of your webform, in theme key choose the "node:nid" option and set the value to be equal to the number of your webform.

Advanced Usage

Regular Expressions

Sometimes things can get complicated. You might want to run a lot of events or contributions at the same time. Adding a single line for each event or contribution will make your page grow bigger and bigger.

So, a short cut is to use a language called "regular expressions."

You can choose a regular expression by selecting the tilde (~) character instead of the equals (=) character.

All regular expressions should be wrapped in parentheses. Insert a pipe character (|) to mean OR. So the expression:

(4|15|18)

Means, 4 or 15 or 18.

Below is an example of regular expressions in action:

Nesting

Sometimes, the page you want is not available from the drop down. For example, if you want a particular Personal Campaign Page to display with a different theme or if you want a particular profile displayed a certain way.

For these cases, you can nest criteria to ensure that both the top (outer) criteria and the bottom (inner) criteria match for the theme to be used:

Glossary

The main rule types used (besides the obvious ones) are:

• drupal:get_q - this checks the path part of the URL or web address (e.g. /civicrm/contributions).
• system:query_string - this checks the part of the web address after the question mark (e.g. gid=5)

The main options for comparison are:

• equals (=) - must be an exact match
• tilde (~) - uses a regular expression match. This is quite powerful and allows you to specify a complicated rule for matching. For more information on writing more complex regular expressions, see this excellent regular expressions tutorial.
• asterisk (*) - this is called a "glob" matcher. It matches the result anywhere in the string. So, if your query_string was: id=12&test=0&reset=1 and your search string was "test=0" then you would have a match.