Linux mit KDE: Schriftgrößen und Optik in Firefox, Gimp und Eclipse

Ich nutze Gentoo mit KDE, damit lassen sich normalerweise alle Schriftgrößen komfortabel übers Kontrollzentrum einstellen. Das gilt allerdings nur für die Programme, die auf KDE basieren.

• Eclipse ohne weitere Konfiguration
• Eclipse mit angepasster Schrift

Damit wirken sich die Einstellungen nicht auf Programme aus, die mit gtk zusammenarbeiten, z.B. Firefox, Gimp und Eclipse. Im Firefox liessen sich die meisten Einstellungen schlussendlich über die userChrome.css, die in /home/username/.mozilla/firefox/profilname/chrome angelegt wird, lösen. Im Gimp waren die Schriften nicht toll, aber akzeptabel. Leider gilt das nicht für Eclipse, Eclipse lässt zwar einige Einstellungen zu, unter: Window/Preferences/General/Appearance/Colors and Fonts das betrifft jedoch nicht das Menü, den Navigator und die Meldungen unter Console, Problems usw. Je nach Rechner passen die Standardeinstellungen ganz gut, auf meinem Mini-Laptop waren diese Angaben jedoch so riesig (siehe Screenshot von Eclipse ohne weitere Konfiguration), dass sich damit nicht arbeiten ließ. Laut Eclipse-Hilfe lässt sich für motif folgendes nutzen, mit der Angabe in .Xdefaults

• eclipse*fontList:-misc-fixed-medium-r-normal-* -6-100-75-75-c-60-iso8859-1
• danach xrdb ~/.Xdefaults

Damit war es ein bisschen besser, aber noch immer sah es nicht so aus, wie ich wollte. Daher ging ich auf die Suche nach weiteren Möglichkeiten, ebenfalls aus der Eclipse-Hilfe gab es einen Hinweis zum Editieren der .gtkrc-2.0, aber auch das klappte nicht. Die weitere Recherche brachte mich zum Gentoo-Wiki da gehts jedoch vor allem um Schriftarten, die waren jedoch alle ok, ich hatte "nur" ein Größenproblem. Im Gentoo-Forum half einem Eclipse mit gtk zu emergen, das war bei mir jedoch bereits der Fall.Wieder aus dem Gentoo-Forum kam der Tipp:

emerge gtk-chtheme

Eine kurze Recherche ergab, dass dieses kleine Programm sowohl Schriftart, als auch Schriftgröße ändert und sofort auch anzeigt. Damit klappte das mit der Größe in Eclipse. Für den Firefox ist meine zusätzliche userChrome.css bezogen auf Schriftgrößen so:

/* Schriftgröße für Dialoge und ähnlichen Text*/ window{ font-size:1em !important; font-family: bitstream-vera-sans, dejavu sans condensed, sans-serif ; color:#0c2940; } /* Schriftgröße für die diversen Leisten */ toolbar, urlbar, menubar, menubutton, menulist, menu, menuitem{ font-family: bitstream-vera-sans-mono, dejavu sans condensed, helvetica, sans-serif ; font-weight: bold !important; font-size: 1em !important; color:#0c2940 !important; } #toolbar-menubar{ font-family: bitstream-vera-sans-mono, dejavu sans condensed, helvetica, sans-serif ; font-weight: bold !important; font-size: 1em; color:#0c2940 !important; } /* Schriftgröße fürs Menü */ menu{ color:#0c2940 !important; font-size:1.2em !important; } Einige Größen musste ich nochmal anpassen, die waren jetzt in Kombination mit der gtk-Änderung doch sehr klein; naja, eher unlesbar Insgesamt jedoch hatte ich nun bei Firefox und Eclipse eine lesbare und übersichtliche Darstellung.

Gimp, Firefox und Eclipse: Oberfläche anpassen

• neues gtk-Theme in Eclipse

Ich wollte da schon aufhören und war gerade dabei die Bilder für diesen Artikel in Gimp anzupassen, als mir auffiel, dass Gimp ebenfalls auf gtk basiert. (Ja, ja bei Gnu Image Manipulation Programm hätte ich dran denken können) Die Schriften in Gimp waren gut, aber die Oberfläche war hässlich dunkelgrau. Offensichtlich hatte die Änderung da irgendwas überschrieben. Also gut, nochmal ins Netz gekrabbelt und ein bisschen recherchiert. Bei den Tipps zu passenden Themes für gtk empfahl einer auch eine gtk-engine zu installieren, da viele Themes sonst nicht funktionieren. Die Suche im Portage (managt in Gentoo Pakete) ergab als ersten Eintrag eine Kombination aus einigen Grund-Themes und einer gtk-engine. Das klang gut, damit hätte ich mehr als ein Theme, da würde schon was passendes dabei sein. Tatsächlich nach der Installation von x11-themes/gtk-engines gabs mehrere Themes und eins war dabei, was meinem Geschmack entsprach und in allen drei Programmen ein angenehmes, helles, gut lesbares Erscheinungsbild lieferte, siehe den Screenshot für Eclipse mit diesem Theme. Hinweis: Die gesamte Beschreibung bezieht sich auf KDE 3.5, zumindest bei den ersten Tests mit KDE 4.04 klappt es so nicht, die Umstellung zeigt keine Wirkung. Eine erste ungetestete Recherche ergab, dass es mit gtk-kde4 klappen sollte, mehr dazu bei phorolinux.com.

Bilder und Grafiken nur mit CSS erstellt

• Eule nur mit CSS
• Haus nur mit CSS
• Herz nur mit CSS
• Homer nur mit CSS

Vieles lässt sich mit CSS machen, zumindest wenn Bilder, Grafiken und Fotos für das Layout eingesetzt werden. Tolle Beispiele bietet der css Zen-Garden auf den ich ja nicht zum ersten Mal hinweise. Beispielsweise gibt es dort bei den neuen Designs die folgenden beiden: Kyoto Forest und Under the Sea! Nicht jedes Design im Zen Garden ist in genau dieser Form praxistauglich einsetzbar, jedoch zeigen die vielen verschiedenen Layouts, welche immensen Möglichkeit CSS bietet. Denn nach wie vor gilt für den Zen Garden, dass das HTML bei allen Layouts identisch ist. In sehr viel kleinerem Umfang haben wir das mit unserem Styleswitcher auf miradlo.info umgesetzt, auch dort ist das HTML identisch, die Layouts jedoch keineswegs. Einen Überblick über die Layouts dort, gibt es im Abschnitt Layoutgalerie in verlinkten Bildern. Noch beeindruckender finde ich jedoch, Spielereien, die ganz ohne Bilder und Grafiken auskommen und trotzdem ein Bild ergeben, wie die Beispiele, die ich als Screenshots eingebunden habe.

• Eule nur mit CSS der Autor Román Cortés hat diesen Entwurf bereits vor einigen Jahren erstellt, das Original hat bei mir, wie auf dem Screenshot einen Zeichensatzfehler. Im Code habe ich diesen korrigiert, damit sieht der Code dazu so aus:

<div id="logo"> <span style="left: 40px; top: 22px; font-size: 270px">`</span> <span style="left: 125px; top: 22px; font-size: 270px">´</span> <span style="left: 77px; top: 79px; font-size: 150px">(</span> <span style="left: 198px; top: 79px; font-size: 150px">)</span> <span style="left: 116px; top: 208px; font-size: 91px">^</span> <span style="left: 163px; top: 208px; font-size: 91px">^</span> <span style="left: 156px; top: 144px; font-size: 60px">V</span> <span style="left: 112px; top: 94px; font-size: 80px; color: #A4BF05">O</span> <span style="left: 177px; top: 94px; font-size: 80px; color: #A4BF05">O</span> <span style="left: 134px; top: 119px; font-size: 40px; color: #A4BF05; font-weight: normal">o</span> <span style="left: 199px; top: 119px; font-size: 40px; color: #A4BF05; font-weight: normal">o</span> <span style="left: 301px; top: 145px; font-size: 103px; color: #A4BF05; font-weight: normal">SIGT.net</span> <span style="left: 305px; top: 248px; font-size: 26px; font-weight: normal">Historias de bloggers con insomnio</span> </div>

• Haus nur mit CSS das Haus ist ein ein ganzes Stück mehr Code, daher nicht praktikabel einsetzbar, aber eine klasse Spielerei
• Herz nur mit CSS, mit diesem Beispiel kann man dank JavaScript selbst ein bisschen rumprobieren, der Text und die Textfarbe lassen sich ändern, ebenso die Qualität des Bilds, je klarer die Linien, desto mehr Code ist nötig.
• Homer nur mit CSS, den Homer und damit die Idee zu diesem Artikel fand ich bei webstandard.kulando.de der Homer stammt ebenfalls von Román Cortés.

Sehenswert ist auch das Kontaktformular im Blog des Autors. Versucht doch mal es auszufüllen, wenn ihr nicht auf die Briefmarke klickt, wird es nicht abgeschickt. Ich mag solche Insprirationen, die mir immer wieder zeigen, dass sich trotz mancher Browserfehler, fast jede Idee in CSS umsetzen lässt.

Aktualisiert am 8.5.08

Wer es sich genauer ansehen will, sollte die animierte JavaScript-Version nehmen, die Ned Batchelder erstellt hat, insbesondere in der langsamen Animation, sieht man sehr schön, wie Homer entstand. Román Cortés war ebenfalls fasziniert davon. Bei Perun gabs den Link auf die Animation, daher diese Aktualisierung.