dculp
February 10, 2022, 7:31pm
1
I’m trying to convert a Dreamweaver CS6 site to Pinegrow. All Dreamweaver pages are based on a dwt template (below) which I have saved as master.html for Pinegrow. Master.html gives a page that is visually correct but I don’t know how to apply this to existing pages. My site has about 700 pages so I’m looking for the easiest solution. (The code below is imbedded in each page.)
Thanks,
<!-- template\usr_i.dwt. Updated 2021-12-13 -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width">
<!-- 5/29/2015 - from http://realfavicongenerator.net/ for favicon.ico -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- End: favicon.ico -->
<!-- TemplateBeginEditable name="doctitle" -->
<title> | Ultrasonic Resonators</title>
<!-- TemplateEndEditable -->
<script type="text/javascript" src="../p7ehc/p7EHCscripts.js"></script>
<!-- Comment away the next to see the pages in print format. -->
<link href="../p7csspbm2/p7csspbm2_09.css" rel="stylesheet" type="text/css">
<!-- DRC - 19/Apr/2015 9:56 - moved below after all other stylesheets so that this overrides any conflicts -->
<!--
<link href="../p7csspbm2/p7csspbm2_print.css" rel="stylesheet" type="text/css" media="print">
-->
<!--[if lte IE 7]>
<style>
.menutop li {display: inline;}
div, .menuside a {zoom: 1;}
.masthead .banner, .masthead .banner img {width: 100%;}
</style>
<![endif]-->
<link href="../p7tm3/p7TM3-10.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="../p7tm3/p7TM3scripts.js"></script>
<link href="../p7tm3/p7TM3-01.css" rel="stylesheet" type="text/css" media="all">
<link href="../_drc/drc1a.css" rel="stylesheet" type="text/css" >
<!-- DRC - 19/Apr/2015 9:57 - moved from above -->
<link href="../p7csspbm2/p7csspbm2_drc_print.css" rel="stylesheet" type="text/css" media="print">
<!-- 2016-01-04 - mathjax for displaying equations -->
<script src="../templates/mathjax_renum_equations_2a.js"></script>
<!-- 2016-01-04 - works OK but above has simpler code
2015-12-30
<script src="../templates/mathjax_renum_equations_1a.js"></script>
-->
<!-- The following uses a local mathjax config file, in addition to the std cdn (Content Delivery Network) mathjax config file. In order to do this:
1. Must add "&delayStartupUntilConfig" to the end of the cdn.
2. Must add "MathJax.Hub.Configured();" to the end of the local mathjax config file to let the cdn know that the mathjax configuration has completed.
See (near end of link page) --
https://groups.google.com/forum/embed/#!topic/mathjax-users/J-36V22-G9Q
Use latex_demo_100a.html with local.js to debug (from above link but modified).
-->
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<!-- Obsolete 2021-12-13 ; replaced by above from
https://docs.mathjax.org/en/v2.7-latest/start.html.
See ! Warning at https://docs.mathjax.org/en/v2.7-latest/start.html --
cdn.mathjax.org was retired in April, 2017.
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntilConfig"></script>
-->
<script src="../templates/mathjax_config_2a.js"></script>
<!-- TemplateBeginEditable name="localstyles" -->
<style type="text/css">
/* 2/16/2015 - Insert over-riding local styles or external style sheets here */
</style>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<style type="text/css">
<!-- 1/27/2015 - Insert over-riding external or local styles here -->
<!-- 2/16/2015 - currently not used -->
</style>
<!-- TemplateEndEditable -->
</head>
<body>
<div class="content-wrapper">
<div class="masthead">
<div class="logo">
<h1><span style="font-size: 1.2em">U</span>ltrasonic <span style="font-size: 1.2em">R</span>esonators</h1>
</div>
<!--
<div class="banner"><img src="../p7csspbm2/img/pbm-mast.jpg" alt="">
</div>
-->
</div> <!-- masthead -->
<div class="menutop-wrapper">
<div class="menutop-button-wrapper">
<ul class="menutop" role="menubar">
<li><a href="../index.html" title="Home" target="_self">Home</a></li>
<li><a href="../contents.html" title="Contents" target="_self">Contents</a></li>
<!-- 26/Mar/2016 12:56 - now in Contents
<li><a href="../design_info.html" title="Design info" target="_self">Design info</a></li>
-->
<!-- 1/16/2015 - try to set focus on current button. See current1 in p7csspbm2_09.css
<li><a href="../index.html" class="current1" title="Home" target="_self">Home</a></li>
<li><a href="../design_info.html" class="current2" title="Design info" target="_self">Design info</a></li>
-->
<!-- 2016-06-12
<li><a href="../design_help.html" title="Design help" target="_self">Design help</a></li>
-->
<li><a href="../notes.html" title="Notes" target="_self">Notes</a></li>
<li><a href="../contacts.html" title="Contact" target="_self">Contact</a></li>
</ul>
</div>
<!-- put google translate below -->
<!-- Insert in dwt file
1/17/2015: For the following, see
https://support.google.com/translate/#topic=2534534 - to add the translator
Various layout options are available.
Notes:
1. Set autoDisplay:true if the website should automataically translate is the visitor's website is set to a foreigh language
-->
<div class="google_translate-wrapper">
<div id="google_translate_element"></div> <!-- displays the google drop-down menu. DW flags this as an empty div. -->
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 1/17/2015 - The following was taken from https://support.google.com/translate/answer/2534601?hl=en&ref_topic=2534534 but doesn't work. Note the difference in src. Also, this site requires additional meta data to be entered. Must log in at https://accounts.google.com/ServiceLoginAuth and fill in required info.
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-->
</div> <!-- menutop-wrapper -->
<div class="columns-wrapper">
<div class="main-content">
<!-- TemplateBeginEditable name="main-content" -->
<div class="content p7ehc-1">
<h1 class="page-topper">Topic</h1>
<p>Content</p>
<!--<p contenteditable="false">This is not an editable paragraph.</p> --> <!-- 1/21/2015 doesn't work in a div that has already been declared editable -->
</div> <!-- <div class="content p7ehc-1"> -->
<!-- TemplateEndEditable -->
</div> <!-- <div class="main-content"> -->
<div class="sidebar"> <!-- 26/Mar/2016 12:38 -->
<!-- TemplateBeginEditable name="sidebar" -->
<!-- TemplateEndEditable -->
</div> <!-- <div class="sidebar"> -->
</div> <!-- <div class="columns-wrapper"> -->
<!-- =========================================================================== -->
<div class="footer" role="contentinfo">
<!--
<ul>
<li class="copyright">© 2015 <a href="#">Ultrasonic Resonators</a></li>
</ul>
-->
<table class="_table_footer">
<!--
<table width="104%" border="0" align="center">
-->
<colgroup span="3">
<col width="98%">
<col width="1%"> <!-- Can set this to a very small value & cell will always be wide enough to fit the text when "table-layout: auto;" in _table_footer. Then col 1 has max width to accommodate the copyright notice as the window is narrowed -->
<col width="1%">
</colgroup>
<tr>
<td align="left" class="copyright">Copyright © 2015-<script type="text/javascript">
document.write(new Date().getFullYear());
</script> - Ultrasonic Resonators</td>
<!-- 2021-12-30 - see https://support.knowledgeowl.com/help/automatic-copyright-year for the above script
which automatically updates the year to the current year.
<td align="left" class="copyright">Copyright © 2015-2021 - Ultrasonic Resonators</td>
-->
<td align="right" class="copyright">Page revised on </td>
<td align="left" class="copyright"><!-- TemplateBeginEditable name="pagelastupdated" -->20yy‑mm‑dd<!-- TemplateEndEditable --></td>
</tr>
</table>
<!--
<p class="copyright">© 2015 <a href="#">Ultrasonic Resonators</a></p>
-->
</div> <!-- footer -->
</div> <!-- "content-wrapper" -->
</body>
</html>
RobM
February 10, 2022, 9:17pm
2
Hi @dculp ,master.html as a master page using the Pinegrow actions (looks like a puzzle piece) and then apply that to each of your sub pages. However, I’m not sure why they need to be converted. Will they all be actively edited? What is your goal?
I have the same question!
dculp
February 10, 2022, 11:37pm
4
RobM –
Perhaps “convert” wasn’t the best word to use. What I need is for all of my existing pages to respond to changes in master.html (or whatever I choose to call this file). I don’t know in what manner master.html might need to be different than my Dreamweaver usr_i.dwt template file.
In the page files I’m sure that references to usr_i.dwt would need to be changed but what other changes? (“usr_i” is the name that I assigned to my Dreamweaver template. It’s not a default Dreamweaver name. “dwt” is Dreamweaver’s default extension for a template.)
As I’m thinking about it, is it possible for Pinegrow’s master file to be named usr_i.dwt (i.e., instead of having an html extension)? Then perhaps I wouldn’t have to change much (anything?) in the page files.
An small example page is below. (The online page is http://ultrasonic-resonators.org/glossary/aging1_dict.html.)
<!-- template\usr_i.dwt. Updated 2021-12-13 -->
<!doctype html>
<html><!-- InstanceBegin template="/templates/usr_i.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width"/>
<!-- 5/29/2015 - from http://realfavicongenerator.net/ for favicon.ico -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"/>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192"/>
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"/>
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"/>
<link rel="manifest" href="/manifest.json"/>
<meta name="msapplication-TileColor" content="#2d89ef"/>
<meta name="msapplication-TileImage" content="/mstile-144x144.png"/>
<meta name="theme-color" content="#ffffff"/>
<!-- End: favicon.ico -->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Aging (definition) | Ultrasonic Resonators</title>
<!-- InstanceEndEditable -->
<script type="text/javascript" src="../p7ehc/p7EHCscripts.js"></script>
<!-- Comment away the next to see the pages in print format. -->
<link href="../p7csspbm2/p7csspbm2_09.css" rel="stylesheet" type="text/css"/>
<!-- DRC - 19/Apr/2015 9:56 - moved below after all other stylesheets so that this overrides any conflicts -->
<!--
<link href="../p7csspbm2/p7csspbm2_print.css" rel="stylesheet" type="text/css" media="print">
-->
<!--[if lte IE 7]>
<style>
.menutop li {display: inline;}
div, .menuside a {zoom: 1;}
.masthead .banner, .masthead .banner img {width: 100%;}
</style>
<![endif]-->
<link href="../p7tm3/p7TM3-10.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" src="../p7tm3/p7TM3scripts.js"></script>
<link href="../p7tm3/p7TM3-01.css" rel="stylesheet" type="text/css" media="all"/>
<link href="../_drc/drc1a.css" rel="stylesheet" type="text/css"/>
<!-- DRC - 19/Apr/2015 9:57 - moved from above -->
<link href="../p7csspbm2/p7csspbm2_drc_print.css" rel="stylesheet" type="text/css" media="print"/>
<!-- 2016-01-04 - mathjax for displaying equations -->
<script src="../templates/mathjax_renum_equations_2a.js"></script>
<!-- 2016-01-04 - works OK but above has simpler code
2015-12-30
<script src="../templates/mathjax_renum_equations_1a.js"></script>
-->
<!-- The following uses a local mathjax config file, in addition to the std cdn (Content Delivery Network) mathjax config file. In order to do this:
1. Must add "&delayStartupUntilConfig" to the end of the cdn.
2. Must add "MathJax.Hub.Configured();" to the end of the local mathjax config file to let the cdn know that the mathjax configuration has completed.
See (near end of link page) --
https://groups.google.com/forum/embed/#!topic/mathjax-users/J-36V22-G9Q
Use latex_demo_100a.html with local.js to debug (from above link but modified).
-->
<script type="text/javascript" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<!-- Obsolete 2021-12-13 ; replaced by above from
https://docs.mathjax.org/en/v2.7-latest/start.html.
See ! Warning at https://docs.mathjax.org/en/v2.7-latest/start.html --
cdn.mathjax.org was retired in April, 2017.
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&delayStartupUntilConfig"></script>
-->
<script src="../templates/mathjax_config_2a.js"></script>
<!-- InstanceBeginEditable name="localstyles" -->
<style type="text/css">
</style>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="content-wrapper">
<div class="masthead">
<div class="logo">
<h1><span style="font-size: 1.2em">U</span>ltrasonic <span style="font-size: 1.2em">R</span>esonators</h1>
</div>
<!--
<div class="banner"><img src="../p7csspbm2/img/pbm-mast.jpg" alt="">
</div>
-->
</div> <!-- masthead -->
<div class="menutop-wrapper">
<div class="menutop-button-wrapper">
<ul class="menutop" role="menubar">
<li><a href="../index.html" title="Home" target="_self">Home</a></li>
<li><a href="../contents.html" title="Contents" target="_self">Contents</a></li>
<!-- 26/Mar/2016 12:56 - now in Contents
<li><a href="../design_info.html" title="Design info" target="_self">Design info</a></li>
-->
<!-- 1/16/2015 - try to set focus on current button. See current1 in p7csspbm2_09.css
<li><a href="../index.html" class="current1" title="Home" target="_self">Home</a></li>
<li><a href="../design_info.html" class="current2" title="Design info" target="_self">Design info</a></li>
-->
<!-- 2016-06-12
<li><a href="../design_help.html" title="Design help" target="_self">Design help</a></li>
-->
<li><a href="../notes.html" title="Notes" target="_self">Notes</a></li>
<li><a href="../contacts.html" title="Contact" target="_self">Contact</a></li>
</ul>
</div>
<!-- put google translate below -->
<!-- Insert in dwt file
1/17/2015: For the following, see
https://support.google.com/translate/#topic=2534534 - to add the translator
Various layout options are available.
Notes:
1. Set autoDisplay:true if the website should automataically translate is the visitor's website is set to a foreigh language
-->
<div class="google_translate-wrapper">
<div id="google_translate_element"></div> <!-- displays the google drop-down menu. DW flags this as an empty div. -->
</div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 1/17/2015 - The following was taken from https://support.google.com/translate/answer/2534601?hl=en&ref_topic=2534534 but doesn't work. Note the difference in src. Also, this site requires additional meta data to be entered. Must log in at https://accounts.google.com/ServiceLoginAuth and fill in required info.
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-->
</div> <!-- menutop-wrapper -->
<div class="columns-wrapper">
<div class="main-content">
<!-- InstanceBeginEditable name="main-content" -->
<div class="content p7ehc-1">
<h1 class="_dict_topic">Aging (ageing)</h1>
<p>The spontaneous change of a material property with time, under zero external stress and constant temperature.</p>
<!--From Gotmare - 'Thermal Degradation And Aging Of High Temperature Piezoelectric Ceramics' (thesis, 2008).pdf, p. 20-->
<hr/> <!-- horizontal rule -->
</div> <!-- "content p7ehc-1" -->
<!-- InstanceEndEditable -->
</div> <!-- <div class="main-content"> -->
<div class="sidebar"> <!-- 26/Mar/2016 12:38 -->
<!-- InstanceBeginEditable name="sidebar" -->
<!-- InstanceEndEditable -->
</div> <!-- <div class="sidebar"> -->
</div> <!-- <div class="columns-wrapper"> -->
<!-- =========================================================================== -->
<div class="footer" role="contentinfo">
<!--
<ul>
<li class="copyright">© 2015 <a href="#">Ultrasonic Resonators</a></li>
</ul>
-->
<table class="_table_footer">
<!--
<table width="104%" border="0" align="center">
-->
<colgroup span="3">
<col width="98%"/>
<col width="1%"/> <!-- Can set this to a very small value & cell will always be wide enough to fit the text when "table-layout: auto;" in _table_footer. Then col 1 has max width to accommodate the copyright notice as the window is narrowed -->
<col width="1%"/>
</colgroup>
<tr>
<td align="left" class="copyright">Copyright © 2015-<script type="text/javascript">
document.write(new Date().getFullYear());
</script> - Ultrasonic Resonators</td>
<!-- 2021-12-30 - see https://support.knowledgeowl.com/help/automatic-copyright-year for the above script
which automatically updates the year to the current year.
<td align="left" class="copyright">Copyright © 2015-2021 - Ultrasonic Resonators</td>
-->
<td align="right" class="copyright">Page revised on </td>
<td align="left" class="copyright"><!-- InstanceBeginEditable name="pagelastupdated" -->2017‑09‑06<!-- InstanceEndEditable --></td>
</tr>
</table>
<!--
<p class="copyright">© 2015 <a href="#">Ultrasonic Resonators</a></p>
-->
</div> <!-- footer -->
</div> <!-- "content-wrapper" -->
</body>
<!-- InstanceEnd --></html>
dculp
February 11, 2022, 4:11am
5
There is a tutorial (https://github.com/matjaztrontelj/MasterPagesTutorial#readme ) but I can’t see how to download it. In particular, I want to examine the source code of the master page and compare it to mine.
Don C.
Here you go.
You can either Git Clone the repository to your chosen destination folder (you can copy the URI of the file by clicking the little button on the right.)
Just click the Green Code button to get the pop up menu.
Or use Github Desktop…buuut I dont know much about that. (or indeed Git
RobM
February 11, 2022, 10:55am
7
Hi @dculp ,div.main-content. So you can pretty much pick anypage as the master and add the master action to that page.
Then select that main content div and make it editable with the “Inner content” box checked. This will allow you to edit everything inside the main content area
Any changes you make outside the main content on the master, like to the footer text or scripts in the header, will update across all pages. Each of the pages will have to get opened and the “Use master” action applied.
I’m not sure if there is a good way to speed this up. The main HTML needs an attribute added:
<html data-pgc-master="master.html">
and the main content needs an attribute added:
<div class="main-content" data-pgc-field="main_content">
Cheers,
Bob
dculp
February 11, 2022, 9:33pm
8
RobM –
I tried your suggestions on two pages and it seems to be working. One thing I found is that the master.html needs to be in the project folder. (I tried specifying a path to another folder but this didn’t work → said it couldn’t find master.html.)
There’s one other editable area that I don’t know how to handle. If you search for pagelastupdated (almost at the bottom), the subsequent date text (20yy‑mm‑dd) in the table’s data field needs to be editable. All other data fields in the table are non-editable. However, if this would create a problem then it might be OK to allow all data fields to be editable.
Edit – I put a div around the date td data field. This seems to work but I don’t know if this is the best approach.
<div class="footer" data-pgc-edit="date_revised">
<td align="left" class="copyright">20yy‑mm‑dd</td>
</div> <!-- footer -->
)
