Highlight "current" page in CSS Dreamweaver TEMPLATE

I have created 2 navigation bars (in my header) using an unordered list styled with CSS in a Dreamweaver Template that I created. Here is that template (in the template- the "Beads" link is styled as the current page): http://www.bfranklincrafts.com/Templates/MainTemplateM.dwt
I don't want the navbars to be editable in the pages that will be created from this template, so I was NOT planning on putting the navbars in editable regions. But now I'm realizing that if I don't put the navbars in editable regions, I won't be able to go in each link in my navbars to put the "current" style for each page.
The idea of the template is wonderful because it allows us to create one template and from that template we can make changes that would be past down to all the pages that were created using this template. But if I have to put the navbars in editable regions, it means that if I have to make changes to the navbars, I'll have to go to each individual page to make those changes.
I really want to show the "current" page that visitors are on, can anyone help!!!
Liolee

Hi,
sorry to bring up an old post but I am having issues with this myself and hope you can help?
I have coded my site as per your example but still no luck.
It is an .asp site. and my menu looks like this:
<ul id="nav">
    <li><a id="home" href="http://www.ampso.co.uk/index.asp"><img src="/images/nav1_gray.jpg" width="84" data-srcover="/images/nav1_full.jpg"></a></li>
    <li><a id="tech" href="http://www.ampso.co.uk/page/88/Technical.asp#.USOIoqWduS0"><img src="/images/nav4_gray.jpg" width="102" data-srcover="/images/nav4_full.jpg" class="wrap_right"></a></li>
    <li><a id="construction" href="http://www.ampso.co.uk/page/89/Construction.asp#.USOQLqWduS0"><img src="/images/nav5_gray.jpg" width="170" data-srcover="/images/nav5_full.jpg" class="wrap_right"></a></li>
    <li><a id="medical" href="http://www.ampso.co.uk/page/87/Medical.asp#.USOUeaWduS0"><img src="/images/nav3_gray.jpg" width="88" data-srcover="/images/nav3_full.jpg" class="wrap_right"></a></li>
    <li><a id="media" href="http://www.ampso.co.uk/page/90/Media.asp#.USOWQKWduS0"><img src="/images/nav6_gray.jpg" width="88" data-srcover="/images/nav6_full.jpg" class="wrap_right"></a></li>
    <li><a id="logistics" href="http://www.ampso.co.uk/page/91/Logistics.asp#.USOXdqWduS0"><img src="/images/nav7_gray.jpg" width="100" data-srcover="/images/nav7_full.jpg" class="wrap_right"></a></li>
    <li><a id="allsectors" href="http://www.paycoservices.co.uk/page/86/All-Sectors.htm"><img src="/images/nav2_gray.jpg" width="120" data-srcover="/images/nav2_full.jpg" class="wrap_right"></li>
    <li><a id="contact" href="http://www.ampso.co.uk/page/205/Welcome-to-Payco.asp#.USObtaWduS0"><img src="/images/nav9_gray.jpg" width="120" data-srcover="/images/nav9_full.jpg" class="wrap_right"></a></li>
</ul>
Now the issue arises with adding the code to the pages themselves. For example, if I go to the 'tech' page. I have no editable regions like I would with a html template (even though my main menu is in a top menu template which applies to each page) so I'm not sure exactly where to put the css code.
Currently the top section of my 'tech' page looks like this:
<%
Bodystyle = "style='background:url(/images/bg-further-technical.jpg) center 0px no-repeat;'"
%>

<div id="further-banner" style="background:url(/images/technical-icon.png) 811px 9px no-repeat; ">
<h1>Payco Technical <span>It's your industry so why not do it your way?</span></h1>
<p><b>You are here:</b>
<a href="/index.asp">Home</a> /
<a href='Payco-Technical.asp'>Payco Technical</a> /
</p>
</div>
Now do I paste the css code into here? Or would it help if you saw my whole 'tech' page so you can see the rest?
Any help would be greatly appreciated.
Thanks

Similar Messages

Highlighting Current Page with CSS

This morning I post my first Dreamweaver/CSS site. It is for
a DVD I produced about infant massage. www.BabyBabyOhBaby.com.
What I'd like to do is highlight the current page in the
navigation bar using either a border or color change. I've found
some sites like
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
but, sorry to say, I'm a beginner at both Dreamweaver & CSS and
I can't quite follow the code.
Is there some way within Dreamweaver to accomplish the
highlighting in design view without writing the code? Or perhaps
someone has some very basic elementary CSS guidance?
Thanks for your time,
David

Oh, yeah. 8)
Get that....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"E Michael Brandt" <[email protected]> wrote
in message
news:[email protected]...
> <informative but also self-serving>
>
> Really we have made this much much easier. divaGPS
creates you-are-here"
> menu highlighting and is easy to add to any number of
pages at once - even
> Templates' Child pages. It is a commercial DW Extension
that will save
> you lots of time and effort.
>
>
http://divahtml.com/products/divaGPS/current_menu_location.php
>
> <informative but also self-serving />
>
> --
>
> E. Michael Brandt
>
> www.divaHTML.com
> divaGPS : you-are-here menu highlighting
> divaFAQ : FAQ pages with pizazz
>
> www.valleywebdesigns.com
> JustSo PictureWindow
> JustSo PhotoAlbum
>
> --
>
>
> Murray *ACE* wrote:
>> You need to know the downside to using layers as a
primary layout
>> device - open your page in Firefox (or any non-IE
browser) and bump the
>> text size up a tick or two. Ugh....
>>
>> Here's your navbar -
>>
>> <div id="navbar"><a
href="index.html">Home</a> | <a
>> href="about_dvd.html"> the DVD</a> | <a
href="preview.html">Preview</a> |
>> <a href="reviews.html">Reviews</a> |
<a href="infant_massge.html">Infant
>> Massage</a> | <a
href="contact_us.html">Contact Us</a> | <a
>>
href="shopping.html">Shopping</a></div>
>>
>> Change it to this -
>>
>> <div id="navbar"><a href="index.html"
id="button1">Home</a> | <a
>> href="about_dvd.html" id="button2"> the
DVD</a> | <a href="preview.html"
>> id="button3">Preview</a> | <a
href="reviews.html"
>> id="button4">Reviews</a> | <a
href="infant_massge.html"
>> id="button5">Infant Massage</a> | <a
href="contact_us.html"
>> id="button6">Contact Us</a> | <a
href="shopping.html"
>> id="button7">Shopping</a></div>
>>
>> Then on each page, embed a little stylesheet in the
head by changing
>> this -
>>
>> </head>
>>
>> to this -
>>
>> <style type="text/css">
>> a#buttonX { your highlight styles }
>> </style>
>>
>> and just change the "X" to whatever number button
you want to highlight.
>>
>> You can do this in Design view, but it's too
tedious.
>>

CSS - manually highlight current page link?

In the sidebar navigation on this page I want to highlight the current page link with a CSS class. I wrote a class called "current" and applied it to the link. But nothing changes. I've used this on other sites, but something is tripping me up this time. I'm obviously missing something simple.
Here's the page: http://www.jesseyoung.com/gill/practice_areas/small_business/exceptions_to_limited_liabili ty.html
Suggestions?
-Jesse

function(){return A.apply(null,[this].concat($A(arguments)))}
In the sidebar navigation on this page I want to highlight the current page link with a CSS class. I wrote a class called "current" and applied it to the link.
Are you creating this Current Page marker manually?
You're using Pop Menu Magic 2 from Project Seven which already has an excellent in-built feature for Automatic and Advanced Current Page "you are here" marking.
Click the two boxes adjacent "Current Marking" in the PMM2 interface and the job is done. The PMM2 PDF User Guide explains the feature in detail.
You'll also get excellent support on questions related to Project Seven products at their newsgroup forums
http://www.projectseven.com/support/index.htm

Using body id= to highlight current page on nav bar

Hi all, using the method of giving the body tag an id to set
the current page on the nav bar, works all very well. however, this
is no good if you are working from a template as it would mean the
<body> being editable on each page (so most of the content
then)....am I right? or am I missing something blindingly obvious
here which will allow me to change the <body>...
many thanks - didn't really want to use the javascript method
you see!

> Hi all, using the method of giving the body tag an id to
set the current
> page
> on the nav bar, works all very well. however, this is no
good if you are
> working from a template as it would mean the
<body> being editable on each
> page
> (so most of the content then)....am I right? or am I
missing something
> blindingly obvious here which will allow me to change
the <body>...
ideally, you wouldn't actually link the item on the menu of
the page you are
currently on. This is a usability/accessibility thing. If you
do that, then
you can simply style non-linked items on the menu differently
to highlight
that page.
That said, it's often not a practical solution if you are
using SSIs to load
the menu.
In that case, you could just add the Class to a wrapper DIV,
or to the menu
itself:
<div id="myMenu" class="contactPage">
<div id="myMenu" class="aboutPage">
<div id="myMenu" class="productsPage">
etc.
OR, alternatively, give each meny item it's own class and
then over-ride
that one particular class style in the HEAD of each
individual page. That
said, I'm not sure how well the latter would work with DW
templates.
-Darrel

Can't add spry widget to page created from dreamweaver template

Please help! I have created a template in Dreamweaver and
from that template I have created an html page. I want to add
different tabbed and/or accordion spry widgets to multiple pages
however I keep getting an error when I try to add a widget to an
editable region. I can add the widgets to the dwt file, but I do
not want the same widget on all pages created from that template.
Please advise!
Thanks
cycleguy

If that's all that's on the child page you are in trouble.
Anyhow, it appears to me that the template has not been
properly created
since I do not also see an editable region around the
<title> tag in your
code. Please read my previous post and follow the
instructions.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"cycleguy" <[email protected]> wrote in
message
news:fu01pk$s7k$[email protected]..
> Thank you for your reply.
> I started with one of the built-in templates offered in
Dreamweaver then
> added
> additional div's and formatting then saved it as a dwt
file and created my
> html
> page from that template. I did not start the page from
scratch. Below is
> my
> source code from the child page.
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
> "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
> <html xmlns="
http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
> <title>Untitled Document</title>
> <style type="text/css">
> <!--
> body {
>

Spry Menu - highlight current page in menu

If the current page is "aboutus.html" for example, can I configure Spry Menu to apply a different color or css class to the "About Us" link in the menu?
Thank you.

I added a new class with different color in CSS and refer that class in my html. I don't think the function is build in. Something like:
<a class="selectadded" href="/contactus.html">Contact Us</a>

Highlighting current page on Tab control

Hi!,
I am using tab control with 7 pages. The page names are all in the same colour. Is there any way in which the colour for the name of the current page can be made different from the rest?
If your answer involves property nodes (or more advanced techniques) please be descriptive as I am beginner.
Also, which is the best book for inside stuff on property nodes?
I am using LV-PDS 6.1
Best wishes and thanks,
Gurdas
[email protected]
Gurdas Singh
PhD. Candidate | Civil Engineering | NCSU.edu

> Is it possible to assign the same keyboard key (to all buttons) such
> that pressing it will do the job of clicking the current active
> button? I would prefer this key to be the 'space bar'.
>
> The application allows only one hand to be free. The other hand will
> be used to place test component and rotate it manually below the
> sensor. Thus, such a feature makes the user's task very easy. He just
> keeps clicking the space bar until the vi ends.
>
It isn't possible to assign a key to more than one control, since then
it would be pretty unclear which control should out-of-the-blue receive
the key. It is possible to catch key events and perform and action
based upon the key press. Another option is to set
the key focus to the
next logical button in your progression. If the focus is set to a
button, then the space bar, enter key, etc all work.
Since you are asking for comments, the UI you describe sounds a bit odd
to me. A sequence of buttons that the user is required to click in a
given order? You might want to compare this to an indicator showing the
stage and current results, and one more button that says Next. Tie the
key navigation shortcut to the single button, and each button press
moves to the next stage. You might want to add a Cancel or Stop button
if there is ever any need to break out of the sequence. Finally, this
is pretty close to a wizard that allows the user to go both directions.
If it makes sense to reverse and redo a step, add that button too and
you have a very standard UI.
To build a wizard, use a tab control with a page for each stage. Hide
the tabs, and modify the pages by adding or subtracting on the value.
Greg McKaskle

Is there a way to make an HTML or CSS Dreamweaver template (not a website template)?

This might be confusing. I'm not looking for a way to create a website template but a layout/DocType template that has an HTML skeleton in place. The reason I'm asking is that I do a lot of email designs in Dreamweaver and I want to get a template in place but all I've found are these time-consuming website template tutorials that don't serve my needs.
What I want is to be able to create something like the DW's default DocType templates that have the initial <html><head></head><body></body></html> etc.... because I can then just start adding in content and change the HTML/CSS attributes (emails require a lot of inline css) as needed.
So far, I've been using an HTML document that I'd like to make into a template but sometimes I end up saving over it and then have to recreate it...which gets old real fast. This is why having an initial template would eliminate the worry of saving over my makeshift HTML template. Any insight or advice would be greatly appreciated!
Thanks for the help!

Snippets is a good idea. But you can also do this with a template. Each time you use FILE | New > Page from Template, as you would to create a new child page, you have the option to enable or disable an option called "Update page when template changes". If that option is DISABLED (i.e., unchecked), then the child page will be created but with NO TEMPLATE MARKUP (i.e., no editable/non-editable regions)! Seems that's exactly what you want, no?

Current page indicator w/ DWCS5 templates and Spry

Tried making an id of durrent state, added the rule to spry.css, and did the editable atrribute for the nav. Put in current, and nothing happened on the page I wanted the current ling highlighted.
Also saw info. about the sprydomutilities, but I need more info on that if that.
Tried defining a body and link class for each menu item. Grouped all of them on stylesheet. Again, did the editable atrribute feature, nad still nothing.

Have a look here http://forums.adobe.com/thread/837560?tstart=0
Gramps

Disabling the current page link?

I have a nav bar. I want the current link (whatever page you
are on) to be disabled and to be "pushed in" (my active link
color). Is there anyway to do this with ONE css page or template? I
could manually change each page but I would have to edit all the
pages if I change it again.

> THat didn't bother me, but it
> wouldn't let me change it in other pages.
Are you using MODIFY | Template Properties to change it?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"firmana" <[email protected]> wrote in
message
news:egnvsd$j8e$[email protected]..
>
http://www.hicksdesign.co.uk/journal/highlighting-current-page-with-css
>
> Read #7 and see what the guy says. I tried making the
body tag editable
> (by
> Modify --> Templates --> make attribute ediatble),
but it makes me insert
> a new
> tag inside. WHen I tried it with the ID tag, it came out
with
> id="(@@Template@@)" or something like that. THat didn't
bother me, but it
> wouldn't let me change it in other pages.
>

Adobe dreamweaver templates

when you download an adobe template you get the Design files which is where you find the PSD files
You also get the publish folder which is where you find your images, your css, spry assets, and you also get 3 templates
Ones of those templates is design from template. html
another template design html
and then another template which is the dreamweaver dwt template
which one of those three templates is the one that I have to use.
They confuse me .

A file that ends in the extension .dwt is a dreamweaver template.
You can make any .html page into a Dreamweaver template. Simply go to File>Save as Template…
Dreamweaver will create a /Templates folder where you have defined your website locally and place the template there.
Dreamweaver will not allow you to save a template without editable regions. The way you create an editable region in a dreamweaver template is to select an area in design view and select Insert>Template Objects>Editable Region. A window will come up asking you to name the region and you should give the area a good name that you'll understand.
Dreamweaver will insert code necessary to manage the template.
Dreamweaver will allow you to nest templates. Don't do that.
Dreamweaver templates allow you to create areas that are updated automatically on your website (like navigation, for instance) all throughout your website whenever you make a change to your template. The only other way to do this is to use server side includes. Dreamweaver templates make website creation, extension and management a snap.
So, when you design a page for a website, make that page into a template, define the areas you want to be able to change on every page as editable regions and let Dreamweaver do the heavy lifting whenever you need to change something site-wide.

Basics of CSS and Templates

Hello
I'm currently working with CSS and Templates and have
limited experience. Does anyone know of some good resources to get
me up to speed quickly?
Thanks.

CSS -
http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
Templates -
Here, or here -
http://www.dreamweavermx-templates.com
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"merffe" <[email protected]> wrote in
message
news:ecdesc$o33$[email protected]..
> Hello
> I'm currently working with CSS and Templates and have
limited experience.
> Does anyone know of some good resources to get me up to
speed quickly?
>
> Thanks.
>

Edit First line in dreamweaver templates

Hello,
When I create a page from a Dreamweaver template, a
dreamweaver comment similar to the one below will be inserted:

Each time I edit a page to add php code in the very first
line, it is removed with every template update and the source code
again starts with the dreamweaver comment. I need to add to all my
pages a php code in the very first line like this one:
<? $ob_start; $session_start; ?>
How can I do that without removing the code from my pages
with each template update. Another problem is that I can't insert a
placeholder in the very first line of a dreamweaver template. Above
that the first line is locked in dreamweaver, so that I can't
change it manually. Is there any workaround available?
Thanks,
Philip

> How can I do that without removing the code from my
pages with each
> template
> update. Another problem is that I can't insert a
placeholder in the very
> first
> line of a dreamweaver template. Above that the first
line is locked in
> dreamweaver, so that I can't change it manually. Is
there any workaround
> available?
Put the code ABOVE the <html> tag.
Which DW are you using? It looks like DW4 or earlier....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"flip3" <[email protected]> wrote in message
news:ec40u0$mr3$[email protected]..
> Hello,
>
> When I create a page from a Dreamweaver template, a
dreamweaver comment
> similar to the one below will be inserted:
>
> 
>
> Each time I edit a page to add php code in the very
first line, it is
> removed
> with every template update and the source code again
starts with the
> dreamweaver comment. I need to add to all my pages a php
code in the very
> first
> line like this one:
>
> <? $ob_start; $session_start; ?>
>
> How can I do that without removing the code from my
pages with each
> template
> update. Another problem is that I can't insert a
placeholder in the very
> first
> line of a dreamweaver template. Above that the first
line is locked in
> dreamweaver, so that I can't change it manually. Is
there any workaround
> available?
>
> Thanks,
>
> Philip
>

Using Spry Vertical Navigation with Templates-Need to indicate current page

Using Spry Vertical Navigation with the Dreamweaver templates. Using editable attributes etc., the current page mennu item does not seem to be changing. How do you indicate the. current page.

Persistent Page Indicator on Site Wide CSS Menus:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Template page and CSS dialog box.

Basically, this is an issue/bug for me. I had something working on Dreamweaver CS6 (CS3, 4 and 5 also... oh and Macromedia Dreamweaver 8 too) that doesn't work in Dreamweaver CC.
Please, consider that an answer like "it's the new way that it should run now" will not be accepted (and will NOT solve the problem).
Case : page based on a template. Somewhen I want to edit a css-selector: I highlight it and press the button "modify CSS rule" in the properties panel.
All I obtain is a dialog box "this is part of the code which is protected because it's based on a template". Then nada. Of course, the css-selector I want
to edit is located in a external file. And of course the part of the code that <link> to the files is protected as part of the template.
So I'm pretty ok with the message warning me. I had the same with DW CS6. BUT after warning me, DW CS6 (and previous) provides the panel. Which makes sense,
because the file itself is in no way protected as a part ot the template. And it seems pretty dumb not to be able to edit a css because you use a template-based page.
I just want DW CC to do the same as previous versions. Period.
Hope this will be patched soon. Cause it's a bug.

The thing which is going on is a bug.
So far, that's where we disagree. I don't see any evidence it's a bug since the behavior you are describing is not consistent with my experience. For example -
This child page -
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>

<link href="_css/child.css" rel="stylesheet" type="text/css">


</head>
<body>

<p id="foo">Content</p>

<p id="bar">More content</p>
</body>
</html>
Is linked to an external stylesheet just as you describe -
@charset "utf-8";
p {
          color: #0000FF;
#foo {
          background-color:#DDD;
#bar {
          font-style:italic;
In the child page, I click in the ID foo and I see it appear in the Targeted Rule field of the Property inspector. I click the button for Edit Rule, and change the font size to 18px. There is no prompt at all, even though the link to the external stylesheet is in a non-editable region of the template, and the stylesheet is changed according to my edit. So what am I doing wrong?

Highlight "current" page in CSS Dreamweaver TEMPLATE

Similar Messages

Maybe you are looking for