Glossy Serpent Skin / Theme for CEGUI 0.7

Help and discussion regarding skinning, themes, and other artistic content.

Moderators: CEGUI MVP, CEGUI Team

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Tue Apr 10, 2012 08:19

New release :)
Version 0.5:
~~~~~~~~~~~~
New widgets/windows:
- ListboxTransparent

Fixes:
- tooltip border shape corrected
- replaced tooltip colors (both font and background) to allow (nicer looking) multicolor text.

Miscellaneous:
- added sample application. Based on the standard CEGUI sample application "Demo8". Uses Lua.


Also updated the wiki page, which includes a donation page now.

sabby7890
Just popping in
Just popping in
Posts: 1
Joined: Sat Nov 03, 2012 00:52

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby sabby7890 » Sun Nov 04, 2012 23:35

Whoa. This is awesome! I've just added it to my project and it looks really cool!

Here are some suggestions though:
- It looks very nice with OpenSans 9pt font.
- You could give some padding to group box caption
- Since it shouldn't be that hard, you can release few variations of the theme (blue, yellow, orange, green) - just tint the imageset :)

Anyway, this theme is brilliant!

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Thu Nov 15, 2012 07:25

Hi sabby, thank you for the feedback and suggestions. I will try them soon, as I already started making a couple of small changes for the next minor version of the skin.
Colour variations of the theme is planned, but will not be available very soon

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Sun Dec 09, 2012 16:17

Hello everyone,
I am happy to announce a new release of the skin.

Version 0.6:
~~~~~~~~~~~~
Removed widgets/windows:
- SimpleTransparentPanel: redundant due to new property on SimplePanel widget (TransparencyColour)
- to get the same effect as before, use the property as <Property Name="BackgroundPictureColour" Value="AFFFFFFFF" />

New widgets/windows:
- Checkbox32: identical to the old Checkbox (the new checkbox underwent minor changes)
- Checkbox: modified look and feel so that it can be used with smaller sizes. (The imagery is basically the same, but projects like MMiX.Me which use small widgets will look crisper now).
- SerpentPanel: similar to SimplePanel, but using a different set of pictures, with some snake figures in the corner. Having widgets such as this one was the goal of the skin from the very beginning. :-)

Miscellaneous:
- FrameWindow: decreased minimum relative size from 0.1 to 0.01. The reason behind this is that the frame window (being more of a base widget) is used by many for generic purposes, so 0.1 was too large in some cases.
- Small changes to the (text) selection brushes. They are "smoother" now.
- Group Box supports an offset for the caption (property: CaptionOffset; default: 10). Thanks to sabby7890 for the suggestion.
- SimplePanel has a transparent middle content by default and a non-transparent border.
- You can set the background to be non-transparent using the property <Property Name="BackgroundPictureColour" Value="FFFFFFFFF" />
- Transparency of source pictures removed for SimplePanel, FrameWindow. Now transparency is controlled in the code.
- Minor changes to the inner shadow of SimplePanel and FrameWindow.

You can get the new files from the project's sourceforge page: https://sourceforge.net/projects/glossyserpent/files/

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Wed Dec 26, 2012 22:47

Hello everyone,
The winter holiday is here, with time away from work. So I am happy to announce a new release of the skin.

Version 0.7:
~~~~~~~~~~~~
Removed widgets/windows:
- Checkbox32: no longer needed. Simple checkbox can be used instead.

Miscellaneous:
- Added support for custom colouring of items via code. Many images were redone to be gray-scale and have colorized information applied to them via XML. The default theme look might have a somewhat different feel as a result.
- Progressbar: added a leading part and one extra layer. The widget should look much nicer now.
- Button32, Button32_4C, ProgressBar: added extra layers to reduce cut-out of items when resized under the source image size.
- RadioButton: now using the checkbox widget entirely.
- FrameWindow: added glyph support.

The colour information is stored in the "*.looknfeel" files. "Default", "Amber" and "Jade" looknfeel files are available. Just rename them to the GlossySerpent.looknfeel to test them.

Screenshots:
Image
Image

The new data files (along with a sample) are available here: https://sourceforge.net/projects/glossyserpent/files/

Montred
Not too shy to talk
Not too shy to talk
Posts: 42
Joined: Sat Nov 10, 2012 06:45

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Montred » Thu Jan 03, 2013 07:36

This is amazing. I'm using this theme for my game, your dedication is awesome, thanks for another version. In fact the fact that your theme existed was the reason I decided to use CEGUI as opposed to Gwen, as I thought it would save me a lot of time. I've been using it since you released it (almost a year I think?)

Consider placing a donation button in your sourceforge project. I'd make a donation.

As feedback, I would suggest to up the detail of the theme by two, and use a 1024x1024 imageset, 512 doesn't cut it nowadays, imho. I tried upscaling it myself adding some detail and then multiplying all the numbers on the imageset by 2, but I hit the problem that some of the elements are expressed as offsets and not relative, so things got broken.

So I would suggest either getting rids of offsets and making everything relative (that would be awesome, but I don't think CEGUI would allow it) or upscaling everything by two (that's assuming you have photoshop sources that would give us more detail, otherwise this would do nothing). CEGUI is a very old project, and by the time it was released a typical resolution was 800x600, but now a typical resolution is double than that.

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Thu Jan 03, 2013 08:57

Hi Montred, thanks for the feedback, it's appreciated.

Donating is enabled, but it's not so easy to find: http://sourceforge.net/p/glossyserpent/wiki/Donating/

One thing I should mention: I am currently working on adapting the version to the CEGUI 1.0 format. I am concentrating my engineering efforts on that.

I understand perfectly what you mean by the issue of the default 800x600 resolution. The initial plan was to have 2 versions of the skin: one for HD (1366x768) and one for full HD (1920x1080). However, maintaining them means hard work, so for the time being, only the first is developed. As soon as things get stable, I will also release a version designed for high resolution displays.
Getting rid of the offsets however is not technically possible, due to the approach I started with.

All the best,
dezGusty

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Mon Feb 04, 2013 23:19

Hello,
a new release of the skin is out :-) ( https://sourceforge.net/projects/glossyserpent/files/ )
I tried to do more things this time, but could not do all of them. As expected, adding more options, increases the needed time dramatically. So instead of waiting until it's completely done, I chose to release the current work as 0.8 and to complete everything else for 0.9.
Most important addition: by popular demand, a higher resolution version of the skin.
As a comparison, this is the basic skin: https://docs.google.com/file/d/0Byx-8I_NSC6-UVlhTktGNUFxMHc/edit?usp=sharing
And this is the FHD skin: https://docs.google.com/file/d/0Byx-8I_NSC6-dEdwakxjTUJzeU0/edit?usp=sharing

There are also some datafiles that can be used with the CEGUI 1.0 branch. Only experimental for now.

Version 0.8:
~~~~~~~~~~~~
Removed widgets/windows:
- Radiobutton: removed from looknfeel file. Still present in the scheme file, where it is mapped to a checkbox.

Miscellaneous:
- Minor improvements to the used sizes and images for combo-boxes.
- Added FHD (Full HD) variant of the theme, in which all widget pictures have an increased size, to offer higher details on high resolutions. It's typically recommended to use at least 1920x1080 for these. The FHD variant is called "GlossySerpentFHD" and comes with its own data files. Cursors are not yet brought to the FHD size.
- Removed un-needed code (minor cleanup of used files: imageset and looknfeel)
- Added intermediate datafiles that can be used with the CEGUI 1.0 specification. In case you were transforming the skin from CEGUI 0.7 to CEGUI 1.0 specs, you can try this to see if it works better. Currently available only for the base skin.

All the best,
dezGusty
Last edited by dezGusty on Tue Feb 05, 2013 17:08, edited 1 time in total.

User avatar
CrazyEddie
CEGUI Project Lead
Posts: 6760
Joined: Wed Jan 12, 2005 12:06
Location: England
Contact:

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby CrazyEddie » Tue Feb 05, 2013 08:58

Just one word: Awesome! :)

CE.

Visse
Just popping in
Just popping in
Posts: 6
Joined: Fri Apr 12, 2013 23:06

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Visse » Fri Apr 12, 2013 23:26

Hi
First of I want to say that this is a awesome skin.
The second thing is that I think that I found a nasty little bug, that could in worst case crash your program :/

in GlossySerpent.scheme:

Code: Select all

   <FalagardMapping WindowType="GlossySerpent/SimplePanel"      TargetType="DefaultWindow"  Renderer="Falagard/Button"       LookNFeel="GlossySerpent/SimplePanel" />
   <FalagardMapping WindowType="GlossySerpent/SerpentPanel"      TargetType="DefaultWindow"  Renderer="Falagard/Button"       LookNFeel="GlossySerpent/SerpentPanel" />

Notice the 'Renderer' attribute, I think that it should say 'Falagard/Default', and not 'Falagard/Button'.

A quick fix is to change the renderer and change the 'StateImagery' from 'Normal' to 'Enabled' for 'SimplePanel' & 'SerpentPanel' in GlossySerpent.looknfeel:

Code: Select all

<WidgetLook name="GlossySerpent/SimplePanel">
    [...]
    <StateImagery name="Enabled">
        [...]
    </StateImagery>
</WidgetLook>

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Sun Apr 14, 2013 11:52

Hi Visse,

thanks for dropping by and sharing the fix. I can see it could be an issue, but I did not encounter a problem so far. (If you encountered a crash in you application, could you help me out with a some steps that may help in reproducing it? I would like to verify the other widgets in the skin as well :-) )

I will try however to bring this change in the next release.

Thanks again,
dezGusty.

Visse
Just popping in
Just popping in
Posts: 6
Joined: Fri Apr 12, 2013 23:06

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Visse » Tue Apr 16, 2013 15:14

dezGusty wrote:If you encountered a crash in you application, could you help me out with a some steps that may help in reproducing it? I would like to verify the other widgets in the skin as well :-) )

Luckily I didn't experience any crashes that was caused by this bug, but since the 'Falagard/Button' downcast the window to 'ButtonBase', it could have caused a segfault. Regarding how I detected it, it was then I tried to debug my application with valgrind, it showed a couple of warnings regarding conditional jump depending on uninitialized variable in 'FalagardButton::render()'

Keep up with the good work :)

Visse
Just popping in
Just popping in
Posts: 6
Joined: Fri Apr 12, 2013 23:06

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Visse » Sun Apr 21, 2013 17:14

Hi, I just added support for 'Menubar', 'PopupMenu' & 'MenuItem', and I thought that I would share it :), it's basically just a copy of TaharezLook, but I hope it will be use full for someone.

looknfeel:

Code: Select all

   
    <!--
    ***************************************************
        GlossySerpent/Menubar
        (based on the Taharez Look)
    ***************************************************
    -->
    <WidgetLook name="GlossySerpent/Menubar">
        <PropertyDefinition name="BackgroundColours" initialValue="tl:FFFFFFFF tr:FFFFFFFF bl:FFFFFFFF br:FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="BorderWidth" initialValue="5" layoutOnWrite="true" />
        <NamedArea name="ItemRenderArea">
            <Area>
                <Dim type="LeftEdge" >
                    <ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="TopEdge" >
                    <ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="GlossySerpent" image="TabContentPaneUpperLeft" />
                <Image type="TopRightCorner" imageset="GlossySerpent" image="TabContentPaneUpperRight" />
                <Image type="BottomLeftCorner" imageset="GlossySerpent" image="TabContentPaneLowerLeft" />
                <Image type="BottomRightCorner" imageset="GlossySerpent" image="TabContentPaneLowerRight" />
                <Image type="LeftEdge" imageset="GlossySerpent" image="TabContentPaneLeft" />
                <Image type="RightEdge" imageset="GlossySerpent" image="TabContentPaneRight" />
                <Image type="TopEdge" imageset="GlossySerpent" image="TabContentPaneUpper" />
                <Image type="BottomEdge" imageset="GlossySerpent" image="TabContentPaneLower" />
                <Image type="Background" imageset="GlossySerpent" image="TabContentPaneMiddle" />
            </FrameComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="frame">
                    <ColourRectProperty name="BackgroundColours" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="frame">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>
   
   
    <!--
    ***************************************************
        GlossySerpent/Menubar
        (based on the Taharez Look)
    ***************************************************
    -->
    <WidgetLook name="GlossySerpent/PopupMenu">
        <PropertyDefinition name="BackgroundColours" initialValue="tl:FFFFFFFF tr:FFFFFFFF bl:FFFFFFFF br:FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="BorderWidth" initialValue="0" layoutOnWrite="true" />
        <NamedArea name="ItemRenderArea">
            <Area>
                <Dim type="LeftEdge" >
                    <ImageDim imageset="GlossySerpent" image="PanelBackground_L" dimension="Width">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="TopEdge" >
                    <ImageDim imageset="GlossySerpent" image="PanelBackground_T" dimension="Height">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="PanelBackground_R" dimension="Width">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="PanelBackground_B" dimension="Height">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="GlossySerpent" image="PanelBackground_TL" />
                <Image type="TopRightCorner" imageset="GlossySerpent" image="PanelBackground_TR" />
                <Image type="BottomLeftCorner" imageset="GlossySerpent" image="PanelBackground_BL" />
                <Image type="BottomRightCorner" imageset="GlossySerpent" image="PanelBackground_BR" />
                <Image type="LeftEdge" imageset="GlossySerpent" image="PanelBackground_L" />
                <Image type="RightEdge" imageset="GlossySerpent" image="PanelBackground_R" />
                <Image type="TopEdge" imageset="GlossySerpent" image="PanelBackground_T" />
                <Image type="BottomEdge" imageset="GlossySerpent" image="PanelBackground_B" />
                <Image type="Background" imageset="GlossySerpent" image="PanelBackground_M" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="border">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="GlossySerpent" image="ComboboxButtonBorder_TL" />
                <Image type="TopRightCorner" imageset="GlossySerpent" image="ComboboxButtonBorder_TR" />
                <Image type="BottomLeftCorner" imageset="GlossySerpent" image="ComboboxButtonBorder_BL" />
                <Image type="BottomRightCorner" imageset="GlossySerpent" image="ComboboxButtonBorder_BR" />
                <Image type="LeftEdge" imageset="GlossySerpent" image="ComboboxButtonBorder_L" />
                <Image type="RightEdge" imageset="GlossySerpent" image="ComboboxButtonBorder_R" />
                <Image type="TopEdge" imageset="GlossySerpent" image="ComboboxButtonBorder_T" />
                <Image type="BottomEdge" imageset="GlossySerpent" image="ComboboxButtonBorder_B" />
                <Image type="Background" imageset="GlossySerpent" image="ComboboxButtonBorder_M" />
            </FrameComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="frame">
                    <ColourRectProperty name="BackgroundColours" />
                </Section>
                <Section section="border">
                    <ColourRectProperty name="BackgroundColours" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="frame">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
                <Section section="border">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
            </Layer>
        </StateImagery>
    </WidgetLook>

   
    <!--
    ***************************************************
        GlossySerpent/MenuItem
        (based on the Taharez Look)
    ***************************************************
    -->
    <WidgetLook name="GlossySerpent/MenuItem">
        <PropertyDefinition name="NormalTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="DisabledTextColour" initialValue="FF7F7F7F" redrawOnWrite="true" />
        <PropertyDefinition name="HoverColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="PushedColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="OpenedColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <Property name="WantsMultiClickEvents" value="False" />
        <NamedArea name="ContentSize">
            <Area>
                <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="Width">
                    <FontDim type="HorzExtent">
                        <DimOperator op="Add">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width">
                                <DimOperator op="Add">
                                    <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </FontDim>
                </Dim>
                <Dim type="Height">
                    <FontDim type="LineSpacing">
                        <DimOperator op="Add">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height">
                                <DimOperator op="Add">
                                    <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </FontDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="HasPopupContentSize">
            <Area>
                <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="Width">
                    <FontDim type="HorzExtent">
                        <DimOperator op="Add">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width">
                                <DimOperator op="Add">
                                    <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width">
                                        <DimOperator op="Add">
                                            <ImageDim imageset="GlossySerpent" image="GlyphArrowLeft" dimension="Width"/>
                                        </DimOperator>
                                    </ImageDim>
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </FontDim>
                </Dim>
                <Dim type="Height">
                    <FontDim type="LineSpacing">
                        <DimOperator op="Add">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height">
                                <DimOperator op="Add">
                                    <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </FontDim>
                </Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge" ><ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width" /></Dim>
                    <Dim type="TopEdge" ><ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height" /></Dim>
                    <Dim type="RightEdge" >
                        <UnifiedDim scale="1" type="RightEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="BottomEdge" >
                        <UnifiedDim scale="1" type="BottomEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                </Area>
                <VertFormat type="CentreAligned" />
                <HorzFormat type="LeftAligned" />
            </TextComponent>
        </ImagerySection>
        <ImagerySection name="frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="GlossySerpent" image="TabContentPaneUpperLeft" />
                <Image type="TopRightCorner" imageset="GlossySerpent" image="TabContentPaneUpperRight" />
                <Image type="BottomLeftCorner" imageset="GlossySerpent" image="TabContentPaneLowerLeft" />
                <Image type="BottomRightCorner" imageset="GlossySerpent" image="TabContentPaneLowerRight" />
                <Image type="LeftEdge" imageset="GlossySerpent" image="TabContentPaneLeft" />
                <Image type="RightEdge" imageset="GlossySerpent" image="TabContentPaneRight" />
                <Image type="TopEdge" imageset="GlossySerpent" image="TabContentPaneUpper" />
                <Image type="BottomEdge" imageset="GlossySerpent" image="TabContentPaneLower" />
                <Image type="Background" imageset="GlossySerpent" image="TabContentPaneMiddle" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="popup_arrow_right">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" >
                        <UnifiedDim scale="1" type="Width">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="GlossySerpent" image="GlyphArrowRight" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" >
                        <ImageDim imageset="GlossySerpent" image="GlyphArrowRight" dimension="Width" />
                    </Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image imageset="GlossySerpent" image="GlyphArrowRight" />
                <VertFormat type="CentreAligned" />
                <HorzFormat type="RightAligned" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="popup_arrow_left">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" >
                        <UnifiedDim scale="1" type="Width">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="GlossySerpent" image="GlyphArrowLeft" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" >
                        <ImageDim imageset="GlossySerpent" image="GlyphArrowLeft" dimension="Width" />
                    </Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image imageset="GlossySerpent" image="GlyphArrowLeft" />
                <VertFormat type="CentreAligned" />
                <HorzFormat type="RightAligned" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="EnabledNormal">
            <Layer>
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledHover">
            <Layer>
                <Section section="frame">
                    <ColourProperty name="HoverColour" />
                </Section>
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledPushed">
            <Layer>
                <Section section="frame">
                    <ColourProperty name="PushedColour" />
                </Section>
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledPopupOpen">
            <Layer>
                <Section section="frame">
                    <ColourProperty name="OpenedColour" />
                </Section>
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledNormal">
            <Layer>
                <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledHover">
            <Layer>
                <Section section="frame">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
                <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledPushed">
            <Layer>
                <Section section="frame">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
                <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledPopupOpen">
            <Layer>
                <Section section="frame">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
                <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="PopupClosedIcon">
            <Layer>
                <Section section="popup_arrow_right" />
            </Layer>
        </StateImagery>
        <StateImagery name="PopupOpenIcon">
            <Layer>
                <Section section="popup_arrow_left" />
            </Layer>
        </StateImagery>
    </WidgetLook>


scheme:

Code: Select all

  <FalagardMapping WindowType="GlossySerpent/Menubar"   TargetType="CEGUI/Menubar"   Renderer="Falagard/Menubar"   LookNFeel="GlossySerpent/Menubar" />
  <FalagardMapping WindowType="GlossySerpent/PopupMenu" TargetType="CEGUI/PopupMenu" Renderer="Falagard/PopupMenu" LookNFeel="GlossySerpent/PopupMenu" />
  <FalagardMapping WindowType="GlossySerpent/MenuItem"  TargetType="CEGUI/MenuItem"  Renderer="Falagard/MenuItem"  LookNFeel="GlossySerpent/MenuItem" />

Image

User avatar
dezGusty
Not too shy to talk
Not too shy to talk
Posts: 37
Joined: Wed Sep 07, 2011 13:26
Location: Brasov, Romania

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby dezGusty » Sun Apr 21, 2013 22:25

Wow, thanks!
Definitely useful :)

Visse
Just popping in
Just popping in
Posts: 6
Joined: Fri Apr 12, 2013 23:06

Re: Glossy Serpent Skin / Theme for CEGUI 0.7

Postby Visse » Mon Apr 22, 2013 12:28

Fixed theme colours & added a menubar without frame & background.

looknfeel:

Code: Select all

    <!--
    ***************************************************
        GlossySerpent/Menubar
        (based on the Taharez Look)
    ***************************************************
    -->
    <WidgetLook name="GlossySerpent/Menubar">
        <PropertyDefinition name="BorderWidth" initialValue="5" layoutOnWrite="true" />
       
        <PropertyDefinition name="GS_DarkerThemeColour" initialValue="FF940000" redrawOnWrite="true" />
        <PropertyDefinition name="GS_LighterThemeColour" initialValue="FFFF0101" redrawOnWrite="true" />
        <PropertyDefinition name="GS_MainThemeColour" initialValue="FFDC5F5F" redrawOnWrite="true" />
        <PropertyDefinition name="GS_ShineColour" initialValue="B0FFFFFF" redrawOnWrite="true" />
       
        <NamedArea name="ItemRenderArea">
            <Area>
                <Dim type="LeftEdge" >
                    <ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="TopEdge" >
                    <ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="GlossySerpent" image="StaticTopLeft" />
                <Image type="TopRightCorner" imageset="GlossySerpent" image="StaticTopRight" />
                <Image type="BottomLeftCorner" imageset="GlossySerpent" image="StaticBottomLeft" />
                <Image type="BottomRightCorner" imageset="GlossySerpent" image="StaticBottomRight" />
                <Image type="LeftEdge" imageset="GlossySerpent" image="StaticLeft" />
                <Image type="RightEdge" imageset="GlossySerpent" image="StaticRight" />
                <Image type="TopEdge" imageset="GlossySerpent" image="StaticTop" />
                <Image type="BottomEdge" imageset="GlossySerpent" image="StaticBottom" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="background">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="Background" imageset="GlossySerpent" image="StaticBackdrop" />
            </FrameComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="background">
                </Section>
                <Section section="frame"/>
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="background">
                    <ColourRectProperty name="GS_MainThemeColour" />
                </Section>
                <Section section="frame"/>
            </Layer>
        </StateImagery>
    </WidgetLook>
   
    <!--
    ***************************************************
        GlossySerpent/Menubar
        (based on the Taharez Look)
    ***************************************************
    -->
    <WidgetLook name="GlossySerpent/MenubarTransparent">
        <PropertyDefinition name="BorderWidth" initialValue="5" layoutOnWrite="true" />
       
        <NamedArea name="ItemRenderArea">
            <Area>
                <Dim type="LeftEdge" >
                    <ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="TopEdge" >
                    <ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <StateImagery name="Enabled" />
        <StateImagery name="Disabled" />
    </WidgetLook>
   
   
    <!--
    ***************************************************
        GlossySerpent/Menubar
        (based on the Taharez Look)
    ***************************************************
    -->
    <WidgetLook name="GlossySerpent/PopupMenu">
        <PropertyDefinition name="BorderWidth" initialValue="0" layoutOnWrite="true" />
       
        <PropertyDefinition name="GS_DarkerThemeColour" initialValue="FF940000" redrawOnWrite="true" />
        <PropertyDefinition name="GS_LighterThemeColour" initialValue="FFFF0101" redrawOnWrite="true" />
        <PropertyDefinition name="GS_MainThemeColour" initialValue="FFDC5F5F" redrawOnWrite="true" />
        <PropertyDefinition name="GS_ShineColour" initialValue="B0FFFFFF" redrawOnWrite="true" />
       
        <NamedArea name="ItemRenderArea">
            <Area>
                <Dim type="LeftEdge" >
                    <ImageDim imageset="GlossySerpent" image="PanelBackground_L" dimension="Width">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="TopEdge" >
                    <ImageDim imageset="GlossySerpent" image="PanelBackground_T" dimension="Height">
                        <DimOperator op="Add">
                            <PropertyDim name="BorderWidth" />
                        </DimOperator>
                    </ImageDim>
                </Dim>
                <Dim type="RightEdge" >
                    <UnifiedDim scale="1" type="RightEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="PanelBackground_R" dimension="Width">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
                <Dim type="BottomEdge" >
                    <UnifiedDim scale="1" type="BottomEdge">
                        <DimOperator op="Subtract">
                            <ImageDim imageset="GlossySerpent" image="PanelBackground_B" dimension="Height">
                                <DimOperator op="Add">
                                    <PropertyDim name="BorderWidth" />
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </UnifiedDim>
                </Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="GlossySerpent" image="StaticTopLeft" />
                <Image type="TopRightCorner" imageset="GlossySerpent" image="StaticTopRight" />
                <Image type="BottomLeftCorner" imageset="GlossySerpent" image="StaticBottomLeft" />
                <Image type="BottomRightCorner" imageset="GlossySerpent" image="StaticBottomRight" />
                <Image type="LeftEdge" imageset="GlossySerpent" image="StaticLeft" />
                <Image type="RightEdge" imageset="GlossySerpent" image="StaticRight" />
                <Image type="TopEdge" imageset="GlossySerpent" image="StaticTop" />
                <Image type="BottomEdge" imageset="GlossySerpent" image="StaticBottom" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="background">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="Background" imageset="GlossySerpent" image="StaticBackdrop" />
            </FrameComponent>
        </ImagerySection>
        <StateImagery name="Enabled">
            <Layer>
                <Section section="background">
                    <ColourRectProperty name="GS_MainThemeColour" />
                </Section>
                <Section section="frame"/>
            </Layer>
        </StateImagery>
        <StateImagery name="Disabled">
            <Layer>
                <Section section="background">
                    <ColourRectProperty name="GS_MainThemeColour" />
                </Section>
                <Section section="frame"/>
            </Layer>
        </StateImagery>
    </WidgetLook>

   
    <!--
    ***************************************************
        GlossySerpent/MenuItem
        (based on the Taharez Look)
    ***************************************************
    -->
    <WidgetLook name="GlossySerpent/MenuItem">
        <PropertyDefinition name="NormalTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="HoverTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="PushedTextColour" initialValue="FFFFFFFF" redrawOnWrite="true" />
        <PropertyDefinition name="DisabledTextColour" initialValue="FF7F7F7F" redrawOnWrite="true" />
       
        <PropertyDefinition name="BorderWidth" initialValue="7" layoutOnWrite="true" />
       
        <PropertyDefinition name="GS_DarkerThemeColour" initialValue="FF940000" redrawOnWrite="true" />
        <PropertyDefinition name="GS_LighterThemeColour" initialValue="FFFF0101" redrawOnWrite="true" />
        <PropertyDefinition name="GS_MainThemeColour" initialValue="FFDC5F5F" redrawOnWrite="true" />
        <PropertyDefinition name="GS_ShineColour" initialValue="B0FFFFFF" redrawOnWrite="true" />
       
        <Property name="WantsMultiClickEvents" value="False" />
        <NamedArea name="ContentSize">
            <Area>
                <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="Width">
                    <FontDim type="HorzExtent">
                        <DimOperator op="Add">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width">
                                <DimOperator op="Add">
                                    <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width">
                                        <DimOperator op="Add">
                                            <PropertyDim name="BorderWidth">
                                                <DimOperator op="Multiply">
                                                    <AbsoluteDim value="2" />
                                                </DimOperator>
                                            </PropertyDim>
                                        </DimOperator>
                                    </ImageDim>
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </FontDim>
                </Dim>
                <Dim type="Height">
                    <FontDim type="LineSpacing">
                        <DimOperator op="Add">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height">
                                <DimOperator op="Add">
                                    <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height">
                                        <DimOperator op="Add">
                                            <PropertyDim name="BorderWidth" />
                                        </DimOperator>
                                    </ImageDim>
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </FontDim>
                </Dim>
            </Area>
        </NamedArea>
        <NamedArea name="HasPopupContentSize">
            <Area>
                <Dim type="LeftEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="TopEdge"><AbsoluteDim value="0" /></Dim>
                <Dim type="Width">
                    <FontDim type="HorzExtent">
                        <DimOperator op="Add">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width">
                                <DimOperator op="Add">
                                    <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width">
                                        <DimOperator op="Add">
                                            <ImageDim imageset="GlossySerpent" image="GlyphArrowLeft" dimension="Width">
                                                <DimOperator op="Add">
                                                    <PropertyDim name="BorderWidth">
                                                        <DimOperator op="Multiply">
                                                            <AbsoluteDim value="2" />
                                                        </DimOperator>
                                                    </PropertyDim>
                                                </DimOperator>
                                            </ImageDim>
                                        </DimOperator>
                                    </ImageDim>
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </FontDim>
                </Dim>
                <Dim type="Height">
                    <FontDim type="LineSpacing">
                        <DimOperator op="Add">
                            <ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height">
                                <DimOperator op="Add">
                                    <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height">
                                        <DimOperator op="Add">
                                            <PropertyDim name="BorderWidth"/>
                                        </DimOperator>
                                    </ImageDim>
                                </DimOperator>
                            </ImageDim>
                        </DimOperator>
                    </FontDim>
                </Dim>
            </Area>
        </NamedArea>
        <ImagerySection name="label">
            <TextComponent>
                <Area>
                    <Dim type="LeftEdge" ><ImageDim imageset="GlossySerpent" image="TabContentPaneLeft" dimension="Width" /></Dim>
                    <Dim type="TopEdge" ><ImageDim imageset="GlossySerpent" image="TabContentPaneUpper" dimension="Height" /></Dim>
                    <Dim type="RightEdge" >
                        <UnifiedDim scale="1" type="RightEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="GlossySerpent" image="TabContentPaneRight" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="BottomEdge" >
                        <UnifiedDim scale="1" type="BottomEdge">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="GlossySerpent" image="TabContentPaneLower" dimension="Height" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                </Area>
                <VertFormat type="CentreAligned" />
                <HorzFormat type="CentreAligned" />
            </TextComponent>
        </ImagerySection>
        <ImagerySection name="frame">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" ><UnifiedDim scale="1" type="Width" /></Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image type="TopLeftCorner" imageset="GlossySerpent" image="Button32_2C_TL" />
                <Image type="TopRightCorner" imageset="GlossySerpent" image="Button32_2C_TR" />
                <Image type="BottomLeftCorner" imageset="GlossySerpent" image="Button32_2C_BL" />
                <Image type="BottomRightCorner" imageset="GlossySerpent" image="Button32_2C_BR" />
                <Image type="LeftEdge" imageset="GlossySerpent" image="Button32_2C_L" />
                <Image type="TopEdge" imageset="GlossySerpent" image="Button32_2C_T" />
                <Image type="RightEdge" imageset="GlossySerpent" image="Button32_2C_R" />
                <Image type="BottomEdge" imageset="GlossySerpent" image="Button32_2C_B" />
                <Image type="Background" imageset="GlossySerpent" image="Button32_2C_M" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="background_section">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="2" />
                    </Dim>
                    <Dim type="TopEdge" >
                        <AbsoluteDim value="2" />
                    </Dim>
                    <Dim type="Width" >
                        <UnifiedDim scale="1" type="Width">
                            <DimOperator op="Subtract">
                                <AbsoluteDim value="4" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="Height" >
                        <UnifiedDim scale="1" type="Height">
                            <DimOperator op="Subtract">
                                <AbsoluteDim value="4" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                </Area>
                <Image type="Background" imageset="GlossySerpent" image="Button32_4D_Background" />
            </FrameComponent>
        </ImagerySection>
        <ImagerySection name="background_highlight">
            <FrameComponent>
                <Area>
                    <Dim type="LeftEdge">
                        <AbsoluteDim value="2" />
                    </Dim>
                    <Dim type="TopEdge" >
                        <AbsoluteDim value="2" />
                    </Dim>
                    <Dim type="Width" >
                        <UnifiedDim scale="1" type="Width">
                            <DimOperator op="Subtract">
                                <AbsoluteDim value="4" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="Height" >
                        <UnifiedDim scale="1" type="Height">
                            <DimOperator op="Subtract">
                                <AbsoluteDim value="4" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                </Area>
                <Image type="Background" imageset="GlossySerpent" image="Button32_4D_BackgHighlight" />
            </FrameComponent>
        </ImagerySection>
       
        <ImagerySection name="popup_arrow_right">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" >
                        <UnifiedDim scale="1" type="Width">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="GlossySerpent" image="GlyphArrowRight" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" >
                        <ImageDim imageset="GlossySerpent" image="GlyphArrowRight" dimension="Width" />
                    </Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image imageset="GlossySerpent" image="GlyphArrowRight" />
                <VertFormat type="CentreAligned" />
                <HorzFormat type="RightAligned" />
            </ImageryComponent>
        </ImagerySection>
        <ImagerySection name="popup_arrow_left">
            <ImageryComponent>
                <Area>
                    <Dim type="LeftEdge" >
                        <UnifiedDim scale="1" type="Width">
                            <DimOperator op="Subtract">
                                <ImageDim imageset="GlossySerpent" image="GlyphArrowLeft" dimension="Width" />
                            </DimOperator>
                        </UnifiedDim>
                    </Dim>
                    <Dim type="TopEdge" ><AbsoluteDim value="0" /></Dim>
                    <Dim type="Width" >
                        <ImageDim imageset="GlossySerpent" image="GlyphArrowLeft" dimension="Width" />
                    </Dim>
                    <Dim type="Height" ><UnifiedDim scale="1" type="Height" /></Dim>
                </Area>
                <Image imageset="GlossySerpent" image="GlyphArrowLeft" />
                <VertFormat type="CentreAligned" />
                <HorzFormat type="RightAligned" />
            </ImageryComponent>
        </ImagerySection>
        <StateImagery name="EnabledNormal">
            <Layer>
                <Section section="background_section">
                    <ColourProperty name="GS_MainThemeColour" />
                </Section>
                <Section section="background_highlight">
                    <ColourProperty name="GS_ShineColour" />
                </Section>
                <Section section="frame"/>
                <Section section="label">
                    <ColourProperty name="NormalTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledHover">
            <Layer>
                <Section section="background_section">
                    <ColourProperty name="GS_LighterThemeColour" />
                </Section>
                <Section section="background_highlight">
                    <ColourProperty name="GS_ShineColour" />
                </Section>
                <Section section="frame"/>
                <Section section="label">
                    <ColourProperty name="HoverTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledPushed">
            <Layer>
                <Section section="background_section">
                    <ColourProperty name="GS_DarkerThemeColour" />
                </Section>
                <Section section="background_highlight">
                    <ColourProperty name="GS_ShineColour" />
                </Section>
                <Section section="frame"/>
                <Section section="label">
                    <ColourProperty name="PushedTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="EnabledPopupOpen">
            <Layer>
                <Section section="background_section">
                    <ColourProperty name="GS_DarkerThemeColour" />
                </Section>
                <Section section="background_highlight">
                    <ColourProperty name="GS_ShineColour" />
                </Section>
                <Section section="frame"/>
                <Section section="label">
                    <ColourProperty name="PushedTextColour" />
                </Section>
            </Layer>
        </StateImagery>
       
        <!-- the following states is not implementend correcly :( -->
        <StateImagery name="DisabledNormal">
            <Layer>
                <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledHover">
            <Layer>
                <Section section="frame">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
                <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledPushed">
            <Layer>
                <Section section="frame">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
                <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="DisabledPopupOpen">
            <Layer>
                <Section section="frame">
                    <Colours topLeft="FF7F7F7F" topRight="FF7F7F7F" bottomLeft="FF7F7F7F" bottomRight="FF7F7F7F" />
                </Section>
                <Section section="label">
                    <ColourProperty name="DisabledTextColour" />
                </Section>
            </Layer>
        </StateImagery>
        <StateImagery name="PopupClosedIcon">
            <Layer>
                <Section section="popup_arrow_right" />
            </Layer>
        </StateImagery>
        <StateImagery name="PopupOpenIcon">
            <Layer>
                <Section section="popup_arrow_left" />
            </Layer>
        </StateImagery>
    </WidgetLook>


scheme:

Code: Select all

  <FalagardMapping WindowType="GlossySerpent/Menubar"   TargetType="CEGUI/Menubar"   Renderer="Falagard/Menubar"   LookNFeel="GlossySerpent/Menubar" />
  <FalagardMapping WindowType="GlossySerpent/MenubarTransparent"   TargetType="CEGUI/Menubar"   Renderer="Falagard/Menubar"   LookNFeel="GlossySerpent/MenubarTransparent" />
  <FalagardMapping WindowType="GlossySerpent/PopupMenu" TargetType="CEGUI/PopupMenu" Renderer="Falagard/PopupMenu" LookNFeel="GlossySerpent/PopupMenu" />
  <FalagardMapping WindowType="GlossySerpent/MenuItem"  TargetType="CEGUI/MenuItem"  Renderer="Falagard/MenuItem"  LookNFeel="GlossySerpent/MenuItem" />


Image

I also found another typo, line 218 in 'GlossySerpent.imageset':

Code: Select all

   <Image Name="CheckboxBorder_B" XPos="349" YPos="323s" Width="24" Height="4" />

Notice the '323s'.


Return to “Skins and Themes”

Who is online

Users browsing this forum: No registered users and 2 guests