Your SlideShare is downloading. ×
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Drupal6 Css Theming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Drupal6 Css Theming

1,108

Published on

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

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

Published in: Design, Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,108
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×