Installation guide: How to edit and upload CSS code
We recommend to first download the default design (Bootstrap design) available in Compose. The way you do it is described in this tutorial: Design structure.
When you have downloaded the Default design (Bootstrap design) and unpacked the zip-file, you will see the file structure and the file names like this. It is important that the name and filestructure do not get changed. This is to make sure that Compose can read the design-file properly.
img | Pictures and icons |
skin.css | The main CSS code |
skin.properties | File containing data which are needed for the design file to function. This file should not bed edited. |
Next step is to create a locally HMTL-file. By doing so, we have the opportunity to easily check the code changes we do in CSS and how it affect the form site.
We recommend to use the Preview function in Compose to show/find the website you want to style.
The optional Layout elements make the various elements that appear on the form page. The layout elements are: Logo, Display workflow name, Vertical navigation, Horizontal navigation, Progress tracker.
When you have found the form you want to style we can than save the HTML-kode which makes up the website.
Copy the HTML source code: Rigth click on the site and choose to Display the source code for the current page, or use the shortcut Ctrl + U:
A new broser window will open showing the source code, and then mark and copy the whole code.
Then you create a new textfile and paste the whole code you just copied.
Define which CSS-file/code that is going to be used/read by the local HTML-file:
We edit the link in the head section of the HTML document. Here we find metadata (data about data), which is data that define data about the HTML document.
We edit line 40 found here which is specifying which CSS-code file to be used for this locally website.
In this example we edit the link from this: <link href="https://demo.usecompose.com/cng/_theme/bootstrap/skins/default/skin.css" rel="stylesheet" type="text/css">
To: href="skin.css" rel="stylesheet" type="text/css">
This will enable the HTML-document to be using the CCS-file named skin.css which is saved locally on your computer in the same folder as the textfile.
Then you can change the file type by edit the extensions from a txt-file to htm-file.
Now you can open the CSS-file, skin.css, and edit the code as you want. To see the changes you can open opp the locally saved HTML-kode (New tekstfile) and immediately see the changes you have done.
The CSS code can be edited with any text editor, and must be saved with a .css extension. we use the program named Notepad++, that can be downloaded for free. You can then open the CSS-file, skin-css, with Notepad++, and the code will look like this. You are now ready to edit and create your own design.
CSS syntax
A CSS code also called a rule consists of a selector and a declaration block.
Selector | Refers to the HTML element you want to style. |
Declarations | Consists of the design changes you want to make on the selected HTML elements (Selectors). Each declaration consists of a property and a subsequent value, separated by a colon. Each declaration must end with a semicolon. It is delimited by curly brackets { }. |
Property | A CSS property is a characteristic (like color) whose associated value defines one aspect of how the browser should display the element |
Value | Defines the value to the property chosen. It allows following types of values: Integers and real numbers, Lengths, Percentages, URLs and URIs, Counters, Colors etc. |
Comment | Comments are used to explain the code and can help when editing the source code later. Comments are ignored by browsers. The comments are in between two slashes and two asterisks, like this: /* Comment is entered here*/ |
Chrome DevTools:
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. Here we can edit the website directly with CSS code. This is very helpful as we get the opportunity to immediately see how the change will be presented on the website.
Right-click on any website page and select Inspect Page. The DevTool will show to different panels. One with the site’s HTML document and then the corresponding CSS code.
How to upload the design and implement it in Compose:
Once you have saved all the changes made to the CSS code, you can upload this to Compose. This is done by converting the entire design file into a zip file. Here it is important that the folder structure does not change. By marking the files as shown in the image and selecting compress to zip file, you ensure that you get the correct folder structure that can be read by Compose.
Then, you select "Upload design" in Compose and select the correct zip file.
Then you can check how the form works with the new design by using the Preview function in the form builder.
NB: The forms, processes and design must be in the same workspaces.
The way one adds the design to the process can be done in different ways. You have the opportunity to choose different designs for different parts of the workflow, i.e. for different parts of the service. This can be defined in various places in the process builder.
The design can be determined for the entire process. This is done here: Settings for the process → Properties → Design selection
The rest of the process will have the same design unless otherwise specified.
To change the design in other parts of the service, it can be changed in the Starting Point and/or in the Form activity.
Starting point: In the process builder, select Starting point and in Standard perspective settings under Properties you can change the design.
The default setting is set on “Inherit from workflow”. By changing it ot “Custom“, you get the option to define a different design to be used in the Start Point.
Form Activity: By selecting Form Action and Default Perspective Settings under Properties, you can choose which design to use on this specific form. Here, the default setting is also set to "Inherit from workflow“.
All the options are:
Inherit from workflow
Inherit from entry point (start point)
Inherit from previous step
Custom
This is how we can upload and specify what design we will use for the services we produce.