How can I set gradient background colors separately to each windows title bar control buttons?

[UltraBurstXD]

Hi Mgarin,

I'm having some problems to set gradient colour background separately to buttons from id "control", XML file (The same XML file with instructions to paint and decorate the title bar). Is there a simple I way to set them separately?

[mgarin]

There is no easy way to adjust the view of components beyond basic Swing settings (like background/foreground color or font) when default styles are used. That being said, default settings also do not work for cases where the particular component part is complex. For instance button's gradient background cannot be changed through background color setting because gradient has at least two colors which cannot be specified through the standard JButton API.

To use advanced view customization for any component - you'll need to create a custom style for it, put it into custom skin or skin extension and install that skin or skin extension before creating your application UI. If your style is not replacing default style then you will also have to apply it to the specific component instance.

There is a step-by-step guide on wiki - Styling introduction - that I strongly recommend reading first before trying to create custom styles.

In your particular case - to customize button gradient background - you'll need a custom button type style with modified background. It can either override default button style (that can only be done if you make a custom skin right now) or have a custom identifier to only be applied to any specific button (in that case style can be added in both skin or skin extension).

In case I didn't understand you right and you already read the introduction article and having issue with the style use - could you provide the app/style code you're using that doesn't work?

[mgarin]

For button background specifically - style like this:

    <style type="button" id="control">
        <painter>
            <decorations>
                <decoration>
                    <GradientBackground>
                        <color>111,115,117</color>
                        <color>77,81,83</color>
                    </GradientBackground>
                </decoration>
            </decorations>
        </painter>
    </style>

should be enough to adjust the default gradient background. You can change gradient colors, direction or replace it with any other background implementation.

Note that pressed state in default style has different (single-colored) background implementation that would need adjustment as well if you want to change it's color or fully change used implementation.

[UltraBurstXD]

Humm... Well, I took a peek at Styling Introduction it explains many good things, but... I still can't find the solution there. So far, here is the settings which I'm having some problems:

And here is the photo showing the windows title bar customized buttons:

As you can see the windows title bar buttons, Minimize and Resizeable, are sharing the same settings from id "control" and I only wish to set a different colour to each of both components.

Like the button, Exit, from id "close".

[mgarin]

Those buttons use styles from frame-decorated style and control style is just a base style for each of the buttons since there is no difference between them in the light and dark skins:

    <!-- WebLaF-decorated frame -->
    <style type="rootpane" id="frame-decorated" extends="frame">
        ...

        <!-- Buttons panel -->
        <style type="panel" id="buttons" extends="grouppane">

            <!-- Custom window decoration control buttons -->
            <style type="button" id="control" padding="3,5,3,5">
                <component>
                    <focusable>false</focusable>
                </component>
                <painter>
                    <decorations>
                        <decoration>
                            <WebShape round="2" />
                            <WebShadow type="outer" width="5" />
                        </decoration>
                    </decorations>
                </painter>
            </style>
            <style type="button" id="minimize" extends="control" />
            <style type="button" id="maximize" extends="control" />
            <style type="button" id="close" extends="control" />

        </style>

        ...
    </style>

If you want to provide custom style for each specific buttons - simply use the identifiers of the specific button and don't use the control one since it applies to all three of them.

[mgarin]

Also, just in case, there is a small separate wiki article on window decoration: https://github.com/mgarin/weblaf/wiki/Window-decoration

[UltraBurstXD]

Wow! It finally works!

Thanks, I really appreciate it!

[mgarin]

Glad it helped :)