Change color icons

[biooib]

Hi, I have purchased volt theme-layout and I have to change some colors.

I dont know how to change the arrows icons colors in a datatable (Blue default volt color)



I've tryed to override css and use and ui-icons_COLOR_256x240.png like here:

https://stackoverflow.com/questions/182 ... 7#19121287

with no luck.

The icon picture refers to a different img, not mine saved locally.

javax.faces.resource/images/updown-navy-arrow.svg.xhtml?ln=primefaces-volt

Could you tell me the easy way to do it. Thanks.

[aragorn]

Hi,

For this issue,
You need to override the following style to add new custom icon with color that you want ;

Code: Select all

.ui-datatable table thead tr .ui-state-default .ui-icon-carat-2-n-s, .ui-datatable .ui-datatable-sticky table thead tr .ui-state-default .ui-icon-carat-2-n-s {
	background-image: <your_image_url>
}

OR
You need to edit .svg file. Exp; Please open updown-navy-arrow.svg with text editor or IDE. SVG code of it;

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<g>
	<path fill="#29506B" d="M36.776,315.053c14.804,14.838,38.905,14.838,53.741,0l30.145-30.146v137.67
		c0,20.979,17.007,38.007,38.007,38.007c20.979,0,38.011-17.027,38.011-38.007v-137.67l30.14,30.146
		c14.805,14.838,38.901,14.838,53.741,0c7.439-7.438,11.139-17.138,11.139-26.868c0-9.738-3.7-19.443-11.139-26.878L158.669,139.417
		L36.776,261.307C21.937,276.143,21.937,300.209,36.776,315.053L36.776,315.053z"/>
	<path fill="#29506B" d="M319.43,284.948c-14.839,14.844-14.839,38.91,0,53.746l121.894,121.889l121.891-121.889
		c7.44-7.435,11.14-17.142,11.14-26.878c0-9.729-3.699-19.431-11.14-26.868c-14.838-14.838-38.937-14.838-53.74,0l-30.141,30.146
		v-137.67c0-20.979-17.032-38.007-38.01-38.007c-21.001,0-38.008,17.028-38.008,38.007v137.67l-30.145-30.146
		C358.335,270.109,334.234,270.109,319.43,284.948L319.43,284.948z"/>
</g>

Please change the color of fill property. Exp; <path fill="#000000" ...

[biooib]

Thank you! . It works fine.

[aragorn]

Glad to hear, thanks a lot for the update!