2 Replies Latest reply on Mar 5, 2010 6:47 PM by Robert Heist II

    Can I alter Library Items in different pages?


      Hello all,

      I have a strip of buttons in a table on the top of my website pages. I turned them into a Dreamweaver CS3 Library item to save time during editing.

      Now my client wants each page's button to be highlighted so they viewer knows what page they are on, much like a breadcrum. For instance, if I have buttons Home, About, News, and they are on the About page, that  button About should be highlighted.


      I am not sure if this can be done in the library since all the pages are linked to that library item. Can it be? Or do I have no undo the library item and just edit in each page. And if I do, do I just delete the About_off code and make it About_over? I guess I can figure that part out.


      Thanks for your help.

        • 1. Re: Can I alter Library Items in different pages?
          John Waller Adobe Community Professional & MVP

          In short, yes, to achieve a Current Page marker on your nav bar, you need a separate id or class on the button associated with the current page.


          Tricky to achieve with a Library Item since the Library item code is identical on every page, but it can be done with some tweaking.


          Can you post a link to your site so we can see the code?


          My preferred approach is to insert a commercial extension such as Pop Menu Magic 2 as a Server Side Include. Current page marking functionality is built in, automated and simple. Not everyone wants to pay for extensions like that so learning some code is mandatory to roll your own.

          • 2. Re: Can I alter Library Items in different pages?
            Robert Heist II Level 3

            John gave you the right idea.  Here is an example of the code you would need.  Create the following ids in your shared css file:


            #bdyIndex #index a {
            background-color:#55CBFB; // or whatever property you wish to have change to show it is the active page.
            #bdyNews #news a {
            #bdyContact #contact a {
            #bdyFaq #faq a {


            This creates "nested" styles or parent/child styles that only take affect when an anchor tag is within a tag with the right id and is in a body tag with the corresponding id.


            Next apply the #index, #news, #contact and #faq ids to each of the appropriate "buttons" in your library item.  I used the Spry Menu Bar, so these ids were applied to the li tags that built the menu.


            <li id="index">

            <li id="news">

            <li id="contact">

            <li id="faq">


            Finally you apply the #bdyIndex id to the body tag of the index page, the bdyNews to the body tag of the news page and so on for the contact and faq pages.  So on the index page it should look like this:


            <body id="bdyIndex" >


            On the news page it should look like this:


            <body id="bdyNews" >


            and so on:

            <body id="bdyContact" >

            <body id="bdyFaq" >


            Now to explain the logic.   Every page will have the identical library item, so all the buttons on every page will all have ids....BUT the only time the id on a particular button matters is when it is a child of the proper body id.  So the #index will only affect when it is nested under the #bdyIndex (thus the syntax defining #bdyIndex #index as a nested id).  The only time #news will take affect is when it is under the #bdyNews (which of course, is only when it is on the news page).


            I hope that helps. I have implemented the exact code in a template, so it will also work in a library item.