CSS für Devonthink

BurningChrome · February 14, 2021, 7:18pm

Hallo zusammen!

Gerne würde ich meinem DT Notizen einen netteren Look verpassen.

den “Bear Look” verpassen, ich finde Bear optisch wirklich gelungen. Ich habe aber leider Ahnung von CSS und habe mal ein bisschen im Netz rumgesucht, werde aber nicht so recht schlau aus dem Thema.

Die Cracks mögen mir bitte mein Unvermögen verzeihen. Ich habe einen ganz netten Style gefunden, der auch im Dark Mode funktioniert https://www.stefanimhoff.de/downloads/MarkdownDefault.css

Am liebsten hätte ich ja, dass DT so aussieht wie Bear. Hier https://marked2app.com/styles/ gibt es zwar ein Bear like CSS, aber das geht in DT irgendwie nicht richtig.

Hat jemand von Euch vielleicht einen Tipp zu einem schönen (ja ich weiss, Schönheit ist subjektiv CSS Style?

Ich würde mich freuen!

Viele Grüsse
Chrome

BLUEFROG · February 15, 2021, 2:51am

Beachten Sie, dass das Stylesheet, das Sie verwenden möchten, keine Unterstützung für den dunklen Modus hat, so dass Sie den hellen Modus in Ihrem Gerät verwenden oder ein anderes Stylesheet finden müssen.

(Übersetzt mit https://deepl.com)

BurningChrome · February 15, 2021, 6:54am

Hallo Jim!

Danke für die Antwort. Ja, dieses Stylesheet geht nur im hellen Modus… Leider habe ich selbst nicht die Kenntnisse um dieses Sheet so anzupassen wie ich es gerne hätte. Also so dass dieses im Hell- und Dunkelmodus funktioniert und mehr wie Bear aussieht.

Gibt es irgendwo eine Quelle die erklärt wir man genau ein solches Stylesheet erstellen kann? Ich habe bei Recherche im Netz leider nichts finden kann das mir weiterhilft.

BLUEFROG · February 15, 2021, 7:21am

Gern geschehen.

Hier ist ein Link für Anfänger in CSS:

https://www.w3schools.com/css/

chrillek · February 15, 2021, 8:05am

Ich empfehle für alles, was mit dem Web zu tun hat, immer Mozilla Developer Network (mdn). Die W3Schools sind nach meinem Eindruck häufig etwas der Entwicklung hinterher und manchmal arg knapp.

Unabhängig davon:

Wenn Du möchtest, dass das “irgendwie richtig” geht, müsstest Du erklären, was Du mit diesem kryptischen Halbsatz meinst. Und vielleicht auch erwähnen, was genau du bisher getan hast, damit es “irgendwie richtig” gehen könnte.

BurningChrome · February 15, 2021, 9:47am

Hey!

Danke für die Antwort und den Tipp!

Ja, entschuldige bitte die ungenaue Ausdrucksweise. Da ich keine Ahnung von der Erstellung eines solchen CSS habe, habe ich mich bisher mit dem Einsetzen bereits vorhandener Styles versucht. Bei praktisch allen habe ich immer wieder Probleme gehabt:

meist geht der Wechsel von Hell- auf Dunkelmodus nicht, oder die Schrift wird im Dunkel Modus so dargestellt, dass sie nicht lesbar ist (schwarze Schrift auf grauem Untergrund)
Bei dem ersten von mir verlinkten CSS bleibt halt auch im Dunkelmodus die Seite hell, nicht optimal, aber lesbar. Mir fehlt aber das Vermögen dies anzupassen, so das auch hier ein Wechsel geschieht. Sofern das überhaupt möglich ist das ein automatischer Wechsel von Hell- auf Dunkelmodus passiert in einem eigenen CSS.
Mit “irgendwie nicht richtig” meine ich, dass die Darstellung des Bear CSS nicht korrekt erfolgt, zumindest wenn ich die tatsächlich Darstellung in DT dann mit dem vergleiche, was auf der Seite als Vorschau angezeigt wird (Der Seitenrand ist nicht vorhanden Zitate stimmen nicht) Hierzu habe ich mal Screenshots beigefügt. Aber letztlich muss ich mich dann wohl entweder mit dem Thema intensiv befassen, sobald ich Zeit habe und hoffen das ich sowas selbst hinbekomme, oder halt mit dem Leben was DT mir anbietet…

Das Kursive ist eigentlich ein Zitat, wird aber nicht so gerendert wie es sollte, denn der rote Strich an der Seite fehlt. Ausserdem stimmt der Seitenrand im ganzen Dokument nicht, er ist nämlich nicht vorhanden…

Bisher getan damit es richtig aussieht habe ich nichts, einfach aus Unvermögen eine solche Anpassung in dem CSS zu vorzunehmen.

chrillek · February 15, 2021, 10:15am

Ich hatte mir gar nicht die Mühe gemacht, darauf zu klicken. Habe ich jetzt nachgeholt. Kurze Anmerkung dazu: Wer immer das gebastelt hat, hat keine Ahnung von CSS. Wer allen Ernstes vor nahezu jeden Element-Selector body schreibt, hat den Schuss nicht gehört. Ich gucke mir das deshalb nicht genauer an.

Bei dem zweiten, “bear like” Stylesheet fällt leider schon ganz am Anfang font-size: 12px unangenehm auf. Größen in Pixel anzugeben, war noch nie eine gute Idee. Spätestens seit es Retina-Bildschirme gibt, ist es ganz böse. Pixel sind nämlich auf unterschiedlichen Geräten unterschiedlich groß.
Was Deine konkreten Fragen zu Blockquote angeht: Keine Ahnung. Bei mir funktioniert ein

blockquote {
  margin-left: 2em;
  margin-right: -1.5em;
  border-left: 1px solid #f00;
}

so wie es soll, d.h. das Zitat ist eingerückt und hat einen dünnen roten Strich links am Rand.
Möglicherweise hast Du das Stylesheet auch gar nicht richtig eingebunden, dazu sagst Du ja leider nichts: Globale Einstellung? Link im Markdown?

Ich würde Dir empfehlen, bei Null anzufangen mit deinem eigenen Stylesheet. Das könnte ganz einfach so aussehen (ungetestet):

body {
background-color: #FFF /* white */;
color: #000 /* black */
font-size: 1em;
font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
margin-left: 1.5em;
}
@media (prefers-color-scheme: dark) {
body {
  background-color: #000 /* black */;
  color: #FFF /* white */;
}
}

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.

AbwehrchefVC · February 15, 2021, 2:06pm

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.

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

Bear ToDo

Viele Grüße
Markus

chrillek · February 15, 2021, 2:31pm

<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 · February 15, 2021, 3:03pm

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

chrillek · February 15, 2021, 3:18pm

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 · February 15, 2021, 3:58pm

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 · February 15, 2021, 4:27pm

Wie das so ist mit den Fragen …

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.

Bildschirmfoto 2021-02-15 um 17.24.40
JavaScript ist gar nicht so schlecht

AbwehrchefVC · February 15, 2021, 4:45pm

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.

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 · February 15, 2021, 4:52pm

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 · February 15, 2021, 4:54pm

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 · February 15, 2021, 5:21pm

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.

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 · February 15, 2021, 5:25pm

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 · February 15, 2021, 5:37pm

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 · February 15, 2021, 6:28pm

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…