Grid Next and Previous Arrows

Use this board to ask questions or have discussions with other Rich Displays users.
Post Reply
dkmccammon
Profound User
Posts: 48
Joined: Wed Apr 12, 2017 4:44 pm
First Name: Darin
Last Name: McCammon
Company Name: NAICO
Phone: 4052584301
Address 1: 1010 Manvel Ave
City: Chandler
State / Province: Oklahoma
Zip / Postal Code: 74834
Country: United States
Contact:

Grid Next and Previous Arrows

Post by dkmccammon »

I am needing to change the color on the 'triangle' shaped arrows that are associated with the '< Previous' and 'Next >' at the bottom of the grid using Genie. What would be the best way to go about doing this? I did not see an option in the properties to change it.
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: Grid Next and Previous Arrows

Post by Scott Klement »

The best way to do this is to create your own CSS file that overrides ours. Put code in that CSS file that will change the icon for the next/previous arrows.

For example, you could create a CSS file in the IFS named:
/www/YOUR-INSTANCE/htdocs/profoundui/userdata/custom/css/paging-bar.css

In that file, you could put code like this:

Code: Select all

.prev-image-icon {
  background-image: url('/profoundui/userdata/images/grids/prev.gif');
  cursor: pointer;
}

.prev-image-icon-disabled {
  background-image: url('/profoundui/userdata/images/grids/prev-disabled.gif');
  cursor: default;
}

.next-image-icon {
  background-image: url('/profoundui/userdata/images/grids/next.gif');
  cursor: pointer;
}

.next-image-icon-disabled {
  background-image: url('/profoundui/userdata/images/grids/next-disabled.gif');
  cursor: default;
}
You would then link that CSS file into your Genie skin's start.html file (If you're not using Genie, skip this step.)

You would create the /www/YOUR-INSTANCE/htdocs/profoundui/userdata/images/grids subdirectory in the IFS, and put the images that represent your chosen icons in that directory, using the same filenames that were in the CSS file. These should be 16x16 pixel images that represent the previous arrow, the previous error when disabled (grayed out), the next arrow, and next arrow disabled (grayed out), respectively.

The next time you refresh/restart your session, you should get the icons that you chose on all of your grids.
Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests