Including CSS in a Sitefinity User Control

When working with Sitefinity Intra-Site Modules, all your module’s logic, code, and markup is contained in User Controls. This allows you to inherit all the styles from the default Sitefinity backend theme.

However you might want to add additional styling to your admin controls. You can accomplish this easily by adding a custom stylesheet for admin controls and referencing them from the user controls. Simply add the following code to each control’s frontend ascx file.

Overriding ASP.NET Theme CSS Files with Conditional Comments

One of the biggest annoyances in ASP.NET is the way it adds CSS files to your <head> element of your pages. It insists on adding them to the end, offering you no way to add your own custom styles that override the theme unless you go down the line and add !important to each element.

This is especially detrimental if you’re trying to add IE-only stylesheets using conditional comments. Since the theme files are loaded after the IE stylesheet, all your custom styles will be overridden as if it was not present at all.

There are some hacks, from using the script manager to inject css (which doesn’t work because this doesn’t inject it into the <head> section) to a full fledged custom control that automates this for you.

I needed something quick and dirty, so I hacked a solution by overriding the Render method of the site’s Master Page and injecting an HTML Literal control with the IE conditional comments.

protected override void Render(HtmlTextWriter writer)
{
    // IE conditionals string css = @" <!--[if IE]> <link rel=""stylesheet"" type=""text/css"" href=""/css/ie.css"" /> <![endif]--> ";
    // add conditional text to head var ctrl = new Literal();
    ctrl.Text = css;
    Head1.Controls.Add(ctrl);
    base.Render(writer);
}

Apparently this is late enough in the page life-cycle to be added after the Theme files, and it works like a charm!

I thought this was addressed in 4.0, but I can’t seem to find anywhere to specify a custom location for the theme css files, nor any simple way to specify additional files afterwards. If there is a simple, built-in solution to this problem, please let me know in the comments!

Sitefinity: Keeping RadPanelBar Expanded

If you need to ensure that the RadPanelBar control (which I use for sidebar navigation) remains expanded, check out the RadPanelbar1_ItemDataBound method in the control located at /Sitefinity/UserControls/Navigation35/SitePanelBar.ascx.

This control checks the hideUrlForGroupPages, removing the link if set to true on your control. However, this doesn’t prevent the link from being active, collapsing the nodes when clicked. I need my menu to be fully expanded, so I modified the code using some newly discovered properties in the e (RadPanelEventArgs) parameter:

public void RadPanelbar1_ItemDataBound(object sender, RadPanelBarEventArgs e)
{
    if (!hideUrlForGroupPages) return;

    var node = e.Item.DataItem as CmsSiteMapNode;
    if (node == null || node.PageType != CmsPageType.Group) return;

    e.Item.NavigateUrl = "";
    e.Item.PreventCollapse = true;
    e.Item.Enabled = false;
}

Since the item is always rendered as a link, it’s important to disable it as well so that it doesn’t do anything when clicked. Additionally, since it still renders as a link, the pointer still turns into a cursor, and when you click the heading, that annoying dotted border still activates as if it’s a regular link. We can fix this with css:


.rpRootGroup .rpSlide a

{
    outline: none;
    cursor: default
}

Additionally, you might need to undo this change in lower levels of the css, but that depends on your application.

I don’t have an example (yet) as we haven’t published our site (yet), but hope to update this with a link soon. Hope this was helpful! As always, comments are welcome.