|
|
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.
Additional jQuery to recover the hover function...
$("a[id^=details_]").bind("click", function(){
var theColorIs = $(this).css("color");
if ((theColorIs == 'rgb(21, 122, 181)') || (theColorIs == 'rgb(47, 164, 231)')) {
$(this).css('color', 'rgb(255, 0, 0)');
}
else
{
$(this).css('color', 'rgb(21,122,181)');
}
});
$(document).ready(function(){
$("a[id^=details_]").hover(function(){
var theColorIs = $(this).css("color");
if (theColorIs != 'rgb(255, 0, 0)') {
$(this).css('color', 'rgb(21, 122, 181)')}
},
function(){
var theColorIs = $(this).css("color");
if (theColorIs != 'rgb(255, 0, 0)') {
$(this).css('color', 'rgb(47, 164, 231)')}
});
}); |