Frontend

How to use Icon Fonts

Verfasst am 18. Januar 2013 um 12:24.

Da ich das Thema Icon Fonts bis heute beharrlich ignoriert habe, es aber doch immer attraktiver wird, habe ich mich nun doch mal dazu durchgerungen die Geschichte in einem kommenden Projekt zu testen. Die Vorteile liegen auf der Hand: die Icons sind frei skalierbar, was insbesondere für die bei uns viel erstellten responsive Themes wichtig ist, und das Aussehen lässt sich rasant schnell per CSS anpassen.

Nun geht es natürlich zuerst an ein Screendesign, wo ich gleich vor dem Problem stand diese kryptischen Binärcodes, welche mir zu den Icons angezeigt werden einzutippen. Meine kläglichen Versuche lasse ich an dieser Stelle mal hinten runter fallen.

Der korrekte Weg ist, einfach Buchstaben, Zahlen oder Sonderzeichen manuell zuzuweisen. Ich generiere die Iconfont auf Fontellio.com (1), eine Seite die man nur über alle Maßen loben kann, da bleiben keine Wünsche offen.

Icon Font zusammenstellen (nötige Icons markieren)
Font oben einen Namen zuweisen
Auf den Tab „Edit Codes“ wechseln
Im oberen Feld die gewünschten Buchstaben, Zahlen oder Sonderzeichen eintragen
Font runterladen & installieren
Nun kann die Font schlicht und einfach ausgewählt und die Icons entsprechend per Text-Tool eingefügt werden

Nutzung in der Website

Als Beispiel soll uns das Suchfeld unserer Drupal Fachbereichsseite DROWL.de dienen, welche wir gerade neu gestalten. Hier haben wir auch gleich einen Sonderfall, da Input Elemente keine Pseudo Elemente gestatten (:before & :after), diese sind hier auf das umgebene Container Element anzuwenden.

Iconfont einbinden, in unserem Beispiel nutzen wir dazu einfach das Drupal Modul @font-your-face (2)
Konfiguration -> Benutzeroberfläche -> @-font-your-face-settings
Tab oberhalb „Import local fonts“ (entsprechendes Submodul muss aktiv sein!)
Unter Design -> @font-your-face einmal checken ob die Font drin ist

Nun geht es im CSS File weiter, hier einfach entsprechend (am beispiel für ein Input Field) folgendes definieren:

#YOUR-INPUT-FIELD-CONTAINER:before {
    content: "b"; /* Zugewiesener Buchstabe für das entsprechende Icon */
    display: inline-block;
    font-family: "drowl_iconfont"; /* Font-Family 1:1, wie beim @font-your-face Eintrag angegeben */
    font-size: 18px;
    left: 11px;
    position: absolute; /* Der Container braucht entsprechend position: relative! */
    top: 2px;
}

Es gibt für Drupal auch ein gesondertes Iconfonts Modul. Dieses liegt heute allerdings nur als Alpha Version vor, welche bei meinem Test Ihren Dienst nicht verrichtet hat. Aber wie man sieht, es geht auch sehr gut ohne. Viel Spaß beim Testen.

Kleines 1140px Grid Helper Script

Verfasst am 30. Oktober 2012 um 16:33.

Nachdem ich vergeblich nach einer vernünftigen Lösung für das 1140px Grid gesucht habe, bin ich einfach selber tätig geworden. Ganz simples Script, das nur genau diesen einen Zweck erfüllt: Ein Hilfsgrid zur Ausrichtung über die Seite legen (wobei es hier – erst mal – einzig um die Desktopansicht geht!). Es nutzt exakt die Werte vom 1140px Grid, positioniert schlicht und ergreifend per jQuery 12 Div´s im Page-Container nebeneinander und fertig. Das Ganze ist natürlich per Trigger am rechten Rand ein- wie auszublenden.

Die bereits angebotenen Helper, sei es die Firefox Extension „GridFox“ oder auch diverse Bookmark- und Insitescripts, hatten alle Ihre Probleme mit diesem flexiblen Grid. Wenn sie mitunter auch noch so schön gemacht waren.

#grid-helper{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  display:none;
}
#grid-helper .grid-row{ 
  float:left;
  height:100%;
  width:4.85%;
  margin-right:3.8%;
  background-color:rgba(185,255,110,0.5);  
}
#grid-helper .grid-row.last{
  margin-right:0; 
} 

#grid-trigger{
  position:fixed;
  top:50%;
  right:0;
  margin-top:-50px;
  background:#000;
  color:#fff;
  padding:20px;
  cursor:pointer;
  opacity:0.1;
}
#grid-trigger:hover{
  opacity:1.0; 
}

function webks_customer_theme_grid_helper() {
  (function($) {

    $('#page').css('position','relative')
		$('#page').append('
');
		//Trigger
		$('body').append('Show / Hide');
		$("#grid-trigger").click(function() {
		  $('#grid-helper').toggle();
		});
		//Load Stylesheets
    $('').appendTo("head");
   
  })(jQuery);
}

Internet Explorer IE :hover reagiert nur direkt über der Border

Verfasst am 16. August 2012 um 15:52.

Das Problem ist mir so noch nicht untergekommen, in diesem Fall ein Div, stellte den :hover-Style nur dar, sobald man sich direkt auf der Border des Divs befand, nicht aber über dem Inhalt. Die Lösung ist so einfach wie amüsant, man gebe dem Div einfach einen Hintergrund, seih es Grafik oder Farbe.

Damit ist das schwarze Loch im Div dann gestopft!

Sprungmarken in HTML Newslettern (insb. Simplenews Content Selection)

Verfasst am 29. März 2012 um 08:42.

Nach meiner Recherche zum Thema kann ich sagen: Das Thema geistert nicht selten durchs Netz, ich hoffe dieser Artikel hilft Anderen etwas weiter.

Das Problem: Outlook akzeptiert die aktuelle Form, sprich IDs, von Sprungmarken nicht, obwohl (angeblich) der Internet Explorer als Renderer zum Einsatz kommt (was hier Version 9 entsprechen würde, welcher es definitiv kann). Folgende Grundsätzliche Tipps kann man also geben:

name UND ID verwenden
Der Zielanker sollte Inhalt haben

Unsere Lösung sieht also folgendermaßen aus:


Ankertext
Ankertext
...


Ueberschrift Text
Ueberschrift Text

Platzsparendes Captcha (in kleinst-Formularen)

Verfasst am 24. Oktober 2011 um 09:18.

Bei einem Drupal Kunden bestand vor kurzem die Notwendigkeit ein kleines Kontaktformular im Footer mit einem Captcha zu versehen. Captchas sind naturgemäß nun meist eher unschön anzusehen und nehmen relativ viel Platz in Anspruch. Die Idee war nun das Captcha bei Klick auf den Submit-Button über dem Formular einblenden zu lassen, so bleibt die ursprüngliche Optik erhalten und es muss kein zusätzlicher Platz geschaffen werden.

Das ganze wurde nun per jQuery umgesetzt, welches natürlich ein Fallback für nicht-JavaScript-User notwendig machte. Hier passiert dann ganz einfach folgendes: Das Captcha ist standardmäßig per CSS ausgeblendet, jQuery blendet dieses erst ein. Erfolgt keine Captcha Angabe wird man auf eine Formularseite weitergeleitet (die Eingaben bleiben selbstverständlich erhalten), auf welcher man das Captcha dann eingeben muss.

Unterhalb ist der entsprechende jQuery Code zu finden mit dem die Lösung umgesetzt wurde. Das hinzufügen eines Fake-Captcha-Buttons war leider notwendig, da sich herausgestellt hat, dass einige Browser keine Click-Events auf deaktivierte Buttons akzeptieren (Ziel war, den Button zu deaktivieren um das Absenden des Formulars zu verhinder, bis das Captcha eingegeben wurde).

(function ($) {
	Drupal.behaviors.captchaRequest = {
		attach: function(context, settings) {
			$('#footer #webform-client-form-4 .captcha').append($('#webform-client-form-4 #edit-submit--2'));
			$('#footer #webform-client-form-4').append('<span id="captcha-request">Absenden</span>');
			$('#footer #webform-client-form-4 #captcha-request').click(function() {
					$('#footer #captcha-request').remove();
					$('#footer #webform-client-form-4 .webform-component').hide();
					$('#footer #webform-client-form-4 .captcha').show();
			});
		}
	};
})(jQuery);

Silbentrennung per JavaScript

Verfasst am 29. August 2011 um 10:45.

Für ein aktuelles Projekt bestand die Notwendigkeit Absätze als Blocksatz zu formatieren. Das Problem hierbei ist hinreichend bekannt, besonders bei schmalen Spalten kann man sich dem Thema Silbentrennung nicht erwehren. Um also ansprechenden Blocksatz erzeugen zu können, müssen wir den Browsern etwas auf die Sprünge helfen. Dieses muss zum jetzigem Zeitpunkt per JavaScript passieren.

Warum per JavaScript? Zum einen weil eine Serverseitige Lösung sich wahrscheinlich auf Suchmaschinen auswirken würde, möglicherweise ließe sich mit einfügen von  (Sollbruchstellen) eine solche Lösung umsetzen, allerdings scheint die JavaScript-Lösung doch praktikabler.

Ich bin mir selbstverständlich bewusst darüber, dass CSS3 theoretisch per „text-justify“ die Möglichkeit bietet Blocksatz ansehnlicher zu formatieren. Praktisch jedoch wird diese Funktion bisher leider nicht unterstützt.

Nach einigen untauglichen versuchen per jQuery, landete ich auf der Seite eines Schweizer Kollegen (1). Dieser hat sich dem Thema ausführlich gewidmet und das ganz wunderbare Hyphenator.js zusammengestellt. Inzwischen wird das Projekt bei Google Code (2) weitergeführt. Der Link zur Autorenseite hängt trotzdem an, die Funktionsweise ist durchaus interessant nachzuvollziehen.