CSS tab - FORMCYCLE Wiki

author	version	line-number	content
1	{{content/}}
2
3	{{figure image="designer_advanced_css_example_en.png" width="500"}}
4	Design your form by adding your own custom {{smallcaps}}Css{{/smallcaps}} in the {{smallcaps}}Css{{/smallcaps}} tab. Here we removed the border around input fields and gave labels a blue tint.
5	{{/figure}}
6
7	The idea behind {{smallcaps}}Css{{/smallcaps}} is to separate the layout from the content. You can take one HTML page and apply different {{smallcaps}}Css{{/smallcaps}} file to give the page a different layout and/or styling. There are two parts to a {{smallcaps}}Css{{/smallcaps}} files:
8
9	* A [[selector>>doc:Formcycle.FormDesigner.CodingPanel.Selector]] that tells the brower which elements you want to style,
10	* and a list of properties or styles to apply to these elements, such as the color or font size
11
12	The {{smallcaps}}Css{{/smallcaps}} tab lets you add your own {{smallcaps}}Css{{/smallcaps}} easily. Once you make any changes, they are applied immediately once you click anywhere outside the {{smallcaps}}Css{{/smallcaps}} tab. For special selectors used by {{formcycle/}}, see [[the help pages on selectors>>doc:Formcycle.FormDesigner.CodingPanel.Selector]].
13
14	== Help pages for CSS ==
15
16	=== CSS selectors ===
17
18	* [[https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors\|\|rel="noopener noreferrer" target="_blank"]]
19	* [[https://www.w3schools.com/cssref/css_selectors.asp\|\|rel="noopener noreferrer" target="_blank"]]
20
21	=== CSS properties ===
22
23	* [[https://www.w3schools.com/cssref/default.asp\|\|rel="noopener noreferrer" target="_blank"]]
24	* [[https://www.w3.org/TR/CSS/#properties\|\|rel="noopener noreferrer" target="_blank"]]
25
26	== Example ==
27
28	First we set some default values for the font size and color that are applied to the entire form. By setting a font size in pixels on the form element, we can then use the [[{{smallcaps}}Css{{/smallcaps}} units>>url:https://www.w3schools.com/cssref/css_units.asp\|\|rel="noopener noreferrer" target="_blank"]] //em// for all other elements. If we later change our mind and change the font size of the form, all other font sizes are scaled accordingly.
29
30	{{code language="CSS"}}
31	FORM.xm-form { /* Selects the entire form */
32	font-size: 16px; /* Base font size */
33	color: #111; /* Base font color */
34	font-family: Arial; /* Base font type */
35	}
36	{{/code}}
37
38	Now we add a class named //tallText// that increases the font size greatly. Once you have added this code to the {{smallcaps}}Css{{/smallcaps}} tab, you can then select this class in the [[{{smallcaps}}Css{{/smallcaps}} classes section>>doc:Formcycle.FormDesigner.ElementProperties.CSSClasses]] of the properties panel of the {{designer/}}.
39
40	{{code language="CSS"}}
41	.hoherText .XTextField { /* Selects all elements with the class tallText */
42	height: 3.75em; /* Make the input field about 4 times as high as the base font size */
43	font-size: 2.5em; /* Make the font two and a half times as large as the base font size */
44	font-weight: bold; /* Make the text bold */
45	text-align: center; /* Center the text horizontally */
46	}
47	{{/code}}
48
49	== Editor ==
50
51	The {{smallcaps}}Css{{/smallcaps}} tab provides you with an intelligent code editor that supports you and lets you write you {{smallcaps}}Css{{/smallcaps}} smoothly and quickly. The editor that we make use of is called [[monaco editor>>url:https://microsoft.github.io/monaco-editor/index.html\|\|rel="noopener noreferrer" target="_blank"]]. Here is a quick overview over some of the main features:
52
53	{{figure image="designer_advanced_css_colorpicker.png" width="500" float="none"}}
54	Colors are a fundamental part of every design. The color picker opens when you hover with the mouse over a color value. It lets you pick and preview a color easily. Also, you can always see a preview for all colors used in the {{smallcaps}}Css{{/smallcaps}} file, so that you do not have to read hexadecimal color codes.
55	{{/figure}}
56
57	{{figure image="designer_advanced_css_expand_collapse.png" width="500" float="none"}}
58	For each selector, you can expand or collapse the properties applied to it. Click on the + or - icon in the left panel with the code line numbers.
59	{{/figure}}
60
61	{{figure image="designer_advanced_css_property_suggest.png" width="700" float="none"}}
62	When you enter a {{smallcaps}}Css{{/smallcaps}} property, the editor gives you a list of suggestions and possible properties. You can also trigger the autocomplete feature manually by pressing ctrl + space. For most properties, the editor also offers a description that explain what the property is and what it does. When you have just opened the {{designer/}}, the descriptions are hidden. Click on the blue {{icon name="info-circle"/}} icon to show them.
63	{{/figure}}
64
65	{{figure image="designer_advanced_css_value_suggest.png" width="700" float="none"}}
66	The autocomplete feature is available for the values of {{smallcaps}}Css{{/smallcaps}} properties as well. For many values, a short description is also available. When you have just opened the {{designer/}}, the descriptions are hidden. Click on the blue {{icon name="info-circle"/}} icon to show them.
67	{{/figure}}
68
69	{{figure image="designer_advanced_css_search_replace_de.png" width="700" float="none"}}
70	As the size of a {{smallcaps}}Css{{/smallcaps}} file grows, finding a certain location becomes harder. This is where the search bar can help you out. Open the search bar by pressing ctrl + f. It opens near the top right corner of the editor. Enter a text to search for and the editor highlights all occurrences of that text. To start a case-sensitive search, click on the icon to the right of the search bar. Lastly, when you want to replace some text with another text, enter the replace mode by either pressing ctrl + h or by clicking on the arrow to the left of the search bar.
71	{{/figure}}
72
73	{{figure image="designer_advanced_css_hints.png" width="700" float="none"}}
74	The editor is able to recognizes some types of errors. Parts marked in green are potential mistakes, but they are not critical errors. When a part is marked in red, this usually indicates a syntax error. You should read the detailled error message by hovering over the error and correct it. Shown in the figure is a set of {{smallcaps}}Css{{/smallcaps}} properties that are incompatible, as the width of inline elements cannot be specified directly (it is determined during the layout phase).
75	{{/figure}}

{{figure image="designer_advanced_css_example_en.png" width="500"}}

Design your form by adding your own custom {{smallcaps}}Css{{/smallcaps}} in the {{smallcaps}}Css{{/smallcaps}} tab. Here we removed the border around input fields and gave labels a blue tint.

5

6

7

The idea behind {{smallcaps}}Css{{/smallcaps}} is to separate the layout from the content. You can take one HTML page and apply different {{smallcaps}}Css{{/smallcaps}} file to give the page a different layout and/or styling. There are two parts to a {{smallcaps}}Css{{/smallcaps}} files:

8

9

* A [[selector>>doc:Formcycle.FormDesigner.CodingPanel.Selector]] that tells the brower which elements you want to style,

10

* and a list of properties or styles to apply to these elements, such as the color or font size

11

12

The {{smallcaps}}Css{{/smallcaps}} tab lets you add your own {{smallcaps}}Css{{/smallcaps}} easily. Once you make any changes, they are applied immediately once you click anywhere outside the {{smallcaps}}Css{{/smallcaps}} tab. For special selectors used by {{formcycle/}}, see [[the help pages on selectors>>doc:Formcycle.FormDesigner.CodingPanel.Selector]].

13

14

== Help pages for CSS ==

15

16

=== CSS selectors ===

17

18

* [[https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors||rel="noopener noreferrer" target="_blank"]]

19

* [[https://www.w3schools.com/cssref/css_selectors.asp||rel="noopener noreferrer" target="_blank"]]

20

21

=== CSS properties ===

22

23

* [[https://www.w3schools.com/cssref/default.asp||rel="noopener noreferrer" target="_blank"]]

24

* [[https://www.w3.org/TR/CSS/#properties||rel="noopener noreferrer" target="_blank"]]

== Example ==

First we set some default values for the font size and color that are applied to the entire form. By setting a font size in pixels on the form element, we can then use the [[{{smallcaps}}Css{{/smallcaps}} units>>url:https://www.w3schools.com/cssref/css_units.asp||rel="noopener noreferrer" target="_blank"]] //em// for all other elements. If we later change our mind and change the font size of the form, all other font sizes are scaled accordingly.

29

30

31

FORM.xm-form { /* Selects the entire form */

32

font-size: 16px; /* Base font size */

33

color: #111; /* Base font color */

34

font-family: Arial; /* Base font type */

}

Now we add a class named //tallText// that increases the font size greatly. Once you have added this code to the {{smallcaps}}Css{{/smallcaps}} tab, you can then select this class in the [[{{smallcaps}}Css{{/smallcaps}} classes section>>doc:Formcycle.FormDesigner.ElementProperties.CSSClasses]] of the properties panel of the {{designer/}}.

39

40

41

.hoherText .XTextField { /* Selects all elements with the class tallText */

42

height: 3.75em; /* Make the input field about 4 times as high as the base font size */

43

font-size: 2.5em; /* Make the font two and a half times as large as the base font size */

44

font-weight: bold; /* Make the text bold */

45

text-align: center; /* Center the text horizontally */

}

== Editor ==

The {{smallcaps}}Css{{/smallcaps}} tab provides you with an intelligent code editor that supports you and lets you write you {{smallcaps}}Css{{/smallcaps}} smoothly and quickly. The editor that we make use of is called [[monaco editor>>url:https://microsoft.github.io/monaco-editor/index.html||rel="noopener noreferrer" target="_blank"]]. Here is a quick overview over some of the main features:

52

53

{{figure image="designer_advanced_css_colorpicker.png" width="500" float="none"}}

54

Colors are a fundamental part of every design. The color picker opens when you hover with the mouse over a color value. It lets you pick and preview a color easily. Also, you can always see a preview for all colors used in the {{smallcaps}}Css{{/smallcaps}} file, so that you do not have to read hexadecimal color codes.

55

56

57

{{figure image="designer_advanced_css_expand_collapse.png" width="500" float="none"}}

58

For each selector, you can expand or collapse the properties applied to it. Click on the + or - icon in the left panel with the code line numbers.

59

60

61

{{figure image="designer_advanced_css_property_suggest.png" width="700" float="none"}}

62

When you enter a {{smallcaps}}Css{{/smallcaps}} property, the editor gives you a list of suggestions and possible properties. You can also trigger the autocomplete feature manually by pressing ctrl + space. For most properties, the editor also offers a description that explain what the property is and what it does. When you have just opened the {{designer/}}, the descriptions are hidden. Click on the blue {{icon name="info-circle"/}} icon to show them.

63

64

65

{{figure image="designer_advanced_css_value_suggest.png" width="700" float="none"}}

66

The autocomplete feature is available for the values of {{smallcaps}}Css{{/smallcaps}} properties as well. For many values, a short description is also available. When you have just opened the {{designer/}}, the descriptions are hidden. Click on the blue {{icon name="info-circle"/}} icon to show them.

67

68

69

{{figure image="designer_advanced_css_search_replace_de.png" width="700" float="none"}}

70

As the size of a {{smallcaps}}Css{{/smallcaps}} file grows, finding a certain location becomes harder. This is where the search bar can help you out. Open the search bar by pressing ctrl + f. It opens near the top right corner of the editor. Enter a text to search for and the editor highlights all occurrences of that text. To start a case-sensitive search, click on the icon to the right of the search bar. Lastly, when you want to replace some text with another text, enter the replace mode by either pressing ctrl + h or by clicking on the arrow to the left of the search bar.

71

72

73

{{figure image="designer_advanced_css_hints.png" width="700" float="none"}}

74

The editor is able to recognizes some types of errors. Parts marked in green are potential mistakes, but they are not critical errors. When a part is marked in red, this usually indicates a syntax error. You should read the detailled error message by hovering over the error and correct it. Shown in the figure is a set of {{smallcaps}}Css{{/smallcaps}} properties that are incompatible, as the width of inline elements cannot be specified directly (it is determined during the layout phase).

75

Wiki source code of CSS-Bereich

Navigation