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), like for example in the counter the defaults you can make. Or in different places you can enter how many pixels (px) "something" should be wide or high (2). The unit of measurement px is in the field, but cannot be overwritten. So you can just click in the field and enter a number. Then there is a field to specify a percentage value (3). This can be the transparency of a color or the relative width of a column.
These elements can be placed within a row between other specifications (5) or at the beginning of a row (4), at the end of a row (2 or 3) or by themselves (1).
Each element has a blue area on the right where there are two white triangles. With this you can increase or decrease the value in the field with a mouse click. Depending on the type of value, the range of these steps varies. Sometimes the value is changed by one counter at a time, sometimes in steps of 10.
Each element usually also has a fixed range. Either fixed by the number of digits. Two-digit fields can display max. up to 99, three-digit fields up to 999. Macnhmal the maximum and minimum value is also given by us.
Input fields for colors
Almost all areas of page4 can be set with their own colors. 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 for calling the color picker (1). For many areas you can additionally set the transparency. Then a number field with percentage values is attached (2). If it is possible to delete the color of an area completely, you will find next to the icon for selecting the color picker (the palette) a trashcan to delete the color (3). You see, the preview becomes transparent, instead of a color code a bar is displayed and of course in this case also the value for the coverage has no effect anymore.
Color elements can be alone (1), at the end of a line (2,3,4), in the middle of a line (5) or at the beginning (6).
Note: You cannot enter the color code directly. This field is for display only.
Transparency: Some elements like lines must have a color, this is intended by the programming. But since line colors can get a transparency, you can make a line transparent by setting the transparency value to 1%. This way you can for example hide lines in the navigation if you don't want to have them although 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, you can choose exactly one option. In our dialogs we have built our own buttons from this. The function is identical. There are two or more options available and one of them must or is always selected. The active option is highlighted in blue. All other options have a white background. The operation is very simple. You click on the option you want to have.
There are different variations. Basically, radio buttons are always on their own in a line, because they usually can't be combined with other inputs.
You can either choose one from 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 like a toggle 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 a possibility is needed to be able to enter this link. Therefore an additional line is shown. With the link to the original size or if no link is desired, this is of course not necessary.
The picture above shows only a small selection. But all option fields work identically and the label shows you exactly what happens when you activate an option.
Input fields with icon(s) which open dialogs
There are quite a number of elements where you first have to open a dialog to fill the element with your own values. Almost always an icon is used for this purpose. Some elements even have more than one icon. The following is a short overview of the most important elements.
1) Font selection = If you click on the icon (A) a dialog with fonts will open. 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 where you can choose a color. If you accept the color, the dialog is closed and the selected color is entered. You can also cancel this dialog and nothing will be changed.
3) Icon = Click on the icon (a pin) to open a dialog with all available icons. A click on an icon closes the dialog and the icon is taken over and displayed.
4) Image selection = Here you have several icons. The first icon (green folder) opens a dialog where you can select an image from the image administration. 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.
There are also 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 step through the options that are possible. The symbol changes each time and shows the current option. If you click on the display, where the information is, then a dialog opens where you can choose from one of the options by clicking on the option. In detail these are the following elements.
5) Image size adjustment = Here you can determine how a background image should be adjusted to the available area. There are 6 options available.
5) Image repetition = Here you can define if 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 determine which corner should be given the "rounded" effect. There are 15 options.
6) Borders = You define on which sides a border should be displayed. There are 15 options.