Is there a way to invert the colors of an ons-list-item when tapped on, e.g. when the tap starts (i.e. when user starts touching the screen) and revert back to normal colours when the tap ends (i.e. user lifts their finger from the screen)?

Code is pretty standard:

<ons-list-item tappable>
     <div class="left">
	   <img class="list-item__thumbnail" src="img/MyIcon.png">
     </div>
     <div class="center">
          Some text
     </div>
     <div class="right">
	<i class="fa-solid fa-circle" style="color: blue"></i>
     </div>
</ons-list-item>

I’ve tried using the touchstart and touchend events then changing the one-list-item CSS color and background properties with partial success but find the ends of the list item don’t change color due to padding and offsets etc. Wondering if there is a better way?

Thanks

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

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

Just realised this got answered in my original post two and a half years ago (!), see here: https://community.onsen.io/post/10416

@mcombatti I apologise for a reply that is 2 & 1/2 years late (!) but I am only now revisiting this stage of this project and found that you replied, and not only that but it works! (with some minor code edits). Thanks very much.

For anyone else looking, the working code is below BUT you need to edit the two img src URLs to remove the ![bighd.jpg]( immediately before the https:// and the final ) which is after the ); in the first URL and after the " in the second URL (the text editor for this forum adds these extra bits into the URLs when you hilight it as source code). If you then paste it into the playground it works https://onsen.io/playground/

<style>
#bg1 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%; 
background-image: url("![bighd.jpg](https://videohive.img.customer.envatousercontent.com/files/241571641/bighd.jpg?auto=compress%2Cformat&fit=crop&crop=top&max-h=8000&max-w=590&s=eff7aca73a2933133204ac6800f993bf");)
}
</style>

<ons-page id="myPage">
<ons-toolbar style="height: 120px;" id="MainToolbar">
	<div class="left" id="MainToolbar_leftDiv">
		<ons-toolbar-button id="bg1" style="color: #ffffff;"><ons-icon icon="fa-bars"></ons-icon></ons-toolbar-button>
	</div>
</ons-toolbar>
<div id="hiddenspace" style="height: 72px;">
</div>
<ons-card>
    <img src="![download_image_onsenui_01.png](https://monaca.io/img/logos/download_image_onsenui_01.png") alt="Onsen UI" style="width: 100%">
    <div class="title">
      Awesome framework
    </div>
      <ons-list>
        <ons-list-header>Bindings</ons-list-header>
        <ons-list-item>Vue</ons-list-item>
        <ons-list-item>Angular</ons-list-item>
        <ons-list-item>React</ons-list-item>
      </ons-list>
  </ons-card>
</ons-page>

I want to achieve this in Onsen UI:

Notice taller toolbar than standard, white overlay burger menu icon (for the standard element) and no bottom border between the image and the first item.

I think the burger icon is easy (assuming it stays in the right place with a taller toolbar).

The background image I tried manually setting the CSS property background-image in the browser DOM (using Chrome devtools) on the element and adding the transparent modifier, so <ons-toolbar modifier="transparent"> - unfortunately this got overridden so background image didn’t show at all. I also tried doing the same thing on the within the toolbar and that didn’t go full width and not sure the burger icon would have been on top anyway

Not sure how to override the toolbar CSS to make a tall/fat toolbar that shows the full height of the image and has no border - I’ve looked at the CSS for the toolbar in the browser DOM in Chrome Devtools but can’t see how to modify it correctly

Ideally need this to be able to cope with different device widths or portrait/landscape orientation.

Any suggestions much appreciated. Thanks.

I’m building an app using Onsen UI and PhoneGap that requires having an extra tall header on one of the pages, with an SVG background image, but hamburger menu icon would be on top. So needs to be like:

Header image is above the horizontal line, below that it’s just a regular Onsen UI layout with various content (e.g. a list).

Image does need to be full width as shown and scale to fit whatever device it’s shown on (phone or tablet).

Is this possible, and if so how? Couldn’t see anything obvious in the docs.

Thanks