Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › basic css inside HTML for email-signature

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • April 6, 2016 at 1:36 am #240266
    motionair
    Participant

    Hi!
    I have been working on email signatures now for a while and i stumbled across the article about svg compability that Geoff Graham wrote. Very nice solution in the end but i cant really seem to understand how to get the css to work.
    Im guessing its because i dont really know how to add css inside html, since i havent done that before..
    Article:

    css-tricks guide on svg in emails.

    Here is what i have so far..

    The problem is that both images are shown in my apple mail app.. am i putting the css at the wrong place?

    Content-Transfer-Encoding: quoted-printable
Content-Type: text/html;
charset=utf-8
Message-Id: <78895DF6-5B5B-4F3F-BF8D-54465AF08385>
Mime-Version: 1.0 (Mac OS X Mail 8.2 \(2104\))

<head>
<style type="text/css">
/* Resize an element that has a width and height of zero to full size */
.showy {
  height: 60px !important;
  width:180px !important;
}

/* Hide this everywhere, except for those that can’t read this code */
.no-showy {
  display: none;
}
</style>
</head>
<body>
<div id="sig" style="font-family: ‘Montserrat’, Montserrat, Verdana, Lucida Grande, Sans-Serif; font-size: 9px; color: gray; min-width: 530px;">
Kind regards,
<br>
<br>
<span style="color: black; font-size: 12px;">Reiel Lien Bruland</span><br> Chairman & Partner
<br>
<br>
<img class="showy" style="float: none; width: 0; height: 0; padding: 2px 6px 0 0;" src="http://motionair.no/wp-content/uploads/2016/04/motionair_logo_sort_v01_SIGNATURE.svg" alt=“Motion Air logo“ />
<img class=“no-showy" style="float: none; width: 150px; padding: 2px 6px 0 0;" src="http://motionair.no/wp-content/uploads/2016/04/motionair_mailsignatur.png" alt=“Motion Air logo“ /><br>
<br>
Nydalen Film City - Gjerdrums vei 6, N-0484 Oslo<br>
Office +47 96 90 8000  Mobile +47 95 78 34 85<br>
<a href="mailto:[email protected]" style="color:#3598b7">[email protected]</a> - <a href=“http://motionair.no” style="color:#3598b7">www.motionair.no</a></div>
</body>

    Thanks for any feedback!

    -Reiel

    April 6, 2016 at 3:14 am #240272
    Snaser
    Participant

    Hey Reiel

    I am having almost same issue but some suggest using inline svg instead of img.

    you can use this in the CSS inline if it works with you.

    @media (-webkit-min-device-pixel-ratio: 2),
    (min–moz-device-pixel-ratio: 2),
    (min-resolution: 2dppx),
    (min-resolution: 192dpi) {

    but i am having an issue where svg doesn’t show in mail clients and if i use inline i cant send the signature in email to select it from html file.

    I cant Select the SVG to paste in email client as well.

    http://codepen.io/Snaser/pen/XdzOpE

    April 6, 2016 at 4:54 am #240280
    motionair
    Participant

    Hi Snaser!

    Thanks for the feedback. i Changed my logo to inline and used the svg code in stead. Works nicely, and the fallback for gmail with png also renders as expected.

    I did not totally understand what your problem was, but i will try to help if i can.. Would you explain a little more?

    I have one last little issue that i cant seem to figure out. The text formatting disappears when i add the signature to my email client.. No bold text, no colors only black text with the same size.

    Any idea what is causing that?

    My signature CodePen.

    April 6, 2016 at 8:00 am #240285
    Snaser
    Participant

    Hey

    Try adding the text you want to edit with style into a Span .. ….

    also i would like to know ,what steps do you do to copy/use signature into email client.because i can’t seem to copy the svg in browser to outlook for example/Mail Client.

    Regards

    April 7, 2016 at 5:19 am #240304
    motionair
    Participant

    Thanks that worked pretty well! Now it looks and works as i wanted.

    I used a SVG optimizer, i know Peter Collingridge has a good one on his site. http://petercollingridge.appspot.com/svg-optimiser

    try chunching it thru there, it removes all excess code from the svg files. im not sure if i understand what you mean by copying it, but signatures that involves coded svg files are hard to copy, because it just copies the image that is shown, not the code that shows it.

    Hope that helped.

    -Reiel

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.