Nifty Transparent Effect Problem

Hi guys, this kind of related to a previous post but I wanted to create a new one because this is a different problem. Right now I’m making a GUI that is mostly transparent because I think that looks really sick. I have added an on hover effect to some panels (just for testing effects and styles) and I have noticed that my effects work fine. However, and soon as I make my panels transparent, the effects are no longer triggered when I move the cursor over them. Is there a work around for this? Why does this happen in the first place? (I have visibleToMouse set to true so it is not that)

Anyways here is the style when it works fine.

   <style id="lobbyPanel">
        <attributes backgroundColor="#ffff" height ="60%" y="10%" />
        <effect>
            <onHover name="fade" start="#7" end="#7"/>
        </effect>
    </style>

But here is it when it doesnt work. Notice I changed the original background color from #ffff to #fff1 in this case

<style id="lobbyPanel">
            <attributes backgroundColor="#fff1" height ="60%" y="10%" />
            <effect>
                <onHover name="fade" start="#7" end="#7"/>
            </effect>
</style>

Thanks for the help in advance :slight_smile:

I have ended up with another question seperate from the one posted above. So I decided to change the onHover effect from fade to colorPulsate. Now according to the manual, if I do inherit=“false” that means that only the element I put the effect on and not the children should experience the effect. However, when I do this the text elements I have inside my panel that has the effect also change, even though I have inherit set to false. I have created the text dynamically so I’m not sure If that has any difference.

Here is my style

<style id="lobbyPanel">
        <attributes backgroundColor="#0004" height ="20" width="100%" />
        <effect>
            <onHover name="colorPulsate" startColor="#ffffff40" endColor="#ffffff80" inherit="false"/>
        </effect>
</style>

Here is how I add my text to the screen.

@Override
public void onStartScreen() {
//Some stuff above
       playerInfoPanel = screen.findElementById("playerInfoPanel");
       for (int i = 0; i < 18;i++) {
           createPlayerInfo("Cats00cats"+i,InetAddress.getLocalHost().getHostAddress());
       }
//Some stuff below
}


public void createPlayerInfo(String name, String ip) {
        Element playerPanel = new PanelBuilder(name+"PlayerPanel") {{
            childLayout(ChildLayoutType.Absolute);
            style("lobbyPanel");
        }}.build(nifty, screen, playerInfoPanel);
        new TextBuilder(name+"Text") {{
            font("aurulent-sans-16.fnt");
            text(name);
            color("#f00f");
            x("0");
            y("0");
        }}.build(nifty, screen, playerPanel);
        new TextBuilder(name+"IP") {{
            font("aurulent-sans-16.fnt");
            text(ip);
            color("#f00f");
            x("50%");
            y("0");
        }}.build(nifty, screen, playerPanel);
    }

However when I render it starts out like this (All good the text is red)

But when I put the mouse over it the text turns white along with the panel itself (Bad :frowning: I just want the panel to be white)

Is the style somehow inherited by the child elements? Is there something I have to do when creating elements dynamically that state that these are children to a certain element?

Thanks for the help :+1:

Well, can’t see any problems but have you tried putting some fake style to the texts? They shouldn’t inherit the style as far as I know.

Just got around to creating a style for the text but it still seems to change the color of the text for some reason. :confused:

You could try other effect then. Like the colorbox or whatever it was called. I use it extensively to highlight the selected row. But you would apply it to the whole panel then.

I think I might just try to make a custom effect, I really like the pulsating of the other effect so I’ll see what I can do. I’ll let you know how it goes :slight_smile: