The basics of creating a new Drupal 6 theme based on the new Stark theme. Presented at Drupaljam 4, Enschede. March 2009. Dutch.

1. Lichtgewicht CSS design
voor Drupal 6
Roy Scholten
Drupaljam Enschede, 20 maart 2009
1

2. Question:
“How to convert an
OSWD design into a
Drupal theme. In 45
minutes?”
2
Wie heeft deze vraag gesteld?

3. Answer:
You don't!
3
OSWD.org is download site voor open source
webdesigns
Weinig bruikbaars, vrij magertjes allemaal.
Laatste toevoeging is van 2007

4. Neem liever contact op met…
Roy Scholten
Interaction design, Drupal UX,
illustratie & other fine arts…
www.yoroy.com 4
Beetje zelf-promo natuurlijk…
roy@yoroy.com

5. rename to:
Lichtgewicht CSS design
voor Drupal 6
5
Los daarvan, wel interessant om proces voor efficiënt
en 'from scratch' stylen van Drupal te bekijken
Doel deze presentatie:
Een snelle en simpele aanpak voor “CSS only”
theming.
Het is makkelijker dan je denkt…

6. pushbutton, chameleon en bluemarine
Stark
Een nieuw, minimaal D7 core
theme
D6 versie: http://drupal.org/project/stark
6
Status update Drupal 7:
De meeste Core themes zijn verwijderd
Op dit moment 1 nieuw theme toegevoegd: Stark
Doel van Stark:
Drupal's standaard HTML en CSS output inzichtelijk
maken.
Drempel voor nieuwe designers verlagen
Backport voor D6 verkrijgbaar.

7. Stark:
Core HTML en CSS
met een klein beetje layout
7

8. 8
Layout bestaat uit het plaatsen van de default core
regions
Regions definiëren de 5 basiskaders binnen je pagina.

9. 9
Stark naked = spier naakt, vandaar.

10. Goed dan, bij wijze van voorbeeld…
10
http://www.oswd.org/design/preview/id/2434
Vooruit dan maar…
Meeste themes op OSWD hebben maar 1 sidebar.
De themes zijn nogal basic.
Aanpak voor Drupal dus focussen op zo generiek
mogelijk stylen zodat je zoveel mogelijk use cases
afdekt.

11. In de verpakking:
11
1 HTML pagina
1 CSS bestand
1 Logo
8 Achtergrondplaatjes

12. Een minimaal D6 theme:
.info bestand
- logo
- screenshot (150x90px)
12
Een D6 theme bestaat uit een map met de naam van je
theme
Daarin in ieder geval een .info bestand
Logo en screenshot optioneel maar oogt wel zo prettig
in de themes lijst van Drupal admin.

13. themenaam.info bevat minimaal:
name = Geen
description = Stijl
core = 6.x
engine = phptemplate
13
themenaam.info:
Core = versie van Drupal. Zes dus
Vraag: wie weet er nog 2 andere theming engines te
noemen?
Vergeet ze direct weer, phptemplate wordt in ca.
97.547% van de gevallen gebruikt.

14. /admin/build/themes
plaats theme-map in:
drupal/sites/all/themes
14
Zonder logo en screenshot komt het dan zo in de
themes lijst terecht.
Een theme met alleen een .info bestand heeft dus geen
layout en de output ziet er dus niet uit, alles onder
elkaar.

15. hoera voor sub theming
name = Geen
description = Stijl
core = 6.x
engine = phptemplate
base theme = stark
15
In plaats van zelf styles te schrijven om de regions te
positioneren, waarom niet gewoon hergebruiken?
Override, don't duplicate.
Maak je theme dus een sub theme van Stark.
(Voor D6 misschien nog niet geheel logisch omdat
Stark daar nog niet in core zit, maar dit is wel de
best practise)

16. <demo>
16
Live demos gaan natuurlijk altijd fout. Ik zat het
verkeerde .info file te bewerken!

17. Eigen CSS bestand mee laten doen
…
base theme = stark
stylesheets[all][] =
geen.css
17
Nou hebben we nog een plek nodig om alle nieuwe
style rules in te zetten.
Maak themenaam.css aan en plaats in je map
Breng Drupal hiervan op de hoogte door het CSS
bestand te noemen in je .info bestand.

18. 18
Dit is de index.html uit de download.
Neem even de tijd om de grote blokken te herkennen,
wat komt in welke region etc.

19. 19
Dit is de onderliggende structuur.
Stark's layout.css houdt rekening met zowel 1 als 2
sidebars, dus die gooien we er op voorhand nog niet
uit.

20. www.getfirebug.com
20
Aan de slag.
Firebug is onmisbaar bij dit soort werk.
Extensie voor Firefox die de HTML structuur en CSS
van een pagina inzichtelijk maakt.

21. 21
Links het doel,
Rechts ons uitgangspunt, een Stark sub theme

22. 22
Gebruik Firebug om in “Plain” de elementen te vinden
waar de meeste styling aanhangt.
Zoek in Stark output de corresponderende HTML en
CSS IDs en classes te vinden.
Werk van boven naar beneden (header tot footer)
En van buiten naar binnen (grote brokken eerst,
daarna verfijnen.

23. 23
Nogmaals het OSWD design

24. 45 minuten later…
24

25. 25
De basis staat

26. 26
Layout van de OSWD download weer:
Zie hoe de groene tekst over de volle breedte loopt.

27. 27
En in het Drupal theme (nog) niet
Dit is de “mission” tekst in Drupal en deze bevindt
zich in de content region.

28. 28
Dit is de onderliggende structuur.
Stark's layout.css houdt rekening met zowel 1 als 2
sidebars, dus die gooien we er op voorhand nog niet
uit.

29. Tot zover de CSS only…
page.tpl.php
drupal/modules/system/page.tpl.php
29
Hier loop je dus tegen de muur van een region aan.
De mission wordt standaard in de content region
weergegeven.
Dat kunnen we veranderen door de template voor de
pagina te veranderen.
Beetje PHP maar doet bijna geen pijn, is nog steeds
een goed leesbare html pagina.

30. Kopie ervan in je theme map
30
Kopieer page.tpl.php naar je eigen theme map en
verplaats het stukje dat de $mission print naar de
header region.
Je zult zien dat dat ook niet helemaal werkt omdat het
dan boven de navigatie uitkomt.
Je zou het tusssen de header en content regions
kunnen plaatsen of een nieuwe region definieeren.

31. Dus, maak een mapje met:
- .info bestand (definieer
een base theme)
- themenaam.css
& gaan!
31

32. En niet meer naar
OSWD hè!
32

33. Dank voor uw aandacht
Vragen?
33

34. Oh ja, Zen.
drupal.org/project/zen
34
Aanrader voor als je veel Drupal onderdelen moet
stylen.
Veel documentatie, alles in 1 pakket, ideale inleiding
in alle vormen van theming
Overkill voor themes die alleen maar een beperkte
front end hoeven aan te kleden.

35. De groeten!
yoroy | roy scholten | yoroy.com
35

36. 36