Problem using dynamic templates + editable regions

[JoeT]

I am designing a new website using a Frontpage 2003 dynamic template to
control the main header and side menu. The idea is that these elements will
be common to all pages. I have also set editable regions in the dynamic
template to allow the respective page contents to vary, whilst preserving the
common header and side menu features. Page elements are also formated using a
CSS, which includes a format specific to the side menu links themselves.

What I want to do is control the side menu format so that the
hyperlink/format/colour of that page menu item is changed when that page is
active/open. Since this requires a class specification in the respective
<a></a> link command on that page only, which is not in an editable region, I
can't seem to get this functionality (without detaching the template from
that page, or making the side menu itself an editable region which almost
defeats the object of using the template in the first place).

Is tere any way to page/dynamic template/CSS links, but vary the class
specification on only one side menu element, to highlight the current page
location in the website.

Hope I have descibed that properly and any help would be very much
appreciated.

Thanks. Joe.

 

[Murray]

Here's one way to do this:

ON THE TEMPLATE PAGE
1. Give each button in the menu a unique ID, e.g.,

<a href="home.html" id="button1">HOME</a> | <a href="products.html"
id="button2">Products</a> | <a....

2. Add a small embedded stylesheet into an editable region in the head of
the page, e.g.,

<!-- #BeginEditable "head" -->
<style type="text/css">
<!--
#buttonX { downstyles; cursor:default; }
-->
<!-- #EndEditable -->

(Note - since you have added this to the editable region of the template, it
will not be propagated to existing child pages, but it will be added to NEW
child pages. You would have to initially add this manually to any existing
child pages)

ON EACH CHILD PAGE
* Manually edit the stylesheet in the editable region (see note above) to
change the button style to correspond to the page's specific button, i.e.,
page 1 would be edited to #button1, page 2 would be edited to #button2, etc.

(Note that I have also added a cursor:default to the downstyle rule to make
that downstate style not show a pointer)

Would that work for you?

 

[Stefan B Rusynko]

You can apply a custom editable css to each page if you add it in an editable region in your DWT in the HEAD section as

<link rel="stylesheet" type="text/css" href="yourstd.css">
<!-- #BeginEditable "pagestyles" -->
<style type="text/css"><!--
any embedded editable styles here
// --> </style>
<link rel="stylesheet" type="text/css" href="yourunique.css">
<!-- #EndEditable -->

The embedded one would override your external ones, and your unique one would override the std one based on cascading rules





| I am designing a new website using a Frontpage 2003 dynamic template to
| control the main header and side menu. The idea is that these elements will
| be common to all pages. I have also set editable regions in the dynamic
| template to allow the respective page contents to vary, whilst preserving the
| common header and side menu features. Page elements are also formated using a
| CSS, which includes a format specific to the side menu links themselves.
|
| What I want to do is control the side menu format so that the
| hyperlink/format/colour of that page menu item is changed when that page is
| active/open. Since this requires a class specification in the respective
| <a></a> link command on that page only, which is not in an editable region, I
| can't seem to get this functionality (without detaching the template from
| that page, or making the side menu itself an editable region which almost
| defeats the object of using the template in the first place).
|
| Is tere any way to page/dynamic template/CSS links, but vary the class
| specification on only one side menu element, to highlight the current page
| location in the website.
|
| Hope I have descibed that properly and any help would be very much
| appreciated.
|
| Thanks. Joe.
|

 

[JoeT]

That worked great guys. Thank you.

Here's one way to do this:

ON THE TEMPLATE PAGE
1. Give each button in the menu a unique ID, e.g.,

<a href="home.html" id="button1">HOME</a> | <a href="products.html"
id="button2">Products</a> | <a....

2. Add a small embedded stylesheet into an editable region in the head of
the page, e.g.,

<!-- #BeginEditable "head" -->
<style type="text/css">
<!--
#buttonX { downstyles; cursor:default; }
-->
<!-- #EndEditable -->

(Note - since you have added this to the editable region of the template, it
will not be propagated to existing child pages, but it will be added to NEW
child pages. You would have to initially add this manually to any existing
child pages)

ON EACH CHILD PAGE
* Manually edit the stylesheet in the editable region (see note above) to
change the button style to correspond to the page's specific button, i.e.,
page 1 would be edited to #button1, page 2 would be edited to #button2, etc.

(Note that I have also added a cursor:default to the downstyle rule to make
that downstate style not show a pointer)

Would that work for you?

 

[Murray]

You're welcome!

--
Murray

That worked great guys. Thank you.