CSS für Devonthink

[AbwehrchefVC]

Hallo BurningChrome,

auch ich hatte mich am Wochenende mal mit Bear beschäftigt und finde die App ganz gut gelungen. Deswegen passt dein Thema auch gerade für mich wunderbar.

Ich würde das auch viel lieber in DEVONthink machen wollen, denn dann ist alles an einem Punkt/Ordner zusammen ohne Systembruch. Zumal Bear offensichtlich - anders als iA Writer - die Daten nicht richtig an DEVONthink zurückgibt nach Änderung.

@chrillek

Damit hast Du einen Ausgangspunkt, den du nach und nach erweitern kannst um das, was Du brauchst und verstehst. Dieses Gerüst legt nur eine Vorder- und Hintergrundfarbe für den “normalen” und den Dunkelmodus fest sowie die Schrift, eine Basis-Textgröße und einen linken Rand.
Alles was nur im Dunkelmodus passieren soll, muss in den geschweiften Klammern nach @media... stehen.
Das Web ist voll mit Informationen zu CSS. SelfHTML ist eine brauchbare Einstiegsdroge, MDN (Mozilla Developer Network) gut als Referenz und css-tricks.com für Tricks.

Hallo @chrillek,
danke für die „Startsequenz" das ist sicherlich ein guter Einstieg in das Thema.

Mal dazu eine Frage an den Profi:
würde es mit CSS möglich sein, die ToDo-Boxen aus Bear nachzubilden (siehe Screenshot), denn das finde ich sehr gut gelöst

Viele Grüße
Markus

[chrillek]

@AbwehrchefVC

würde es mit CSS möglich sein, die ToDo-Boxen aus Bear nachzubilden (siehe Screenshot), denn das finde ich sehr gut gelöst

<Radio Eriwan>Im Prinzip ja </Radio Eriwan>
Die Fragen in dem Zusammenhang:

• unterstützt DT Tasklists in Markdown überhaupt?
• wenn nein - EOT
• wenn ja: Welche HTML-Elemente macht es aus den Markdown-Markierungen?

Google weiß einiges dazu, z.B. https://www.reddit.com/r/RoamResearch/comments/f0h3ha/bearlike_css_for_roam_chrome/

[AbwehrchefVC]

@chrillek

unterstützt DT Tasklists in Markdown überhaupt?

das ist eine gute Frage - ich vermute mal eher nicht. Aber dazu können die Macher sicherlich mehr sagen

[chrillek]

@AbwehrchefVC

ich vermute mal eher nicht

So ist es. Aus

[ ] task
[x] task

macht DT leider das hier in HTML

<p>[ ] task [x] task</p>

das kann man so nicht stylen. Ich sehe eigentlich nur die Möglichkeit, das per (Java)Script in irgendwas zu konvertieren, das man stylen kann. Etwa in

<ul class="tasks">
<li class="task_open">task</li>
<li class="task_closed">task</li>
</ul>

Oder einen externen MD-Editor benutzen, der Aufgaben “kann”.

[AbwehrchefVC]

Hm, sehr schade.

BTW: muss ich eigentlich, wenn ich an der CSS etwas verändert habe, DEVONthink erst ganz beenden oder gibt es dafür einen einfacheren Trick?
Jedes mal, wenn ich an der CSS etwas ändere, wird diese Änderung im Dokument erst nach dem Neustart sichtbar

Und die nächste Frage, die sich daraus ergibt: wird denn dieses CSS in DT3 auch nach DTTG3 übernommen? Ich befürchte mal nicht

[chrillek]

@AbwehrchefVC

Und die nächste Frage, die sich daraus ergibt: wird denn dieses CSS in DT3 auch nach DTTG3 übernommen?

Wie das so ist mit den Fragen …

@chrillek

Möglicherweise hast Du das Stylesheet auch gar nicht richtig eingebunden, dazu sagst Du ja leider nichts: Globale Einstellung? Link im Markdown?

Das scheint ein Geheimnis zu sein
Zu Deiner Frage bzgl. DTTG: Wenn Du das CSS oben im MD einbindest (css: <link zur CSS-Datei>) funktioniert das auch mit DTTG, sofern die CSS-Datei dorthin synchronisiert wurde.

Was Deine Aufgaben angeht, könnte man am Ende der MD-Datei das hier einbinden:

<script>
document.addEventListener('DOMContentLoaded', (event) => {
  let taskRE = /\[([ x])\]\s+([^[]+)/g;
  let paras = document.getElementsByTagName("p");
  for (let p of paras) {
    let itxt = p.innerText;
    if(/^\[[ x]\]/.test(itxt)) {
        let tasks = [...itxt.matchAll(taskRE)];
        let myHTML = '';
        for (let t of tasks) {
          if (t[1] === ' ') {
             myHTML += `<span class="class_open"> ${t[2]}</span>`;
	      } else {
             myHTML += `<span class="class_closed"> ${t[2]}</span>`;
          }
	      myHTML += '</br>'
	    }
        p.innerHTML = myHTML;
	}
  }
})
</script>

und im CSS das hier

.class_open::before {
  content: '\25A1 ';
}
.class_closed::before {
  content: '\2713 ';
  color: green;
}

Dann sieht

[ ] task 1
[x] task 2

nach dem Konvertieren in HTML (!) in DT so aus. Allerdings ist das Kästchen bei task 1 natürlich funktionslos: beim Anklicken passiert nichts.

JavaScript ist gar nicht so schlecht

[AbwehrchefVC]

@chrillek

JavaScript ist gar nicht so schlecht

wenn man davon Ahnung hat

Ich bin schon froh, dass ich einigermaßen mit CSS und HTML klarkommen. Aber beim Stylen einer Webseite habe ich den Inspector als Hilfsmittel, um die richtige Stelle zu finden.

Das fehlt mir hier, um z.B. die Listen-Nummerierung oder Listen-Punkte anzupassen. Müsste ja isrgendwas mit list sein.

@chrillek

Dann sieht

[ ] task 1
[x] task 2

nach dem Konvertieren in HTML (!) in DT so aus. Allerdings ist das Kästchen bei task 1 natürlich funktionslos: beim Anklicken passiert nichts.

Echt cool, Respekt. Das sieht schon gut aus. Besten Dank für deine Mühe. Das werde ich mal versuchen bei mir einzubauen

Viele Grüße
Markus

[AbwehrchefVC]

@chrillek

Wie das so ist mit den Fragen …

@chrillek

Möglicherweise hast Du das Stylesheet auch gar nicht richtig eingebunden, dazu sagst Du ja leider nichts: Globale Einstellung? Link im Markdown?

Das scheint ein Geheimnis zu sein

das CSS habe ich über Einstellungen → Markdown → Style Sheet eingebunden. Aber selbst wenn ich zwischen 2 Style Sheets wechsel, wird die Änderung einer CSS bei mir erst nach Neustart von DEVONthink wirksam

[BurningChrome]

@AbwehrchefVC

wenn man davon Ahnung hat

Das denke ich mir schon seit ich probiert habe per Copy + Paste den Starter von @chrillek in TextEdit als CSS abzuspeichern und das den in DT zu laden (in den Einstellungen => Media). Auf einmal war alles in Times New Roman und nicht in Avenir Next. Dabei dachte ich immer das ich nicht der totale DAU bin

Von JavaScript fangen wir erst gar nicht an…

[chrillek]

@AbwehrchefVC

das CSS habe ich über Einstellungen → Markdown → Style Sheet eingebunden

Das funktioniert eben in DTTG nicht, weil es dort diese Einstellung gar nicht gibt. Du solltest einen Link zu deinem Stylesheet an den Anfang des MD schreiben:

css: <Verweis zum CSS>

Diesen Verweis bekommst Du durch Rechtsklick auf die CSS-Datei und dann “Verweis kopieren” im Kontext-Menü.
Mit diesen per Link referenzierten CSS-Dateien sollte auch der Neustart von DT nach Änderungen nicht mehr nötig sein. Die in den “Einstellungen” definierte Datei cached DT und lädt sie nicht automatisch neu.

@AbwehrchefVC

Das fehlt mir hier, um z.B. die Listen-Nummerierung oder Listen-Punkte anzupassen. Müsste ja isrgendwas mit list sein.

Ist es nicht, aus Bequemlichkeit. Es sind einfach <span>-Elemente, getrennt durch br. Die einen haben die Klasse class_open, die anderen class_closed. So steht es ja auch oben im Stylesheet.
@BurningChrome: Du brauchst gar nicht über TextEdit zu gehen: Code kopieren, in DT eine neue Textdatei anlegen und den Code da rein kopieren. Der Dateiname sollte mit .css enden, muss aber nicht.
In “Einstellungen” Media kannst du z.B. den Verweis zur CSS-Datei reinkopieren.

[chrillek]

@BurningChrome

Auf einmal war alles in Times New Roman und nicht in Avenir Nex

Mein Fehler: In der CSS-Datei stand zweimal “font-family:” Wenn Du eins davon löschst (oder die korrigierte Version weiter oben nimmst) sollte es gehen. Auch den Doppelpunkt löschen!

[AbwehrchefVC]

@chrillek

Das funktioniert eben in DTTG nicht, weil es dort diese Einstellung gar nicht gibt. Du solltest einen Link zu deinem Stylesheet an den Anfang des MD schreiben:

css: <Verweis zum CSS>

Diesen Verweis bekommst Du durch Rechtsklick auf die CSS-Datei und dann “Verweis kopieren” im Kontext-Menü.

Hm, irgendwie war der Tag heute wohl zu lang. Wenn ich den Rechtsklick im Finder machen, kann ich max einen Link erhalten auf die Cloudstation, die auch auf dem iPad zur Verfügung steht

Mit dem Pathfinder kann ich nur die verschiedenen Pfade kopieren

Mit Verweis kopieren finde ich leider nichts. Oder bin ich da auf dem falschen Weg?

[chrillek]

@AbwehrchefVC

Wenn ich den Rechtsklick im Finder machen, kann ich max einen Link erhalten auf die Cloudstation, die auch auf dem iPad zur Verfügung steht

Haha. Nicht im Finder, in DT! Du brauchst einen x-devonthink-link (so ähnlich heißt das).

Übrigens: Es gibt zu all dem auch ein paar Sätze in der Dokumentation von DT und hier im Forum wurde auch schon darüber diskutiert…

[AbwehrchefVC]

ok, so wird auch ein Schuh draus mit dem X-Callback (so heißen die Dinger glaube ich) auf die CSS funktioniert das bei mir zumindest mal in DT3, aber nicht in DTTG, obwohl ich das CSS sogar in den gleichen Ordner gepackt habe.

[chrillek]

@AbwehrchefVC

mit dem X-Callback (so heißen die Dinger glaube ich)

Nein, x-callbacks sind was anderes. Die erste Zeile in deinem MD muss so aussehen:
css: x-devonthink-item://0841105D-70B7-4518-8E2C-68E25CF8FC38
natürlich mit deinem eigenen Zeichensalat nach dem ‘//’. Und so klappt es definitiv auch in DTTG. Vorausgesetzt, die CSS-Datei ist auf deinem Mobilgerät vorhanden!

[AbwehrchefVC]

die Zeile sieht bei mir so aus. Ich hatte nur den Ordner mit den CSS noch nicht runtergeladen nach dem den Update auf DTTG3 jetzt funktioniert es. Danke für den Hinweis

[Wolkenhauer]

Ich hatte nach einem Wechsel des Rechners meine CSS Datei nicht mehr und dachte - na dann schau mal ob es nicht schöne für DT gibt … nichts, nichts für den normalen Nutzer. Wenn einer hier eine Frage hat, oder Beispiele sucht wird ihm gesagt er solle einfach CSS lernen. Wenn es dann um Beispiele geht, werden die zerrissen und am Ende ist es eben doch nicht so einfach.

Bei Obsidian tickt die Community anders. Es gibt eine Vielzahl von Leuten, die kompetent sind schöne CSS Style Files zu entwickeln - und sie bieten diese an, entwickeln sie weiter und es gibt einen Ort wo man über die Auswahl, die Funktion etc Informationen erhält.

Ich bin mir sicher, auch jetzt wird mir hier wieder irgendjemand erklären sich sollte mir einfach mal die Mühe machen das selber zu lernen. Schade, dass man im Forum keine Sammlung von CSS Style Files gibt, die dokumentiert und weiterentwickelt werden.

Ich wäre sehr dankbar und hätte auch nichts dagegen dafür etwas zu bezahlen. Ich habe leider nicht die Zeit dies zu lernen … richtig zu lernen, damit es nicht zerrissen wird.

[chrillek]

Hier hat mal jemand ein CSS für Markdown vorgestellt. Ich nehme an, es geht darum. Das könntest du dir angucken und anpassen. Ob das dann “schön” ist – keine Ahnung. Jedenfalls sollte dir die Suchfunktion weiterhelfen.

Die Beschwerde darüber, dass andere etwas nicht tun, was man gerne von ihnen getan hätte, geht ins Leere. Jede:r tut das, was er:sie gerne tun möchte, es gibt keine Serviceabteilung für CSS (oder Scripts, oder Smart Rules, oder …). Und ich jedenfalls lasse mit auch nicht verbieten, Verbesserungsvorschläge für CSS oder sonstwas zu machen.

Wer oder was hindert dich, die CSS-Vorlagen von Obsidian zu verwenden?

Und ja, es führt kein Weg darum herum, sich mit CSS zu beschäftigen, wenn man etwas haben will, was man selbst “schön” findet. Das ist ja bei Word/Pages und deren Stilvorlagen nicht anders.

[Wolkenhauer]

Ich hatte das Style File von Stefan Immhoff, und nachdem ich es verloren hatte, jetzt wieder installiert. Auf seiner neuen Webseite findet es sich nicht mehr, zumindest habe ich es dort nicht mehr gefunden.

Wenn es mit dem Nutzen von Style Files denn so einfach wäre. Wir sehen doch hier in der Debatte, dass es dann immer wieder Probleme gibt. Die für Obsidian werden vermutlich Elemente haben, die für DT nicht passen.

Als Nutzer anderer Apps kommt man sehr gut drum herum sich mit CSS zu befassen. Du zeigst ja mit Deinen Kommentaren, dass es eben doch nicht so einfach ist. Ich habe nicht diese Erfahrungen nicht und bin deshalb auf Unterstützung angewiesen.

Bei Obsidian sieht das im Forum ganz anders aus:

https://forum.obsidian.md/tags/c/share-showcase/9/custom-css

Eine riesige Auswahl gut dokumentierter und stetig weiterentwickelter Styles.

Die Besonderheiten für CSS im Obsidian Kontext sind wunderbar dokumentiert, und laden etwas mehr dazu ein sich damit zu befassen:

https://forum.obsidian.md/t/getting-comfortable-with-obsidian-css/133

Ich gehe davon aus, dass ich die Styles eben nicht einfach in DT nehmen kann, Anpassungen notwendig sind.

Der Hinweis ich finde hier https://www.w3schools.com/css/ doch alles, ist zynisch. Ja, klar.

Ich bin allen die hier mit Hilfe dabei sind, sehr dankbar. Ich wünschte mir ich könnte andere mit solchen Style Files oder technischen Fragen helfen.

Ich wollte nur sagen, dass es für mich, als Normalnutzer, mit CSS und DT leider nicht so einfach bzw bequem ist, wie z.B. bei Obsidian. Das dies mein Problem ist, ist mir klar.

Olaf

[chrillek]

Dieser Thread führt zu nichts. Wenn du konkrete Fragen hast zu konkreten CSS-Problemen, dann bitte in einem neuen Thread.