# Change the background and icon color of the Dropdown Component's button:

**URL:** <https://forum.inductiveautomation.com/t/change-the-background-and-icon-color-of-the-dropdown-components-button/70617>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [March 4, 2023, 9:16am UTC](https://forum.inductiveautomation.com/t/change-the-background-and-icon-color-of-the-dropdown-components-button/70617 "2023-03-04T09:16:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [March 4, 2023, 9:16am UTC](https://forum.inductiveautomation.com/t/change-the-background-and-icon-color-of-the-dropdown-components-button/70617/1 "2023-03-04T09:16:02Z")

</div>

If I change the background color of the dropdown component, I get this result where the background of the button changes with the component:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1e55ddb50f49b8524527a834bcb070bde6ac4ae6.png)

The result I want is this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/3/43b81c227255952cead27b6b5518bd5d602c2b0e.png)

I've made several unsuccessful attempts to extend the SynthButton UI, and some of the attempts caused gui issues.  
Here is one of the attempts that was not successful:

> **Unsuccessful script**
>
> ```auto
> from java.awt import Color
> from javax.swing.plaf.synth import SynthArrowButton, SynthButtonUI
> dropdown = event.source.parent.getComponent('Dropdown')
> class customUI(SynthButtonUI):
> def paint(self, c, g):
> print 'here'
> g.setBackground(Color.WHITE)
> super(customUI, self).paint(c, g)
> from javax.swing.plaf.synth import SynthArrowButton
> def getButton(dropdown):
> if dropdown.componentCount > 0:
> for component in dropdown.getComponents():
> if isinstance(component, SynthArrowButton):
> return component
> else:
> button = getButton(component)
> if button is not None:
> return button
> return None
> button = getButton(dropdown)
> button.background = Color.white
> button.setIcon(None)
> button.setUI(customUI())
> button.repaint()
> button.foreground = Color.white
> button.text = u'▼'
> 
> ```

I can create the illusion of changing the color by assigning a dummy UI, and painting a buffered image in the place of the button  
Here is the script:

> **Painted Button Script**
>
> ```auto
> from java.awt import Color
> from javax.swing.plaf.synth import SynthArrowButton, SynthButtonUI
> from java.awt.image import BufferedImage
> from javax.swing import ImageIcon
> dropdown = system.gui.getParentWindow(event).getComponentForPath('Root Container.Dropdown')
> def getButton(dropdown):
> if dropdown.componentCount > 0:
> for component in dropdown.getComponents():
> if isinstance(component, SynthArrowButton):
> return component
> else:
> button = getButton(component)
> if button is not None:
> return button
> return None
> button = getButton(dropdown)
> UI = SynthButtonUI()
> button.setUI(UI)
> size = button.getHeight()
> image = BufferedImage(size, size, BufferedImage.TYPE_INT_RGB)
> g = image.getGraphics()
> g.setColor(Color.WHITE)
> g.fillRect(0, 0, size, size)
> g.setColor(Color.BLACK);
> g.drawString(u'▼', size/4, (3*size)/4);
> icon = ImageIcon(image)
> button.setIcon(icon)
> 
> ```

Here is the result:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/d/bdd41fe4c68f31ee6c7be62d832609d71b4084b8.png)

I can do an overlay button, but I don't like it because of all the things that have to be done to make it work with the dropdown component's necessary focus listeners.

Here is the procedure:  
• Set the text property of the button to this: ▼  
• Add a custom property to the button called: 'popupVisible'  
• Add the following code to the overlay button's actionPerformed event handler:

```auto
dropdown = system.gui.getParentWindow(event).getComponentForPath('Root Container.Dropdown')
if not event.source.popupVisible:
	dropdown.requestFocusInWindow()
	dropdown.setPopupVisible(True)
	event.source.popupVisible = True
else:
	dropdown.parent.requestFocusInWindow()
	event.source.popupVisible = False

```

• Add the following code to the overlay button's mouseEntered event handler:

```auto
dropdown = system.gui.getParentWindow(event).getComponentForPath('Root Container.Dropdown')
if dropdown.isPopupVisible():
	event.source.popupVisible = True
else: 
	event.source.popupVisible = False

```

Here is the result:

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/7722fa41d5e3841d433a7b9cbb94856bc64ec08e.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/7/7722fa41d5e3841d433a7b9cbb94856bc64ec08e.mp4)

Is there something I've missed? Does anybody know a simple way to do this?

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [March 15, 2023, 1:38am UTC](https://forum.inductiveautomation.com/t/change-the-background-and-icon-color-of-the-dropdown-components-button/70617/2 "2023-03-15T01:38:38Z")

</div>

I have figured out a better way of doing this. Instead of targeting the button, the new method changes the background of the text area and dropdown menu without effecting the button or the border. Therefore, the button color is still controlled by the traditional background property while the rest of the component is changed through scripting by replacing the dropdown's cell renderer with a custom renderer.

**Here is the result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/47510c5d0953d67a32b8b1eb0dc833c409bb2af1.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/f/8f62cd12ba9ac2119260d42e9c454ad562d45580.png)

**Here is the script:**

```python
from com.inductiveautomation.plaf import ComboListCellRenderer
if event.propertyName == 'componentRunning':
	# Override the cell renderer for custom functionality
	class ColorCellRenderer(ComboListCellRenderer):
		def getListCellRendererComponent(self, list, value, index, isSelected, cellHasFocus):
			ComboListCellRenderer.getListCellRendererComponent(self, list, value, index, isSelected, cellHasFocus)
			if cellHasFocus or isSelected:
				self.background = event.source.selectionBackground
			else:	
				self.background = system.gui.color('black')
			return self
	renderer = ColorCellRenderer()
	event.source.setRenderer(renderer)

```

**Edit:** Updated this code, so it has proper interactions with the Ignition look and feel in versions 8.0.x and 8.1.x

---

<div class="post-metadata">

**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\
**Post date:** [March 15, 2023, 11:31am UTC](https://forum.inductiveautomation.com/t/change-the-background-and-icon-color-of-the-dropdown-components-button/70617/3 "2023-03-15T11:31:57Z")

</div>

What about 'selectionBackground'...? 🧐

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [March 15, 2023, 12:22pm UTC](https://forum.inductiveautomation.com/t/change-the-background-and-icon-color-of-the-dropdown-components-button/70617/4 "2023-03-15T12:22:56Z")

</div>

> [@zxcslo](#):
>
> What about 'selectionBackground'

Excellent point; I hadn't considered that! I've adjusted the code to include that behavior.