Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Published by Scroll Versions from space WDESIGNER and version 24.0

You can style all form elements using CSS. A basic knowledge off CSS is helpful for that. 

Styling a form with CSS includes the following steps:

  1. Create your own CSS and upload it to your PAS installation with the help of the File Manager.
    Go to page Styling Forms With CSS for more information on how to create your own CSS file based on a useful template.
  2. Apply the uploaded CSS to your service.
  3. Add your user defined classes to selected form elements.

Provide a CSS File

Create a CSS file that contains the styling definitions you want to apply, and upload it to the PAS system as a resource.
How to upload a CSS file resources is explained on Managing File Resources.

Apply the CSS File

Next, you need to apply the uploaded CSS file to your service.

Go to the Explorer and select the relevant service.

Select the button in the Controls Panel and choose the option Apply CSS.

A window opens that shows all CSS files that are available in the File Manager.

Select the CSS files you want to use in the service.

Info

Multiple selection is possible.

Apply a Styling to a Form

Image Added

You can assign a CSS Class to a whole form to apply a standard styling.

This CSS class must be defined in one of the active CSS file resources (see step Apply the CSS File).

Code Block
languagecss
body {
	background-color: #E6E6E6;
}

header {
	background-color: #E6E6E6;
}
In the applied CSS file, the general background color is defined to be grey for body and header.

Image Added

In the executed form, the defined styling is applied: The background is displayed in grey.

Add a Class to a Form Element

Image RemovedImage Added

You can also assign a CSS Class to each single form element.

This CSS class must be defined in one of the active CSS file resources (see step Apply the CSS File).

The example on the left uses a class .description  to style the description field.

Code Block
languagecss
.description {
    background-color: #E6E6E6;
}
In the applied CSS file, the class  .description is defined.

In the executed form, the defined styling is applied: The description field with attribute CSS Class .description is adorned with a grey background.

Panel
OtpFloatingfalse
titleOn this Page:
Table of Contents

Multiexcerpt include
SpaceWithExcerptINTERNAL
MultiExcerptNameForm_CSS_Example
PageWithExcerptINTERNAL:_designer_examples

rp
Panel
titleRelated Pages:
rde
Panel
titleRelated Documentation: