View Full Version : Spry tabs in a template

08-09-2010, 11:16 AM
Hi, I have created a site with numerous templates, the body of which is an editable region, the rest not. I went to insert my tabbed Panel in the template page and it said, "you can not insert this widget into an editable region. Please insert the widget in a locked region and create editable regions inside the widget". Does anyone know how I insert tabbed, accordian, etc widgets into a template with only the body editable.

I even detatched a new page from the template, inserted the tabbed panel and saved it but I need this large tabbed table on 9 different pages, and I tried even to attach the style .css and .js page and it came over all over the place, no order. Is there a clear way of having a widget in templage?
All I seem to get when I go to update the template page is inconsistent region names, "some regions in this document have no corresponding regions in the new template. Document Body <not resolved> Document head <not resolved>. I don't understand this?
Any help with this would be much appreciated as I am going crazy trying to figure this out.

08-09-2010, 02:35 PM
It sounds like you're doing something wrong either when creating the templates or when creating new pages based upon the templates. What procedure do you use.

When you create a page based upon a template you always want to use the menu: File>New… option. NEVER use the menu:File>Save As… option to create a page from a template.

One reason you might be unable to insert a Spry object is if you don't have an editable region in the head of your document (which is needed to insert the links to the Spry CSS and JS files.

If you created the template correctly Dreamweaver should have automatically inserted this code in the head of the document:

<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->

08-09-2010, 02:45 PM
Hi, I have it set up properly, I think, but because everything is non-editable bar the body of the page, it wont let me insert widgets.
I eventually found this piece of advice on google and this seems to have fixed my problem, although I have to create a new page from the Template everytime I may change the template.
Once I open the template page, I detach it from my template, insert my tabbed widget table and save as, then do this for the other territories. So I copy that code from the spry tabbed panel, then copy and paste the code into code view where you want it to go,
Then you must link to the files in the Spry Assets folder manually.
Go to your CSS Styles panel, go to the top right drop down arrow, selecting the 'Attach style sheet'.
The script link can be made using Insert > HTML > Script Objects > Script. The easiest way to include the JavaScript function call from the bottom of the page is to copy those lines of code into the code on your new page.
It works, but it is seriously the only way for this to work for me and it does work, which is the main thing. Now I can use this method for my Q&A collapsible panel section which is great. If you can find an easier way, as in, keeping it attached to the template, I would be very grateful. Thanks for the advice.

08-09-2010, 03:01 PM
Glad you got it working. All I know is that Dreamweaver does allow you to insert tabbed panels into editable regions of pages based upon templates without all those extra steps. so you're doing something incorrectly. If you post a page made from the template which is still attached to the template and give us a link, I'll take a look.

08-09-2010, 03:18 PM
I don't know how to do that, I have it on our own network here??

The thing is, even if I place a spry tabbed panel into the editable region that works fine but when I go to copy and paste it into my other country territory templates, and try to attach the style sheet, it says, "a request to create a new Style, link or import failed. If you are working with an instance of a template, make certain that there is an editable region with the Head tag. So, what does that mean, how do I do this, because it is only the body of my text I want editable, the rest stays stagnent?

08-09-2010, 04:26 PM
This is possibly one of the drawbacks with templates. If you are feeling brave then SSI (php includes) might be better for you; http://www.dreamweaverclub.com/php-includes.php

08-10-2010, 08:17 AM
Thanks Corrosive, at least I know there is nothing else I can do with this except for this php include which does sound great but read that link there and I am in a panic already, I am self teaching myself this stuff so coding etc., definitely not my strong point, more of a design view worker but will get there in the end.

So, are you saying with this php include that I can create a tabbed table (huge amount of info on it) on a seperate page and link this to all my other pages to be placed where I want it to appear on my template page?

08-10-2010, 10:04 AM
I wouldn't say there is nothing else you can do as some persistance with templates usually works out. I just find includes is a much more economical way of doing the same job. Particularly where you make a change and only have to upload one file rather all the pages again.

You seem to have grasped the concept fine though. Maybe have a practice with it and see how you get on.

08-10-2010, 10:51 PM
if you do use an include for the tabbed panel remember you'll still need to link the page to the Spry CSS and JavaScript files and include the "activator" script in the page code.

Finland Blue
09-01-2010, 09:04 AM
I am having the exact same problem. I have a main template, which has everything uneditable except for the main content area. When adding a spry tabbed panel to that main content area of one of the pages which is attached to the template it says :

"Required links could not be added to this file because the <head> tag is in a locked region. To insert this content, open the template file and either unlock the <head> tag, or add this content to the template."

I don't want to unlock the whole head area, but just the parts with the spry script - will this be enough - and is it possible to do this (I could not manage it)?

I don't want to have the tabbed panel appear on every page ...

... there must be an easy way to do this, surely?

09-01-2010, 09:19 AM
Hi, I never figured out an easier way bar detaching it from the template entirely and then just adding it onto the body text, if it is only on one or two pages this should not be a problem. the thing is, only do it on one page and then you can copy and paste this into other unattached templates, using the method I described above, it only takes 30seconds to copy/paste/attach in the details/code once you get used to it. I know it defeats the purpose of a template but you need only do it once and then copy etc everytime, if you update your template, just detach it again and copy paste in. Unless I learn php include which I will but not just yet, there is as far as I can see, no other way.

Finland Blue
09-01-2010, 09:41 AM
Hi Abbica,

Thanks for the reply.

Just so I understand correctly, when you added the collapsible panel to a page you must first detach that page from the template. Do you then keep that page detached?

Sounds like this cannot be the right way. Otherwise, what is the point of providing us the technology to do these Spry things, but not making it possible to use within a template structure? We must have missed something, and hopefully someone with the knowledge will post ...

09-01-2010, 09:46 AM
Yes, you keep the page detached once you detach it as you can't have the editable body region etc for the collapsible panel to work.
I found the solution to templates, editable regions and widgets on google doing research and this solution was mentioned in a round about way, quite a bit.
Don't forget Spry is new enough and perhaps it is not as advanced as you give it credit for, Although saying that, perhaps there is another way, and if you do find out, pls post here and I will be eternally grateful. Why not contact Dreamweaver and just ask them!

09-01-2010, 02:43 PM
It SHOULD NOT be necessary to detach a page from its template in order to add Spry Tabs. Each template should have something like this in its head:

<!-- TemplateBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

Dreamweaver adds the "" and "head" editable regions automatically when creating a template.

If you don't have the "head" region in your template file, try adding this in the head of the template:

<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

Save the template and make sure it's passed through to the pages create with the template and then try adding the Spry again.

09-01-2010, 03:17 PM
Hi DW, Mine doesn't have this in the head, just in the 'Body Div' where I want it to be editable. I tried to place your first example of code up top of my page and it just says the usual, can not insert this widget into an editable region, insert to a locked region and create editable regions in the widget. If it is just one part of your body you want editable, then why place it in the head and if so, am I placing it wrong. Why don't Widgets like editable regions?

<meta http-equiv="Main Title" content="text/html; charset=utf-8" />
<title>Example Website</title>
<link href="../style sheet.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(file:///X|/Marketing/Public/Product Design/Website 2010/images/gradient.jpg);
background-repeat: repeat-y;
background-image: url(file:///X|/Marketing/Public/Product Design/Website 2010/images/background.png);
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
.style3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000080;
font-weight: normal;
a:link {color:#0000CC;
a:visited {color:#666666;
a:hover {color:#0033FF;
a:active {color:#0000FF
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
<script language="javascript">
X = screen.width;
Y = screen.height;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

09-01-2010, 03:29 PM
Makes me suspect you've created the template imporoperly.

Did you start with File>New and the Choose one of the Options under Blank Template?


Fron an existing non-template page choose Save As Template?

Either one of those works.

Also to the page created from the template have a line like this near the top?

<!-- InstanceBegin template="/Templates/main.dwt.php" codeOutsideHTMLIsLocked="false" -->

09-01-2010, 03:51 PM
It does say the above on a new page but when I do a new page from template, the body div is the only part that is editable, because my template region states that it is so. So, when I create a new page and go to insert a spry widget, it says not allowed, the head region is locked.

09-01-2010, 05:24 PM
so did you try adding this to the head of the template?

<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

09-02-2010, 08:42 AM
Worked on this just there and put that on the top of my template page between the head tags and I think it has worked, no warnings or saying I can't do it. If that is all I have to do to put widgets in, I can't express how thankful I am that you solved that for me, it is a weight off my shoulders. Sorry about my slow uptake on it all, the braincells are either burned out or where never there!!

09-02-2010, 09:48 AM
All the red is my editable bit and then it proceeds onto the non editable bit. I didn't bother copying it all in but is this the proper place to place the head tag should be, just when I apply template to page now when I make an amend to the main template it just states, unresolved problem with the head tag for this page. When I upload all templates when I save all, it won't upload this page! perhaps in wrong place, hopefully!

Whatever is happening I cannot paste the code into this, just won't show up, but I pasted the templateBeginEditable in between the two head brackets <head></head> at the top, after www.w3.org (http://www.w3.org)

09-02-2010, 01:32 PM
Hi DWcourse, I played around with few other templates and as you rightly said I must be doing something wrong which I was, tried all you said above on a fresh template and it worked, coding went awol somewhere on the other templates, somewhere being the operative word as its all double dutch to me! Thank you again for all your help, it was great.