KBEC-00169 - Defining custom style sheets in plugins

Article ID:360033193511
1 minute readKnowledge base

Summary

GWT provides very few Java methods directly related to style. Rather, they encourage you to define styles in Cascading Style Sheets.

Solution

  • Go to the following directory: "C:\plugin-in-a-box\workspace\<YourProjectName >\src\com\example\commander\plugins\<YourProjectName>\public" (create the "public" folder if it does not exist).

  • Create a CSS file called, say, "special.css" with your own styles. For example:

.crazy_color {color:#FFBB22;font-size:140%;font-weight:bold;}
  • Add the following line to <YourProjectName >.gwt.xml

          "special.css"/>
  • In Eclipse, highlight your project and select File > Refresh.

  • In Java, after you create a widget (or while processing an event, set its style to the one that you defined. For example:

@Override protected FormTable doInit() {        getLog().debug("Testing CSS");        Label l = new Label("LabelValue");        l.addStyleName("crazy_color");        FormTable ft = new FormTable();        ft.addRow("LabelValue", new Label("Label Value:"), l);        return ft;}

Applies to

  • Product versions: 5.0 and up

  • OS versions:

This article is part of our Knowledge Base and is provided for guidance-based purposes only. The solutions or workarounds described here are not officially supported by CloudBees and may not be applicable in all environments. Use at your own discretion, and test changes in a safe environment before applying them to production systems.