webksde

Drupal: Custom Panel Layout Plugin (AT-Theme)

Eine eigentlich einfache Sache, bei der aber kleine Unachtsamkeiten dazu führen können dass das Layout Plugin garnicht, oder nur unvollständig funktioniert.

Hier die Vorgehensweise:

  1. Eine passende Basis für das zu erstellende Layout auswählen
  2. Diese aus dem AT-Core Theme (layouts/panels) in das eigene Theme übernehmen (gleiche Unterordner)
  3. Namen des Ordners und der Dateien entsprechend anpassen (z. B. two_col_brick zu two_col_custom)
  4. Alle Dateien öffnen und dort per Suchen & Ersetzen ebenfalls den alten Namen durch den neuen ersetzen
  5. Den Funktionsnamen auf das eigene Theme anpassen („adaptivetheme“ gegen den eigenen Themenamen ersetzen“)
  6. Nun den *.tpl.php File anpassen wie er benötigt wird (es können natürlich neue Inhaltsbereiche / Variablen ergänzt werden ACHTUNG! Die Funktionsnamen dürfen eine Länge von 32 Zeichen nicht überschreiten! )
  7. Als nächstes den *.inc File anpassen und die ggf. hinzugefügten Variablen aus dem letzten Schritt ergänzen
  8. Optional: Das Thumbnail zur Voransicht des Layouts anpassen und austauschen
  9. Den theme.info File bearbeiten. Einfach für jeden Gerätetyp unter „Responsive Panels“ entsprechend das eigene Layout anfügen
  10. Weiterhin muss im theme.info File folgendes ergänzt werden: „plugins[panels][layouts] = layouts/panels“ (der Pfad kann im Grunde natürlich frei gewählt werden)
  11. Cache leeren, Panel Layout auswählen, fertig!

Für NICHT AT-Panel-Layouts läuft das ganze im Grunde identisch, die Quelle ist nur eine Andere –> „/sites/all/modules/contrib/panels/plugins/layouts“

 

 

    Neu Laden bei Drehung eines Mobilgeräts

    Kleines JavaScript Codeschnipsel zum neu laden bei Drehung des Mobilgeräts.

        // Reload on Orientation Change!
    $(window).bind("orientationchange", function(e) {
      location.reload();
    });

      HTML 5 Video Export mit ffmpeg + GUI

      Da der Miro Video Converter bei mir kein funktionierendes .webm – Video für Firefox ausspuckte, habe ich mich mal neu umgesehen. Dabei habe ich zwei Dinge festgestellt: .ogv ist kein MUSS mehr, .webm und .mp4 reichen aus (+ FLV Fallback … wer´s braucht). Zweite Feststellung: ffmpeg [1] macht einen tollen Job und ist dank einem kleinen Zusatztool namens „ffmpeg-GUI“ [2] (vielen Dank an Thilo Brai) auch ohne Kommandozeile wunderbar zu bedienen.

      1. ffmpegGUI.exe ausführen
      2. ffmpeg.exe (im „bin“ folder) auswählen
      3. webm als Format wählen
      4. Per Drag and Drop das Quellvideo in das weiße Feld ziehen
      5. Batch Datei exportieren und ausführen
      6. Gleiches für mp4 wiederholen und das wars auch schon.

      Weniger schick als Miro, dafür mehr Möglichkeiten und vor allem funktioniert es.

        Linktipp: Photoshop Corner Editor (Script)

        Update 2019: Just try Affinity Designer instead, it has many cool editable shapes, including editable corners / border-radius.

        Wer oft mit Photoshop arbeitet, und auch mal abgerundete Ecken nutzt wird das Problem kennen. Will man den Radius der Ecken nachträglich ändern, heißt es neu Zeichnen. Das kleine Script von David Jensen schafft Abhilfe. Zusätzlich bietet das Tool die Möglichkeit, die Art der Ecken anzupassen, wie im Bild zu sehen.

        Viel Spaß damit!

          How to use Icon Fonts

          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. 

          1. Icon Font zusammenstellen (nötige Icons markieren)
          2. Font oben einen Namen zuweisen
          3. Auf den Tab „Edit Codes“ wechseln
          4. Im oberen Feld die gewünschten Buchstaben, Zahlen oder Sonderzeichen eintragen
          5. Font runterladen & installieren
          6. 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.

          Search field icon with iconfont

          1. Iconfont einbinden, in unserem Beispiel nutzen wir dazu einfach das Drupal Modul @font-your-face (2)
          2. Konfiguration -> Benutzeroberfläche -> @-font-your-face-settings
          3. Tab oberhalb „Import local fonts“ (entsprechendes Submodul muss aktiv sein!)
          4. 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.

            webks.de: Relaunch

            Ein hartes Stück Arbeit war das, aber es hat sich gelohnt. Unsere rundum erneuerte Unternehmenswebsite http://www.webks.de ist online. Wie auch schon einige unserer Kundenseiten, komplett responsive, dank CSS Media-Queries. Technisch setzen wir selbstverständlich auf eine Drupal 7 Lösung. 

            So selten man für die eigenen Websites inzwischen Zeit findet, folgt nun – möglichst zeitnah – ebenfalls der Relaunch unserer Drupal Themenseite DROWL.de. Selbstverständlich ebenfalls stark verschlankt und responsive.

            Zum Ende natürlich noch ein frohes neues Jahr 2013, allen Lesern viel Erfolg und alles Gute im neuen Jahr!

              Kleines 1140px Grid Helper Script

              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);
}

                Google Anfahrtsrechner flexibel (responsive) darstellen

                Leider sind viele Google Widgets aktuell nicht auf der der Höhe der Zeit, so auch der Anfahrtsrechner. Dieser lässt sich allerdings leicht anpassen:

                table.gadget, table.gadget iframe{ width:100% !important; } 
table.gadget #fields table,table.gadget #fields #from, table.gadget #fields #to{ width:auto; }

                  Windows 7: Datenträgerverwaltung Partition lässt sich nicht verkleinern

                  Folgende Meldung erscheint, insbesondere beim verkleinern von Partitionen, in der Datenträgerverwaltung: „Der angegebene Dienst kann nicht gestartet werden. Er ist deaktiviert oder nicht mit aktivierten Geräten verbunden. “ Benutzt man eine SSD wird in der Regel der Defragmentierungsdienst beendet, da er bei dieser Bauart mehr schadet als das er nutzt. Eben dieser Dienst wird offensichtlich zur Partitionierung herangezogen, weshalb obige Meldung erscheint.

                  Lösung

                  Ganz pragmatisch: Dienst vorrübergehend wieder aktivieren. Bei Samsung funktioniert das ganz flink über das Tool „SSD Magican“ (falls bereits installiert). Sonst über die Services.msc (ausführen), „Defragmentierung“ / „defragsvc“ suchen und dort den Dienst entsprechend starten und später wieder beenden.

                    webks: Responsive Module Plugin for jQuery

                    Ein großes Problem beim gestalten von Oberflächen für Mobilgeräte, stellen Tabellen dar. Tabellen sind aufgrund ihres „Wesens“ schon gänzlich ungeeignet für schmale Displays, viele Spalten, platzraubender Inhalt. Und so nehmen sich Tabellen den Platz welchen Sie benötigen, mit der Folge das sie über die Website hinausragen und der User nach rechts scrollen muss, Katastrophe.

                    Zusammen mit meinem Kollegen Julian Pustkuchen bei webks: websolutions kept simple haben wir nun eine jQuery Lösung entwickelt, welche für Jedermann kostenfrei zum Download bereitsteht.

                    Anregungen und Wünsche zur Optimierung des Moduls nehmen wir selbstverständlich gerne entgegen.