Zoals je hebt kunnen zien hier zijn er weer een aantal wijzigingen doorgevoerd in het design hier en één daarvan is het gebruik van een specifiek font. De methode die ik hiervoor heb gebruikt is Cúfon en ik heb van een paar van jullie al de vraag gekregen of ik wil delen hoe dat het beste te implementeren is.

Het eerste wat je moet doen, uiteraard, is bepalen welk lettertype/font te wilt gebruiken. Gebruik bijvoorbeeld het fonts archief hier of op Delicious mocht je op zoek zijn naar inspiratie, maar wat bovenal belangrijk is dat je het font mag gebruiken zoals je dat zou willen; kijk dus goed naar de licentie die er bij hoort.

Stappenplan Cúfon Installatie Stappenplan

1. Font Generen Nadat je een font hebt gedownload ga je naar de Cúfon site en selecteer je de betreffende opties en upload je het font wat je eerder gedownload hebt. Nadat alle juiste opties hebt aangevinkt genereert de site een versie van je font in javascript welke je direct kunt downloaden.
2. Javascript uploaden Het font javascript moet vervolgens een plekje vinden in je theme folder. Mijn voorkeur is om daar een map fonts voor aan te maken in /wp-content/themes/jouwtheme/fonts of /wp-content/themes/jouwtheme/includes/. In deze map hoort het gegenereerde .font geüpload te worden samen met cufon-yui.js welke je hier kunt downloaden.
3. De scripts activeren Deze beide scripts zul je vervolgens moeten activeren in je theme via functions.php.

   function add_cufon(){
   ?>
   	<script src="<?php bloginfo('stylesheet_directory') ?>/includes/cufon-yui.js" type="text/javascript"></script>
   	<script src="<?php bloginfo('stylesheet_directory') ?>/includes/Jouw-lettertype.font.js" type="text/javascript"></script>
   	<script type="text/javascript">
   		Cufon.replace('h1',{ hover: true })('h2', {hover:true})('#blog-title', {hover:true})('#blog-description', {hover:true})('h3', {hover: true})('h4', {hover: true})('h5', {hover: true})('h6', { hover: true })('.aside h3', { hover: true});
   	</script>
   <?php
   }
   add_action('wp_head', 'add_cufon');

   De voorbeelden die je hier ziet staan in regel 6 zijn voorbeelden van classes en id’s die met je nieuwe fonts moeten werken.

4. En IE dan? Inderdaad.. ook hier moeten we IE een beetje helpen met een klein stukje jQuery:

   //Cufon MS_IE fix
   function add_cufon_iefix(){
   ?>
   	<script type="text/javascript"> Cufon.now(); </script>
   <?php
   }
   add_action('wp_footer', 'add_cufon_iefix');

That’s it. Nadat je je functions.php hebt bijgewerkt zul je zien dat je site nu de betreffende classes en ID’s keurig toont met het nieuwe font. Easy peasy.

Dit bericht is gepubliceerd door: WordPress Dimensie

Cúfon voor WordPress

Gerelateerde berichten:

1. 4 Resources om je typografie te verbeteren
2. Windows lettertypes zo smooth maken als Mac OS X dat doet
3. 50 Gratis Fonts uit 2009 + Beheer tools voor je fonts
4. 30 Gratis fonts voor je logo/design

In mijn bericht over “Events in WordPress” sprak ik over het handmatig toevoegen van events aan/met WordPress. Er zijn verschillende plugins, zoals ik dus beschreef, waarmee je events aan je WordPress blog kan toevoegen. Voor mij was het zaak om juist een website die alleen maar bestaat uit events vorm te geven. Een belangrijk argument voor het gebruik van WordPress hierbij is dat de klant gebruik wil maken van de RSS-feeds. Zo kan de klant maar natuurlijk ook anderen gebruik maken van de feeds die er zijn per categorie. Nu is het voor de gebruiker mogelijk om op een andere site de events weer te geven.

Remkus schreef in “Events in de toekomst toch normaal in de loop” over een plugin die er voor zorgt dat berichten die je een datum in de toekomst geeft via je publicatiesysteem, toch direct geplaatst zal worden. Nadeel hiervan is dat als je een bericht hebt die je echt in de toekomst pas wil laten verschijnen de plugin eerst uitgezet moet worden. Voor mij een reden om juist handmatig en in de template code te plaatsen.
Ik zal hier weer geven wat ik nu precies heb gedaan.(...)
Lees de rest van Events met WordPress (543 words)

© kaj for WordPress Dimensie, 2010. | Permalink | 6 comments | Add to del.icio.us
Post tags: event list, events, handleiding, how-to, kalender, uitleg

Persoonlijk zie ik CSS3 als een enorme verrijking en aanvulling op het bestaande  CSS2.1 palet. Ik vind het dan ook erg jammer dat het zo lang moet duren voordat CSS3 als de nieuwe standaard goedgekeurd wordt. Gelukkig zijn er voldoende browser-boeren die de nieuwe mogelijkheden van CSS3 al beschikbaar stellen in hun laatste browserversie. Feitelijk is enkel IE8 de enige browser die er nog niets mee kan… wat op zich ook niet zo verbazingwekkend is, toch?

Tot nu toe maakte ik veel gebruik van de CSS snippets van CSS Tricks om de verschillende eigenschappen plus voorbeelden er bij te zoeken, maar daar kan vanaf vandaag wel eens verandering in gekomen zijn met het vinden van CSS3 Generator. Via deze site kun je verschillende CSS snippets genereren en gelijk ook zien hoe het er uit ziet. Daarnaast toont de site boven de code snippet ook nog eens keurig vanaf welke versie de verschillende browsers de betreffende CSS3 eigenschap ondersteunen.

Overigens.. Jean-Baptiste Jung heeft een tijdje terug een mooi overzicht gemaakt hoe je met verschillende filters in Internet Explorer verschillende CSS3 eigenschappen kunt nabootsen.

Dit bericht is gepubliceerd door: WordPress Dimensie

CSS3 Generator

Gerelateerde berichten:

1. De diepte in met CSS3

Jeff Starr van Perishable Press heeft een enorm uitgebreid artikel geschreven welke onderdelen van CSS3 er beschikbaar zijn ten opzichte van CSS 2.1

CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. As designers, it’s up to us to decide which browsers to support for our projects.

Absoluut de moeite waard om te bekijken wat voor prachtige opties er mogelijk zijn met CSS3. Lees verder op CSS3 + Progressive Enhancement = Smart Design.

Dit bericht is gepubliceerd door: WordPress Dimensie

De diepte in met CSS3

Gerelateerde berichten:

1. CSS3 Generator

Als je nog nooit achter een Mac hebt gewerkt dan heb je waarschijnlijk geen idee, maar een Mac rendert fonts, lettertypes behoorlijk verschillend dan Windows dat doet. Tot nu toe wist ik geen manier om op een Windows machine de lettertypes er uit te laten zien als op een Mac. Tot nu toe. Introducing GDI ++.

Ever wonder why everything just looks a little bit better on a Mac? That’s because Apple OS X uses a different font rendering technology than Windows. That can easily be changed though, and there’s a little program that can do it with ease.

Voor meer informatie en download link ga je naar: Make Windows fonts look as smooth as Mac OS X fonts op Digital Parsimony.

Dit bericht is gepubliceerd door: WordPress Dimensie

Windows lettertypes zo smooth maken als Mac OS X dat doet

Gerelateerde berichten:

1. 50 Gratis Fonts uit 2009 + Beheer tools voor je fonts
2. 4 Resources om je typografie te verbeteren
3. 30 Gratis fonts voor je logo/design
4. Cúfon voor WordPress

Ze komen niet vaak voorbij, maar af en toe hebben we geluk. Een goede verzameling van GIMP tutorials. Vandaag hebben we weer geluk. Een volledige vervanging voor Photoshop is het niet, maar dit artikel toont maar weer eens wat je allemaal met GIMP kunt doen.

This collection was created in response by the request of our readers. If you are thinking about learning Gimp, read through this tutorial for tips and techniques by avid gimp users. To designers who are already using this type of software, well… you may pick new techniques by browsing through this post. Enjoy!

Via 40+ Excellent GIMP Tutorials for Designers | Naldz Graphics.

Dit bericht is gepubliceerd door: WordPress Dimensie

40+ Uitstekende GIMP Tutorials voor Designers

Gerelateerde berichten:

1. 10 GIMP websites vol met GIMP tutorials
2. 30 GIMP tutorials & resources
3. 60 Interessante en mooie GIMP Tutorials
4. 10 prachtige GIMP tutorials

Creative Nerds hebben hun mening over wat de 50 beste gratis fonts van 2009 samengevat in een blogpost. Zoals gewoonlijk zijn dit soort lijsten erg subjectief, maar toch zitten hier weer een paar juweeltjes tussen. Kijk voor lettertype inspiratie op 50 Best Free Fonts From 2009 | Creative Nerds.

Mocht je het overigens lastig vinden om nog overzicht te houden in die enorme bibliotheek van fonts op je PC/Mac dan is de de volgende verzameling van 10 Free Apps for Managing Your Fonts een absolute aanrader.

Dit bericht is gepubliceerd door: WordPress Dimensie

50 Gratis Fonts uit 2009 + Beheer tools voor je fonts

Gerelateerde berichten:

1. 30 Gratis fonts voor je logo/design
2. 4 Resources om je typografie te verbeteren
3. Windows lettertypes zo smooth maken als Mac OS X dat doet
4. Cúfon voor WordPress

Photoshop is al jaren de standaard voor het bewerken van foto’s, maar er zijn natuurlijk alternatieven. De meest interessante, en waar ik persoonlijk zelf ook heel veel mee werk, is GIMP.  GIMP is een open-source software pakket waarmee je foto’s en afbeeldingen mee kunt bewerken op een soortgelijke manier als Adobe Photoshop, maar wel wezenlijk anders, voor diegenen die geen clue hadden wat GIMP is.

Meer informatie vind je hier:

• GIMP | gimp.org
• GIMP | volgens Wikipedia

Om je een behoorlijk eind op weg te helpen heeft Instant Shift een uitgebreide verzameling van GIMP tutorials verzameld. Voor je dosis GIMP inspiratie klik je dus hier Ultimate Round-Up Of 60 Excellent Gimp Tutorials.

Dit bericht is gepubliceerd door: WordPress Dimensie

60 Interessante en mooie GIMP Tutorials

Gerelateerde berichten:

1. 30 GIMP tutorials & resources
2. 10 prachtige GIMP tutorials
3. 10 GIMP websites vol met GIMP tutorials
4. 40+ Uitstekende GIMP Tutorials voor Designers

Een vaak vergeten onderdeel van een Theme is het gebruik van de juiste typografie. Naast dat je in je CSS stylesheet al heel veel kunt doen met het opleuken van je typografie zijn er ook nog een paar meer geavanceerde manieren. Vandaag kwam ik achter elkaar drie artikelen tegen die je verder kunnen helpen. Technieken als Cufon, Sifr en Flir maken het mogelijk om precies dat lettertype te gebruiken wat jij wilt. Ongeacht of je lezer deze op zijn PC heeft geïnstalleerd.

21 Awesome @font-face Embeddable Typefaces

10 wonderful fonts you can embed with Cufon and Sifr

45 Outstanding Free Vintage Fonts

40 Creative Uses Of Cufón Font Replacement

Dit bericht is gepubliceerd door: WordPress Dimensie

4 Resources om je typografie te verbeteren

Gerelateerde berichten:

1. Cúfon voor WordPress
2. Windows lettertypes zo smooth maken als Mac OS X dat doet
3. 50 Gratis Fonts uit 2009 + Beheer tools voor je fonts
4. 30 Gratis fonts voor je logo/design

Af en toe heb je eens een ander soort lettertype (font) nodig om het juiste effect te bereiken. Ik bedoel er zijn al meer dan voldoende site met het standaard Tahoma, Times New Roman of Arial. Creative Nerds hebben een mooie verzameling gemaakt van 30 gratis fonts waar je je header of logo mee kunt opleuken.

Dit bericht is gepubliceerd door: WordPress Dimensie

30 Gratis fonts voor je logo/design

Gerelateerde berichten:

1. 50 Gratis Fonts uit 2009 + Beheer tools voor je fonts
2. 4 Resources om je typografie te verbeteren
3. Windows lettertypes zo smooth maken als Mac OS X dat doet
4. Cúfon voor WordPress