I have a contents.good_b1.html page that has a local style. See code “Child page with local style” below –
Then, search between “Begin local_styles” and “End local_styles”. Everything else can probably be ignored.
This page produces a 2-column layout –
When I run “\Components\Quick update” based on master.html (below), the local style in contents.good_b1.html is removed by master.html. The page then reverts to a single column layout (per master.html).
In the style tag of contents.good_b1.html I tried adding data-pgc-edit="local_styles" but this didn’t work.
<style type="text/css" data-pgc-edit="local_styles">
I have only 2 pages out of 700 that need this local style. One possibility (not the best) is to simply decouple these pages from master.html. Then, manually update these pages with any new changes to master.html.
Thanks,
Don C.
===== Child page with local style ===================
<!doctype html>
<html lang="en" data-pgc-master="master.html">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta name="viewport" content="width=device-width"/>
<title data-pgc-edit="doc_title"> | Ultrasonic Resonators</title>
<!-- 24/Feb/2022 10:35 - was "<title> | Ultrasonic Resonators</title>"-->
<!-- 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">
-->
<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 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>
<!-- ===== Begin local_styles ================================================== -->
<style type="text/css" data-pgc-edit="local_styles">
/* 2/16/2015 - Insert over-riding local styles or external style sheets here */
/* The following adds a left sidebar */
/* 24/Feb/2022 21:52 - added data-pgc-edit="local_styles" so that these local styles wouldn’t be overridden by master.html */
/* 26/Mar/2016 11:52 - from p7csspbm2_09.css */
.main-content {
float: right;
width: 70%; /* 78% = same as menutop-button-wrapper */
background-color: white; /* DRC 14/Apr/2015 7:00 - use true white so images cut from pictures with white background don't stand out against a non-white background. Otherwise, would have to make image background transparent. */
/* background-color:#F8F8F8; *//* DRC 1/15/2015 - very pale white */
}
.sidebar {
width: 30%; /* 22% = same as google_translate-wrapper */
float: right;
/* min-width: 250px; */ /* this causes the sidebar to float right below the main-content */
}
.sidebar .content {
padding: 10px; /* DRC 1/14/2015 - was 30px */
padding-top: 23px; /* DRC 1/14/2015 - to approx align with H1 heading in content */
font-size: .85em;
line-height: 1.5em;
background-color: #EAEAEA; /* DRC 1/14/2015 - pale blue */
/*
background-color: #D8D8D8;
background-image: -webkit-linear-gradient(#FFF, #AAA);
background-image: linear-gradient(#FFF, #AAA);
DRC 1/14/2015 - eliminate gradient */
}
/* 3/Apr/2015 10:23 - to override the li settings in drc1a.css */
.sidebar .content li {
/* 24/Feb/2022 21:06 - https://validator.w3.org/nu/#cl89c21 says “Error: CSS: top-margin: Property top-margin doesn't exist.”
top-margin: 0;
/*
background-color: transparent; /* cyan; */
}
</style>
<!-- ===== End local_styles ==================================================== -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="content-wrapper">
<div class="columns-wrapper">
<!-- ========================================================================= -->
<div class="main-content" data-pgc-edit="main_content">
<!-- TemplateBeginEditable name="main-content" -->
<div class="content p7ehc-1">
<h1 class="page-topper">Topic_example</h1>
<p>Content_example</p>
</div> <!-- "content p7ehc-1" -->
<!-- TemplateEndEditable -->
</div> <!-- "main-content" -->
<!-- ===== End of main_content ============================================= -->
</div> <!-- "columns-wrapper" -->
<!-- ===== End of columns-wrapper ============================================= -->
<!-- =========================================================================== -->
</div> <!-- "content-wrapper" -->
</body>
</html>
===== End child page with local style =================
===== master.html ===============================
<!doctype html>
<html lang="en" data-pgc-set-master>
<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 -->
<title data-pgc-edit="doc_title"> | Ultrasonic Resonators</title>
<!-- 24/Feb/2022 10:35 - was "<title> | Ultrasonic Resonators</title>"-->
<!-- 24/Feb/2022 21:14 - <title> is required within <head></head>-->
<script 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 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 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" -->
<!-- 2015-02-16 - Insert over-riding local styles or external style sheets below.
20/Feb/2022 - don't put any comments there or else generates validator error. -->
<style>
</style>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!--
1/27/2015 - Insert over-riding external or local styles below.
20/Feb/2022 - don't put any comments there or else generates validator error.
2/16/2015 - currently not used
-->
<style>
</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>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script 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" data-pgc-edit="main_content">
<!-- TemplateBeginEditable name="main-content" -->
<div class="content p7ehc-1">
<h1 class="page-topper">Topic_example</h1>
<p>Content_example</p>
</div> <!-- "content p7ehc-1" -->
<!-- TemplateEndEditable -->
</div> <!-- "main-content" -->
<!-- ===== End of data-pgc-edit="main_content" =============================== -->
<!-- ========================================================================= -->
<div class="sidebar" data-pgc-edit="sidebar_left"> <!-- 26/Mar/2016 12:38 -->
<!-- 23/Feb/2022 20:30 - added data-pgc-edit="sidebar_left" -->
<!-- TemplateBeginEditable name="sidebar" -->
<!-- TemplateEndEditable -->
</div> <!-- "sidebar" -->
<!-- ===== End of data-pgc-edit="sidebar_left" ============================== -->
</div> <!-- "columns-wrapper" -->
<!-- ===== End of columns-wrapper ============================================= -->
<div class="footer" role="contentinfo">
<table class="_table_footer">
<colgroup>
<col style="width: 98%;"/>
<col style="width: 1%;"/>
<col style="width: 1%;"/>
</colgroup>
<!-- With "col width" set to a very small value (e.g., 1%), 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. -->
<tr>
<td class="copyright _text_left">Copyright © 2015-
<script>
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 class="copyright _text_right">Page revised on </td>
<td class="copyright _text_left" data-pgc-edit="date_revised">
<!-- InstanceBeginEditable name="pagelastupdated" -->
20yy‑mm‑dd
<!-- InstanceEndEditable --></td> <!-- footer -->
</tr>
</table>
</div> <!-- footer -->
<!-- ===== End of footer ========================================================== -->
</div> <!-- "content-wrapper" -->
</body>
</html>
===== End master.html ===========================