Change header picture based on menu option

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.

4/17/2011 1:05:53 PM

varoujs

Total Posts 3

View Posts

Change header picture based on menu option

Can the header picture be changed based on the menu option click?

4/18/2011 7:17:35 AM

Joe Audette

Total Posts 18439

View Posts

Re: Change header picture based on menu option

You could enable the use of different skins on different pages from site settings, then you could use different skins on different pages and have different images in the header of each skin.

else you would have to code something up in javascript to detect the url and change images by javscript based on the url, then you could do it using just one skin.

Hope it helps,

Joe

4/18/2011 10:20:40 AM

Joe Davis

Total Posts 2253

View Posts

Re: Change header picture based on menu option

Hi,

I think Joe may have forgotten that he added a very cool feature in 2.3.6.4 which allows you to set a CSS class on the BODY element of a page using the "Page Settings." For instance, If you had a div with a class of header in your layout.master, you could set the CSS Class on a page to header2 and then in your CSS put the following:

body.header2 div.header {background: url('imagename.png') no-repeat 0 0;}

Of course, there will be other CSS rules that will apply to your div but this method will allow you to easily change the header on any CMS pages.

Also, for this to work, the BODY element in your layout.master must look like this:

HTH,
Joe D.

4/18/2011 10:47:05 AM

Joe Audette

Total Posts 18439

View Posts

Re: Change header picture based on menu option

That's a brilliant solution Joe! I should have thought of that, the new custom class on the body makes a lot of things much easier.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.