PDA

View Full Version : Make a editable repeating region


apollothedog
09-03-2010, 01:42 PM
Having one heck of a time with this. Let me break it down.

I have a nav bar. On this nav bar, when you click on a link. It will show the link(really a box) green. This calls for my code...class="active" on the page that your now on.

The only problem with that. Is that its hell to make this a DW template.

I have my nav bar as a repeating region. So that in the future I may change a link or redesign a button. But, this make my nav bar not editable on new pages. I have to be able to edit the <a> tags. I have to change them from...<a href="whatever"> to <a href="whatever" class="active">

Here is my code so far. I have make the <a> tags editable, but when i change the titles of the link from the master template, they will not update:(:(


<div class="main-box">
<div class="left-top-corner">
<div class="inner"><!-- TemplateBeginRepeat name="MenuRepeat" -->
<nav>
<ul>
<li class="first"><!-- TemplateBeginEditable name="Editlink1" --><a href="../index.html" class="active"><span><span>Reviews</span></span></a><!-- TemplateEndEditable --></li>
<li><!-- TemplateBeginEditable name="Editlink2" --><a href="../guides.html"><span><span>Guides</span></span></a><!-- TemplateEndEditable --></li>
<li><!-- TemplateBeginEditable name="Editlink3" --><a href="../New_Updates.html"><span><span>News &amp; Updates</span></span></a><!-- TemplateEndEditable --></li>
<li><!-- TemplateBeginEditable name="EditLink4" --><a href="#"><span><span>Downloads</span></span></a><!-- TemplateEndEditable --></li>
<li><!-- TemplateBeginEditable name="Editlink5" --><a href="#"><span><span>Store</span></span></a><!-- TemplateEndEditable --></li>
<li><!-- TemplateBeginEditable name="Editlink6" --><a href="#"><span><span>Forums</span></span></a><!-- TemplateEndEditable --></li>
<li class="last"><!-- TemplateBeginEditable name="Editlink7" --><a href="#"><span><span>Soapbox</span></span></a><!-- TemplateEndEditable --></li>
</ul>
</nav>
<!-- TemplateEndRepeat -->

apollothedog
09-03-2010, 02:20 PM
I am thinking that I will have to make a template for every choice in my nav bar.....bleh. There has to be a way around this. I must be using a bad method.

DWcourse
09-03-2010, 03:00 PM
It can be done using Dreamweaver's Editable Attribute function in the template.

The idea is to give give each page a unique ID in the BODY tag and also to give every link in the nav a seperate ID as well. Then write a style that highlights the nav link if its ID matches the page ID.:

For instance for the about page:

<body id="about">
....
<a id="aboutLink">About Us</a>CSS:

You'd create this style rule:

#about a#aboutLink {text-decoration: blink;}

Here's how to set up the Editable Attribute:


In the template (with the selection anywhere in an editable region) choose menu: Modify>Templates>Make Attribute Editable…
In the dialog make sure it says, "Choose which Attributes of the BODY should be editable."
In the dialog, if ID isn't available in the Attribute menu, click the button and add it.
Check the Make Attribute Editable box.
Give the attribute a label that's easy to remember (bodyID for example).
Choose Text from the Type menu
Type in a default value for the attribute (you'll be changing this on each page - I chose "page")
Click OK


To set the body tag ID on an individual page:


Open the page.
Select menu: Modify>Template Properties…
In the dialog, select the attribute you want to change (bodyID).
Type in a new value for the attribute.
Click OK.


This way you can have a different ID for every page and use the CSS method discussed to highlight the current page. BTW, you can also make image attributes editable (for instance, you can change the SRC of an image in a locked area on a page by page basis)

And remember to add the appropriate ID to each of the link in the nav.