Positioning HtmlWidgets in Header zone

Topics: Writing themes
Aug 2, 2011 at 3:49 PM
Edited Aug 2, 2011 at 3:50 PM

Hello Guys

I'm new to Orchard, and trying to implement new theme from set of PSD files, certain areas of web site needs to be editable by editors, therefore I'm trying to implement them as HtmlWidgets.

In one particular case I need to place 2 editable html areas in "Header" zone.

So far is good, I can add 2 HtmlWidgets to my header zone, but then I need some way to position them correctly (and I have branding from ThemeMachine in that Header zone as well, likely I can position it anyway I want using CSS, because I can control its CSS class)

But it seems I can't do this with HtmlWidgets, both HtmlWidgets have abosultely the same CSS classes, and I cant give them different styles.

See this URL for placing I'm trying to achieve - http://www.image-share.com/ipng-824-51.html.

What is usually is workaround for this?

Any help will be appreciated. Thanks!

Aug 2, 2011 at 10:04 PM

You should try the Vandelay.Classy module, which enables per widget css classes.

Aug 3, 2011 at 8:17 AM


Aug 3, 2011 at 9:00 AM

Can I use this module to add custom css class to menu items?

I added this as part to Menu Item ContentType, but I don't see way to specify this CSS class when editing menu items?

I need to put some different icons in each menu item, and wanted to use custom css classes for each menu item.

Aug 3, 2011 at 12:00 PM

I also tried to add this Custom CSS part to Page content type, and I see textbox to enter CSS classes for each page, but it doesnt seem to be adding to HTML created for page content? Am I doing something wrong?

Aug 4, 2011 at 12:50 AM

Yes, that is a known issue that I will fix in the next release, hopefully. The module has been created mainly for widgets and has not been tested with other content types. I'm suspecting that the templates for these contents may have to be overridden: the module relies on templates doing the right thing to render attributes in a standard way but not all modules do that properly.

Aug 4, 2011 at 3:20 PM

Thanks for reply. Good to know it is going to be fixed. I think this would be wonderful feature. I also tried today to add this as part to Layer content item - and it doesnt work either (but maybe it is expected, probably layer do not have HTML representation ? )

Anyway, can you please help me.

What is going to be suggested way to add custom CSS classes to BODY class for different pages. I would like to show main page content in different style for Homepage and other pages.

eg. on most of the pages - page content should be rendered in nice styled box, but Homepage have different requirements, and page content there should be shown in different way.

so if I could assign different CSS class to BODY tag or event maybe article tag with page content - that would solve my problem.

Thanks for your help.

Aug 4, 2011 at 7:45 PM

Well, actually after some investigation, I realized that it is already fixed. The problem was, as I suspected, a template being built a little too rigidly. It's bad as it's the default tempolate that ships with Orchard, but the good news is that it is very easily fixed. See this thread for an override template that you can use that will fix the problem now: http://orchard.codeplex.com/discussions/259938

Adding classes to BODY is not something I had considered but I suppose I could add this in. The problem would be, again, that the default document.cshtml (which is where body lives) dooes not have an extensibility point on body. One thing I could do is put the class on the html tag. Would that work?

Aug 5, 2011 at 2:26 AM

Thanks for the link, I will try it.

And yes, and think adding class to HTML will also work, since I could use it to override CSS styles of child elements

Is it something we can fix as well by overriding template in theme?

Aug 5, 2011 at 7:37 AM

Well, no, that feature never was in, it would have to be added.