How to Select a Single page with a CSS ID in Dreamweaver with a .DWT template.

August 24, 2011DavidDreamweaver0

Those of us familiar with Dreamweaver .DWT template files know their tremendous advantages, and their limitations.  One of the difficulties with .DWT templates is that once you’ve setup a website using .DWTs, it can be difficult to pick out a single page based on a CSS ID tag.  People often use an ID attached to a <body> tag in order to be able to select and manipulate an individual page for a particular purpose; but with .DWT”s, you can’t make different ID’s on the body tag.

The Solution is an Editable Header and <head> Tag.

While your <body> tag is likely consumed by the template, it’s very likely that your <head> tag has editable regions.  If you are adding any kind of meta tags, you will have an editable <head> tag.  So in order to take advantage of the <head> tag, simply add a <style> tag to the <head> area of the page in question, and you can then manipulate the CSS to your needs.

Let’s Look at An Example.

For example, let’s say you have an image with the ID “myImage” you want to display on every page on the website except for the “contact” page.   Go ahead and add the image to the .DWT so that the image code propagates to all of your pages.  Now in order to remove the image from the contact page, simply open up the contact page and add the following code within the header tag:

<style type="text/css">
#myImage {
display: none; }

What will happen is that the page will render and read the site’s main .css file.  The browser will then read the above style code that you put in the <head> tag, which will override the site’s global stylesheet.  In this manner, the image with the myImage tag will now be hidden on the contact page.


In order to apply  CSS code to  individual pages using Dreamweaver and .DWT templates, simply add a <style> tag with your overriding CSS code to the <head> tag of the page in question.

Related Posts

| More

SpiderOak Online Backup, Storage, Access, Sync, and Sharing

We are currently offering a free copy of our 16-page eBook, "How to Organize your Digital Photography Collection" to everyone who signs up for our free newsletter. This eBook will review how to organize your digital photos, discuss metadata, and give you an overview of software than can help you with your digital photography workflow. Sign up in the signup area, located in the right-side column of every page on this site, and read your copy now!