27 juli 2017

Voorbeeld van HTML-handtekening voor Mac

Mac: HTML-handtekening (CSS) maken in macOS (OS X)

Iedereen wil een mooie handtekening onder een e-mailbericht plaatsen wanneer deze wordt verstuurd. Niet alleen een vriendelijke groet, maar ook een afbeelding, telefoonnummer, links en overige informatie. Helaas is dit op de Mac niet zo eenvoudig en is het haast hogere wiskunde.

Gelukkig kun je eenvoudig met emoji's en tekstopmaak al een hoop verwezenlijken, meer info. Maar wie echt een mooie HTML (CSS) handtekening wil moet daar even tijd voor uittrekken en de nodige kennis van zaken hebben. We leggen stap voor stap uit hoe je dit aanpakt en met een handige tool heb je in een mum van tijd een mooi opgemaakte handtekening voor macOS Mail.

Voorbereiding HTML-handtekening op een Mac

Voor we aan de slag gaan moet je een handtekening maken in Mail. Open hiervoor de Mail applicatie en klik in de menubalk op 'Voorkeuren'. Navigeer naar het tabblad 'Handtekeningen' en klik op de plus-knop. Vul in het tekstveld een korte, maar herkenbare tekst in zoals: tips van appletips. Dubbelklik in de middelste kolom op de zojuist aangemaakte handtekening en geef deze een herkenbare naam, bv: html-appletips.

Handtekeningen in macOS (OS X) Mail

Sleep nu de handtekening naar een account dat zich in de linkerkolom bevindt, bijvoorbeeld iCloud. Sluit nu het voorkeuren-venster en sluit de Mail applicatie volledig af.

HTML-handtekening maken voor Mail in macOS (OS X)

De opmaak van de handtekening moet met behulp van inline css gemaakt zijn. Dit is een behoorlijke klus voor gebruikers die hier geen ervaring mee hebben. Gelukkig hebben wij van appletips een tool gemaakt waarmee je eenvoudig een eigen HTML-handtekening kunt maken. Zo moet je niet zelf de code aanpassen of kennis te hebben van css. Als je een afbeelding wilt toevoegen aan je handtekening moet je deze online uploaden. Zo kun je bijvoorbeeld je Twitter avatar gebruiken of een andere afbeelding, zolang deze zich maar op het internet bevindt en je de complete url kopieert. Deze heb je nodig bij het maken van je handtekening.

Online tool om snel je eigen HTML-handtekening te maken

• Hieronder vind je de tool terug
• Vul de gegevens in, onmiddellijk krijg je een voorbeeld te zien van de handtekening
• Pas de tekst, kleur en opmaak aan
• Kopieer de volledige code die gegenereerd wordt

Uiteraard kun je zelf andere gegevens invullen, bijvoorbeeld je LinkedIn-profiel i.p.v. persoonlijke website. Het voorbeeld op de site kan iets verschillen met eindresultaat, zoals bijvoorbeeld de wit-ruimte. Het uiteindelijke eindresultaat kun je bovenaan dit artikel terugvinden. Mocht je zelf toch aan de slag willen dan kun je vanzelfsprekend de gegenereerde code gebruiken en verder uitbreiden (gevorderden). Let wel, bij het handmatig aanpassen is het aan te raden tijdelijk de slimme aanhalingstekens uit te schakelen via  ▸ Systeemvoorkeuren ▸ Toetsenbord ▸ Tekst ▸ vink de optie 'Gebruik slimme aanhalingstekens en streepjes' uit.

HTML-handtekening tool

Live voorbeeld:

Genius Media  
Genius Media / Redactie
 
appletips.nl / Veldhoven

Pas gegevens aan:

Naam:

Functie:

Plaats of telefoonnummer:

Website (met http(s)://)

Website omschrijving:

E-mail (wordt via een mailto link gekoppeld aan naam)


Eventuele afbeelding (met http(s)://):

Kies seperator:
Kleur seperator:
Kleurnaam:
Kleurmeta:

Code:


Hier wordt de CSS+HTML code gegenereerd.....

Voorbereiding HTML-handtekening toevoegen aan Mail

De code is gegenereerd en je kunt deze toevoegen aan Mail, voor je dit doet moet je weten of je gebruikmaakt van iCloud of iCloud Drive. Dit heeft te maken met de opslag van de handtekeningen in macOS (OS X). Hieronder vind je commando's terug, gebruik degene die corresponderend is aan je persoonlijk gebruik. Houdt hier rekening mee met de softwareversie van je Mac en iCloud.

• Open Terminal via Programma's ▸ Hulpprogramma's
• Kopieer hieronder het desbetreffende commando volledig (command⌘+C)
• Plak het commando in een leeg terminal venster (command⌘+V)
• Druk op enter om het commando uit te voeren

Commando's voor macOS Sierra

iCloud Drive
open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V4/Signatures/*.mailsignature

Gebruikt iCloud, maar zonder iCloud Drive
open -a TextEdit ~/Library/Mail/V4/MailData/Signatures/*.mailsignature

Gebruikt geen iCloud
open -a TextEdit ~/Library/Mail/V4/MailData/Signatures/ubiquitous_*.mailsignature

Commando's voor OS X El Capitan

iCloud Drive
open -a TextEdit ~/Library/Mobile\ Documents/com~apple~mail/Data/V3/MailData/Signatures/ubiquitous_*.mailsignature

Gebruikt iCloud, maar zonder iCloud Drive
open -a TextEdit ~/Library/Mail/V3/MailData/Signatures/*.mailsignature

Gebruikt geen iCloud
open -a TextEdit ~/Library/Mail/V3/MailData/Signatures/ubiquitous_*.mailsignature

Commando's voor OS X Yosemite:

iCloud Drive
open -a TextEdit ~/Library/Mobile\ Documents/com~apple~Mail/Data/MailData/Signatures/ubiquitous_*.mailsignature

Gebruikt iCloud, maar zonder iCloud Drive
open -a TextEdit ~/Library/Mobile\ Documents/Mail/Data/MailData/Signatures/ubiquitous_*.mailsignature

Gebruikt geen iCloud
open -a TextEdit ~/Library/Mail/V2/MailData/Signatures/ubiquitous_*.mailsignature

html-handtekening toevoegen aan Mail

HTML-handtekening toevoegen aan Mail

Als alles goed is gegaan worden nu al je handtekeningen vanuit Mail geopend in Teksteditor. Zoek naar de handtekening die we in het begin van deze stappen hebben aangemaakt. Deze is te herkennen aan de logische tekst die we aan het begin aan deze handtekening hebben gegeven. Selecteer nu alles na de regel die begint met 'Mime-Version' en verwijder deze code.

Plak nu op deze plek de code die je zojuist met onze tool of handmatig hebt gegenereerd. Ga daarna in de menubalk naar Archief ▸ Klik op 'Bewaar' om de handtekening op te slaan. Gebruik je geen iCloud? Dan is het belangrijk dat je hierna ook nog in de titelbalk van Teksteditor op de bestandsnaam klikt. Vink vervolgens de optie 'Beveiligd' aan. Hierdoor voorkom je dat Mail automatisch de handtekening overschrijft.

html-handtekening gebruiken in Mail

Zelfgemaakte HTML-handtekening gebruiken

De handtekening is klaar voor gebruik. Open Mail en klik in de menubalk op Mail ▸ Voorkeuren ▸ Handtekeningen. Wanneer je de handtekening bekijkt zal je merken dat de afbeelding niet wordt ingeladen, dit is normaal. Wanneer je de handtekening gebruikt wordt deze wel getoond. Door te slepen kun je de handtekening ook koppelen aan andere accounts. Klik hier voor meer informatie over hoe je uiteindelijk de handtekeningen in Mail gebruikt.

Als basis voor deze handleiding gebruiken we een HTML-code die Matt Coneybeare enkele jaren geleden heeft ontworpen speciaal voor Mac gebruikers. Dankzij de tool is deze code toegankelijker geworden voor Mac gebruikers

Bijgewerkt artikel, origineel van 03/02/2017







Reacties


  • Chris Laarman

    3 februari 2017 om 13:58

    Op zich een goede uitleg, lijkt me. Dankjewel, Wesley! :-)

    Maar… ik hoop, dat iedereen even een bakkie doet alvorens aan de slag te gaan.

    Leden van Yahoo groups zullen het herkennen: je moet drie keer kijken om één keer het regeltje tekst van een bijdrage te ontwaren tussen de eindeloze footers van Yahoo. Bijvoorbeeld.

    Er zijn ook mensen die hun zakelijke footer met kantooruren en KvK-nummer en nog veel meer ook gebruiken in het prikken van een datum met de boys.

    Eigenlijk zou mijn raad zijn: zet alle toeters en bellen op een webpagina, en gebruik slechts een (verkorte?) link daarnaar in een handtekening. Leidt niet af, en zorgt voor minder overbodige gegevens over de verbinding en in beider opslag.

  • Jos Schoemaker

    3 februari 2017 om 19:18

    Ontzettend leuk artikel Wesley, maar ik heb nog wel een paar vragen: 1) Het vak email wordt volgens mij nergens in de handtekening getoond, klopt dat? 2) Hoe kan ik een derde regel, voor bijvoorbeeld een adres, maken? 3) Kan ik het tooltje op een of andere manier downloaden om in de toekomst nog een te gebruiken?

  • Wesley Fabry

    3 februari 2017 om 19:55

    @jos bedankt! 1: mail wordt gekoppeld aan je naam. 2: we hebben dit artikel en tool gemaakt om de handtekening toegankelijk te maken voor iedereen. De basis is er, wanneer die uitgebreid moet worden zouden we voor iedereen de handtekening personelijk moeten aanpassen. Daar is helaas geen beginnen aan. Een adres bijvoorbeeld is veel langer en dan zal de huidige opmaak niet meer kloppen. De code kan eenvoudig aangepast worden wanneer je daar de nodige kennis van hebt. 3: deze pagina blijft bestaan en de tool blijft online. Deze pagina bewaren is dus voldoende. Het is een script en geen appje dus.

  • Jos

    15 februari 2017 om 15:49

    Hallo Wesly, ik heb bovenstaande bewerking nog maar een keer uitgeprobeerd. Het enige waar ik nu nog tegen aan loop is de afbeelding. Bij mij verschijnt in plaats hiervan een vierkant frame(pje) met een ? erin. Wat gaat er fout? Groet, Jos

  • Wesley Fabry

    15 februari 2017 om 15:51

    @jos waar zie je dit? Bij het kiezen van de handtekening in Mail bij versturen of in de voorkeuren?

  • Jos

    15 februari 2017 om 16:03

    Bij het versturen (en ontvangen)

  • Wesley Fabry

    15 februari 2017 om 16:04

    @Jos dan is de afbeelding niet goed geupload op het internet, zorg dat deze ergens online staat en je de volledige URL kopieert van de afbeelding zelf.

  • Jos

    15 februari 2017 om 16:06

    Ik heb er bij sommige websites ook wel eens last van. Heeft volgens mij iets met flash te maken. Ik werk op een iMac

  • Jos

    15 februari 2017 om 16:11

    Opgelost! Er miste 1 letter bij de URL. Thnx, Jos

  • Jos

    16 februari 2017 om 16:11

    Tip voor lezers die geen website hebben: Vermeld je adres bij “website omschrijving” en vul de URL van het adres in Google Maps in.

  • Wesley Fabry

    16 februari 2017 om 16:32

    @Jos dat is een erg leuke!

  • Jos

    16 februari 2017 om 16:52

    Idd, en voor diegene die de handtekening op de iPhone wil hebben verwijs ik naar dit artikel http://wp.me/p3mJ51-eo In verband met het plakwerk raad ik aan om geen URL verwijzing voor een website en mailto te gebruiken. De URL voor de afbeelding natuurlijk wel.

  • Jos

    16 februari 2017 om 17:06

    @Wesley (en off topic), hoe kan ik mijn “avatar” bij deze reacties plakken i.p.v. de AT?

  • Wesley Fabry

    16 februari 2017 om 17:23

    @jos dat kan met Gravatar, hier hebben we er een artikel over die ik overigens binnenkort eens zal updaten: https://www.appletips.nl/een-avatar-op-meerdere-sites-dankzij-gravatar/

  • Jos

    16 februari 2017 om 17:56

    @ Wesley, bedankt, ik had mij gisteren toevallig bij Gravatar ingeschreven i.v.m. dit topic over de handtekening. Ik zie dat je een tip van mij met een verwijzing hebt verwijderd. Mag dat niet of ga je het in het artikel verwerken? Groet, Jos

  • saskia

    24 februari 2017 om 14:09

    Bedankt voor de tip! werkt goed!

  • saskia

    24 februari 2017 om 14:20

    is er een manier om hem ook te krijgen al ik vanaf de ipad mail?

  • Ingeborg

    13 maart 2017 om 16:44

    Bovenstaande is hoopgevend, thx! Ik zoek al tijden naar een professioneel ogende oplossing voor mijn handtekening. Ik ben zeker groen op dit gebied, maar hoe krijg ik mijn logo in een htps vorm, waar moet ik het uploaden of hoe werkt dit? Heb je daar ergens ook een blogje over geschreven toevallig? Ik kon het niet vinden.

  • Wesley Fabry

    14 maart 2017 om 8:00

    @ingeborg een https-link is niet vereist. Uploaden kan op veel plekken, zelfs gewoon op https://afbeeldinguploaden.nl

  • Ingeborg

    16 maart 2017 om 17:22

    Thx, dat heb ik gevonden. Daarna met de uitleg aan de slag gegaan. Een heel eind gekomen, maar op een of andere manier zijn de namen die ik aan de verschillende handtekeningen heb gegeven niet terug te vinden op de verschillende .mailsignature bestanden die terminal opent, dus achterhalen welke het moet zijn is onmogelijk. Hoe kan dit? Want ik heb ze wel namen gegeven. Zowel in de bestandsnaam als in de eigenlijke body zijn de ‘namen’ van de handtekeningen niet terug te vinden?

  • Peter

    21 maart 2017 om 13:31

    Volgens mij kan dit makkelijker. Ik heb het zonder Terminal en Textedit voor elkaar gekregen.

    Ik heb op mijn eigen server* een zeer kleine simpele HTML-pagina gemaakt.
    Op die pagina bevindt zich een tabel met links een afbeelding en rechts m’n naam en telefoonnummer.
    Vervolgens heb ik het tabel vanuit Firefox** gekopiëerd (gewoon via selectie) en in ‘Handtekeningen’ in Mail/geplakt.

    * Ja, je hebt wel een server server nodig. Maar als jullie toch al een tool ontwikkeld hebben kun je ook een tool maken die zo’n pagina genereert.

    ** Safari gaf problemen met de formatting. Ik weet niet meer precies waar het aan lag, Webkit of een dergelijke techniek of standaard die net iets anders gerenderd werd..

  • Peter

    21 maart 2017 om 13:36

    Meteen maar even uitgetest; je kunt zelfs het ‘Live Voorbeeld’ hierboven kopïëren en in Handtekeningen plakken.

    Let er wel op dat je ‘March default message font’ onderin uitvinkt.

    En let er ook op dat je selectie precies goed is!
    Het moet een ‘blauwe rechthoek’ zijn, dus in het Live Voorbeeld hierboven moet je iets verder dan ‘Veldhoven’ slepen met je cursor. Succes!

  • Ruenna

    25 maart 2017 om 23:20

    Hallo,

    Kan ik dit ook laten doen ergens, ik kom er niet uit Ben nu als 2 uur bezig en geen succes…

    Alvast dank.

  • Jos Schoemaker

    31 maart 2017 om 17:32

    @Wesley, sinds de update naar MacOS 10.12.4 heb ik (en meerderen) problemen met Mail icm Time Machine. Ik sprak hierover met Apple en men gaf mijn account de schuld. De handtekeningen die op bovengenoemde manier gemaakt zijn zouden de oorzaak kunnen zijn. Wil jij eens kijken of dit inderdaad het geval is? Groet, Jos

  • Wesley Fabry

    31 maart 2017 om 17:40

    @jos dat is erg vreemd, hier geen problemen en het lijkt me sterk dat Time Machine hierdoor problemen moet geven. Gebruik je iCloud en/of iCloud drive?

  • Jos Schoemaker

    31 maart 2017 om 18:00

    Ik gebruik iCloud Drive en KPNmail en behalve de handtekening ook nog Mailbutler. (dus geen @icloud.com)

  • Jos Schoemaker

    31 maart 2017 om 18:02

    Ik de bedoel dus de mogelijkheid om direct vanuit Mail de TM te activeren.

  • Wesley Fabry

    31 maart 2017 om 18:05

    @jos precies zoals bij ons, alleen hebben wij geen Mailbutler, zeker dat het hier niet aan ligt? Is deze compatibel met de nieuwe macOS versie?

  • Jos Schoemaker

    31 maart 2017 om 18:16

    Die vraag heb hen zojuist ook gesteld. Nog geen reactie. Groet, Jos

  • Jos Schoemaker

    31 maart 2017 om 18:51

    Ik heb eea op de gastgebruikersaccount geprobeerd en hier werkte Mail icm TM perfect.

  • Wesley Fabry

    31 maart 2017 om 18:54

    @jos is onder het gastaccount mailbutler wel actief? Beste is deze eens uit te schakelen en dan proberen.

  • Jos Schoemaker

    31 maart 2017 om 19:47

    @Wesley, nee geen Mailbutler en geen HTML handtekening. Uitschakelen gaat volgens mij moeilijk, er blijft dan wel “iets” actief. Mogelijk in z’n geheel verwijderen (moet op een speciale manier). Maar ik wacht de reactie van Mailbutler even af. Gelukkig heb ik een free account van Mailsteward (http://mailsteward.com) geïnstalleerd. Backup tot 15000 mails per mbox.

  • Mireille Van Gorkum

    1 april 2017 om 10:45

    Hi,

    Ik wil graag meerdere websites plaatsen, maar ik zie niet zo goed hoe ik dat moet doen?

Een reactie toevoegen:



Do NOT follow this link or you will be banned from the site!