Navigation bar highlighting does not work for Custom Links

I have noticed that the button highlight on the navigation bar doesn't work for Custom Links. I had a look at Scott Watermasyk's site and noticed that his "Dev Notes" and "Tech Talk" Custom Links have the same problem. It's a fairly obscure issue but I think that being able to see what item on the navigation bar is selected at a glance is useful. It would just be nice if this was applied consistently. The CSS for the table cell containing the currently selected tab is normally ".CommonSimpleTabStripSelectedTab" but remains ".CommonSimpleTabStripTab" for the Custom Link even when selected. Does anyone know how this can be fixed?

ok.. I've finally figured out how to overcome this so called "bug"... it's probably more of an "undocumented feature" rather than a bug!

For this example, let's say I want to add a custom page called "Testing" to my CS2.0 site and it is physically located at /test/test.aspx relative to the site root.

The first step is to setup your custom link in SiteUrls.config.  Add the following to the right sections:

<location name="test" path="/test/" exclude="true" />

<link name="test" resourceUrl="test" resourceName="test" roles="Everyone" />

<url name="test" location="test" path="test.aspx" />

Since I'm using resourceName here, I must also add it to the resources.xml file. You can skip this if you use text="Testing" instead of resourceName="test" in the <link> above.

So I add this to my resources.xml:

<resource name="test">Testing</resource>

So now I have my link added to main site navigation, but when I click on it and view the page, the menu item for the page doesn't remain highlighted.

What I have to do next is create a usercontrol and put it in Themes -> Masters.

I easiest way to do with is to edit HomeMaster.ascx file and save it as a new file.

The key to hightlighting the navigation menu item for the custom page is:

<CS:SelectedNavigation Selected = "home" runat="Server" id="Selectednavigation1" />

I just change the Selected attribute to "test" (since this is what i called it in SiteUrls.config)

Then in the actual custom page: test.aspx

I set it use the new master instead.

This is the content of my custom page test.aspx:

<%@ Page SmartNavigation="False" Language="C#" enableViewState="false" %>
<%@ Register TagPrefix="CS" Namespace="CommunityServer.Controls" Assembly="CommunityServer.Controls" %>
<CS:MPContainer runat="server" id="MPContainer" ThemeMasterFile = "TestMaster.ascx" >
    <CS:MPContent id="bcr" runat="server">
  <div class="CommonContentArea">
   <div class="CommonContent">
    <br/>
    This is a test!
   </div>
  </div>
 </CS:MPContent>
</CS:MPContainer>

And magically, everything works as I want it!

i followed this exactly and still can not get this to work...   perhaps i am not following thisin my head.

i i have created an article..  in the sytem page adn saved it the location is /content/memberprofiles.aspx.....

the name of it is memberprofile....

when i wrote the article i copied you code and placed it in the html section of the page..   .... i can browse to the page and i have a navigation button but it still does no highlight.......

could you possibly edit your post with using the above details  perhaps its because i am new with cs and i am not sure what goes where because all of your info ie   folder called test   file called test etc   doestnt show me what goes where    thank you in advance

ok followed to the letter this time and got it working your way..by creating a new folder called test in the root however   i am trying to get this to work by writing an article in the setting manage create article.. but it doesnt work this way    i have to create a new file all together manually   is there a way of fixing this

 

lyphtec, so nice! Thanks so much for posting this explanation, it was very helpful, works like a charm!

you probably are having the same problem I had. In the <CS:SelectedNavigation Selected = part you have to type what ever you named your URL in the <navigation> section of the siteurls.config (the name you have for your <link name)

Thanks mate.

Fantastic explanation.  It worked like a charm for me on the first try.  Thanks for taking the time to document this feature here!

First thanks to lyphtec for the excellent solution to a problem that was quite annoying. I added a 'Programs' page and created the link to it in SIteUrls.config as if it were a remote page. It worked. I had my Programs tab and it went to the page created with the 'Create Articles' feature. Everytime anyone clicked on it, however, the previously clicked tab showed the emphasis. I arrived at the solution by adapting lyphtec's approach.

Before modifying any of the CS files mentioned, good idea to make an unaltered copy so you can easily recover from mistakes.

1 - first create the new page using Control Panel > System Tools > Manage/Create Articles

2 - Note the name CS gives to the page.

3 - Modify SiteUrls.config by

• adding the following between the navigation section
• <link name="prog" resourceUrl="proghome" roles="Everyone" text="Programs" /> of course you may want to use labels more meaningful to your purpose e.g. <link name="contact" resourceUrl="contacthome" roles="Everyone" text="Contact Us" />
• adding the following between the ROOTS section
•  <url name="proghome" location="content" path="Programs.aspx" /> again match the values to your needs, e.g. url name = [resourceUrlNameYouGaveEarlier] and path=[FileNameCreatedinStep1.aspx]
• SAVE SiteUrls.config

4 - Open HomeMaster.aspx in ../Themes/default/Masters

5 - Save As ProgMaster.aspx (that's what I used, again your name could be something like ContactUsMaster.aspx)

6 - Open the file created in 5 above and change the SELECTED= in the following line to whatever linkname you used in the SiteUrls.config file:

<CS:SelectedNavigation Selected = "prog" runat="Server" id="Selectednavigation1" /> (this applies the label I actually used, that is, 'prog'  )

7 - Open the file ShowContent.aspx found in ../utility/ and change the ThemeMasterFile= to the name of the file created in 5 and modified in 6 above.

<CS:MPContainer runat="server" id="MPContainer" ThemeMasterFile = "ProgMaster.ascx" >

Happily, my new navigation tag, Programs, behaves like all the other navigation tags.

 

Everything works great until you add various pages. I added three pages, however in the navigation bar they do not all highlight. I tried giving a new name for each page, as well as using the same script within the same page, but changing the link name .

Those ideas do not work either. More help would be great.

Aisha 

Ok, it works. Thanks for all the help. For some reason I mixed the idea with creating the file as an article, with your idea. Thanks for all the help!

Aisha 

You are correct. The previous bits of advice all work under the following circumstances:

A - Add 1 navigation tab and link it to a page generated by 'Add Article'

B - Add many navigation tabs and link each to a separate custom page

Navigation tab highlighting breaks as soon as you link pages to the ones created by A or B above by using the 'Add Article' feature.

I believe this has to do with all 'Add Article' type pages appearing under the .../content/ArticlePageName.aspx They share the same Master file with the SELECTED=XXXXX entry.

We may have to wait until the next version

 

 

Doing it this way caused a really big problem with the other liks. For example if I click on blog, or forum, and then try to go to my custom pages, it looks for them in that folder blog, or forum. I think I will stick to the articles, and wait until the next version. Working pages are more important than highlighted links.

 

www.healthylivingpeel.ca

has 2 custom tabs:

PROGRAMS: links to a page created with Add Article which has links to other 'Add Article' created page. Note how the Nav bar behaves properly no matter where you go

ABOUT US: which links to a custom page, that page also has links to other Add Article type pages. Note the Nav bar behaviour when you select one of these. Not optimal, but ok

If you go to a forum or blog and back to one of these 2 tabs, all behaves as expected.

Thanks!  This worked perfectly on my site.

-Rich