Easy way to replace navigation menu text links with images?

Reply

chrisrsimons Posted: Wed, Apr 25 2007 3:13 PM

rated by 0 users

Is there an easy way in CS 2007 that I could replace text within each navigation menu item with an image of my choosing?  To further add onHover and onClick actions to the image would also be a plus.

Any suggestions??  

Thank you. 

Reply

Bill Bosacker replied on Wed, Apr 25 2007 6:13 PM

rated by 0 users

Hi Chris,

You can do all this in CS 2007, much easier than it was in previous versions, but it will take a bit of time to create a new theme.  I suggest copying an existing theme that you like to a new folder and then modifying it.  There are other posts about how to get started with this.  You'll need to know HTML, XML, and how to use the new controls on Chameleon (the new theme engine).  Almost all of the text for the site is in XML resource files, but you can also hard code text if you really want to.

Take it easy,
Bill

Reply

Nick replied on Thu, Apr 26 2007 7:41 AM

rated by 0 users

 Find the navigation controls, and add a <itemtemplate><img src="../imagehandler.ashx?text=<%#Eval("Text")%>" alt="<%#Eval("Text")%>" /></itemtemplate>

Reply

Tabs replied on Mon, Apr 30 2007 3:14 PM

rated by 0 users

Nick:

 Find the navigation controls, and add a <itemtemplate><img src="../imagehandler.ashx?text=<%#Eval("Text")%>" alt="<%#Eval("Text")%>" /></itemtemplate>

For those of us less fortunate (read: basically know bugger all about programming ) how does this work? Where is the code inserted and where do we place/ store the images to be used? Presumably in the common images directory?

My wild guess says text=<%#Eval("Text")%> refers to the xml text it should look for to replace with alt=<%#Eval("Text")%> (with alt being the path to the image file swap out with)? Or am I barking up the wrong tree?

I'm trying to use basic images for the navigation, nothing as extravagant as what the OP wants to do, but the principal is still the same.

Any help would be appreciated here. I'm itching to get a site theme knocked up....

Reply

Nick replied on Mon, Apr 30 2007 3:21 PM

rated by 0 users

O, if u wanted it like that:

<itemtemplate><img src="/themes/.../images/<%#Eval("Name")%>.gif" alt="<%#Eval("Text")%>" /></itemtemplate>

Reply

Tabs replied on Tue, May 1 2007 6:05 AM

rated by 0 users

Thanks, I'm still none the wiser though. You ever thought about writing crossword clues for a living?

Care to elaborate on the code above? What do the "Name" and "Text" items in the template relate to? 

Reply

Nick replied on Tue, May 1 2007 11:02 AM

rated by 0 users

name relates to the name attribute of the site url in the siteurls.config file.  Text represents the text that it puts out.  Usually name doesn't have spaces, or case sensitivity in it

Reply

Tabs replied on Tue, May 1 2007 1:24 PM

rated by 0 users

Tar mucka, will have a fiddle (with the code).

Reply

ldaknis replied on Mon, Jun 2 2008 4:02 PM

rated by 0 users

I have implemented this successfully, but even though the images appear, they are no longer links.

Any ideas?

Reply

Keith Beers replied on Sat, Nov 1 2008 1:29 PM

rated by 0 users

also with this you lose the "selected" aspect ....i want to be able to show a color difeffernce for the tabs .... so it should look like

<ul id="nav">

<li id="home" class="selected"><a href="">home</a></li>

<li id="forum"><a href="forurms">forums</a></li>

then set the text-indent to -10000 and a background image on the li.....how do i do this?

Reply

daveburke replied on Sun, Nov 2 2008 1:02 PM

rated by 0 users

Beer,

In my CS experiences, some times it's easier to rip out the component you want to change and insert your own.  For the menu in CS2007, you could build your own by simply substituting your spiffy graphical menu for the location the CS menu is located.  For CS2007 this would be in \themes\yourtheme\common\Master.master and look like this.

         <CSControl:NavigationList runat="server" Tag="div" CssClass="CommonTabBarInner">
                                    <HeaderTemplate><table cellspacing="0" cellpadding="0" border="0"><tr valign="middle"></HeaderTemplate>
                                    <ItemTemplate>
                                        <CSControl:CSLinkData runat="server" Tag="Td" CssClass="CommonSimpleTabStripSelectedTab" onmouseover="tabOver(this);" onmouseout="tabOut(this);" LinkTo="Link" Property="Text">
                                            <DisplayConditions><CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" /></DisplayConditions>
                                        </CSControl:CSLinkData>
                                        <CSControl:CSLinkData runat="server" Tag="Td" CssClass="CommonSimpleTabStripTab" onmouseover="tabOver(this);" onmouseout="tabOut(this);" LinkTo="Link" Property="Text">
                                            <DisplayConditions Operator="Not"><CSControl:CSLinkPropertyValueComparison runat="server" ComparisonProperty="IsSelected" Operator="IsSetOrTrue" /></DisplayConditions>
                                        </CSControl:CSLinkData>
                                    </ItemTemplate>
                                    <FooterTemplate></tr></table></FooterTemplate>
                                </CSControl:NavigationList>

Replace that with your menu and you should be a happy image menubar camper.

Regards,
Dave