Forums (Obsolete)


Member	Alex - 9/17/2010 2:39:59 AM How to add <span> tag into First menu item in Css list menu webpart? I have html code for menu like this <ul id="navigation"> <li><a href="#"><span>First Item</span></a> <ul> <li><a href="#">Second item1</a></li> <li><a href="#">Second item2</a></li> <li><a href="#">Second item3</a></li> </ul> </li> </ul> But I can`t find how to add <span> in Css list menu web part

Member

gavin.eggheaddesign - 9/17/2010 3:08:18 AM

RE:How to add tag into First menu item in Css list menu webpart?

Hi Alex

I would suggest duplicating the CSS list menu webpart then see if you can modify the code that builds the dynamic navigation. One of the Kentico guys will be more specific as to whether its possible, and which part of the code to focus on...

Just out of interest what are you trying to achieve? wondering if there is another solution possible?

Member

Alex - 9/17/2010 3:22:08 AM

RE:How to add tag into First menu item in Css list menu webpart?

I think about modification of web part code but maybe it is possible to solve it without modification

I have css code for menu and it used for design of First menu elements. I try to change css without using but can`t do it yet

Here is all css code for menu

/* navigation */
#navigation{
	float:right;
	margin:0 0 -9999px;
	padding:0;
	position:relative;
	border-bottom:5px solid #cf0072;
}
#navigation li{
	float:left;
	list-style:none;
	font:15px/50px Arial, Helvetica, sans-serif;
}

#navigation a{
	float:left;
	color:#fff;
	position:relative;
	text-decoration:none;
	z-index:2;
	margin:-5px 0 0;
	cursor:pointer;
	background:url(../images/header-area.gif) no-repeat 50% 5px;
}
#navigation span{
	float:left;
	height:50px;
	padding:5px 33px 0;
	position:relative;
}

#navigation .last span{padding-right:48px !important;}
#navigation .last a{background-position:100% 5px;}
#navigation li:hover a,
#navigation li.hover a,
#navigation a:hover,
#navigation .active a{
	padding-bottom:7px;
	margin-bottom:-7px;
	border-top:5px solid #cf0072;
	background:url(../images/arrow-navigation.gif) no-repeat 50% 50px;
}

#navigation li:hover span,
#navigation li.hover span,
#navigation a:hover span,
#navigation .active span{
	padding:0 32px;
	border:1px solid #000;
	border-width:0 1px;
	background:url(../images/navigation.gif) repeat-x;
}

#navigation:hover,
#navigation.hover{background:#cf0072;}
#navigation:hover ul,
#navigation.hover ul{display:block;}
#navigation ul{
	display:none;
	position:relative;
	background:#cf0072;
	overflow:hidden;
	margin:0 -999px 0 1px;
	padding:17px 0 0;
	width:156px;
	z-index:1;
	clear:both;
}
#navigation ul li{
	overflow:hidden;
	height:1%;
	vertical-align:top;
	padding:0 0 0 16px;
	float:none;
	margin:0 0 6px;
	font:12px/16px Arial, Helvetica, sans-serif;
}
#navigation ul a{
	float:left;
	padding:0 0 0 16px !important;
	height:auto;
	margin:0 !important;
	border:none !important;
	background:none !important;
}
#navigation ul a:hover{background:url(../images/bullet-navigation.gif) no-repeat 0 50% !important;}
#navigation li:hover .last span,
#navigation li.hover .last span,
#navigation .last:hover span{padding-right:47px !important;}

Member

gavin.eggheaddesign - 9/17/2010 7:23:29 AM

RE:How to add tag into First menu item in Css list menu webpart?

Thanks for the information Alex - just to make sure I understand, you want the first menu item to be styled separately from the others?

While I think setting a to surround the first menu item in the dynamic navigation will involve a custom code adding to the webpart, what you can do is set up specific class names to menu items within the CMSDesk - so what i am thinking is to give the first page, ie 'Home' a class name, allowing you to target it within the CSS.

to do this login to the CMSDesk, go to the page that is first in your navigation and then properties > menu > menu item design > menu item CSS class.

If you set this up and then modify you CSS referances to match it should pick up your styling.

Hope it helps.


Member	Alex - 9/17/2010 7:34:40 AM RE:How to add <span> tag into First menu item in Css list menu webpart? Thank for reply! You understand correctly! I know about this opportunity But I would still like to resolve the question with tag <span> where is the source code of the Css list menu web part and how to add <span> into it?


Kentico Support	kentico_jurajo - 9/23/2010 3:06:36 AM RE:How to add <span> tag into First menu item in Css list menu webpart? Hi, You will need to access the RenderedHTML property of the CSS List menu web part (e.g. in its code behind - \CMSWebParts\Navigation\cmslistmenu.ascx.cs) and modify this property according to your needs and then pass it to the output. Best regards, Juraj Ondrus


Member	atom.mtn-gmail - 6/3/2011 4:07:06 PM RE:How to add <span> tag into First menu item in Css list menu webpart? Hi, I changed RenderHTML property on OnContentLoaded but do not change anything Please get more tips Best regards, MTN


Kentico Consulting	kentico_borisp - 6/4/2011 3:33:44 AM RE:How to add <span> tag into First menu item in Css list menu webpart? Hello, Could you please go through the following thread? The mentioned fix might help you. Best regards, Boris Pocatko

Member

atom.mtn-gmail - 6/4/2011 2:45:09 PM

RE:How to add tag into First menu item in Css list menu webpart?

Hi,
Thanks for your Guide.

but when I set
LoadDataAutomaticaly = false;

My control do not rendered anything.

I write this


 public override void OnContentLoaded()
    {
 	 base.OnContentLoaded();

        var s = new StringWriter();
        s.WriteLine("{0}", "<strong>");
        s.WriteLine("{0}", "<strong>");
        s.WriteLine("{0}", this.menuElem.RenderedHTML);
        s.WriteLine("{0}", "</strong>");
        s.WriteLine("{0}", "</strong>");

  
        this.menuElem.RenderedHTML = s.ToString();
        this.menuElem.LoadDataAutomaticaly = false;

        SetupControl();
    }

Thanks again if help me

Kentico Developer

kentico_ivanat - 6/5/2011 4:43:44 AM

RE:How to add tag into First menu item in Css list menu webpart?

Hi,

Could you please try to move your code into OnPreRender event? At the end of the event you can insert for example following code and the content will not be rendered.


this.menuElem.LoadDataAutomaticaly = false;
this.menuElem.RenderedHTML = "";

You can modify property according to your needs.

Best regards,
Ivana Tomanickova

Member

atom.mtn-gmail - 6/6/2011 3:25:26 AM

RE:How to add tag into First menu item in Css list menu webpart?

Hi,

Yes that's correct

Now help me about this change in menuElem

CssMenuList generate this Html code


<ul id="menuElem">
		<li>
                      <a href="/Magazin.aspx">Magazin</a>
                </li>
</ul>

But I want change to this one


<ul id="menuElem">
		<li>
                      <a href="/Magazin.aspx">
                           <strong>
                                <strong>
                                     Magazin
                                </strong>
                           </strong>
                      </a>
                </li>
</ul>

thanks everybody that help me

Kentico Developer

kentico_helenag - 6/6/2011 6:07:53 AM

RE:How to add tag into First menu item in Css list menu webpart?

Hi,

you can replace some strings in the RenderedHtml string. You can find sample code here: Forum thread.

For example:

this.menuElem.RenderedHTML = this.menuElem.RenderedHTML.Replace("originalText", "newText");

The oficial MSDN documentation for the Replace function is here: MSDN documentation. You can also use regular expressions there.

Best regards,
Helena Grulichova


Member	atom.mtn-gmail - 6/8/2011 10:40:20 AM RE:How to add <span> tag into First menu item in Css list menu webpart? Hi, I'm very glad that I managed to fix my issue. and Thanks to everybody that help and guide me. Best regards. Mohammad Tayefeh Nafar

Certified Developer 8

smckone-mdbconsulting.co - 7/20/2011 11:23:15 AM

RE:How to add tag into First menu item in Css list menu webpart?

Hi, Would it be possible to publish the solution you used to fix your issue. I'm trying to insert a tag into the CMSListMenu web part so that my links render as:

<ul id="menuElem">
<li><a href="<link>" title="<title>">Menu Item Name</a></li>
</ul>

Kind Regards,
Simon McKone
MDB Consulting Ltd

Kentico Consulting

kentico_borisp - 7/22/2011 3:27:10 AM

RE:How to add tag into First menu item in Css list menu webpart?

Hello,

That is something which can be done by altering the RenderedHTML property as we mentioned earlier. You need to parse the output HTML and alter it according to your needs. The thread that provided Helena explains it nicely. Another one can be found here

Best regards,
Boris Pocatko