I’ve never bothered much with skins, mostly because I don’t understand this one thing: how am I meant to associate a property (say, “preview-bg”) with a control and with a CSS class?

I can not for the life of me understand where this association is done.

Obviously, I can see the CSS properties that are applying to a control using something like Firebug, and I can see where the CSS is defined (/ui/dyn/sc/ui/skins/PROJECT/css/skin.css), but how the heck does “preview-bg” come into play?

I’m forever in the gratitude of the first one to explain this to me…

Hold your gratitude, because i won’t be explaining skins and css to your contentment with this post, but i hope to at least give you a start to getting the information.

There is a pretty large chapter “Customizing Skins” (Chapter 23) in Administering My webMethods Server Version 8.2, which you can find on the Software AG Product Documentation site, http://techcommunity.softwareag.com/ecosystem/documentation/

Here it talks about the different components of a skin, what files and properties you should modify, different modification techniques (skin editor and designer) etc…

I think that this resource might help out a fair amount as well: http://communities.softwareag.com/wiki/Wiki.jsp?page=Skin%20Properties%20Cheat%20Sheet
It contains an attachment which show all of the css classes defined by the OOB skins and where they are used.

Once you start getting the concept of CSS classes, you should then explore applying those classes to the controls you place on a page. I’d highly recommend using Firefox & Firebug to start experimenting what happens when you apply different css classes to different html elements.

Hope this provides a start for you,
–mark

The 8.2 guide is extremely improved and enlightening, thanks Mark.

Still, I’m withholding my full gratitude, but we’re getting there…

• Does the concept of a “Skin Project” exist in Designer 8.0? I can’t seem to get that to work, but that’s probably minor inconvenience

• When I export a custom skin I’m not seeing a CSI file. Is that only exported in 8.2 as well?

• It would seem that my primary question – how do the Skin Properties and the generated CSS relate to each other? – is explained by the CSI, am I right?

• If so, how do I bind a NEW property (lucas-button) to a CSS class? When I created this peoperty and exported my Skin I don’t see any CSI.

Thanks Mark.

These are all very good questions, keep them coming!

That’s correct. This is a new feature that is part of 8.2. It is part of a suite wide initiative to ensure that any “runtime asset” can be exported to the local file system, checked in to your favorite version control system, and used as part of your continuous build infrastructure.

You can quickly convert the .css file into a .csi file by renaming the file directly and updating the skin.properties:

<!-- mapped to a dynamic csi file -->
<property>
<name>css/extended.css</name>
<value>css/extended.csi</value>
<description>extendedstylesheet</description>
</property> 

Correct.

[quote]
If so, how do I bind a NEW property (lucas-button) to a CSS class? When I created
After deploying the skin you use Designer. Go to the properties for your button, go to the Expert Display Properties tab and set the “CSS Class” property to “lucas-button”.

After deploying your portlet app, open the page in Firebug again and see that your class was applied and what the evaluated style is.