Different CSS depending on page - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 26-Sep-2011 00:00

Hi,

I'm working on a site with several categories (groups of pages). Depending on the current category, I'd like to apply a different style (for example, if you're on a page from category 1, apply "red" style to all elements, "green" for category 2, etc).

I'm wondering how to implement such a system elegantly in Sitefinity.

I thought of using themes, but since they're applied to templates and not to pages, that means I'd have loads of templates. I currently have 7 templates, and want 7 different color styles, that'd mean 49 templates. Sounds like maintenance hell, unless I'm missing something.

Basically, all I'd like to do is define the CSS class of the body, or of a parent div, for each page.

I could also call a specific CSS file for each page (by adding an html element in the page head, or by adding a CSS widget to the page), but this is a bit complex to set up, considering it'll have to be done on each and every page.

Last resort solution: hard code the logic in the master page, by retrieving the current category (if first category, then apply this CSS class...). But then it can't be configured from the backend anymore.

Any suggestions?

Thanks.

Posted by Community Admin on 26-Sep-2011 00:00

If I'm reading this right...I would probably do you hardcoded solution...it's not really hardcoded though, I'd say more "Dynamic" :)

1) Set the category as a class on body
2) In your CSS you then have access to style anything based off of that parent class

Now by can't be configured from the backend, do you mean that you can't CHOOSE which css file to attach? Would you need to choose an external file if the above solution added the category class?

You are right though that it needs to be done at a parent level (.master or template) in order to get cascaded to the children.

Steve

Posted by Community Admin on 27-Sep-2011 00:00

Hi Steve,

Thanks for your answer.

"Now by can't be configured from the backend, do you mean that you can't CHOOSE which css file to attach?"

Never mind what I said. I could change the CSS if I wanted to (although I put it in the project rather than in the backend), and yeah, I'd actually have a lot of flexibility. So it doesn't really matter.
If the client wants something different later on, then it'll just take a new build and deployment, which is fine.

For the record, this is my code in the MasterPage, which works fine (not sure if it's the best way to do it though):

protected void Page_Load(object sender, EventArgs e)

this.SetBodyClass();

/// <summary>

/// Sets a body CSS class depending on the current section.

/// </summary>

private void SetBodyClass()

SiteMapNode currentNode = SiteMapBase.GetCurrentProvider().CurrentNode;

SiteMapNode root = currentNode.RootNode;

if (currentNode == root)

return;

SiteMapNode section = currentNode;

while (section.ParentNode != root)

section = section.ParentNode;

Guid id = new Guid(section.Key);

PageNode page = PageManager.GetManager().GetPageNode(id);

string keywords = page.Page.Keywords;

if (string.IsNullOrWhiteSpace(keywords))

return;

string cssClass = !keywords.Contains(',') ?

keywords : keywords.Substring(0, keywords.IndexOf(','));

this.body.Attributes.Add("class", cssClass);

A little hack: I use the first keyword to define the wanted CSS class. My site is multilingual, so I can't use the Title, UrlName, or anything else. I *could* use the Guid (and prefix it, 'cause a CSS class can't start with a number), but that'd lead to dirty CSS class names.

This thread is closed