Carette Donny


Blogt over Drupal, SEO, Webontwikkeling, Theming, ...

Javascript console in Chrome met verschillende lijnen

Google Chrome is voor mij al verschillende jaren mijn standaard browser. Niet enkel voor het surfen maar ook tijdens het maken van een Drupal theme.

Het enige wat ik hierbij ontbrak in Google Chrome  was het console venster zoals het beschikbaar is in Firefox waarbij je meerdere lijnen van code kan opnemen. Vandaag de dag zal je niet snel nog een theme tegen komen die geen jQuery bevat en bij het schrijven of testen van deze code was die optie toch wel enorm handig.

Drupal theming met Chrome DevTools Autosave en Mothership als responsive HTML5 base theme

Tijdens het themen van een website verlies je redelijk wat tijd bij het overschakelen tussen je editor en je browser. Natuurlijk kan je dit verlies beperken door gebruik te maken van shortcuts voor het switchen tussen programma's maar er bestaan ook handigere oplossingen voor.

Iedereen heeft wel een persoonlijke voorkeur voor welke zijn default browser is en welke de beste is voor te themen, die discussie wil ik hier niet beginnen. Voor mij persoonlijk is dit Google Chrome dus zal ik in deze post verder in gaan op Chrome DevTools Autosave.

Blog in een nieuw kleedje

Na geruime tijd gebruik gemaakt te hebben van de Kanji Drupal template voor deze blog werd het stilaan nog eens tijd voor vernieuwing. Uit de statistieken voor deze website merkte ik dat er ook heel wat bezoekers komen via smartphones en tablets. In het verleden had ik ook een mobiele versie voorzien maar tijdens heel wat tests op deze site heb ik deze achterwege gelaten.

Eigen template maken voor Drupal 7

Belofte maakt schuld dus zoals ik enkele weken terug beloofd had om enkele van de verschillende template aanpassingen tussen Drupal 6 en 7 aan te halen in een blogpost zal ik er hier een deel van overlopen.

Indien je nog geen ervaring hebt met het maken van Drupal templates is dat geen ramp, ik overloop per bestand even de belangrijkste zaken. Wens je je er verder in te verdiepen volg dan zeker de links onderaan deze blogpost waar je meer info kan bekomen.

Voor het verdere vervolg is het aangeraden dat je beschikt over kennis van HTML/CSS. PHP kennis is niet noodzakelijk maar wel handig.

Eerst gaan we voor je template een map voorzien waar alle bestanden in terug komen. Maak een map aan met de naam die je wilt geven aan je template in sites/all/themes.

Als voorbeeld doorheen deze blogpost zal ik 'Kanji' als custom template beschrijven. Dus maken we een map aan sites/all/themes/kanji.

Het enige bestand dat eigenlijk echt verplicht is voor je custom template is het .info bestand. Dit bevat namelijk gegevens zoals de template naam, versie, voor welke versie van Drupal, regions, welke bestanden zoals stylesheets of scripts moeten worden meegenomen.

Dus in ons voorbeeld maken we het bestand kanji.info aan in onze Kanji map. (sites/all/themes/kanji/kanji.info)

In ons .info bestand gaan we het volgende mee opgeven:

  • CVS ID (Indien je de template op Drupal.org ter beschikking stelt zal dit bestand automatisch van extra info worden voorzien door CVS, Drupal's versie beheersysteem)
  • Template naam
  • Beschrijving
  • Voor welke versie van Drupal deze geschikt is
  • Welke de template engine
  • Welke stylesheets moeten geladen worden
  • Indien je extra regions wilt buiten de standaard, geven we deze hier ook mee op. Let wel van zodra we één region toevoegen, dienen we ze allemaal op te geven, ook de standaard