Design and CSS styles
Version 6.x > Design and CSS styles > Modifying the CMSListMenu View modes: 
User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 11/8/2011 12:12:32 AM
   
Modifying the CMSListMenu
I'd like to have some nice rounded tabs on my site and I've got it all working with a simple <ul><li><a><span> structure but in the CMSListMenu, there isn't a <span> tag generated for each <li> so the css and HTML don't work. I should also mention I'm using one image with three different images in it and all I do is change the background-position property to 0, -60 or 120 to get the standard, hover and selected effects.

Can I modify the CMSListMenu to add that tag? If so, how? I'm not against slicing my images up either but it still requires me to have a <span> tag or modify the HTML in the menu I believe. I'd like to keep the copy of Kentico as pure as possible and try not to modify any of the controls or code behind if possible.

User avatar
Kentico Support
Kentico Support
kentico_radekm - 11/9/2011 5:33:46 AM
   
RE:Modifying the CMSListMenu
Hello.

You can modify whole HTML output rendered by this web part. RenderedHTML property returns complete html code with whole structure, and you can use standard string operations (like String.Replace()) to change it in a required way.

You can find more info on http://devnet.kentico.com/docs/controls/cmslistmenu_configuration.htm

Best Regards,
Radek Macalik

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 11/11/2011 1:35:24 AM
   
RE:Modifying the CMSListMenu
Somewhat helpful although I'm not sure, where do I get access to modify this? Do I have to create my own class and override the base class?

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 11/11/2011 11:40:44 PM
   
RE:Modifying the CMSListMenu
Again, thanks for the link. I was able to modify the RenderedHTML by using the method below in my own custom created webpart. I haven't tested one thing though, when does the class="" get assigned? What I want to do is create my css class and have it assign like the other classes do but for my newly created <span> tag. Will I have to set that manually or will it be set automatically?


/// <summary>
/// OnLoad override (set span tag inside of a link for navigation)
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void Page_Load(object sender, EventArgs e)
{
this.menuElem.LoadDataAutomaticaly = false;
string menuHtml = this.menuElem.RenderedHTML;

// get the space between <a> and </a> to place a <span> tag in place.
string pattern = "<a[^>]*? href=\"(?<url>[^\"]+)\"[^>]*?>(?<text>.*?)</a>";
System.Text.RegularExpressions.Regex regexObj = new System.Text.RegularExpressions.Regex(pattern, System.Text.RegularExpressions.RegexOptions.IgnoreCase);

System.Text.RegularExpressions.Match match = System.Text.RegularExpressions.Regex.Match(menuHtml, pattern,
System.Text.RegularExpressions.RegexOptions.IgnoreCase | System.Text.RegularExpressions.RegexOptions.IgnorePatternWhitespace | System.Text.RegularExpressions.RegexOptions.Multiline);
string returnHtml = "";
while (match.Success)
{
string strMatch = match.Groups[2].ToString();
string newText = "<span>" + strMatch + "</span>";
returnHtml = menuHtml.Replace(">" + strMatch + "</", ">" + newText + "</");
menuHtml = returnHtml;
match = match.NextMatch();
}

this.menuElem.RenderedHTML = returnHtml;
}

User avatar
Member
Member
mfinchelstein-hincksdellcrest - 11/18/2011 2:34:49 PM
   
RE:Modifying the CMSListMenu
Hello kentico_radekm,

Sorry to post here, but I am not able to start a new thread.

Would you know about a malfunction wrt Preview function in CMS? There is no Preview of what the actual website would look like, it only shows some plain text.

Any ideas?

Thank you.

PS How does one get to post new threads here?

User avatar
Kentico Support
Kentico Support
kentico_radekm - 11/24/2011 9:21:03 AM
   
RE:Modifying the CMSListMenu
Hello.

I am not quite sure what exactly you mean by “Will I have to set that manually or will it be set automatically?” If you want to apply some class on your span element, it must be already written in RenderedHTML code. So, this string must contain something like <span class=”xxx”>. Then this xxx class must be defined somewhere, in site’s stylesheet or some external linked file.

As for malfunction with Preview function, I am not aware of it. Maybe it is related to some changes or customization you have done. Can you clarify more in details what is the problem, maybe provide some screenshots? Due to a nature of the problem, it will be maybe better to send me an e-mail to support@kentico.com.

If you want to open a new thread, you can use “Split thread” or “New thread” link buttons.

Best Regards,
Radek Macalik

User avatar
Kentico Legend
Kentico Legend
Brenden Kehren - 11/29/2011 9:48:59 AM
   
RE:Modifying the CMSListMenu
Sorry for the confusion what I ment by automatically is the UL, LI structure automatically assignes the CMSListMenuxxx classes to UL, LI, A tags and I thought it might do the same if the SPAN tag was in there but I realized I'd have to make modifications to my code to check to see if a link was selected or not and modify the <span class"xxx"> tag. I implemented some other CSS which allowed to not have to mess with that and it worked just fine.

Thanks again for the help.

User avatar
Kentico Support
Kentico Support
kentico_radekm - 12/6/2011 6:53:47 AM
   
RE:Modifying the CMSListMenu
Hello.

Thank you for your update. I am glad you have solved it.

Best Regards,
Radek Macalik