How to make CSS take effect on a page template before it's pushed?

ajck

I have a page template with toolbar that should have a background color set before it visually appears on screen, but it’s currently appearing with a default white background then very quickly changing to the correct color. Is it possible to get it to be the correct color before it appears so I don’t see the white flash first?

Template:

<template id="devpage">
   <ons-page id="devpage-inner">
      <ons-toolbar id="devtoolbar">
	<div class="left" id="devbackbtndiv" style="color: #ffffff"><ons-back-button id="backbtndev">Back</ons-back-button></div>
	<div class="center" id="cmbtitle" style="color: #ffffff"></div>
      </ons-toolbar>

      <div id="cmbcontent">
      </div>
   </ons-page>
</template>

Code:

mainnav.pushPage('devpage').then(function() {
   // Change title bar colour to dynamically calculated color:
   $('#devtoolbar').css('background', #dynamic color calculation here);
   etc....

I tried putting the color change before the above mainnav.pushPage() statement, but that didn’t work because it’s a template.

mainnav is in a splitter:

<ons-splitter>
   <ons-splitter-side id="sidemenu" side="left" width="220px" collapse swipeable>
      Some menu items here
   </ons-splitter-side>
   <ons-splitter-content id="menucontent">
      <ons-navigator id="mainnav" page="initialpage"></ons-navigator>
   </ons-splitter-content>
</ons-splitter>

Thanks for any suggestions

emccorson

You can try listening for the page’s init event.

See here for more details of a case where a user had the same flickering problem:
https://community.onsen.io/topic/3568/page-beforeshow-event

ajck

@emccorson Yes that fixed it, perfect thanks very much!