How to prevent local styles in child pages from being removed by master.html?

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&nbsp;&copy;&nbsp;2015-
          <script>
            document.write(new Date().getFullYear());
          </script> - Ultrasonic&nbsp;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&nbsp;&copy;&nbsp;2015-2021 - Ultrasonic&nbsp;Resonators</td>
  -->
  
      <td class="copyright _text_right">Page&nbsp;revised&nbsp;on&nbsp;&nbsp;</td>
      <td class="copyright _text_left" data-pgc-edit="date_revised">
        <!-- InstanceBeginEditable name="pagelastupdated" -->
        20yy&#8209;mm&#8209;dd
        <!-- InstanceEndEditable --></td> <!-- footer -->
  
    </tr>
  </table>

</div> <!-- footer -->
<!-- ===== End of footer ========================================================== -->

</div> <!-- "content-wrapper" -->
</body>
</html>

===== End master.html ===========================

Hi @dculp,
The way you are using the Master page actions of Pinegrow is a little unconventional! Normally, the actions and various attributes are added through the Actions panel which can add multiple attributes.
If I understand correctly, there are two choices here. You want the extra styles to be optional. You can include them on the Master and mark them as both editable and optional, or you can move them into the main editable section for those two templates. I think the later would be easier.
Cheers,
Bob

I did try <style type="text/css" data-pgc-edit="local_styles"> within <head> </head> to try to indicate that these were editable. This didn’t work. How do I “move them into the main editable section”? (From Dreamweaver CS6 these were within <head> </head> and I assumed that style assignments needed to remain there.) Note that the two files where these styles should appear aren’t templates. They’re actual working pages that will be displayed. (The one whose code is shown here has been shaved down somewhat during debugging.)

“You want the extra styles to be optional. You can include them on the Master and mark them as both editable and optional.” How do I mark them as optional? If I mark them as optional, how do I assure that they don’t show up in the remaining child pages (excluding the 2 pages where I actually want them to appear)?

Regarding, “The way you are using the Master page actions of Pinegrow is a little unconventional!” – I just used the most direct approach to convert a Dreamweaver CS6 dwt (dreamweaver template) to Pinegrow’s master. This seems to work OK so far. However, I welcome any suggestions (but without a major rewrite).

Hey @dculp,
Again, normally the attributes are added through the Action panel and not through direct coding since sometimes the actions will add multiple attributes. The Action panel also has other actions, like the Optional that you need to use.
I’m not sure what file you modified to include the data-pgc-edit attribute, but you would need to change this out. The data-pgc-optional="local_styles" attribute would have to be added into the master page onto the style section copied from the selected child pages, but that means you will have to delete it from all new child pages. It shouldn’t impact already existing pages.
Bob

RobM –

Is there any documentation or references to data-pgc-optional="local_styles"?

I wonder if this couldn’t be accomplished with a conditional statement. In the master.html this would be something like (pseudocode) –

variable = dummy [this should be editable]
<!-- [if variable = include_local_styles]>
<link href="link_to_local_stylesheet.css" rel="stylesheet" type="text/css" >
<![endif]-->

Then this would appear in every child page, including new pages. Because variable = dummy in these child pages, then the href link would not be included in these pages.

However, in the two pages where I want to actually have the href link, I would declare variable = include_local_styles.

If this is possible, I don’t know how to actually code it in either the master or child pages.

Hi @dculp,
There is a section about optional areas in the Pingrow documentation. I don’t think it is going to be exactly what you are looking for, since it describes using it from the Actions panel, not directly in the code.
Pinegrow is designed for writing HTML and CSS. It provides visual tools to facilitate this and the Actions panel to help it act as a CMS. It doesn’t have a logic system like you describe above. Maybe you could give a rough outline (not the full code) of your Master page, a “normal” child page, and then this “special case” child page with the extra styling. Something like:

Special case
    head
        extra styling
    Body
        header
        main (fully editable)
        footer

At least that is what it seems like from what you have wrote.
Cheers,
Bob

RobM –

In my master.html I have (from internet many years ago) –

<!--[if lte IE 7]>
<style>
.menutop li {display: inline;}
div, .menuside a {zoom: 1;}
.masthead .banner, .masthead .banner img {width: 100%;}
</style>
<![endif]-->

This doesn’t cause any validation errors.

Although Pinegrow may not directly support conditional statements, I can see that this should be possible by coding. I just don’t have enough background to do so.

I will post the requested outline pages later.

Thanks.

Hi @dculp,
So, what you are describing are called conditional comments. They are fully supported by Pinegrow, but about all they allow you to do is check which browser is using the code and then act directly. You could elect to only load your styles in on a certain browser using that type of conditional. There are also CSS conditionals that check if certain types of rules (like display: grid) are supported. Again, these are interpreted on the browser side and they don’t really look at the template.
If all you are loading onto those two extra pages is a link to a stylesheet, that is allowed within the body element in HTML5. Just add the extra stylesheet link at the very top of the editable section.
Cheers,
Bob