Child pages
  • Styling with CSS

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Servoy supports the use of HTML cascading style sheets (CSS) for styling applications.  These These text files are stored in the resource project.  A A resource project can have many CSS files, and more than one CSS can used in a solution.

...

  • Adds to the consistency of the user interface; form elements across the application can use the same styles.
  • Gives the developer to make style changes over many/all forms by changing a single value in the CSS.
  • Style sheets can be used over multiple applications, adding consistency to the all the company's applications.
  • Adds consistency to an application in team development, making it easier for development teams to use the same styling on all forms.
  • Style sheets can be changed programmaticallychanged programmatically, allowing a developer to change styles to different users' taste or to have periodic style changes in their applications. See See overrideStyle function function for more details.
Creating a Style

...

  1. Do one of the following
    1. Select File>New>New Project from the menu in Servoy Developer. A window will appear; select the Servoy node and select New Style, click Next.
    2. Select the New Button in the top toolbar.  A A window will appear; select the Servoy node and select New Style, click Next.
    3. Right click on the the Styles node node under the Resources node.  Select Select Create new style from from the menu. A window will appear.
    4. With the Styles node selected, right click on any existing style and select select Create new style from from the menu. A window will appear.
    5. With the Styles node selected, select the Create new style button in the Solution Explorer list view toolbar. A window will appear.
  2. Enter the name of the new style. Click Next.
  3. Select to add sample content. Click Finish.
  4. The new css file will appear in an editor view in the center of the Workbench.

...

To open an existing style sheet:

  1. Click on Styles under the Resources project in the Solution Explorer and do one of the following:
    1. Select the style desired (shown in the Solution Explorer list view) and click on the Open style button in the Solution Explorer list view toolbar.
    2. Double click the style desired.
    3. Right click on the style desired and select Open style from the menu.
  2. The style will open in the center of the Workspace in an editor view.

...