[heppen]

Hi

I'm struggling with adding colour gradients to buttons. I was able to do this for "group" controls but not for buttons.
I saw in AH skin it's possible but tried to understand that code and I can't. I don't know how it works. Can some explain how to add gradients to buttons?

TIA!

[mardukL]

Hi

I'm struggling with adding colour gradients to buttons. I was able to do this for "group" controls but not for buttons.
I saw in AH skin it's possible but tried to understand that code and I can't. I don't know how it works. Can some explain how to add gradients to buttons?

TIA!

You'll have to use your gradient texture in the

<texturefocus>gradient_fo</texturefocus>
<textureunfocus>gradient_nf</textureunfocus>
tags.


depending on usacase you can also use the colordiffuse attribute BUT THAT WILL TINT THE WHOLE TEXTURE,
e.g. a white image gradients with transparent alpha = 00
https://github.com/marduklev/skin.swan-a...ntleft.png


Otherwise stick with define the images depending on colorthemes ( **.xbt) if you wanna have multicolors

e.g.
Textures.xbt  (buttons/gradient/gradient_fo.png ) image  is green to yellow
Red.xbt  (buttons/gradient/gradient_fo.png ) image  is Red to orange


May take a look here
https://www.youtube.com/watch?v=kCpl0EV3...7g&index=2

[heppen]

Hi

I'm struggling with adding colour gradients to buttons. I was able to do this for "group" controls but not for buttons.
I saw in AH skin it's possible but tried to understand that code and I can't. I don't know how it works. Can some explain how to add gradients to buttons?

TIA!

You'll have to use your gradient texture in the

<texturefocus>gradient_fo</texturefocus>
<textureunfocus>gradient_nf</textureunfocus>
tags.


depending on usacase you can also use the colordiffuse attribute BUT THAT WILL TINT THE WHOLE TEXTURE,
e.g. a white image gradients with transparent alpha = 00
https://github.com/marduklev/skin.swan-a...ntleft.png


Otherwise stick with define the images depending on colorthemes ( **.xbt) if you wanna have multicolors

e.g.
Textures.xbt  (buttons/gradient/gradient_fo.png ) image  is green to yellow
Red.xbt  (buttons/gradient/gradient_fo.png ) image  is Red to orange


May take a look here
https://www.youtube.com/watch?v=kCpl0EV3...7g&index=2

Thanks!

I should be more precise. I want to achieve something like this: https://imgur.com/taRkNJN
Which I did with 2 images but it will works only in group controls.
With buttons and <texturefocus> I can achieve only this: https://imgur.com/S1ICuJI and I don't know how to put another texture on it. From what I understand, <texturenofocus> will works only when button is not focused, so after focus this texture will disappear. I know jurialmunkey did it tricky, but it works: https://imgur.com/JEETvE2 Unfortunately I can't understand how he did it.

[mardukL]

Without looking at code i am assume it uses the texture based on current choosen theme.

you cant use 2 images at focused layout.

so in the case of the "workin example" you postes above
it is either
a) gradient texture which is a gradient image
from blue to green without using colordiffuse attribute in <texturefocus>
( which is loaded via color theme | **.xbt )
or
b) gradient texture which is a gradient image from
"greytone??" to "white" using colordiffuse attribute in <texturefocus colordiffuse="green">

ps. as i dont know about the correct hex color code i just named them blue,green, greytone?

but may ping
@jurialmunkey

[heppen]

I doubt @jurialmunkey will help...

This is code from AZ2 skin.

xml:


<!-- Settings Buttons -->

    <variable name="Defs_Settings_ToggleButton_Color">

        <value condition="Control.HasFocus(300) | Control.HasFocus(20)">00ffffff</value>

        <value>$VAR[ColorGradient]</value>

    </variable>

    <variable name="Defs_Settings_ToggleButton_Text">

        <value condition="Control.HasFocus(300) | Control.HasFocus(20)">dialog_fg_70</value>

        <value>Selected</value>

    </variable>

    <include name="Defs_Settings_Button">

        <align>left</align>

        <font>font_small</font>

        <radioposx>1225</radioposx>

        <height>item_list_height</height>

        <textoffsetx>30</textoffsetx>

        <focusedcolor>$VAR[Defs_Settings_ToggleButton_Text]</focusedcolor>

        <texturefocus />

        <alttexturefocus />

        <texturefocus colordiffuse="$VAR[Defs_Settings_ToggleButton_Color]">common/white-gradient.png</texturefocus>

        <alttexturefocus colordiffuse="$VAR[Defs_Settings_ToggleButton_Color]">common/white-gradient.png</alttexturefocus>

    </include>

xml:


<!-- Left Gradient Fade -->

                <include content="Defs_Settings_Gradient">

                    <param name="id" value="9000" />

                    <top>item_list_height_half</top>

                    <height>item_list_height</height>

                    <width>dialog_side_grouplist</width>

                    <visible>!Control.HasFocus(300) + !Control.HasFocus(20)</visible>

                </include>

                <!-- Right Gradient -->

                <include content="Defs_Settings_Gradient">

                    <param name="id" value="9999" />

                    <top>item_list_height_half</top>

                    <height>item_list_height</height>

                    <left>dialog_side_grouplist</left>

                    <right>0</right>

                    <visible>ControlGroup(9999).HasFocus()</visible>

                </include>

xml:


                   <control type="button" id="19101" description="Customise Home">

                        <visible>Integer.IsEqual(Window.Property(CurrentFocus),9001)</visible>

                        <include>Defs_Settings_Button</include>

                        <label>$LOCALIZE[31109]</label>

                        <onclick>RunScript(script.skinshortcuts,type=manage&amp;group=mainmenu)</onclick>

                    </control>

xml:


<include name="Defs_Settings_Gradient">

        <control type="group">

            <nested />

            <animation effect="fade" start="0" end="100" time="1">Visible</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,0)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,1)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,2)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,3)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,4)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,5)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,6)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,7)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,8)">Conditional</animation>

            <animation effect="slide" end="0,item_list_height" condition="Integer.IsGreater(Container($PARAM[id]).Position,9)">Conditional</animation>

            <control type="image">

                <texture colordiffuse="$VAR[ColorHighlight]">common/white.png</texture>

            </control>

            <control type="image">

                <texture colordiffuse="$VAR[ColorGradient]">common/white-gradient.png</texture>

            </control>

        </control>

    </include>

I tried to implement it, this way but no luck. I can't understand how it's really works.
This gradient is dynamic, it depends what colors you choose for ColorHighlight and ColorGradient

I think this include Defs_Settings_Gradient does the trick.

[beatmasterrs]

Now, i know what you had meant, with "buttons":

"Overlay"-image first:

1:

xml:
<control type="image">

    <top>$PARAM[top]</top>

    <left>$PARAM[left]</left>

    <height>$PARAM[height]</height>

    <width>$PARAM[width]</width>

    <texture colordiffuse="$VAR[GradientColorMain]" border="5">common/white.png</texture>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,0)">Conditional</animation>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,1)">Conditional</animation>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,2)">Conditional</animation>

</control>

After that, your grouplist-items:

2: 

xml:


<control type="grouplist" id="1000">    

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

</control> 

The overlay-image slides to the item-position in your grouplist... With that, you have 2 images: "1" under the selected grouplist-item and "2" is shown by the image-control itself.

[heppen]

Now, i know what you had meant, with "buttons":

"Overlay"-image first:

1:

xml:
<control type="image">

    <top>$PARAM[top]</top>

    <left>$PARAM[left]</left>

    <height>$PARAM[height]</height>

    <width>$PARAM[width]</width>

    <texture colordiffuse="$VAR[GradientColorMain]" border="5">common/white.png</texture>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,0)">Conditional</animation>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,1)">Conditional</animation>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,2)">Conditional</animation>

</control>

After that, your grouplist-items:

2: 

xml:


<control type="grouplist" id="1000">    

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

</control> 

The overlay-image slides to the item-position in your grouplist... With that, you have 2 images: "1" under the selected grouplist-item and "2" is shown by the image-control itself.

Oh man! That's it!
And now I understand what the logic behind it
However, I'm struggling with one issue now.
The problem is, gradient texture is above all, and it's appear above the text so text is "colored" by texture. Maybe this screen capture will explain it better: https://streamable.com/47ca8g
As you can see, right section of the button is yellow-ish. It's not a big deal but would be nice to solve it also
Regard and have a nice day!

[mardukL]

Now, i know what you had meant, with "buttons":

"Overlay"-image first:

1:

xml:
<control type="image">

    <top>$PARAM[top]</top>

    <left>$PARAM[left]</left>

    <height>$PARAM[height]</height>

    <width>$PARAM[width]</width>

    <texture colordiffuse="$VAR[GradientColorMain]" border="5">common/white.png</texture>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,0)">Conditional</animation>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,1)">Conditional</animation>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,2)">Conditional</animation>

</control>

After that, your grouplist-items:

2: 

xml:


<control type="grouplist" id="1000">    

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

</control> 

The overlay-image slides to the item-position in your grouplist... With that, you have 2 images: "1" under the selected grouplist-item and "2" is shown by the image-control itself.

Oh man! That's it!
And now I understand what the logic behind it
However, I'm struggling with one issue now.
The problem is, gradient texture is above all, and it's appear above the text so text is "colored" by texture. Maybe this screen capture will explain it better: https://streamable.com/47ca8g
As you can see, right section of the button is yellow-ish. It's not a big deal but would be nice to solve it also
Regard and have a nice day!

got it now to.
Did you put the inage control before
the button grouplist control?
so that the inage control is always behind the button?

in xml it reads / applies control from top to bottom.

[heppen]

Now, i know what you had meant, with "buttons":

"Overlay"-image first:

1:

xml:
<control type="image">

    <top>$PARAM[top]</top>

    <left>$PARAM[left]</left>

    <height>$PARAM[height]</height>

    <width>$PARAM[width]</width>

    <texture colordiffuse="$VAR[GradientColorMain]" border="5">common/white.png</texture>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,0)">Conditional</animation>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,1)">Conditional</animation>

    <animation effect="slide" end="0,70" time="0" condition="Integer.IsGreater(Container(1000).Position,2)">Conditional</animation>

</control>

After that, your grouplist-items:

2: 

xml:


<control type="grouplist" id="1000">    

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

    <control type="button">

        ....

        ....

        <texturefocus colordiffuse="$VAR[GradientColorRight]" border="5">common/gradient-box-wide-cut.png</texturefocus>

    </control>

</control> 

The overlay-image slides to the item-position in your grouplist... With that, you have 2 images: "1" under the selected grouplist-item and "2" is shown by the image-control itself.

Oh man! That's it!
And now I understand what the logic behind it
However, I'm struggling with one issue now.
The problem is, gradient texture is above all, and it's appear above the text so text is "colored" by texture. Maybe this screen capture will explain it better: https://streamable.com/47ca8g
As you can see, right section of the button is yellow-ish. It's not a big deal but would be nice to solve it also
Regard and have a nice day!

got it now to.
Did you put the inage control before
the button grouplist control?
so that the inage control is always behind the button?

in xml it reads / applies control from top to bottom.

Yeah, finally I sorted it out
I did it wrong before since I had a texture in buttons so it was overlapping the gradient one and I had to put gradient include under the grouplist control to make it works.
Now, I made some changes to it.
Here is it how I do it

xml:


<include name="DefaultSettingButtonGradient">

		<param name="id" default="700" />

		<definition>

			<control type="group">

				<nested />

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,0)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,1)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,2)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,3)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,4)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,5)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,6)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,7)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,8)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,9)">Conditional</animation>

				<animation effect="slide" end="0,80" time="0" condition="Integer.IsGreater(Container($PARAM[id]).Position,10)">Conditional</animation>

				<control type="image">

					<texture colordiffuse="$VAR[ColorHighlight]">common/white.png</texture>

				</control>

				<control type="image">

					<texture colordiffuse="$VAR[ColorGradient]">common/white-gradient.png</texture>

				</control>

			</control>

		</definition>

	</include>

	<include name="DefaultSettingButton">

		<param name="height">80</param>

		<param name="textoffsetx">40</param>

		<definition>

			<textoffsetx>$PARAM[textoffsetx]</textoffsetx>

			<top>0</top>

			<height>$PARAM[height]</height>

			<aligny>center</aligny>

			<texturenofocus />

			<texturefocus />

			<alttexturefocus />

		</definition>

	</include>

xml:


<include content="DefaultSettingButtonGradient">

				<param name="id" value="700" />

				<top>133</top>

				<height>80</height>

				<right>0</right>

				<visible>ControlGroup(700).HasFocus()</visible>

			</include>

			<control type="grouplist" id="700">

				[...]

				<control type="radiobutton" id="701">

					<label>$LOCALIZE[31095]</label>

					<include>DefaultSettingButton</include>

					<selected>!Skin.HasSetting(no_slide_animations)</selected>

					<onclick>Skin.ToggleSetting(no_slide_animations)</onclick>

				</control>

				<control type="radiobutton" id="702">

					<label>$LOCALIZE[20189]</label>

					<include>DefaultSettingButton</include>

					<onclick>Skin.ToggleSetting(autoscroll)</onclick>

					<selected>Skin.HasSetting(autoscroll)</selected>

				</control>

                [...]

It works!

Thank you @beatmasterrs and @mardukL !