none
Help with adding an editable region in a DWT file

    Question

  • I'm very new at this so all help is appreciated.  I have a DWT template with about 8 pages attached to it.  I want to make each page have its own individual background image using the <body background> tag.  So I want this to be in an editable region so I can define it in each page.


    I tried adding an editable region to the DWT, and then it does update to each of the attached pages.  However, anytime I save the DWT and then update the attached pages, it erases the <body background> info tag that I added to each of the pages. 

    Here is the code of my DWT. I am looking to use "Region1" as the editable body tag. 

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    
    <!-- #BeginTemplate "master.dwt" -->
    
    <meta property="fb:app_id" content="370981509585131"/>
    <meta property="fb:admins" content="10100218701442679"/>
    <head profile="http://www.w3.org/2005/10/profile">
    <link rel="icon" 
          type="image/png" 
          href="favicon.png" />
           <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!-- #BeginEditable "doctitle" -->
    <title>Samik Mody &amp; Forum Patel - September 2, 2012</title>
    <meta content="Samik Mody Forum Patel wedding itasca westin garba" name="keywords" />
    <meta content="The Wedding Website for Samik Mody &amp; Forum Patel" name="description" />
    <!-- #EndEditable -->
    <link href="styles/style3.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    
    a:visited {
    	color: #0044BB;
    }
    a:hover {
    	color: #00FFFF;
    }
    </style>
    </head>
    <!-- #BeginEditable "Region1" -->
    
    <!-- #EndEditable -->
    
    <!-- Begin Container -->
    <div id="container">
    	<!-- Begin Page Content -->
    	<div id="page_content">
    	<img alt="" height="242" src="http://www.forumgoesmody.com/images/header2.jpg" width="630" />
    		<!-- Begin Sidebar -->
    		<div id="sidebar">
    			<ul>
    				<li><a href="default.html">Home</a></li>
    				<li><a href="ourstory.html">Our Story</a> </li>
    				<li><a href="gallery.html">Gallery</a></li>
    				<li><a href="events.html">Events</a></li>
    				<li><a href="hotel.html">Hotel Accomodations</a></li>
    				<li><a href="guestbook.html">Guest Book</a></li>
    				<li><a href="mailto:thecouple@forumgoesmody.com?subject=A%20Message%20from%20forumgoesmody.com">Contact Us</a> </li>
    			</ul>
    		</div>
    		<!-- End Sidebar -->
    		<!-- Begin Content -->
    			<div id="content">
    			<!-- #BeginEditable "content" -->
    		<div id="content0">
    			<h2>Welcome!</h2>
    			<p>Thanks for visiting our Wedding Website!<br />
    			<br />
    			Through this website, we hope you get to know us 
    			a little bit better and find the information you&#39;re looking for.&nbsp;
    			<br />
    			<br />
    			The Wedding's events will take place in Itasca, Illinois during 
    			Labor Day Weekend in 2012.<br />
    			<br />
    			We&#39;re looking forward to celebrating our big day with all of you!</p>
    			</div>
    			<!-- #EndEditable --></div>
    		<!-- End Content --></div>
    	<!-- End Page Content -->
    	<!-- Begin Footer -->	
    	<div id="footer">
    	<tbody xmlns="http://www.w3.org/1999/xhtml"><tr>
    						<td>
    						<div align="center">
    						<p align="center">
    <object type="application/x-shockwave-flash" width="160" height="16"
    					data="http://www.forumgoesmody.com/music/xspf_player_slim.swf?playlist_url=http://www.forumgoesmody.com/music/playlist.xspf&autoplay=true&autoload=true&repeat_playlist=true">
    					<param name="movie" 
    					value="/music/xspf_player_slim.swf?playlist_url=http://www.forumgoesmody.com/music/playlist.xspf&autoplay=true&autoload=true&repeat_playlist=true" />
    				</object><br />
    						www.forumgoesmody.com | Chicago, Illinois</p>
    						</div>
    						</td>
    					</tr>
    					<tr>
    
    						<td>
    						</td>
    
    					</tr>
    				</tbody></div></div>
    
    
    
    
    
    </body>
    <!-- #EndTemplate -->
    </html>
    


    Tuesday, January 31, 2012 7:33 PM

Answers

  • Move your page-local style section up into your editable region (where it should be anyway). In the markup above, you have this:

    <!-- #BeginEditable "doctitle" -->
    <title>Samik Mody &amp; Forum Patel - September 2, 2012</title>
    <meta content="Samik Mody Forum Patel wedding itasca westin garba" name="keywords" />
    <meta content="The Wedding Website for Samik Mody &amp; Forum Patel" name="description" />
    <!-- #EndEditable -->
    <link href="styles/style3.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

    a:visited {
        color: #0044BB;
    }
    a:hover {
        color: #00FFFF;
    }
    </style>
    </head>

    You want to wrap the style section (in bold above) in the editable region, like so:

    <!-- #BeginEditable "doctitle" -->
    <title>Samik Mody &amp; Forum Patel - September 2, 2012</title>
    <meta content="Samik Mody Forum Patel wedding itasca westin garba" name="keywords" />
    <meta content="The Wedding Website for Samik Mody &amp; Forum Patel" name="description" />
    <style type="text/css">

    a:visited {
        color: #0044BB;
    }
    a:hover {
        color: #00FFFF;
    }
    </style>

     <!-- #EndEditable -->
    <link href="styles/style3.css" rel="stylesheet" type="text/css" />

    </head>

    Now you can make changes in that section on each page that won't be overwritten when attached pages are updated. So, to change the background-image property on each page, you would  modify the body selector's attributes on each page, like so:

    <!-- #BeginEditable "doctitle" -->
    <title>Samik Mody &amp; Forum Patel - September 2, 2012</title>
    <meta content="Samik Mody Forum Patel wedding itasca westin garba" name="keywords" />
    <meta content="The Wedding Website for Samik Mody &amp; Forum Patel" name="description" />
    <style type="text/css">

    body {
        background-image:url("images/this-page-bkgd.jpg"};
    }

    a:visited {

        color: #0044BB;
    }
    a:hover {
        color: #00FFFF;
    }
    </style>

    <!-- #EndEditable -->
    <link href="styles/style3.css" rel="stylesheet" type="text/css" />

    </head>

    Since those page-local styles are now in an editable region, they won't be overwritten when updated. That also means, of course that you can't make changes there in the DWT that will promulgate when updated, either. But, that's OK, since you should be keeping your site-wide styles in an external style sheet anyway, and linking to it in the <head> section of the DWT (in this case, that would be something like style3.css in your current markup).

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Edited by paladyn Wednesday, February 01, 2012 12:06 AM
    • Marked as answer by docksster Wednesday, February 01, 2012 4:56 AM
    Wednesday, February 01, 2012 12:02 AM

All replies

  • I'd guess that EW needs to see a body tag in a DWT non-editable region and, if there's one apparently missing, it adds one and deletes yours.

    The way around this would be to add a style to each page that specifies the body background.

    body {

    background-image: .......

    }

    HTH


    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web
    Tuesday, January 31, 2012 8:10 PM
  • Could you help me with how to do the styles?  Very amatuerish here..
    Tuesday, January 31, 2012 8:33 PM
  • Creating a style is basic in using EW.  Rather than learn that piecemeal in forum posts, use the resources that are already out there.

    Look at the "Forum FAQ and Guidelines ... Start Here" post and do two things.  If you haven't already, click the link in the first paragraph and see what you are expected to know in order to use EW.   Then, scroll down to the bottom of that FAQ post to the Learning section.  Cheryl's Basic Website tutorial is well worth the time in order for you to learn how to use EW, and it will walk you through things like creating styles.  It will save you a lot of forum posts.  :)

    Tuesday, January 31, 2012 11:49 PM
  • Move your page-local style section up into your editable region (where it should be anyway). In the markup above, you have this:

    <!-- #BeginEditable "doctitle" -->
    <title>Samik Mody &amp; Forum Patel - September 2, 2012</title>
    <meta content="Samik Mody Forum Patel wedding itasca westin garba" name="keywords" />
    <meta content="The Wedding Website for Samik Mody &amp; Forum Patel" name="description" />
    <!-- #EndEditable -->
    <link href="styles/style3.css" rel="stylesheet" type="text/css" />
    <style type="text/css">

    a:visited {
        color: #0044BB;
    }
    a:hover {
        color: #00FFFF;
    }
    </style>
    </head>

    You want to wrap the style section (in bold above) in the editable region, like so:

    <!-- #BeginEditable "doctitle" -->
    <title>Samik Mody &amp; Forum Patel - September 2, 2012</title>
    <meta content="Samik Mody Forum Patel wedding itasca westin garba" name="keywords" />
    <meta content="The Wedding Website for Samik Mody &amp; Forum Patel" name="description" />
    <style type="text/css">

    a:visited {
        color: #0044BB;
    }
    a:hover {
        color: #00FFFF;
    }
    </style>

     <!-- #EndEditable -->
    <link href="styles/style3.css" rel="stylesheet" type="text/css" />

    </head>

    Now you can make changes in that section on each page that won't be overwritten when attached pages are updated. So, to change the background-image property on each page, you would  modify the body selector's attributes on each page, like so:

    <!-- #BeginEditable "doctitle" -->
    <title>Samik Mody &amp; Forum Patel - September 2, 2012</title>
    <meta content="Samik Mody Forum Patel wedding itasca westin garba" name="keywords" />
    <meta content="The Wedding Website for Samik Mody &amp; Forum Patel" name="description" />
    <style type="text/css">

    body {
        background-image:url("images/this-page-bkgd.jpg"};
    }

    a:visited {

        color: #0044BB;
    }
    a:hover {
        color: #00FFFF;
    }
    </style>

    <!-- #EndEditable -->
    <link href="styles/style3.css" rel="stylesheet" type="text/css" />

    </head>

    Since those page-local styles are now in an editable region, they won't be overwritten when updated. That also means, of course that you can't make changes there in the DWT that will promulgate when updated, either. But, that's OK, since you should be keeping your site-wide styles in an external style sheet anyway, and linking to it in the <head> section of the DWT (in this case, that would be something like style3.css in your current markup).

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    • Edited by paladyn Wednesday, February 01, 2012 12:06 AM
    • Marked as answer by docksster Wednesday, February 01, 2012 4:56 AM
    Wednesday, February 01, 2012 12:02 AM
  • I'd do it slightly differently to preserve any inheritance:

     

    <head>
     
    <!-- #BeginEditable "doctitle" -->
       <title>Samik Mody &amp; Forum Patel - September 2, 2012</title>
       <meta content="Samik Mody Forum Patel wedding itasca westin garba" name="keywords" />
       <meta content="The Wedding Website for Samik Mody &amp; Forum Patel" name="description" />
    <!-- #EndEditable -->
     <link href="styles/style3.css" rel="stylesheet" type="text/css" />
     
    <!-- #BeginEditable styles-->
      <style type="text/css">
         a:visited {
         color: #0044BB;
         }
         a:hover {
         color: #00FFFF;
         }
      </style>
     <!-- #EndEditable -->
     
    </head>

    That way there is a second editable region to hold styles or scripts after the link to the stylesheet so any conflicting styles will always hold precidence.

     


    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try expressionwebforum.com
    Thursday, February 02, 2012 4:29 PM
  • Good point, and that is actually the order I use in my own work; just didn't think about it when doing the quick edit for the post. This is actually from one of my live sites:

    <link href="css/earhartMain.css" rel="stylesheet" type="text/css" />
    <link href="css/xsnazzy.css" rel="stylesheet" type="text/css" />
    <!-- #BeginEditable "embeddedStyles" -->
    <style type="text/css">
    </style>
    <!-- #EndEditable -->

    That actually doesn't have any page-local styling applied, obviously, but it does illustrate the section that is included for that purpose, and that it follows the calls to external style sheets to preserve inheritance and permit overriding.

    cheers,
    scott


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
    Thursday, February 02, 2012 6:26 PM
  • Thanks for the detailed replies.  I actually employed Paladyn's code above and all the pages work fine.  I am able to edit the master DWT file and not lose the background styling in the attached pages.  Now that its not broken...not gonna try to fix it!  But a sincere thanks!
    Thursday, February 02, 2012 6:29 PM