Kategorie-Archive: CSS

Das WordPress-Backend ab Version 3.8 verbessern

Veröffentlicht am  von

Wordpress-LogoMit Einführung der Version 3.8 haben die Entwickler das Admin-Backend des beliebten CMS WordPress grundsätzlich überarbeitet. Während sie von „moderner“ und „stylisher“ reden, stellt man umgehend fest, dass hauptsächlich Platz verschwendet wird. Was der Gelegenheitsnutzer vermutlich nicht für sonderlich maßgeblich hält, führt bei jemandem, der ständig WordPress-Seiten nutzt, zu deutlichen Störungen beim Workflow, weil man insbesondere auf kleinen Bildschirmen mehr scrollen muss. Nicht jeder arbeitet mit Retina-Displays. Wer den alten Look zurück haben möchte, oder zumindest etwas, das dem ähnelt, dem kann geholfen werden.

Schritt eins: In den Benutzeroptionen das Farbschema auf „hell“ stellen, damit sind die für mich störenden Kontraste zwischen Menü und Inhalt schon mal weg.

Schritt zwei: Installation des Plugins „Admin Classic Borders“. Damit kann man nicht nur wie der Name suggeriert dem Adminmenü wieder Trennlinien verpassen, sondern auch relativ einfach Einfluss auf die CSS-Stile nehmen. Die Einstellungen sind weitestgehend selbsterklärend und da diese zudem auch sofort in der Seitenleiste zu sehen sind, kann man experimentieren.

Schritt drei: besonders interessant ist die Option, eigene CSS-Formate fürs Backend vergeben zu können. Das könnte man auch in einem separaten Stylesheet tun, mit Hilfe dieses Plugins ist das allerdings deutlich einfacher zu pflegen. Meine CSS-Definitionen folgen, ich habe sowohl die Menüschriften- und Abstände verringert, als auch die Schriftgrößen der Inhalte des Backends. ich gehe nicht davon aus, dass meine Styles jeden glücklich machen, aber sie stellen eine Basis zum Experimentieren dar.

Ich jedenfalls bin jetzt mit dem WordPress-Backend wieder glücklich. Bis zur nächsten überflüssigen Designänderung durch die Entwickler.

acb
acb2

#adminmenu a.menu-top, #adminmenu .wp-submenu-head {
    font-size: 13px;
    line-height: 13px;
}
#adminmenu li.menu-top {
    min-height: 28px;
}
#adminmenu .wp-has-current-submenu ul > li > a, .folded #adminmenu li.menu-top .wp-submenu > li > a {
    padding: 3px 12px;
}
#adminmenu .wp-submenu a {
  line-heigt:0.9em;
  font-size: 13px;
}
#adminmenu .wp-not-current-submenu li > a, .folded #adminmenu .wp-has-current-submenu li > a {
  padding-top: 2px;
}
ul.categorychecklist li {
    line-height: 16px;
}
textarea, input, select {
    font-size: 13px;
    line-height: 1.2em;
}
.form-table, .form-table td, .form-table th, .form-table td p, .form-wrap label {
    font-size: 13px;
}
.widefat td, .widefat td p, .widefat td ol, .widefat td ul {
    font-size: 12px;
    line-height: 1.2em;
}
h2 .nav-tab {
    padding: 5px 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}
.wrap h2 {
    font-size: 20px;
    line-height: 22px;
}
td.plugin-title strong {
  font-size: 12px !important;
}

Logo WordPress Copyright Automattic

Das neue „Design“ von web.de Freemail – und ein Workaround

Veröffentlicht am  von

Der Freemail-Anbieter web.de (gehört zu United Internet) wirbt gerade aggressiv für das neue „Design“ seines Webmailers. Da man das irgendwann ohnehin zwangsweise aufgedrückt bekommt, habe ich schon mal umgestellt.

Man kann es nicht vorsichtig umschreiben: das neue Design und die gesamte Anwendung macht zum einen den Eindruck, man habe sich an Layouts von vor zehn Jahren orientiert (Yahoo-Mail sah damals ähnlich aus) und nutzt an diversen völlig überflüssigen Stellen massiv Javascript. Das Design ist bonbonbunt und sieht aus wie in einem Webbaukasten schnell zusammen geklickt. Von Usability scheinen die Entwickler bei web.de noch nicht viel gehört zu haben, die Abstände der Elemente sind stellenweise verschwenderisch und führen zu einer nicht annehmbaren Anzeige insbesondere auf Geräten mit kleineren Bildschirmen (Netbooks, etc.). Zudem gibt es offenbar gerade auf nicht ganz aktuellen Browsern aufgrund des verwendeten Javascripts Probleme mit der Nutzung und wie Nutzer melden schmiert der ganze Webmailer auch gern mal ab. Auch beim Handling von Mailanhängen gibt es laut Nutzerstimmen diverse Probleme. Weiterhin wird mit diversen iFrames innerhalb von iFrames agiert, was die Firefox-Erweiterung NoScript immer wieder mal zu Clickjacking-Alarmen veranlasst.
Völlig unverständlich auch die Entscheidung, keine Reintext-Mails mehr anzubieten, sondern ausschließlich diese überflüssigen „Design-Mails“.

Alles in allem gruselig umgesetzt – man sollte die Verantwortlichen Manager und Entwickler zwingen, das als einzige Mail-Lösung nutzen zu müssen, ich denke, dass sich dann schnell was ändern würde. :o) Nicht nur Freemail-Nutzer sind übrigens mit dieser Verschlimmbesserung konfrontiert, auch zahlende Kunden werden zur Nutzung der bonbonbunten Bananensoftware gezwungen.

Zumindest eine kleine Abhilfe bietet mein Benutzerstil (neudeutsch „Userstyle“), den man mittels der Erweiterung „Stylish“ in Firefox (und Chrome) nutzen kann und welches das interface zumindest ein klein wenig kompakter gestaltet.

Wer auf einen Webmailer angewiesen ist und auch die web.de-Adresse nicht aufgeben kann, sollte darüber nachdenken, zu einem Anbieter mit besserem Interface zu wechseln (also nicht GMX) und seine Mails bei web.de via POP-Abruf abholen zu lassen. Und dann fortan den neuen Anbieter nutzen.

Weiterlesen→

WordPress mehrsprachig mit WPML: Support Fehlanzeige?

Veröffentlicht am  von

Aktuell setze ich eine mehrsprachige Webseite unter WordPress um. Als Standard-Plugin zur Lokalisierung wird allenthalben WMPL benutzt, deswegen wurde das auch für dieses Projekt ausgewählt.

Leider kommt es dabei zu Problemen. Im Backend wird ein Dropdown zum Auswählen der Sprache nicht korrekt angezeigt, es überlappt browserunabhängig mit dem Seitentitel – hier mal zwei Demos:

Normalerweise würde ich das nicht als problematisch ansehen: einfach die zugehörigen CSS-Klassen ändern, ein paar Abstände anpassen und gut ist. Doch leider ist das bei WPML nicht möglich, da aus nicht nachvollziehbaren Gründen CSS-Stile direkt am Element vergeben werden, ich müsste also in die Dateien des Plugins eingreifen, um das zu ändern – und das tue ich selbstverständlich nicht, denn beim nächsten Update würden diese Änderungen wieder überschrieben.

Als zahlender Kunde (immerhin legt man für das Plugin nichtvirtuelle 79 Euro auf den virtuellen Tisch) sollte man Support erhalten, und so wandte ich mich vor über einer Woche an diesen, nur leider lässt der erheblich zu wünschen übrig. Der Supporter möchte Admin-Zugriff auf die WP-Installation (bitte?), weiß aber offensichtlich noch nicht einmal, dass man sich via wp-login.php an WordPress anmelden kann; eine klare Reaktion und Hinweise zur Beseitigung oder eine neue fehlerbereinigte Version fehlen trotz zur Verfügung gestellter Informationen und Adminzugang bis heute.

Nachdem der englische Support offenbar nichts taugt, hatte ich die Idee mich stattdessen mal an den deutschen zu wenden, immerhin liegt die WPML-Seite auch in deutscher Sprache vor. Leider verweist der Support-Link dort auf das englische Forum. Fail.

Für mich als Fazit: nach einem anderen Multilanguage-Plugin suchen und WPML zukünftig nicht mehr verwenden.

Preiswerte Webseiten für kleine Betriebe und Privatleute

Veröffentlicht am  von

Manch einer wünscht sich einfach nur eine kleine, schlichte Webseite, um seinen Handwerksbetrieb oder auch sich selbst als Freiberufler (oder Privatperson) im Netz vorzustellen und auf diese Art erreichbar zu sein. Hierfür reicht oftmals bereits etwas, das gerne als „bessere Visitenkarte im Netz“ bezeichnet wird oder eine kleinere Präsenz, die nur einige wenige Inhalte bieten soll.

Dafür möchte man nicht viel Geld ausgeben. Noch interessanter wird es, wenn die Inhalte selbst aktualisiert werden sollen, da einem die Kosten für eine Pflege durch Dritte zu hoch sind.

Imagcon bietet ab sofort genau das: einfache Webseiten zum selber pflegen, die mit einem Content-Management-System realisiert sind, aber dennoch auch auf simpelsten Hosting-Paketen ohne beispielsweise mySQL-Datenbanken laufen. Wird dabei auf vorhandene Templates zurück gegriffen und kein oder nur minimales Individualdesign gewünscht (beispielsweise nur das Einfügen eines Firmenlogos, aber keine Anpassungen am Template), dann sind solche Seiten bei uns für Gewerbetreibende oder Freiberufler ab 200 Euro zzgl. Ust möglich (Preis für Privatpersonen: EUR 238 inkl. MWSt)! Das ist ein flexibles Angebot, wenn Sie umfangreichere Dienstleistungen wie beispielsweise ein eigenes Webseitendesign wünschen, dann geht selbstverständlich auch das!

Das verwendete Content Management-System zur Pflege der Seite ist dabei einfach zu bedienen – wer in der Lage ist eine Email zu verfassen, kann auch das CMS beherrschen!

Interessiert? Dann fragen Sie uns!

Magazin-Frameworks für das iPad

Veröffentlicht am  von

Ich habe den gestrigen Tag damit verbracht, mir noch einmal ausführlich anzusehen, was für Frameworks es gibt, die das iPad als Plattform bedienen wollen, um darauf eine Magazin-ähnliche Darstellung von Inhalten zu realisieren. Dabei habe ich ausdrücklich nach Lösungen gesucht, die sich der Techniken HTML5 und CSS3 bedienen und nicht nach solchen, die ausschließlich als Javascript-Framework daher kommen, um iOS-Bedienkonzepte nachzubilden, wie beispielsweise Sproutcore und ähnliche.

Gewünscht war allerdings natürlich eine Unterstützung der iPad-Touch-Steuerung, im einfachsten Fall sollte man im Artikel nach unten und oben durch den Inhalt scrollen und mittels einer horizontalen Wischbewegung den Artikel nach vorn oder zurück wechseln können. Wenn’s geht auch gern mit zusätzlichen Gimmicks.

Das Ergebnis der Recherche samt Tests war sehr ernüchternd.
Weiterlesen→

WordPress: „Forgot The Category“ für Custom Post Types

Veröffentlicht am  von

Ich erweitere gerade ein relativ umfangreiches Blog um einen Custom Post Type, um neben News auch Artikel darstellen und beide Beitragsvarianten unabhängig voneinander layouten zu können. Zudem wollte ich für die Artikel nicht die Standardkategorien nutzen, sondern neue Taxonomien.

Die Einrichtung des entsprechenden Custom Post Type war mit dem Plugin „Custom Post Type UI“ ein Kinderspiel (die Erstellung des Themes unter Einbindung der CPTs ist es nicht, aber dazu ein andermal).

Beim Test stieß ich dann allerdings auf ein unerwartetes Problem: ich habe das Plugin „Forgot The Category“ installiert, das mich darauf hinweist, eine Kategorie anzugeben, was ich schonmal vergessen hatte und das ist ärgerlich, wenn man es nicht merkt. Mit den bereits vorhandenen Beiträgen klappt das ohne Probleme, nur bei der selbst eingerichteten Taxonomie für den CPT zickte das Plugin und bemängelte nicht gewählte Kategorien.

Ein schneller Blick ins Plugin und via Firebug in den Quellcode der Kategorie-Box im WP-Backend zeigte mir schnell, wo das Problem lag, aber auch wie die Lösung auszusehen hatte:

Der Quelltext des Plugins (Auszug):

class DC_ForgotTheCategory {
  function AddToEditPage() {
    
  }
}

add_action("edit_form_advanced", array("DC_ForgotTheCategory", "AddToEditPage"));

In Zeile fünf entdeckt man den jQuery-Selektor

ul#categorychecklist

das Element mit der ID #categorychecklist gibt es allerdings in der Liste der Custom Taxonomy nicht. Der Quelltext zeigte mir aber dass dasselbe UL-Element auch eine Klasse namens 

.categorychecklist

besaß und die war auch in der Liste der selbsterstellen Taxonomie vorhanden. Der Rest war einfach, Zeile fünf musste nur in

if ( jQuery("ul.categorychecklist input:checkbox:checked").length < 1 ) {

geändert werden (Raute gegen Punkt austauschen), und schon wurden korrekt mit einem Haken versehene Taxonomie-Begriffe nicht mehr bemängelt.

QuickTip: anderer Font im WordPress-Editor

Veröffentlicht am  von

Der ein oder andere mag sich vielleicht für die Textdarstellung im Editor der Blogsoftware WordPress einen anderen als den voreingestellten Zeichensatz wünschen. Das ist einfach gemacht: wie so oft muss man nur ein wenig Code in die functions.php des verwendeten Themes einfügen:

function change_editor_font() {
   echo "";
}
add_action("admin_print_styles", "change_editor_font");

Google und die Webfonts

Veröffentlicht am  von

Soeben findet Googles Entwicklerkonferenz I/O statt, auf der technische Neuerungen und Ideen rund ums Web vorgestellt werden. Man kann nun zwar zu Google allgemein hinsichtlich ihrer Datensammelwut in den verschiedensten Bereichen geteilter Meinung sein, abver darum soll es hier nicht gehen. Ebenfalls Fakt ist, dass man bei Google auch immer wieder Novitäten und Kreatives im Bereich Webentwicklung erfindet.

Neueste Beispiele sind die auf der I/O vorgestellten Google Font API und Google Font Directory, die dabei helfen, die Typografie von Webseiten zu verbesser (oder zu verschönern) und es ermöglichen auf Webseiten standardkonform Schriftarten anzuzeigen, die nicht auf dem Rechner des Besuchers vorliegen.

Weiterlesen→

Stylizer – ein fantastischer CSS-Editor

Veröffentlicht am  von

Üblicherweise arbeiten dedizierte CSS-Editoren oder solche in Web-IDEs alle nach einem ähnlichen Prinzip: Man gibt den Code manuell ein und ändert ihn auch so. Auch in sogenannten WYISWYG-Editoren wie Dreamweaver ist die Ansicht in aller Regel neu zu laden, um Änderungen sehen zu können. Weiterhin arbeitet der Webworker aller Wahrscheinlichkeit nach mit der Firefox-Erweiterung Firebug, um sich den CSS-Code auf einer Webseite ansehen zu können.

Stylizer von der kanadischen Firma Skybound verfolgt einen verblüffend anderen Weg als üblich, der im Prinzip den Firebug-CSS-Ansatz in einen mächtigen Editor verfeinert. Statt eine CSS-Datei gezielt zu öffnen, öffnet man eine Webseite, sei es lokal oder über FTP. Die wird dann im Editor angezeigt, an der rechten Seite werden alle Styles des Stylsheet gelistet und können auf verschiedene Weise manipuliert werden, nicht nur über Direkteingabe von Werten, sondern auch mit Schiebereglern beispielsweise für numerische Parameter.

Weiterlesen→

Links mit Dateityp-Icons via CSS

Veröffentlicht am  von

Es gibt ja verschiedene Möglichkeiten, Links über Javascript kleine Icons hinzuzufügen, die dem Benutzer anzeigen, auf was für einen Dateityp verlinkt wird oder ob es sich um einen internen oder externen Verweis handelt.

Das kann man allerdings auch sehr einfach mit reinem CSS 2.1 realisieren. Wie immer bleibt das Fossil Internet Explorer 6 außen vor, aber das Problem kennt der gestresste Webentwickler ja bereits.

Update: Wie ich inzwischen auf die harte Tour feststellen mußte, beherrscht auch der IE7 kein display:inline-block; Dumm gelaufen.
Weiterlesen→