2. PHPRunner General questions
  3. [SOLVED]  Details icon
This topic is locked
[SOLVED]

 Details icon

 		12/25/2019 09:40:19
PHPRunner General questions
S
 Steve Seymour author

On a list page, is it possible to either change the icon when the details tab is open (details showing), or change its color.

Then change it back to its original when its clicked again (details closed)
As all the detail icons are similar, with similar color, its not instantly recognizable which icon needs to be clicked to close

the detail view. It helps somewhat to change the detail view background color, but changing the icon or its color would be perfect.
Steve.
Please delete this account 12/27/2019

https://asprunner.com/forums/topic/26963-change-custom-button-color-and-icon-on-the-fly/
... for inspiration purposes only ...
S
 		Steve Seymour author 2/12/2020

I solved the idea of changing the detail icon color when clicked (toggled) to display the details on a list page.
These colors are for the cerulean theme. Which is blue when listed, toggled to red when clicked (detail open) and back to blue when the detail is closed.

If you are using a different theme, then you would change the rgb values to suit. This in conjunction with a change in the details background cell color (table background)

makes it clearer to the user which list record they on and relates better to the detail that is open.
This jQuery is added to the list page onLoad event.
$("a[id^=details_]").bind("click", function(){

var theColorIs = $(this).css("color");

if (theColorIs == 'rgb(21, 122, 181)') {

$(this).css('color', 'rgb(255, 0, 0)');

}

else

{

$(this).css('color', 'rgb(21,122,181)');

}

});
I also increased the size of the icon to 150% using custom CSS as described in the PHPR Help manual.
Regards

Steve.