[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
REDAXO Forum • Colorpicker um Farbe auf einer Seite einzustellen
Seite 1 von 1

Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 15. Okt 2015, 21:06
von Daimonion
Hallo

Ich bin ziemlich neu in Redaxo, aber finde das Konzept genial. Bisher habe ich entweder mit meinen eigenen CMS Systemen gearbeitet oder auf komplette Systeme wie Wordpress, Serendipity, Websitebaker, Joomla etc. gesetzt.

Gerade aber für kleine individuelle Seiten ist Redaxo Gold wert.

Nun bin ich dabei eine recht einfache Seite zu designen und hab im Hintergrund Redaxo laufen.
Als Eigenschaft dieser kompletten Webseite soll es so sein, dass auf jder Unterseite der Hintergrund eine andere Farbe bekommt. Implementieren kann ich das sehr einfach via CSS. Kein Problem soweit. Der Webseitenbetreiber will diesen farbigen Hintergrund nun aber selbst im Redaxo Backend einstellen. Nichts leichter als das hab ich ihm zugesichert. ;)
Ich dachte mir nun wäre es doch einfach ein Modul zu nehmen, wo als Eingabe ein Colorpicker implementiert ist und als Ausgabe implementiere ich den entsprechenden CSS Header für die HTML Seite. Da ich das Rad nicht neu erfinden wollte dachte ich ich frage mal bei euch bzw. erst bei Google nach ob es so was für Redaxo schon gibt.

Leider habe ich bisher noch nichts gefunden. Hab ich es nur übersehen oder gibt es das wirklich noch nicht?

Danke schon mal im Voraus für die Hilfe
Grüße
Daimonion

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 16. Okt 2015, 08:25
von Thomas.Blum
Hej,

das ist recht einfach zu lösen.

In der Moduleingabe einfach ein Textfeld mit einer CSS-Class (colorpicker) vergeben.

Ich nutze für solche Fälle diesen Colorpicker
https://bgrins.github.io/spectrum/

Dann noch die CSS und JS-Dateien einbinden und die Class aufrufen

Code: Alles auswählen

<link rel="stylesheet" type="text/css" href="/dir/spectrum.css" />
<script type="text/javascript" src="/dir/spectrum.js"></script>
<script type="text/javascript">jQuery(".colorpicker input").spectrum({ showInput: true,  preferredFormat: "hex", clickoutFiresChange: true, showPalette: false, chooseText: "Farbe wählen", cancelText: "abbrechen" });</script>
Fertig

vg Thomas

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 16. Okt 2015, 10:43
von Daimonion
Danke Thomas für die Hilfe.

Ich werde das heute Abend mal einbauen. Evtl. muss ich mich dann nochmal melden. ;)

Grüße
Daimonion

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 16. Okt 2015, 22:01
von Daimonion
So, jetzt muss ich mich doch nochmal melden. Das Einbinden des Colorpickers hat soweit geklappt. Die Ausgabe ist jetzt aber doch schwieriger als gedacht, da ich ja an der Stelle wo ich die einzelnen Module definiere, schon das Template definiert habe.

Gibt es nun eine Möglichkeit Die Modulausgabe so in das Template einzubauen, dass die Farbe im Body Tag mittels style="background-color:#000000;" verändert werden kann?
Kann ich eine Variable in einem Modul so speichern das ich im template mittels $this->value("color") zugreifen kann?

Ich hoffe ihr versteht was ich meine.

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 16. Okt 2015, 22:58
von Cheffchen
Hallo,

ich häte da eine Idee auch wenn bestimmt nicht nicht beste aber geht zumindest, vielleicht kommt ja noch was besseres.

gebe die stellen ein eindeutigen platzhalter wo das color einfügen möchtest im template zb "DASistMEINEclass"
jetzt im modul das am ende

Code: Alles auswählen

<?php
$meintext = '#ff00ff';
$suchtext = 'hiermeinsuchtext'; #wenn dieses stück schon im header ist wird meintext nicht eingefügt
rex_register_extension('OUTPUT_FILTER', create_function('$params', 'if (strpos($params[\'subject\'], \''.$suchtext.'\')===false) return str_replace(\'DASistMEINEclass\',\''.$meintext.'\',$params[\'subject\']);')); 
?>
Cheffchen

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 17. Okt 2015, 12:32
von Ingo
a) sowas gehört nicht ins modul sondern in die artikelmetas
b) kannst du einen <style></style> block auch mitten im body ausgeben. ist zwar nicht valide, wird aber vom browser angenommen

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 17. Okt 2015, 14:37
von Daimonion
Danke für die Antworten.

Ingo, kann ich ein zusätzliches Feld in die Metadaten einfügen? Wäre ja eigentlich genau an der richtigen Stelle.

Einen style Tag im Body würde ich erst machen wenn es nichts anderes mehr gibt.

Cheffchen

Deine Idee geht genau so gut. ;) Muss ich mal schauen was ich da umsetze.

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 19. Okt 2015, 21:41
von Daimonion
Hi Leute.

Ich liebe Redaxo.

Aktuell kann ich die Farbe in den Body tag laden indem ich diese nicht innerhalb eines Modules implementiere, sondern ich hab mir ein neues Metadatenfeld gemacht. Momentan schreibe ich nun die Farbe da in HEX rein. Mal schauen, wenn die Webseite soweit fertig ist, werde ich mich mal dran machen und da den Colorpicker reinbauen.

Danke euch allen mal für die Hilfe!

Grüße Daimonion

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 20. Okt 2015, 00:25
von RexDude
Hi,

im Backend Utilities > Colorizer Plugin gibt es einen mitgelieferten Colorpicker. Ich habe gerade das Plugin umgeschrieben, so dass man den Colorpicker von überall im Backend über die CSS Klasse "rex-colorpicker" nutzen kann. Download der aktuellen (noch inofiziellen) Version nur über GitHub: https://github.com/RexDude/be_utilities
(über Download Zip Button)

Re: Colorpicker um Farbe auf einer Seite einzustellen

Verfasst: 16. Mai 2016, 21:01
von Daimonion
So, hallo

Was lange währt wird gut..

Ich habe den Colorpicker nun mal für eine Moduleingabe benutzt und soweit lädt er auch korrekt. Farben werden angezeigt und nun bin ich am schauen wie ich den Hex String in eine Redaxovariable bekomme:

Code: Alles auswählen

<script src='../template/spectrum.js'></script>
<link rel='stylesheet' href='../template/spectrum.css' />
    <div>
        <div style="float:left;width:180px;font-weight:bold;font-size:14px;vertical-align:center;">Farbe Überschrift:</div>
        <div>
            <input id="colorpicker" type="text" name="VALUE[5]" value="REX_HTML_VALUE[5]" />
            <script type="text/javascript">jQuery("#colorpicker").spectrum({
                                showPaletteOnly: true,
                                togglePaletteOnly: true,
                                togglePaletteMoreText: 'zeige mehr',
                                togglePaletteLessText: 'zeige weniger',
                                color: 'blue',
                                showInput: true,
                                preferredFormat: 'hex3',
                                clickoutFiresChange: true,
                                palette: [
                                ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
                                ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
                                ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
                                ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
                                ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
                                ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
                                ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
                                ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]]
                                });
            </script>
        </div>
    </div>
    <div style="float:clear;margin-bottom:15px;"></div>
Ich hab da noch meine Probleme damit wo ich die Change Funktion hinstecken könnte, so dass der HexWert in den REX_HTML_VALUE[5] geladen werden kann.

https://bgrins.github.io/spectrum/#events-change