I did it! I made it transparent!!
This is how I did it:
The nifty file:
<nifty xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
<useControls filename="nifty-default-controls.xml" />
<useStyles filename="nifty-default-styles.xml" />
<useStyles filename="Interface/chat-styles.xml" />
<useStyles filename="Interface/list-styles.xml"/>
<screen id="chat" controller="mygame.Main">
<layer id="foreground" childLayout="center">
<control id="chat" name="nifty-chat" width="55%" height="50%" align="left" valign="bottom" lines="13"/>
</layer>
</screen>
</nifty>
The file for custom chat:
<?xml version="1.0" encoding="UTF-8"?>
<nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui">
<style id="nifty-chat-control#mainPanel">
<attributes childLayout="vertical" width="100%" backgroundColor="#0000"/>
</style>
<style id="nifty-chat-control#chatPanel">
<attributes childLayout="horizontal" width="100%" align="center"/>
</style>
<style id="nifty-chat-control#chatArea">
<attributes childLayout="horizontal" align="left" width="75%"/>
</style>
<style id="nifty-chat-control#playerArea">
<attributes childLayout="vertical" width="25%" backgroundColor="#0000"/>
</style>
<style id="nifty-chat-control#spacer">
<attributes height="9px" width="100%"/>
</style>
<style id="nifty-chat-control#chatTextArea">
<attributes childLayout="horizontal" align="left" width="75%"/>
</style>
<style id="current-player">
<attributes backgroundImage="Textures/guy.png"
imageMode="resize:8,210,8,8,8,210,8,209,8,210,8,8"/>
</style>
<style id="default">
<attributes backgroundImage="Textures/guy.png"
imageMode="resize:8,210,8,8,8,210,8,209,8,210,8,8"/>
</style>
</nifty-styles>
The file for custom list:
<nifty-styles xmlns="http://nifty-gui.lessvoid.com/nifty-gui">
<style id="nifty-listbox">
<attributes/>
</style>
<style id="nifty-listbox#scrollpanel">
<attributes focusable="true" padding="1px" backgroundImage="Textures/guy.png"/>
<effect overlay="true">
<onActive name="colorBar" color="#0000" post="false" neverStopRendering="true" timeType="infinite"/>
<onActive name="border" border="1px" color="#222f" inset="1px,0px,0px,1px"/>
<onFocus name="border" border="1px" color="#f006"/>
<onEnabled name="renderQuad" startColor="#2228" endColor="#2220" post="false" length="150"/>
<onDisabled name="renderQuad" startColor="#2220" endColor="#2228" post="false" length="150"/>
</effect>
</style>
</nifty-styles>
What you were trying to do is to make the chat transparent. However, the chat was using other controls (a button and a list), which were defining the colors. To change the color of the list(which was using the 2 big boxes), I used the list-styles.xml.
To show the guy, created the chat-styles.xml.
I then included both styles in the main nifty xml (tests.xml).
Next time when encountering a problem with Nifty, try to read the original files. (In this case, nifty-default-controls.xml and nifty-default-styles.xml).