help.en.php - Was steht in dieser Datei?1
Hilfe zur Konfiguration: Text auf englisch, der erläutert, was in den einzelnen Konfigurationsbereichen eingestellt und ausgewählt werden kann.
Dateiname: templates/krl-3col-flex/config/help.en.php
<?php
/*
* @category Template for CMSimple_XH Version 1.7+
* @package krl-3col-flex
* @version 3.2.2
* @file help.de.php | Hilfetext zur Konfiguration
* @last_modified 10.03.2024
* @author Karl Richard Lembach | https://lembach-cmsimple.de/?Home
* @copyright 2021 - 2024 Karl Richard Lembach <https://lembach-cmsimple.de>
* @license https://www.gnu.org/licenses/gpl-3.0 GNU GPLv3
* @link https://template.lembach-cmsimple.de/?Template-krl-3col-flex
* @contact https://lembach-cmsimple.de/?Home/Kontakt-Formular | webmaster@lembach-cmsimple.de
This program is free software.
You can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation,
and/or modify it, either under version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful to you, but WITHOUT ANY WARRANTY,
even without the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for details.
You should have received a copy of the GNU General Public License with this program. If not, see <https://www.gnu.org/licenses/gpl-3.0>.
German translation (not a legal substitute for the original): http://www.gnu.de/documents/gpl.de.html
*/
$helptext = '
<div class="news">
<fieldset class="conf">
<legend class="shadow">'.$text['hilfezurkonfiguration']. '</legend>
<div class="confighelp">
<div style="font-size: small;">This is a translation from German (from Deepl.com). <br>For original text see /templates/krl-3col-flex/config/help.de.php.</div>
<h6><a id="oben"></a><a href="#absatz1">'.$text["versioncheck"].'</a></h6>
<h6><a href="#absatz2">'.$text["switches"].'</a></h6>
<h6><a href="#absatz3">'.$text["footer_links"].'</a></h6>
<h6><a href="#columnwidth">'.$text["columnwidth"].'</a></h6>
<h6><a href="#absatz4">'.$text["maincolor"].'</a></h6>
<h6><a href="#absatz5">'.$text["menucolor"]. '</a></h6>
<h6><a href="#absatz51">' . $text["colordefinition"] . '</a></h6>
<h6><a href="#absatz6">'.$text["headershiftimage"].'</a></h6>
<h6><a href="#absatz7">'.$text["headercrossfade"].'</a></h6>
<h6><a href="#absatz8">'.$text["headerslideshow"].'</a></h6>
<h6><a href="#absatz9">'.$text["headerslideshowbelow"]. '</a></h6>
<h6><a href="#absatz10">' . $text["translation"] . '</a></h6>
<h6><a href="#absatz11">' . $text["favicon_definition"] . '</a></h6>
<h5><a id="absatz1"></a>'.$text["versioncheck"]. '</h5>
<p>The version check shows both the version of the template installed on the server and the latest version of the template available online. The download address is provided as a link.</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz2"></a>'.$text["switches"]. '</h5>
<p>Hyphenation (i.e. the feature of modern/new browsers for automatic hyphenation) can be defined in the editor via the format assignment for areas (span), paragraphs (p) and blocks (div). Hyphenation can be switched on for entire pages via the <span class="Tab">More</span> tab.
Here in the switch settings, this feature can be activated for all pages that are displayed with this template.<br>Five variants are available for the header design (header = everything above the breadcrumb navigation bar):</p>
<ol>
<li>No header: no background image, no logo and no motto text are displayed.</li>
<li>In the background, a very wide image runs endlessly from right to left (image height best 300 pixels, image width more than 4000 pixels), images taken with the mobile phone panorama function are best suited for this. No JS, only CSS!<br>
The image must be located in the ./userfiles/images folder or a subfolder thereof. The folder is selected via a drop-down list. The image is then selected via a second drop-down list.
Only files with one of the following extensions appear in this list: bmp gif jp2 jpg png tif tiff webp svg<br>If the image is higher than 300 pixels, an approx. 300 pixel high strip is displayed from the centre of the image.
If the image is not wide enough, it is zoomed in, but parts of the image height are lost again. This means: incorrect image dimensions do not destroy the layout, but they do lead to unsightly effects.
If you do not have a suitable panoramic image, it is best to get a very large image, cut out a narrow strip from it and then scale the result to a height of 300 pixels.
The speed at which the background image scrolls can be set between 10 and 200 pixels per second. At values below 20 pixels/second, the image may begin to jerk, and at values above 100 pixels/second, the viewer may become dizzy.<br>
A logo is displayed in front of the background image at the top left and the motto text at the top right. The logo file must be located in the images folder of the template or in one of the folders under ./userfiles/images.
The logo graphic looks best if it is a graphic with a transparent background. The background image can then shine through the transparent colour background. It is selected via a drop-down list of folders and a second list of files.
The logo is automatically scaled down (max. width: 576 pixels, max. height: 242 pixels). However, to avoid having to transfer unnecessarily large images, it is advisable to adjust the size of the logo graphic approximately.
The motto text is limited to a maximum width of 1152 pixels, which corresponds to around 50-51 characters. If it is so long that it no longer fits in a line, it is automatically wrapped.
An arbitrary line break can be achieved by entering the vertical bar (| = AltGr + <) or <br>. Single (′) or double (″) inverted commas are automatically converted into their HTML entities &#039; and &quot;.
The motto text can be up to 6 lines high. From the seventh line onwards, it pushes the breadcrumb navigation downwards. The text colour of the motto text can be set freely or the accent colour can be adopted by pressing a button.
Both the logo and the slogan text are highlighted with a freely selectable colour, the degree of transparency of which can be adjusted. The corner radius of this colour background can be set.</li>
<li>A crossfading show of images from a subfolder of ./userfiles/images/ is running in the background. No JS, only CSS!<br>The folder selection is carried out as described under 2.
As the background images are not automatically adjusted to 1920 * 300 pixels and are displayed in the layer in front of the website content, incorrectly sized images would cover the content.
As a result, these background images must be exactly 1920 pixels wide and 300 pixels high! Only images with the extensions specified under 2. are displayed. The number of images displayed depends on the number of files in the folder.
How long an image is displayed before fading to the next can be set between 0.5 and 300 seconds, with an increment of 0.2 seconds. You can also set how quickly the crossfade takes place.
This value is a relative value (slow = 1, fast = 10), as it depends on the number of images on the one hand and the display duration on the other. Simple trial and error is the best way here.<br>
The logo, motto text, text color, background color and corner radius are set as described under 2.</li>
<li>This header uses the Slideshow plugin. The speed and effects are therefore defined in the plugin settings. JS must be active in the browser for the slideshow.
Image dimensions: 1920 * 300 pixels. All JPEG, PNG and GIF images in the selected folder are used for the slideshow. There must be at least two images in this folder.
If there are also *.webp images with the same base name as a recognized image, these are used instead if the browser supports WebP.<br>The slideshow runs in the background.
The logo and the motto text can be seen in front of it. The settings for the image folder, logo, motto text, text color, background color and corner radius are made as described under 2.</li>
<li>This header also uses the Slideshow plugin. See also under 4.<br>Here, however, the logo and the slogan text are displayed above the slideshow, which means that the header is significantly higher than in the other variants.
The logo is limited here to 576 pixels wide and 259 pixels high.<br>Other than that, everything is the same as in variant 4.</li>
</ol>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz3"></a>'.$text["footer_links"]. '</h5>
<p>There are three groups of links here:</p>
<ol style="list-style-type: upper-roman;">
<li>The obligatory links to the internal pages for contact, data protection and imprint.</li>
<li>The optional links to (if available) other, own websites.</li>
<li>Further links to the hoster, sponsor and W3C CSS Validator.</li>
</ol>
<p>So that this configuration page is not displayed too full, the first two groups are initially hidden. They are shown by clicking on the group heading.</p>
<h6>Mandatory links to internal pages</h6>
<p>This is about the links to the Contact, Privacy and Imprint pages. There are two ways to set the link in each case:</p>
<ol>
<li>Selection from a drop-down list of all existing pages (i.e. the page must already exist at this time) or</li>
<li>Enter the address manually according to the page structure (the page does not necessarily have to already exist, it only has to be known where the page will be placed in the page structure).</li>
</ol>
<p>If the address is entered manually, only the part of the address after the question mark in the address must be entered! So not https://meinedomain.de/?Home/Kontakt but only Home/Contact!</p>
<p>This area can either be closed by clicking on "Close area <span class="fa fa-minus-circle"></span>" or by submitting an entry in another area.</p>
<h6>Optional links to other own websites</h6>
<p>Up to 5 links to other own websites can be defined here. The input screen for the 2nd link only appears once the URL has been defined in the first link.
The third screen only appears when the URL has been defined in the 2nd link, and so on. The validity of the URL is not (explicitly: <span style="colour: #ff0000;">NOT</span>) checked.
It should therefore be copied from the address bar of the browser (with the successfully accessed website in the window) in each individual case!<br>The text for the title attribute and the text that acts as a link can be entered freely.
HTML-critical characters are automatically converted into their HTML entities. Therefore, there should be no problems with the entered texts.</p>
<h6>Optional links to external sites</h6>
<p>Finally, there is also the option of defining a link to the web host and to any existing sponsor.<br>This is intended as a kind of thanks / praise / recognition. Both links appear in a separate line on their own.</p>
<p>And then there is the option of displaying a link for CSS validation. (At some point, the template will be free of CSS errors <img src="http://localhost:88/plugins/tinymce4/tinymce/plugins/emoticons/img/smiley-wink.gif" alt="wink">.)</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="columnwidth"></a>'.$text["columnwidth"]. '</h5>
<p>The width of the website is divided into three columns. Under certain circumstances, the two right-hand columns are combined into one column.<br>The width of each of these three columns is an integer multiple of 1/24 of the page width.</p>
<p>All three columns together therefore have a width of 24/24.<br>To enable the webmaster to design the column width flexibly without interfering with the template file, there are five prepared width distributions to choose from:</p>
<ol>
<li>Menü 3/24 - Content 15/24 - News 6/24</li>
<li>Menü 4/24 - Content 15/24 - News 5/24</li>
<li>Menü 5/24 - Content 14/24 - News 5/24</li>
<li>Menü 5/24 - Content 16/24 - News 3/24</li>
<li>Menü 6/24 - Content 12/24 - News 6/24</li>
</ol>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz4"></a>'.$text["maincolor"]. '</h5>
<p>This template has a number of design elements that have the same colour.
These include the background behind the website (only visible if the viewport width is greater than 1920 pixels in reality or by reducing the size of the website (zoom < 100%)),
the horizontal lines and bars in the header and footer area, the breadcrumb navigation with search, font size change and "last modified" link, the <hr> element, horizontal lines in the footer display ...<br>
This is the main colour or accent colour. The default value of this colour (it then applies as the basic setting for all pages that are displayed with this template) can be set here without intervening in a file.
With very wide viewports (more than 1920 pixels), the background of the template has a colour gradient. The background colour (main colour) is completely opaque in the middle up to 1920 pixels.
From there to the outside, towards the side edges, the colour gradient is created by the background colour becoming transparent to an adjustable extent. There is a small preview so that this can also be set on smaller screens.</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz5"></a>'.$text["menucolor"]. '</h5>
<p>The menu has its own background colour. Inactive elements (i.e. the majority) have the medium brightness, the active menu item is slightly darker and the element under the mouse is slightly lighter.
The difference in brightness between the levels is #22222222. The hover colour, i.e. the brightest of the three, is set.</p>
<p>To ensure a minimal difference in brightness to the white font colour, the upward brightness is limited to #DDDDDDDD.
To ensure that the background colour of the active menu item is not darker than black (#000000), the hover colour downwards is limited to #444444.
This upper and lower limit is defined for each of the three partial colours (i.e. #DD and #44).</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz51"></a>' . $text["colordefinition"] . '</h5>
<p>For each color defined as a variable in the template that cannot be set under the two points described above, the value of the color and the value of the transparency can be set in this list.
The values displayed in the labels are the currently saved values! They are only updated after the form has been submitted.
This means that immediately after changing one of the values (before submitting the form), the value displayed in the label differs from the value displayed in the color field / transparency slider.<br>
To give you the opportunity to "play around" with the color, these input fields are not onchange-active, but need to be sent with the "Send input" button on the right-hand side.<br>
Brief information on where and what the respective color is used for is displayed when you hover the info point of the respective color with the mouse.</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz6"></a>'.$text["headershiftimage"]. '</h5>
<p>In the background, a very wide image runs endlessly from right to left (image height preferably 300 pixels, image width more than 4000 pixels); images taken with the panorama function or assembled with appropriate tools are best suited for this.
No JS is used for the scrolling image, only CSS!<br>The image must be located in the ./userfiles/images folder or a subfolder thereof. The folder is selected via a drop-down list. The image is then selected via a second drop-down list.
Only files with one of the following extensions appear in this list: bmp gif jp2 jpg png tif tiff webp svg<br>If the image is higher than 300 pixels, a strip approx. 300 pixels high is displayed from the centre of the image.
If the image is not wide enough, it is zoomed in, but parts of the image height are lost again. This means that incorrect image dimensions do not destroy the layout, but they do lead to unsightly effects.
If you do not have a suitable panoramic image, it is best to get a very large image, cut a narrow strip out of it and then scale the result to a height of 300 pixels. <br>
The speed at which the background image scrolls can be set between 10 and 200 pixels per second. At values below 20 pixels/second, the image may start to jerk; at values above 100 pixels/second, the viewer may become dizzy.
The time required for a complete cycle is calculated based on the selected speed and screen width. This time is displayed.<br>
A logo is displayed in front of the background image at the top left and the motto text at the top right, both with a transparent colour background.
The logo file must be located in the images folder of the template or in one of the folders under ./userfiles/images.
The logo graphic looks best when it is a graphic with a transparent background. The background image can then shine through the transparent colour background. <br>
The logo is selected via a drop-down list of folders and a second list of files.
However, it is also possible to select "- show no logo -" to display no logo.<br>
The logo is automatically scaled down (max. width: 576 pixels, max. height: 242 pixels).
However, to avoid having to transfer unnecessarily large images, it makes sense to adjust the size of the logo graphic approximately.<br>
The motto text is limited to a maximum width of 1152 pixels, which corresponds to about 50-51 characters.<br>
If no text is entered, the colour background of the text is not displayed.<br>
If the text is so long that it no longer fits on one line, it is automatically wrapped.
An arbitrary line break can be achieved by entering the vertical bar (| = AltGr + <) or <br>.<br>
Single (′) or double (″) inverted commas are automatically converted into their HTML entities &#039; and &quot;.<br>
The motto text can be up to 6 lines high. From the seventh line, it pushes the breadcrumb navigation downwards.<br>
The text colour of the motto text can be set freely or the accent colour can be adopted by pressing a button.<br>
Both the logo and the motto text are highlighted with a freely selectable colour, the degree of transparency of which can be adjusted.<br>
The corner radius of this colour background can also be adjusted.</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz7"></a>'.$text["headercrossfade"]. '</h5>
<p>A crossfading show of images from a subfolder of ./userfiles/images/ runs in the background. No JS is necessary for this effect, it is realised with CSS alone! Required image size: 1920 * 300 pixels.<br>
The folder is selected from a drop-down list as described above.
Since the background images are not automatically adjusted to 1920 * 300 pixels and are displayed in the layer in front of the website content, incorrectly dimensioned images would cover the content (especially the menu).
As a result, these background images must be exactly 1920 pixels wide and 300 pixels high! Only images with the following extensions will be displayed: bmp gif jp2 jpg png tif tiff webp svg.<br>
The number of images displayed depends on the number of files in the folder.<br>
How long an image is displayed before fading to the next can be set between 0.5 and 300 seconds, with an increment of 0.2 seconds.<br>
You can also set how quickly the cross-fade takes place.
This value is a relative value (slow = 1, fast = 10), as it depends on the number of images on the one hand and the display duration on the other. Simple trial and error is the best way here.<br>
The times for fade-in duration, cycle time and fade time resulting from these settings are displayed.<br>
The logo, motto text, text colour, background colour and corner radius are set as described above under "' . $text["headershiftimage"] . '".</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz8"></a>'.$text["headerslideshow"]. '</h5>
<p>This header uses the Slideshow plugin. The speed and effects are therefore defined in the plugin settings. JS must be active in the browser for the slideshow. Image dimensions: 1920 * 300 pixels.
All JPEG, PNG and GIF images in the selected folder are used for the slideshow. There must be at least two images in this folder.
If there are also *.webp images with the same base name as a recognised image, these will be used instead if the browser supports WebP.<br>
The slideshow runs in the background. The logo and the motto text can be seen in front of it. The settings for the slideshow image folder, the logo, the slogan text, the text colour, the background colour and the corner radius are made as described under "' . $text["headershiftimage"] . '".</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz9"></a>'.$text["headerslideshowbelow"]. '</h5>
<p>This header also uses the Slideshow plugin. For more information, see "' . $text["headerslideshow"] . '".<br>
Here, however, the logo and the slogan text are displayed above the slideshow, which means that the header is significantly higher than in the other variants.
The logo is limited to 576 pixels wide and 259 pixels high, so it can be a few pixels higher than in the other variants.<br>
Otherwise, everything is the same as with the "' . $text["headerslideshow"] . '" variant.</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz10"></a>' . $text["translation"] . '</h5>
<p>With this configuration item, translations of the (German) texts used in the template can be transferred to the desired new language or existing translations can be corrected.
If there is no language file in the desired language yet, the fields of the new language are first filled with the German texts (so that a text is output in the new language in any case,
even if it has not yet been translated).<br>
The first fold-out line contains a radio button list with the TLD extension and the flag of the country that stands for the desired target language.
If the desired language is not included in this list (CMSimple_XH does not have a language file for it), you can enter the TLD below.
All entries are onchange-active.<br>Under the second fold-out line is a text explaining why the use of the apostrophe should be avoided.
HTML tags are converted to non-effective text. Exception: < b r > und < b ><br>
In particular, the text array elements with the keys <b>colordefinition, columnwidth, footer_links, headercrossfade, headershiftimage, headerslideshow,
headerslideshowbelow, maincolor, menucolor, switches, translation and versioncheck</b> apostrophes or other HTML entities must not be used under any circumstances!<br>
A three-column table is displayed below this. This contains the key of the array element on the left, the German text in the middle and the input field for the translation on the right.<br>
All text fields in the new language in which no translation has yet been entered are highlighted in light yellow.</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
<h5><a id="absatz11"></a>' . $text["favicon_definition"] . '</h5>
<p>The configuration of favicon.php makes it easier to put together a selection of icons that are transferred from the template to the browser (<link rel....).
If you do not yet have a complete set of icons, you can follow the link to an online icon generator.
Of course, this requires a finished graphic as a template for the icons, which must be uploaded to the generator.
There is also a link to the operating instructions I have created.<br>The tool assumes that the icons are located in the /templates/krl-3col-flex/images/favicon/ folder.
If it does not find any files there, it offers an entry for an alternative folder.<br>
The files found are listed in the right-hand column and offered for selection with check boxes.
There are also check boxes to select or deselect all files. For files that are recognized (by PHP) as graphics, their size is displayed.
For files whose name begins with one of the following texts, there are predefined schemas for the text of the link.
<br><b>android-chrome... apple-touch-icon... favicon... mstile... favicon... safari-pinned-tab... browserconfig...</b>
<br>The same applies to the following file extensions: <b>...webmanifest ...ico ...xml</b>
<br>The procedure for all other files is the same as for favicon... The lines of these files in the favicon.php may need to be corrected "by hand".
<br>As an additional background/frame/contrast color can be specified for some devices/operating systems/programs, it is possible to specify a color for this.
<br>After you have made a selection/set a color, a preview of the future content of the favicon.php is displayed below the file list.
<br>If you now click on "Save file", the favicon.php is written. The page is reloaded and the confirmation message is displayed at the top.
All selections and settings are now automatically deleted and the page is reloaded.</p>
<div class="imgR"><span class="bigger"><a href="#oben">_<span class="fa fa-chevron-up"></span>_</a></span></div>
</div>
</fieldset>
</div>';
echo $helptext;
Weil Google diese Seite als Duplicate Content erkannte, habe ich den Titel geändert.