With the new version of page4, which has been on the market since 2015, we have introduced standardized input fields. These are small building blocks that are used in our dialogues and ensure that you find your way very quickly. With these input fields you can include images, create links, select colors, set frames and much more. Below is an overview of the modules currently in use. The images are enlarged to provide space for numbering


Input fields for numerical values

You can set many parameters yourself with page4. For numbers we have built special elements that work the same everywhere. There are elements to represent pure numbers (1), such as the settings you can make in the Analyzer. Or at different places you can enter how many pixels (px) "a little" wide or high (2). The unit px is in the field, but cannot be overwritten. You can therefore simply click into the field and enter a number. Then there is a field to set a percentage (3). This can be the transparency of a color or the relative width of a column.


These elements can be within a line between other specifications (5) or at the beginning of a line (4), at the end of a line (2 or 3) or even for themselves (1).


p>Each element has a blue area with two white triangles on the right. This allows you to increase or decrease the value in the field with a mouse click. The character spacing of these steps varies depending on the type of value. Sometimes the value is changed by one increment, sometimes in steps of 10.


p>Each element usually has a fixed range. Either determined by the number of digits. Two-character fields can show max. up to 99, three-character fields up to 999th Macnhmal the maximum and minimum value is also specified by us.

Input fields for colors

You can add your own colors to almost all areas of page4. Depending on the area, the element looks slightly different. In the simplest case the element consists of the display of the color code, a preview field and the icon to call up the color selector (1). For many areas you can also set the transparency. Then a number field with percentage values is attached (2). If it is possible to completely remove the color of an area, you will find a recycle bin next to the icon for selecting the color selector (palette) to remove the color (3). You see, the preview becomes transparent, instead of a color code a bar is displayed and of course the value for the coverage has no effect anymore.

Color elements can stand alone (1), at the end of a line (2,3,4), in the middle of a line (5) or at the beginning (6).


Hint: You cannot enter the color code directly. This field is only for display.


Transparency: Some elements such as lines must necessarily have a color, this is provided for by programming. Since line colors can get a transparency, you can make a line quasi transparent by setting the value of the transparency to 1%. For example, you can hide lines in the navigation if you don't want them even though you want to use the template otherwise.

Radio buttons for selecting an option

The usual radio buttons consist of a round icon and a text. The special feature is that you can choose exactly one option. In our dialogs we have built our own buttons. The function is identical. Two or more options are available and one of them must or is always selected. The active option is highlighted in blue. All other options are highlighted in white. Operation is very simple. You click on the option you want to have.

>There are different variations. In principle, radio buttons are always on their own in a line, since they cannot normally be combined with other entries.

you can either select one of any number of options (1,3). Sometimes there are several options and one of them turns off the effect completely (2). Some options have exactly two states. This can then act as a changeover switch (4) or as an on/off switch (5). For some options, additional input fields appear. If you activate an external link as indicated in (6), then it will be necessary for you to be able to enter this link. An additional line is therefore displayed. For the link to the original size or if no link is desired, this is of course not nötig.


p>The picture on the right shows only a small selection. All radio buttons work identically and the caption shows you exactly what happens when you activate an option.

Input fields with icon(s) which open dialogs

There are a number of elements where you first need to open a dialog to fill the element with your own values. An icon is almost always used for this. Some elements even have more than one icon. Below is a small overview of the most important elements.

1) Font selection = If you click on the icon (A) then a dialog with fonts opens. As soon as you click on a font, the dialog closes and the selected font is displayed in the field and used.

2) Color field = If you click on the icon (color palette) a dialog opens with which you can determine a color. If you take over the color, the dialog is closed and the selected color is entered. You can also cancel this dialog and nothing will change.

3) Icon = If you click on the icon (a magazine needle) a dialog with all available icons opens. A click on an icon closes the dialog and the icon is taken over and displayed.

4) Image selection = There are several icons here. The first icon (green folder) opens a dialog with which you can select an image from the image management. The second icon (dark blue archive) opens the dialog to our image archive and allows you to use an image from it. The third icon (blue arrow) opens a dialog that allows you to upload an image from your computer.


Additionally there are elements that have an icon before the actual display. Each element has two functions. If you click on the symbol in front of the display, you will step through the individual options that are possible. The symbol changes each time and displays the current option. If, on the other hand, you click on the display where the information is, a dialog opens where you can select one of the options by clicking on the option. In particular, the following elements are.

5) Image size adjustment = Here you can determine how a background image is to be adapted to the available area. 6 options are available.

5) Image repetition = Here you determine whether and how a background image should be repeated (tiled).

5) Image alignment = Here you determine how the background image should be aligned. There are 9 options.

6) Corners = You decide which corner is to be rounded. There are 15 options.

6) Frame = You specify on which pages a frame should be displayed. There are 15 options.

page4 Webbaukasten 0