Blog

How to Toggle the Page Theme in Sitefinity’s Page Editor

November 11, 2014   /   by  Chris Aybar

Introduction

Improve the Content Authoring Experience in Sitefinity CMS

As a Progress Sitefinity partner and developer, we’re always looking for innovative ways to improve the content management experience for users.

In today's scenario, we are talking about how to improve the content authoring experience within the Sitefinity dashboard, specifically so we can use the content page editor more effectively.

Fortunately, instead of laboriously creating a new Sitefinity module or widget (commonly referred to as a user control), we can simply extend Sitefinity’s core functionality to achieve our goals. This is one of the many things we love about working with Sitefinity CMS.

Sitefinity Banner

Problem

Responsive Layers Prevent Users from Accessing Content Blocks within CMS Pages

One of the latests trends in our industry is responsive web design. These are complex web sites that are created using multiple design layers, and these responsive page templates have an interesting set of requirements for managing page content.

The problem is that users are not always able to access content blocks when the responsive page theme is enabled because those content blocks are essentially hidden behind the responsive layers.

And this specific problem is not something that only affects Sitefinity users, but simply a consequence of how some responsive web design HTML and CSS may be structured, especially when using an in‐content page editor like the one in Sitefinity and other popular web content management systems.

Unfortunately, the only way to resolve the problem is to manually disable the page theme in order to successfully access content blocks and set their properties. That process takes 5 mind-numbing steps:

  1. If a page is already in design mode, exit design mode.
  2. Go to the page template, disable the page theme, and save the page template.
  3. Go back to the page and enter into design mode to add content blocks, etc.
  4. Publish or save a draft of the page.
  5. Go back to the page template, enable the page theme, and save the page template.

Can you imagine having to repeat those steps for multiple pages and multiple page templates over the course of an entire web design project? How about multiple web projects?

Well, this is exactly what we did the first time. It was so tedious we came up with a quick work around to disable the page theme CSS from within the page by using our trusty firebug development tool for FireFox or the Google Chrome web inspector. This was a much easier solution, but still annoying. The more we opened firebug or the inspector, the more we yearned for a real solution. Especially for our non‐technical clients who don’t know or understand how to use firebug or the inspector developer tool and therefore relied on us to make simple content changes (which defeats the purpose of a web content management system in the first place).

So after completing a few of these web design projects, we found ourselves literally scratching our heads wondering if we could create a better solution for disabling the page theme so users can access the page content blocks.

Challenges

Self-Install Sitefinity Modules and Page Events Were Not an Option

Our most important requirement for this tool was that it needed to be unobtrusive, but also needed to be readily available somewhere sensible in the page editor. Our first attempt at automating the placement of this new button into the page editor’s toolbar resulted in one line of code that needs to be added to the current template’s master page code‐behind. We wanted to take this a step further and also attempted to hook into the IPagePreRenderCompleteEvent event via the Sitefinity EventHub, but found the event was not firing when a page is placed into design mode.

In short, we met the following challenges:

  • A self‐install Sitefinity module is not possible since there is currently no way to intercept a page edit request via a traditional page pre‐render event.
  • Since we’re currently unable to hook into a page event, we’re left with adding code to a page theme master page code‐behind.

Therefore, we only had one viable solution.

disabled-theme

Solution

A Simple Toggle Button for Disabling Page Themes from within the Page Editor

To solve this problem, we imagined a simple toggle button that would allow users to turn the page theme on or off from within the content editor.

After investigating the possibility of querying the Sitefinity API for a page’s theme, we identified three basic requirements to help us succeed:

  1. Detect when a page is placed into design mode.
  2. Detect the current page theme path.
  3. Inject a button into the page editor’s toolbar to assist with toggling the page theme.

Several lines of ASP.NET, C# and JavaScript code later, we created and implemented a custom solution to our theme problem, which is accomplished in four steps of code:

  1. Get the current page theme name.
  2. Using the theme name, cross reference the appearance configuration to get the theme path.
  3. Using the theme path, construct a few lines of jQuery to respond to a button or anchor.
  4. Finally, register the jQuery code startup script.

To initialize the toggle button when a page is in design mode, we simply add a few lines of code to the page template master page code‐behind. All you have to do is download this sample code, merge it into your existing Sitefinity project, and rebuild it. Then update your existing master pages to add the following code to the code‐behind file:

   public partial class Master : System.Web.UI.MasterPage
   {
       protected void Page_PreRender(object sender, EventArgs e)
       {
           if (this.IsDesignMode() && !this.IsPreviewMode())
           {
               RWCC.Sitefinity.Utilities.AddTogglePageThemeScript(this);
           }
       }
   }

Please let us know how this turns out for you in the comments below.

[Note: Sitefinity has come out with a number of new updates since we posted this blog post, so if you have any issues implementing the custom code, or need any help with Sitefinity, we're here for you. Let's Talk.]

Chris Aybar

Chris Aybar

Chief Technology Officer

In addition to serving as Roger West’s CTO, Chris is the agency’s secret weapon when it comes to implementing custom-coded solutions, open-source content management systems, or any other technical challenge our clients face. He loves using technology to help people and finding ways to make the seemingly impossible happen.