Changing the Navigation Node Image Colors
Method 1- Changing Icon Image Files
In order to change the icon colors in the navigation, the image files must be altered. This file is located here: Drive:\Inetpub\wwwroot\Production Portal\App_Themes\CustomThemeName\NavigationTreeIcons
**Create a backup of these icons just in case, just copy the NavigationTreeIcons folder in case you need the originals back later.**
You can open the icons up in a photo editor such as Photoshop or a free editor like Pixlr which you can use in your browser online at this URL: https://pixlr.com/editor/.
In either of these programs you can open the image files (in this example I will be using folder.png) and choose Adjustment > Hue & Saturation (In Pixlr) or Image > Adjustment > Hue/Saturation (in Photoshop).
Here you can change the color of the icon with the sliders for Hue, Saturation, and Lightness. You can also check the "Colorize" option to help change the colors a bit easier.
Saturation will increase the color vibrancy, whereas Hue will change the color itself. Lightness with change the lightness or darkness. So if you wanted a white icon, you could bring the Lightness all the way up.
After choosing a color (perhaps write down the numbers for Hue, Saturation, and Lightness to use the same values on the other icons) you can choose to save the icon.
Do this for all of the icons in the folder, and after clearing your Browser's cache and logging out and back into the portal, you should now see your new icons!
Method 2- Changing in CSS (works in Chrome and Firefox only)
This method is much simpler, however it does not work in Internet Explorer (it will show the default icon colors).
You will need to edit your CSS file for your theme(This file is located here: Drive:\Inetpub\wwwroot\Production Portal\App_Themes\CustomThemeName\CustomThemeName.css) and add this code to the file:
-webkit-filter: hue-rotate(360deg) saturate(500%) brightness(160%)!important;
filter: hue-rotate(360deg) saturate(500%) brightness(160%)!important;
This will give a light blue color to the icons. You can can change the values here until they are the color that you'd like them to be.
For example, if you wanted black icons, you would change brightness to 0%, or if you wanted white icons, you could change brightness to something very high like 400%.
Also, the hue-rotate gives the actual color its change. So 100deg would give a pink color, 200deg a gold color. You may need to adjust this number as you go in order to get the color you like best. If the color is too bright, you can lower saturation and/or brightness.
After you save, you should be able to refresh the portal and see the changes. You can change them, save, refresh as you work to adjust until you get the result you like the best.
Changing Navigation Node Images
In order to change the icon images in the navigation node, the NavigationTree.skin file must be altered. This file is located here: Drive:\Inetpub\wwwroot\Production Portal\App_Themes\CustomThemeName\NavigationTree.skin
Open the file and find the navigation tree item icon you want to change. Change the file name to match the image name and drop the image into the NavigationTreeIcons folder. The image should be 16 x 16 pixels (or 21x21) and can be a .png or .gif file.
NOTE: If you’re making this change to the Default theme rather than a custom theme, the changes made will be overwritten in updates.
**Always take a backup of the folder before making changes. **