Good afternoon,
After much futzing around, trial and error and finding the AppStylist insufficient for my needs I have finally made my menu work. I have made a horizontal menu with some nice gradient background images and even made duplicate images with arrows for submenus. So far so good.
My website uses this same menu for four sections. One section has a blue theme, one an orange theme and so on. I am trying, so far unsuccessfully, to change those background images dynamically as the user navigates to the different sections of the application.
Any suggestions?
i appreciate the assistance!
Hello,
Since you gave up using WebAppStylist, I guess you have ended with some custom CSS file, where you have defined your custom classes. Now you can create four such CSS files, each one with the respective colors/images, and include only one of them at a time depending on the section of your site. You will have same CSS Class names in all four files, just the class names will have different definitions.
Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4
Thanks for the idea, that worked.
For everyone out there that's trying something similar, i.e. not using the AppStylist and dynamically changing css styles with C#; this is how I got it to work:
- Added a generic menu to my test page and populated it with some test menu items.
- Created a style (for example, Menu1.css) sheet based off the ig_datamenu.css file (C:\Users\Public\Documents\Infragistics\NetAdvantage 2010.1\ASP.NET\StyleLibraries\Default\)
- Made any changes to the Menu1.css style sheet. It was easier to get one working as this file is very complex. It took some work with Firebug to figure out what goes where. Also, I highly recommend once you figure out what something does, comment the style sheet with your own notes so you can find it again. It was very easy to forget where stuff went.
- I thoroughly tested the sheet to make sure I had the look I wanted, then made another copy and called it Menu2. Don’t make changes yet. Change your style sheet link and make sure the new one is working before you start modifying it. Once you have that working you can work on dynamically changing the css files.
- I added a drop down (ddlColors) to my test page and added two items “Menu 1” and “Menu 2”. Then I added OnSelectedIndexChanged="ChangeColors" to the drop down.
- Then I added the following C# code:
public partial class _Default : System.Web.UI.Page
{
HtmlLink Menu1;
HtmlLink Menu2;
protected void Page_Load(object sender, EventArgs e)
// this is the way to add the link for the custom WebDataMenu style sheets
Menu1 = new HtmlLink();
Menu2 = new HtmlLink();
Menu1.Href = "Menu1.css";
Menu2.Href = "Menu2.css";
Menu1.Attributes.Add("rel", "stylesheet");
Menu1.Attributes.Add("type", "text/css");
Menu2.Attributes.Add("rel", "stylesheet");
Menu2.Attributes.Add("type", "text/css");
Header.Controls.Add(Menu1);
}
protected void ChangeColors(object sender, EventArgs e)
int iSelColor = Convert.ToInt16(ddlColors.SelectedValue);
switch (iSelColor)
case 0:
break;
case 1:
Header.Controls.Add(Menu2);
Now, when you change the drop down selection the menu will use the other style sheet. In my application this will be based off the user’s application settings as opposed to the drop down and the user will see different background-images for the same menu. I could have very easily changed the entire css to a completely different look.