Sitefinity allows you to add extra link and meta tags to your templates and pages. By going to the properties section of a template or page you can add extra link or meta tags to a template or page, whichever you are working on. By adding these extra tags to a page or template, you are able to add additional styles or overwrite styles already defined. These tags are added after any tag that is added through the master page or through the default adding of all stylesheets for a specified theme, an ASP.Net feature. This makes it useful when you would like to overwrite a css declaration.
While working on a site one day, I discovered that when adding stylesheets to a template through the admin section, the styles where not appearing on a page when in edit mode. After digging around in the code I found that the link tags for the template where not being added in. In the Sitefinity admin folder, there is a page called EditPage.aspx. This page is the page that is used when in edit mode for a page or template. The page is inheriting from the EditPage class found in the Telerik.Cms.Web namespace. Looking at the code in the CreateChildControls method, I found my solution. Here is the code I am referring to:
| |
| if (base.CmsPage.Template != null) |
| foreach (IHeaderControl header in base.CmsPage.Template.HeaderControls) |
| if (header is HtmlMeta) |
| this.Header.Controls.Add(header.LoadControl()); |
| |
In the first line, it is checking to see if there is a template for the given item. As I mentioned before, this class is used for editing the pages and templates. So this check is necessary as a template will not have a template, only pages will have a template. If the template exists then it gets a reference to all HeaderControls. This control collection holds all of the HtmlMeta and HtmlLink controls. Here we can see that it is only adding those controls which are of the HtmlMeta control type. What we need to do is modify this code to add only the HtmlLink controls as the meta tags/control are not needed when editing a page.
| |
| if (base.CmsPage.Template != null) |
| foreach (IHeaderControl header in base.CmsPage.Template.HeaderControls) |
| if (header is HtmlLink) |
| this.Header.Controls.Add(header.LoadControl()); |
| |
After making this change I noticed that if I change the template, which occurs only when editing a page, that the page was not re-loading with the correct stylesheets. This is because the above code is only adding in the HtmlLink controls that are assigned to the template of the saved page. When you make a change to a page, it is making the changes to the "Staged" page. Then when you save the page, and publish if workflow is turned on, then the "Staged" page becomes the live page. So what we want to do is add the "Staged" templates HtmlLink controls. This way if you change the template, you will load in the correct HtmlLink controls. Here is the finished code with a little extra checking added in:
| |
| if (base.CmsPage != null) |
| { |
| if ((base.CmsPage.Staged != null) && (base.CmsPage.Staged.Parent is ICmsPage)) |
| { |
| foreach (IHeaderControl header in base.CmsPage.Staged.Template.HeaderControls) |
| { |
| Control headerControl = header.LoadControl(); |
| if (headerControl is HtmlMeta) |
| continue; |
| this.Header.Controls.Add(headerControl); |
| } |
| } |
| } |
| |
Attached is the modified EditPage.aspx file and the code-behind file. All you need to do is to extract the two files into your Sitefinity/Admin folder.
EditPage.zip