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…
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.
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.