Shoutbox

as you can see from the image below in my options panel for 365 skin i have a load of checkboxes and next to them i have text descriptions, what i am seeing a lot of in option panels nowadays is those text descriptions are replaced with images now i think i know how to change all those text descriptions into images and have alt text so the text description shows when you hover over them but there are skins with a rather fancy technology which works as follows:



when you have options to say show or hide a button if you set the checkbox to hide it then the image of the button will appear with a red circle with a diagnal red line through it like you see in a no smoking sign but the button icons there instead of the cigarette, if you set to show the button this red circle disappears and you see just the normal button image, does anyone know how this is done?

the reason i want to be able to do this is so i have more available space in my options panel so i can later add more exciting options in to 365.

It is done by carefully placing these images.
Use the top and left positions of the text, and the width of the images themselves.

Add <DispHelp> tags to the image elements to get the hover text.

Also, you might want to move the checkboxes to the right of the pictures after importing:
[image][checkbox]

this looks a little bit clearer to most people.

dennismartijn

below is the screenshot of how my skin options looks now



as you can see ive got the images in place of the text like i wanted, what im trying to acheive is if the show mail button checkbox is ticked it will show mail1.png but if it isnt ticked itll show mail2.png in its place, how is that acheived?

I dont think that is possible. But I have not seen it before, I might be wrong.

Good job on the first part though.

I suggest you should make clear that when these image options are selected, the elements will be hidden. It now looks like when these image options are selected, they will be viewed, but actually they will be hidden.

You should make a header like "Hide", so people understand they will hide the selected options.

It was done in the stormless Messenger skin by mynetx. He is a scripter and he knows more about the interfaces of Plus! because scripts can use more advanced techniques in their settings windows than skins.

quote:

---

Originally posted by DennisMartijn
I dont think that is possible. But I have not seen it before, I might be wrong.

Good job on the first part though.

I suggest you should make clear that when these image options are selected, the elements will be hidden. It now looks like when these image options are selected, they will be viewed, but actually they will be hidden.

You should make a header like "Hide", so people understand they will hide the selected options.

---

thats the reason for the state based images, if you untick one of these buttons then its going to be hidden so if a buttons checkbox is unticked i want it to display the buttons image with a disabled symbal overlayed on it, if the option is enabled that disabled symbal then disappears, now i found this in the skin crystal lab, what has been done in that skins is when you define the checkbox control under the place where you put the position tags you put in a custom look tag they have 1 image to set the look of the checkboxes and another for the icon image, theres 4 states normal, hot, puched and hover each of them has sections for checked and unchecked and its in those you place your custom image elements.

i did think it might be that but i was hoping there might be an easier way to do it that im not aware of.

Since I have no clue about that, I think the best to do is just use the code from Crystal Lab. Since it is basic Plus! code, it is not ripping.

ok thanks dennis.

Well, taking a look at the code, you can see:

xml code:

---

<Control xsi:type="CheckBoxControl" Id="RLnk">
                <Position Top="50" Width="50" Left="4" />
                <Help>Hide/Show links on logon window</Help>
                <CustomLook>
                    <Normal>
                        <Unchecked>
                            <Element xsi:type="ImageElement" Id="Lnk01">
                                <Position Top="1" Left="0" Height="100" />
                                <Image>
                                    <Name>normal</Name>
                                </Image>
                            </Element>
                            <Element xsi:type="TextElement" Id="Lnk02">
                                <Position Top="2" Left="11" />
                                <Color>
                                    <GlobalColor>text</GlobalColor>
                                </Color>
                                <Font>
                                    <Size>7</Size>
                                </Font>
                                <Text>Links</Text>
                            </Element>
                        </Unchecked>
                        <Checked>
                            <Element xsi:type="ImageElement" Id="Lnk03">
                                <Position Top="1" Left="0" />
                                <Image>
                                    <Name>normal2</Name>
                                </Image>
                            </Element>
                            <Element xsi:type="TextElement" Id="Lnk04">
                                <Position Top="2" Left="11" />
                                <Color>
                                    <GlobalColor>text</GlobalColor>
                                </Color>
                                <Font>
                                    <Size>7</Size>
                                </Font>
                                <Text>Links</Text>
                            </Element>
                        </Checked>
                    </Normal>
                </CustomLook>
            </Control>

---

(Removed other "styles")
So, what he has done, was just using <CustomLook> to use different themes, <Normal> as theme (there were other ones), <Checked> and <Unchecked> for ticket and unticket boxes. Think now you can do it! =)
And the options window was done by skinning Messenger Plus! itself btw.

i knew how to do option windows and after investigating i saw how to do the above but setting for 4 seperate states (normal, hot, pushed & clicked) is a bit overkill, i just really wanted to be able to do the checked and unchecled without having to worry about setting a specific state but i guess i dont have a choice.

ok thanks blessedguy.