For different widget, it may have different css selectors to define styling. Extension developer can extend the styling mapping for their widget or override product supported styling mapping.
1 Create a style mapping file “alpha_style_mapping.xml” in the path<pluginProject/configure>.
<?xml version="1.0" encoding="utf-8"?> <maps xmlns="http://btt.ibm.com/StyleMappingSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://btt.ibm.com/StyleMappingSchema StyleMappingSchema.xsd "> <widget name="MyButton"> <!-- this definition is used for Button widget --> <selector name=".dijitButton .dijitButtonNode"> <!-- background-color attribute must defined under the .<yourSelectorID> .djitButton .dijitButtonNode --> <style name="background-color;color"/> <style name="margin;margin-top;margin-right;margin-bottom;margin-left"/> <style name="padding;padding-top;padding-right;padding-bottom;padding-left"/> <style name="border;border-style;border-color;border-width;border-top;border-right;border-bottom;border-left;border-top-color;border-top-width;border-top-style;border-right-color;border-right-style;border-right-width;border-bottom-style;border-bottom-width;border-bottom-color;border-left-style;border-left-width;border-left-color"/> <style name="font-family;font-size;font-weight;font-style"/> <style name="width;height"/> </selector> <selector name=".dijitButtonDisabled .dijitButtonNode"> <!-- styles for disabled button --> <style name="BTTDisabled-background-color" realName="background-color"/> <style name="BTTDisabled-color" realName="color"/> </selector> <<-- root --> <selector name=""> <!-- font can be assigned on root also --> <style name="font-family;font-size;font-weight;font-style;color"/> </selector> </widget> </maps>
2 Developer need to add com.ibm.btt.tools.xui.editor2.styling in extension point, and then create a new mapping configuration:
3 Click “Browse” button to select “configure/alpha_style_mapping.xml” as “config” value.
