Letzte Bearbeitung:

Function colorselection

Useage : {{­{colorselection();}}}

Gibt ein Formular aus zur Auswahl der Vordergrund- und Hintergrundfarbe mit jeweiligem Transparenzgrad. Die eingegebenen Werte werden unmittelbar in der Vorschau angezeigt. Die Werte werden als Hexzahlen angezeigt und können so notiert werden für die spätere Verwendung an anderer Stelle. Diese Funktion ist zur Zeit nur als Hilfsmittel bei der Festlegung von Farbkombinationen gedacht.

{{­{colorselection();}}} ⇒ 

Farb- & Transparenzwerte als Hexzahlen
VordergrundfarbwertVG-Transparenz
#ff0000#ff
HintergrundfarbwertHG-Transparenz
#ffff00#ff

Beispieltext

Dies ist ein Text (z.B. mit Fettschrift),
der nur zur Veranschulichung dient.

Der Hintergrund - Farbverlauf (der äußere Rahmen) wird mit background-image: linear-gradient(to top left, vordergrundfarbe+transparenzgrad1) 0%, hintergrundfarbe+transparenzgrad1) 100%) erzeugt. Der mittlere weiße Rahmen zeigt die Basis - Zeichen- und Hintergrundfarbe des nächst inneren Feldes. Der innere (schmalere) Rahmen wird mit border-left: 10px solid vordergrundfarbe; border-right: 10px solid hintergrundfarbe; border-top: 10px solid vordergrundfarbe; border-bottom: 10px solid hintergrundfarbe; erzeugt. Das innerste Feld wird mit der Textfarbe des zusammengesetzten Wertes von Vordergrund1) und mit der Hintergrundfarbe des zusannengesetzten Wertes von Hintergrund1) angezeigt. 1)Zusammengesetzter Wert bedeutet hier: Farbe (hex, 6 Stellen) + Transparenz (hex, 2 Stellen).

Hier die Farben und Transparenzwerte einstellen.
Farbe: Auf das jeweilige Farbfeld klicken und dann die neue Farbe auswählen.
Transparenz: am jeweiligen Schiebregler den gewünschten Wert einstellen.

Vordergrund




Hintergrund






 

Dateiname: ./plugins/simpleplugins_xh/simpleplugins_library/colorselection/index.php

<?php

/*****************************************************
* Category : CMSimple_XH
* Typ : CMSimple Plugin
* Package : simpleplugins_xh Edition KRL
*****************************************************
* Function name : colorselection
* File name : index.php
* Version : 1.7.2
* Build : 20240206
* Autor : Karl Richard Lembach https://lembach-cmsimple.de
* Lizenz : CC-by-SA https://creativecommons.org/licenses/by-sa/4.0/deed.de
* Function : Gibt Dialog zur Einstellung von Vordergrund- und Hintergrundfarbe aus.
* Sinnvoll auf verdeckter Seite zum Austesten der Farbkombination in der Seitengestaltung.
* Outputs dialog for setting foreground and background color.
* Useful on a hidden page to test the color combination in the page design.
******************************************************
* Useage : {{{colorselection();}}}
* Example : {{{colorselection();}}}
******************************************************
* Quelle der Grundlagen des Codes (Javascript wurde dann wieder entfernt):
* https://wiki.selfhtml.org/wiki/Farbw%C3%A4hler
* https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare/input/Farbw%C3%A4hler#Farbw.C3.A4hler
* https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:Farbw%C3%A4hler.html#view_result
* https://wiki.selfhtml.org/extensions/Selfhtml/frickl.php/Beispiel:CSS_currentcolor2.html#view_result
*
* Websites mit alternativen Farbwaehlern:
* <a rel="nofollow" class="external text" href="https://encycolorpedia.com/">EncyColorPedia</a>
* <a rel="nofollow" class="external text" href="http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF">PalettOn</a>
* <a rel="nofollow" class="external text" href="http://www.color-picker.de/">pkColorPicker</a>
* <a rel="nofollow" class="external text" href="http://www.easyrgb.com/">easyRGB</a>
* <a rel="nofollow" class="external text" href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_Colors/farbauswahl_werkzeug">Farbauswahl-Werkzeug</a>
*
******************************************************/

/*
* Prevent direct access.
*/
if (!defined('CMSIMPLE_XH_VERSION')) {
header('HTTP/1.0 403 Forbidden');
exit;
}

function colorselection(){

global $sl, $pth, $plugin_tx;
// Texte für das Dialogfenster einlesen, als Default zuerst den englischen Text.
$farbwert = '#ff0000';
$transluzenzwert = 1;
$hintergrundwert = '#ffff00';
$bgtransparenzwert = 1;

if(isset($_POST['color'])){
$farbwert = $_POST['color'];
}
if(isset($_POST['transluzenz'])){
$transluzenzwert = $_POST['transluzenz'];
}
if(isset($_POST['bgcolor'])){
$hintergrundwert = $_POST['bgcolor'];
}
if(isset($_POST['bgtransparenz'])){
$bgtransparenzwert = $_POST['bgtransparenz'];
}
$hextransluzenz = dechex(intval($transluzenzwert*255+0.5));
$hextransparenz = dechex(intval($bgtransparenzwert*255+0.5));


$outputstring = '
<style type="text/css">
fieldset#colorselect {
margin-right: 2em;
padding:0.5em;
float: left;
min-width: 10em;
white-space: nowrap;
border-radius: .5ex 0ex .5ex 0ex;
box-shadow: .054vw .054vw .109vw var(--hintergrund), .164vw .164vw .164vw var(--akzent);
}
div.vgcolor, div.vgtransp {
margin-top: .2em;
padding: .25em;
float: left;
min-height: 3.5em;
}
legend#colorselect {
margin-top: 0.6ex;
padding: 0ex 0.6ex 0.3ex 0.6ex;
border: 1px solid gray;
border-radius: .5ex 0ex .5ex 0ex;
background-color:#f8f8f8;
box-shadow: .054vw .054vw .109vw var(--hintergrund), .164vw .164vw .164vw var(--akzent);
}
label#colorselect {
white-space: normal;
background-color:#f0f0f0;
padding: 0 .5ex .3ex .5ex;
margin: 0 1ex 10ex 0;
border-radius: .5ex 0ex .5ex 0ex;
border: 1px solid gray;
box-shadow: .054vw .054vw .109vw var(--hintergrund), .164vw .164vw .164vw var(--akzent);
}
input#color, input#transluzenz, input#background, input#bgtransparenz {
min-width: 4em;
height: 2.5ex;
padding: 0em;
cursor: pointer;
box-shadow: .054vw .054vw .109vw var(--hintergrund), .164vw .164vw .164vw var(--akzent);
}
input#color, input#background {
height: 5ex;
}
output#colorselect {
float: left;
margin-right: 2em;
clear: both;
padding: 2em;
background-position: 0 0, 100% 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: linear-gradient(to top left, '.$farbwert.$hextransluzenz.' 0%, '.$hintergrundwert.$hextransparenz.' 100%);
}
div#demobox {
padding: 1em;
border-left: 10px solid '.$farbwert.';
border-right: 10px solid '.$hintergrundwert.';
border-top: 10px solid '.$farbwert.';
border-bottom: 10px solid '.$hintergrundwert.';
background-color: '.$hintergrundwert.$hextransparenz.';
color: '.$farbwert.$hextransluzenz.';
}
table#colorselect, th#colorselect, td#colorselect, caption#colorselect {
border: thin solid #a0a0a0;
border-radius: .5ex 0ex .5ex 0ex;
box-shadow: .054vw .054vw .109vw var(--hintergrund), .164vw .164vw .164vw var(--akzent);
}
table#colorselect {
border-collapse: separate;
border-spacing: 1ex 1.25ex;
margin-bottom: 1em;
table-layout: auto;
max-width: 100%;
}
th#colorselect, td#colorselect {
font-weight: normal;
text-align: center;
}
th#colorselect, caption#colorselect {
background-color: #f1f3f4;
font-weight: 700;
}
th#colorselect, td#colorselect, caption#colorselect {
padding: .15em .5em;
}
caption#colorselect {
text-align: center;
border-width: thin thin 0 thin;
margin-bottom: 1ex;
}
div#transluzenz {
box-shadow: .054vw .054vw .109vw var(--hintergrund), .164vw .164vw .164vw var(--akzent);
height: 3ex;
border: 1px solid gray;
border-radius: 0.5ex;
margin-top: .2ex;
padding-top: 1ex;
padding-left: 20px;
padding-right: 10px;
}
div#transluzenz::before {
content: "transp.   ";
font-size: x-small;
vertical-align: top;
}
div#transluzenz::after {
content: "   opac";
font-size: x-small;
vertical-align: top;
}
</style>

<table id="colorselect">
<caption id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_post"].'</caption>
<tr><th id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_foregroundcolorvalue"].'</th><th id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_foregroundtransparency"].'</th></tr>
<tr><td id="colorselect">'.$farbwert.'</td><td id="colorselect">#'.$hextransluzenz.'</td></tr>
<tr><th id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_backgroundcolorvalue"].'</th><th id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_backgroundtransparency"].'</th></tr>
<tr><td id="colorselect">'.$hintergrundwert.'</td><td id="colorselect">#'.$hextransparenz.'</td></tr>
</table>
<output id="colorselect">
<!-- Weißer Hintergrund für die Vorschaufläche -->
<div style="color: #ffffff; background-color: #ffffff; padding: 3px;">
<div id="demobox">
<p style="font-weight: 900; font-size: 2em;"><u>'.$plugin_tx["simpleplugins_xh"]["colorselection_beispieltext"].'</u></p>
<p>'.$plugin_tx["simpleplugins_xh"]["colorselection_textfeld"].'</p>
</div>
</div>
</output>
<p>'.$plugin_tx["simpleplugins_xh"]["colorselection_hinweis2"].'</p>
<p style="clear: both;"></p>

<p>'.$plugin_tx["simpleplugins_xh"]["colorselection_hinweis1"].'</p>
<form method="post">
<fieldset id="colorselect">
<legend id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_foreground"].'</legend>
<div class="vgcolor">
<label id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_color"].'</label><br><br>
<input name="color" id="color" type="color" value="'.$farbwert.'" onchange="submit();">
</div>
<div class="vgtransp">
<label id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_transparency"].'</label><br><br>
<div id="transluzenz">
<input name="transluzenz" id="transluzenz" type="range" min="0" max="1" step="0.01" value="'.($transluzenzwert).'" onchange="submit();">
</div>
</div>
</fieldset>
<fieldset id="colorselect">
<legend id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_background"].'</legend>
<div class="vgcolor">
<label id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_color"].'</label><br><br>
<input name="bgcolor" id="background" type="color" value="'.$hintergrundwert.'" onchange="submit();">
</div>
<div class="vgtransp">
<label id="colorselect">'.$plugin_tx["simpleplugins_xh"]["colorselection_transparency"].'</label><br><br>
<div id="transluzenz">
<input name="bgtransparenz" id="bgtransparenz" type="range" min="0" max="1" step="0.01" value="'.($bgtransparenzwert).'" onchange="submit();">
</div>
</div>
</fieldset>
<br class="clear"><br>
<button type="submit" style="border-radius: 1ex;">'.$plugin_tx["simpleplugins_xh"]["colorselection_sendbutton"].'</button>
</form>
';

return $outputstring;
}
?>