Grid Next and Previous Arrows
-
- 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
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.
-
- 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
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:
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.
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 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.
Who is online
Users browsing this forum: No registered users and 2 guests