Backend Quelltexteditor/Theme/CSS

'n Abend miteinander!

ich versuche mich mal entgegen meiner sonstigen "Romane" kurz zu fassen mit meinen Fragen, die wichtigste zuerst:
1) ist bei meinem Upgrade (2.9.x -> 3.5.35) irgendwas schief gegangen oder die 3.5.35 kaputt? Der Quelltexteditor (für Templates o.ä.) macht kein Syntax-Highlighting. In einem anderen Projekt habe ich 3.5.12 - da habe ich Syntax-Highlighting
2) falls ich ein anderes Backend-Theme haben möchte, wo muss ich das einstellen bzw. wie grundsätzlich vorgehen? Gibt's ein Tutorial?
3) falls ich das CSS des Quelltexteditor ändern möchte, wie kriege ich das aus der "menschenlesbaren" Version (themes/.../src/*.css) in die "geschrumpfte" Version "übersetzt"?

Auch über Teilantworten würde ich mich freuen...

TIA
purzel

Hast Du einen Contao Check gemacht und Deine Contao 3.5.35 Installation damit überprüft?

Zitat:

---

Zitat von xchs

Hast Du einen Contao Check gemacht und Deine Contao 3.5.35 Installation damit überprüft?

---

Mehrfach. Zuletzt gerade eben:

Sie können Contao 2.x installieren Weitere Informationen …
Sie können Contao 3.x installieren Weitere Informationen …
Sie können Contao 4.x installieren Weitere Informationen …
Sie können Contao 4.5 nicht installieren Weitere Informationen …


Version

Eine Contao 3.5.35-Installation wurde gefunden.

Fehlende Dateien

.github/CONTRIBUTING.md -> tatsächlich gelöscht
contao/install.php -> hat er Recht, ist aus Sicherheitsgründen umbenannt
.htaccess.default -> heißt jetzt .htaccess

Beschädigte Dateien

robots.txt -> "beschädigt", naja. Ich habe Ergänzungen drin.


Ihre Installation ist nicht aktuell. -> 4.x will ich aber (noch) nicht.

Wenn mit der Installation soweit alles in Ordnung ist, musst Du mittels Entwicklertools Deines Browsers der Sache auf den Grund gehen. Vielleicht wird das Skript aus irgendeinem Grund nicht geladen (Rechteprobleme usw.).

Zitat:

---

Zitat von purzel

falls ich ein anderes Backend-Theme haben möchte, wo muss ich das einstellen bzw. wie grundsätzlich vorgehen?

---

Backend-Themes kannst Du über den Erweiterungskatalog installieren.

Zitat:

---

Zitat von purzel

falls ich das CSS des Quelltexteditor ändern möchte, wie kriege ich das aus der "menschenlesbaren" Version (themes/.../src/*.css) in die "geschrumpfte" Version "übersetzt"?

---

CSS kannst Du mit diversen Tools verkleinern, z. B. https://cssminifier.com/

Zitat:

---

Zitat von xchs

Wenn mit der Installation soweit alles in Ordnung ist, musst Du mittels Entwicklertools Deines Browsers der Sache auf den Grund gehen. Vielleicht wird das Skript aus irgendeinem Grund nicht geladen (Rechteprobleme usw.).

---

Ganz am Anfang wird erst natürlich das PHP und dann je ein CSS (10.93kb) und ein JS (79.69kb) (werden deren Dateinamen von Contao generiert?) sowie ein ganzer Haufen PNGs und GIFs geladen, alle mit HTTP Status 200 also OK.

Ich hänge mal Screenshots an, das OHNE Farbe ist aus meiner 3.5.35 Instanz, das MIT Farbe aus der 3.5.12 - beide mit dem selben Browser (Firefox Quantum 62.0) auf dem selben Rechner. Der Font sieht sch*** aus, deswegen ja auch meine Fragen nach Backend-Themes oder CSS-Schrumpfer.
Anhang 21329 Anhang 21328

Zitat:

---

Zitat von xchs

Backend-Themes kannst Du über den Erweiterungskatalog installieren.

---

Danke, das probiere ich am Abend mal.

Zitat:

---

Zitat von xchs

CSS kannst Du mit diversen Tools verkleinern, z. B. https://cssminifier.com/

---

Ah super. Nochmal danke; haut prima hin.

Also mein Quelltexteditor in 3.5.35 macht Syntax-Highlighting, keine Ahnung was deiner da treibt.

Edit: Wie hast du denn das Update gemacht? Einfach 3.5.35 drübergebügelt? Nachdem in einer anderen Contao 3.5.12 Installation bei dir das auch funktioniert würde ich sagen: Ja, beim Update ist definitiv was schiefgegangen. Denn der Quelltexteditor in 3.5.35 sieht normalerweise auch nicht anders aus als in 3.5.12. Das angezeigte fe_page Template scheint auch noch aus 2.9 zu sein, die in 2.9 angepassten Templates solltest du mit den aktuellen ersetzen und dann eventuell notwendige Anpassungen deinerseits darin durchführen.

Zitat:

---

Zitat von tab

Wie hast du denn das Update gemacht? Einfach 3.5.35 drübergebügelt?

---

Nein, den Fehler habe ich zuerst bei der anderen (die jetzt 3.5.12 ist) gemacht; das geht schief. Ich habe nach Tipps hier aus dem Forum erst die höchstmögliche 2.x auf den Server in ein leeres Verzeichnis extrahiert, nötige Daten eingetragen (Datenbank usw.), Installtool laufen lassen. Dann das gleiche Spiel nochmal mit der 3.5.35

Ein dateiweiser Verzeichnisvergleich (meine Installation / Archivinhalt) mit Suche nach ungleichen und in meiner Installation fehlenden Dateien lieferte (erwartungsgemäß) genau nichts. Ich konnte mir auch schwerlich vorstellen, dass was fehlen sollte, schließlich habe ich das Archiv auf der Kommandozeile (via SSH)) extrahiert.

Zitat:

---

Zitat von tab

Nachdem in einer anderen Contao 3.5.12 Installation bei dir das auch funktioniert würde ich sagen: Ja, beim Update ist definitiv was schiefgegangen.

---

Vielleicht in der Datenbank? Kann es auch an Servereinstellungen liegen? Ich habe zwar beide beim selben Hoster (Goneo), aber auf unterschiedlichen Servern (beide shared hosts). Falls es der Sache dienlich ist kann ich ja mal (relevante Teile) aus phpinfo() posten.

Zitat:

---

Zitat von tab

Denn der Quelltexteditor in 3.5.35 sieht normalerweise auch nicht anders aus als in 3.5.12.

---

Das hätte ich eigentlich auch erwartet - und mir gewünscht...

Zitat:

---

Zitat von tab

Das angezeigte fe_page Template scheint auch noch aus 2.9zu sein,

---

Nein, es ist in beiden Fällen be_unavailable aus der jeweiligen 3.5.x - nur einmal die XHTML- und einmal die HTML5 Variante. Dieses Template gab es in 2.x (zumindext für x<10) noch gar nicht. Daran liegt's aber nicht, mit der jeweils anderen Variante gleiches Verhalten.

Ich hatte noch eine Idee: Ich habe unter "Inaktive Erweiterungen" [devtools] [faq] und [newsletter] angekreuzt. Die devtools wieder 'rein zu nehmen half aber auch nicht.

Du musst kontrollieren, ob das ACE Skript ace.js ordnungsgemäß geladen und instanziiert wird:

HTML-Code:

---

<script>window.ace || document.write('<script src="assets/ace/1.1.9/ace.js" charset="utf-8">\x3C/script>')</script>
<script>
window.ace && window.addEvent('domready', function() {
  var ta = document.getElementById('ctrl_source'),
      dom = ace.require("ace/lib/dom");

  // Create a div to apply the editor to
  var div = document.createElement('div');
  div.id = 'ctrl_source_div';
  div.className = ta.get('class');
  ta.parentNode.insertBefore(div, ta.nextSibling);

  // Hide the textarea
  ta.style['display'] = 'none';

  // Instantiate the editor
  var editor = ace.edit('ctrl_source_div');
  editor.setTheme("ace/theme/clouds");
  editor.renderer.setScrollMargin(3, 3, 0, 0);
  editor.renderer.scrollBy(0, -6);
  editor.getSession().setValue(ta.value);
  editor.getSession().setMode("ace/mode/php");
  editor.getSession().setUseSoftTabs(false);
  editor.getSession().setUseWrapMode(true);
  editor.setAutoScrollEditorIntoView(true);

  // Add the fullscreen command
  editor.commands.addCommand({
    name: 'Fullscreen',
    bindKey: 'F11',
    exec: function(editor) {
      dom.toggleCssClass(document.body, 'ace-fullsize');
      editor.resize();
    }
  });

  // Disable command conflicts with AltGr (see #5792)
  editor.commands.bindKey('Ctrl-alt-a|Ctrl-alt-e|Ctrl-alt-h|Ctrl-alt-l|Ctrl-alt-s', null);

  // Adjust the height of the editor
  var updateHeight = function() {
    var newHeight
      = editor.getSession().getScreenLength()
      * (editor.renderer.lineHeight || 14);
    editor.container.style['height'] = Math.max(newHeight, editor.renderer.lineHeight) + 'px';
    editor.resize();
  };

  editor.on('focus', function() {
    Backend.getScrollOffset();
    updateHeight();
  });

  editor.getSession().on('change', function() {
    ta.value = editor.getValue();
    updateHeight();
  });

  updateHeight();
});
</script>

---

Kannst Du das betreffende Skript im Browser direkt über https://example.com/assets/ace/1.1.9/ace.js aufrufen?

Zitat:

---

Zitat von xchs

Du musst kontrollieren, ob das ACE Skript ace.js ordnungsgemäß geladen und instanziiert wird:

HTML-Code:

---

<script>window.ace || document.write('<script src="assets/ace/1.1.9/ace.js" charset="utf-8">\x3C/script>')</script>
<script>
window.ace && window.addEvent('domready', function() {
  var ta = document.getElementById('ctrl_source'),
      dom = ace.require("ace/lib/dom");
....

---

---

Wo muss ich nach dem obigen JS-Code suchen? Muss ich überhaupt danach suchen?
Oder habe ich Dich missverstanden, dass ich obigen Code auf dem Server mal laufen lassen soll?

Zitat:

---

Zitat von xchs

Kannst Du das betreffende Skript im Browser direkt über https://example.com/assets/ace/1.1.9/ace.js aufrufen?

---

Ja, das geht:

Code:

---

(function(){function o(n){var i=e;n&&(e[n]||(e[n]={}),i=e[n]);if(!i.define||!i.define.packaged)t.original=i.define,i.define=t,i.define.packaged=!0;if(!i.require||!i.require.packaged)r.original=i.require,i.require=r,i.require.packaged=!0}var ACE_NAMESPACE = "ace",e=function(){return this}();!e&&typeof window!="undefined"&&(e=window);if(!ACE_NAMESPACE&&typeof requirejs!="undefined")return;var t=function(e,n,r){if(typeof e!="string")

usw.

---

Zitat:

---

Zitat von purzel

Wo muss ich nach dem obigen JS-Code suchen?

---

Du müsstest in den Entwicklertools Deiner Browsersoftware schauen, welchen Statuscode der Aufruf dieses Skripts generiert. Nachdem Du das Skript aber anscheinend direkt im Browser aufrufen kannst, wird das aller Voraussicht nach wohl ein Status 200 sein.

Zitat:

---

Zitat von xchs

Du müsstest in den Entwicklertools Deiner Browsersoftware schauen, welchen Statuscode der Aufruf dieses Skripts generiert. Nachdem Du das Skript aber anscheinend direkt im Browser aufrufen kannst, wird das aller Voraussicht nach wohl ein Status 200 sein.

---

Hm. Ich benutze Firefox 62 und da extrem viel die Stilbearbeitung aus den Entwicklertools.
Alles andere habe ich bisher nur wenig, manches auch gar nicht benutzt; bin in dem Bereich also Anfänger. Immerhin konnte ich ja (s.o.) rausfinden, dass beim Starten des Template-Editors je ein CSS und JS mit Erfolg geladen werden - aber halt mit so komisch kryptischen Namen. Die werden zwar standardmäßig aus dem Browsercache geladen, aber wenn ich den leere hat alles Status 200. ace.js taucht jedoch nicht explizit auf.
Wann sollte denn ace.js geladen werden?

Die Dateien mit den kryptischen Namen (z.B. assets/js/93d244afc184.js) habe ich auch schon mal gelöscht. Die sind schnell wieder da und enthalten irgendwelchen MooTools-JavaScript.

Ich habe mal auf meiner "normalen" Seite (also FE) und auch bei geöffnetem Template-Editor im BE den HTML-Quellcode anzeigen lassen; in beiden Fällen finde ich (bzw. Firefox' SuFu) NICHT dieses ace.js

Ach ja, einen anderen Browser habe ich auch probiert: auch damit kein buntes Syntax-Highlighting.

Gibt es vielleicht irgendwelche BE Einstellungen die ich mal prüfen sollte? Muss ich da irgendwo das ace.js eintragen?

Zwischendurch auch schonmal ein DANKESCHÖN, dass du mir so geduldig hilfst.

Zitat:

---

Zitat von purzel

Ich habe mal auf meiner "normalen" Seite (also FE) und auch bei geöffnetem Template-Editor im BE den HTML-Quellcode anzeigen lassen; in beiden Fällen finde ich (bzw. Firefox' SuFu) NICHT dieses ace.js

---

Das sollte dort (also im Backend) aber eigentlich vorhanden sein. Ganz unten, fast am Seitenende.

Wenn das dort nicht geladen wird, ist die Frage, wieso nicht.

Zitat:

---

Zitat von purzel

Gibt es vielleicht irgendwelche BE Einstellungen die ich mal prüfen sollte? Muss ich da irgendwo das ace.js eintragen?

---

Ich mache mal statt EDIT ein Zweitposting in Ergänzung zum Vorherigen.

Es gibt neue Erkenntnisse:
1. habe ich Deinen o.g. Code gefunden, in system/config/ace.php
2. das ace.php bzw. die Bedingung if ($GLOBALS['TL_CONFIG']['useCE']): hat mich inspiriert, mal nach useCE zu "grepen"
3. eines der Resultate hat mich dazu bewogen, den guten PHPmyAdmin zu bemühen und in tl_user zu gucken. Dort fand ich, dass mein Benutzer (also ich) u.a. eine in diesem Zusammenhang interessante Spalte hat: useCE und die ist leer!

Traue ich mich nun, da ne 1 rein zu schreiben oder geht das auch "offiziell" über irgendeine BE-Einstellung?

Aaahhh. Klicke im Backend oben auf deinen Benutzernamen, dann kommst du in die Einstellungen.
Da gibt es eine Checkbox "Rich Text Editor verwenden".

Zitat:

---

Zitat von purzel

Ich mache mal statt EDIT ein Zweitposting in Ergänzung zum Vorherigen.
Traue ich mich nun, da ne 1 rein zu schreiben oder geht das auch "offiziell" über irgendeine BE-Einstellung?

---

Mittels PHPmyAdmin da eine 1 rein zu schreiben hat zur Folge - drum roll please - dass ich Syntax-Highlighting habe!!!

Zitat:

---

Zitat von tab

Aaahhh. Klicke im Backend oben auf deinen Benutzernamen, dann kommst du in die Einstellungen.
Da gibt es eine Checkbox "Rich Text Editor verwenden".

---

Meine 1 wirkt auf Code-Editor. Rich Text Editor war schon an.
Im BE auf meinen Benutzernamen habe ich gefühlte hundert Jahre nicht :D

Aber hurra, es geht. Was für 'ne Geburt.

Vielen Herzlichen Dank für die Unterstützung!!!

Zitat:

---

Zitat von purzel

Zitat:

---

Zitat von xchs

Backend-Themes kannst Du über den Erweiterungskatalog installieren.

---

Danke, das probiere ich am Abend mal.

---

Viel kam ja im Erweiterungskatalog nicht als ich "backend theme" eingegeben habe. Ausprobiert habe ich nur "BackendThemeExtended", aber im Prinzip will/brauche ich nun doch kein anderes Theme. Hauptsächlich, weil ich mich so lange (seit Typolight nämlich) an das "normale" gewöhnt habe. Der Wunsch nach anderem Theme kam eigentlich nur nebenbei, weil ich die Farben (und den Font!) des Code-Editors in der 3.5.12 gräßlich finde. Die Farben sind in der 3.5.35 - seit es da auch funktioniert - deutlich besser. Vielleicht habe ich demnächst mal Zeit und Lust, auch die andere Instanz zu aktualisieren.
Weiterhin, da ich auch den Tipp mit dem CSS "Komprimieren" bekam, kann ich die IMHO hässliche Courier-Schrift für den Editor wegschmeißen und alles ist gut. Ich weiß, DAS ist nicht update-safe.

Also an dieser Stelle nochmals vielen Dank für die freundliche Unterstützung.

Zitat:

---

Zitat von purzel

Meine 1 wirkt auf Code-Editor. Rich Text Editor war schon an.
Im BE auf meinen Benutzernamen habe ich gefühlte hundert Jahre nicht :D

---

Den Code-Editor kannst Du übrigens unter "Benutzerverwaltung" > "Benutzer" oder über das Modul "Personendaten" oben im Topmenu aktivieren oder deaktivieren.

Zitat:

---

Zitat von purzel

kann ich die IMHO hässliche Courier-Schrift für den Editor wegschmeißen

---

Das ging sogar (mittels sed-Einzeiler) in den komprimierten CSS-Files (system/themes/.../main.css), hat aber erst nach Leeren des Browser-Cache funktioniert.
Den sed-Einzeiler kann ich mir aufbewahren und muss ihn halt nach einem etwaigen Update wieder laufen lassen.
Courier hasse ich schon immer, es gibt schönere Monospace-Fonts ;)

Zitat:

---

Zitat von xchs

... "Benutzerverwaltung" > "Benutzer" oder über das Modul "Personendaten" oben im Topmenu aktivieren oder deaktivieren.

---

In der Benutzerverwaltung, sowohl Benutzer als auch Benutzergruppen war ich (glaub' ich) seit Installation nicht mehr drin; ich bin nämlich jeweils der Einzige.
Die Personendaten ist wohl das, was tab auch meinte - und ich dann mit "meine 1 wirkt auf..." (Ich hatte ja, weil ich die Einstellung erst nach dem Tipp von tab fand, die entsprechende 1 direkt in die Datenbank geschrieben)

Schönes Wochenende Euch freundlichen Helfern, allen anderen natürlich auch