Email signature - html

So I have made a email signature and it works fine in desktop Gmail. The problem is that when I open an email in desktop Outlook links turn blue and underline . How can I fix this?
This is my HTML
<td style="font-family:'Open Sans', sans-serif;color:#000000;font-size:9px;line-height: 14px;font-weight: 400;">
<a style="color:#000000!important;text-decoration:none!important;" href="" target="_blank" data-saferedirecturl="">
Av.Infante Santo, 69 a-c | 1350-177 Lisboa - Portugal
</a>
</td>

When Gmail spots an address or phone number in an email, it automatically adds an extra style declaration, which formats any link in the email that has no inline styles attached to it, as blue:
.ii a[href] { color: #15c; }
How to fix?
Option 1:
Wrap the telephone number or address in a <span></span>
Give the
<span> a class. Example: <span class=”contact”></span>
Declare the class in the <style> section of your email.
CSS:
.contact a {color:#000000!important; text-decoration:underline!important;}
HTML:
<span class="contact">675 Massachusetts Ave.<br>Cambridge, MA 02139, USA</span>
Option 2:
Add a default styling for all links created by Gmail, for this to work you will need to add an id of body (in this example) to the body of your email.
CSS:
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
HTML:
<body id="body">
</body>
If you want to read more about Gmail links here is the source of the above example code which explains everything fully.
Option 3: (which I usually use)
Add a zero width non joiner code (‌) and space ( ) to the address or phone number so the numbers don't become a link. This is usually client request to disable link.
HTML:
1‌3‌5‌0-1‌7‌7 Lisboa
All CSS you need in this example will be the ones you use on your HTML/
Hope this answers your question.

Related

Image in Email Signatures

I'm creating an email signature which has image icons to be displayed. The problem is some people can see the images and but for others, the images are not loaded and show blank box. Here is the code:
<a style="color: white;"
href="https://www.youtube.com/landor" style="text-
decoration:none"><img style="color: green; font-size: 6px;
font-family: Georgia, serif; width: 34px;"
src="https://dnohehtvi22a2.cloudfront.net/YoutubeIcon.png"
alt="YouTube" /> </a></span></p>
I read that some email clients block HTML emails images. Do you think this is the only reason? Does anyone know a better way of creating this?
Thank you,
Make sure you get the basics right, i.e., specify a hex value, and use the width and height attribute:
<img style="color: #00ff00; font-size: 6px; font-family: Georgia, serif; width: 34px;height:24px;" width="34" height="24" src="https://dnohehtvi22a2.cloudfront.net/YoutubeIcon.png" alt="YouTube" />
You can't do anything about Outlook and other email clients that block images by default. There are techniques that try and embed the image, but they still don't get around this image blocking (where the user simply has to click to start the download of images).

How to keep Google from putting material-icons text in site links?

Many of my links have material icons in tags inside the link. Now, Google has indexed my page with site-links that include the text/ligature from that material-icons tag, so a link might say "shopping_cart Shop Now" for example.
Everything already displays correctly when browsing the site, but it's just in google's search results that the page titles look ridiculous.
<li>
<a href="/feed.php">
<i class="material-icons icon">shopping_cart</i>
<span>Shop Now</span>
</a>
</li>
I would not expect the text "shopping_cart" to appear when Google indexes these page titles for site-links. How can I tell Google to stop doing that?
You can't tell Google to stop indexing that. What you can do is remove what you don't want Google to index. For example, if you don't want it indexing the material icon text then remove the material-icons class and text from the HTML.
What you can do instead is add it via CSS with a pseudo class, here's a pen for example: https://codepen.io/MatthewRader/pen/VNZxdo
your HTML and CSS would look like this:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<li>
<a href="/feed.php">
<span>Shop Now</span>
</a>
</li>
li {
list-style:none;
}
a {
text-decoration: none;
color: PeachPuff;
padding: 10px;
background: SaddleBrown;
}
a::before {
font-family: 'Material Icons';
content: "shopping_cart";
-webkit-font-feature-settings: 'liga';
}

How to set text to go over an image strictly in HTML?

I am writing an emailed newsletter, and need to set an image as the footer, with a few clickable links over it. I have figured it out using both HTML and CSS, but no matter where I searched I could not find a way to do this strictly using HTML. Can anyone help me out?
<!--Footer-->
<tr id="footer">
<td id="footer" style="font-family: 'Titillium Web', sans-serif;;-webkit-text-size-adjust:none;background-image: url" img url"" templates\uuaemail-foot.jpg";padding-left:="" 20px;padding-right:="" 20px;padding-top:="" 10px;padding-bottom:="" 20px;"="">
<table height="101" width="602">
<tbody>
<tr>
<td id="footer" style="font-size: 10px;color:white;" height="95" valign="top" width="600" align="center"><p><br></p><p class="style3"><strong><span style="font-size: 12px;">admissions.rutgers.edu<br></span></strong></p><p class="style3"><span class="style7"><span style="font-size: 8px;"><strong> University Undergraduate Admissions</strong>, Operations Center<br>©2017 , an equal opportunity, affirmative action institution.</span></span></p></td>
</tr>
</tbody>
</table>
</td>
Is what I currently have (with CSS styling)
update: My issue is that the email is widely sent to Ms Outlook 2016, which I have both heard and seen through testing that it does not process CSS styles very well. When I opened this code in Outlook, it showed the CSS styling commands at the top of the message, and did not apply it at all.
CSS is just an organized way for the the stylesheet. Although not recommended, you can use inline styles with just the HTML to achieve almost everything, if you post your code, may be some of us can suggest a definite answer.
HTML is a markup language, it does neither add functonality or style by itself.
There are tags there the browser places default values.
Eg.
<footer> </footer>
The most browser add automaticly:
footer {
display: block;
}
Or the h tag
<h1></h1>
The most browser set the default values like:
h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Every other style change has to be done by your self with css. You can also work with inline stlyes like:
<h1 style="color:red;"> A red big text </h1>
A good way to find more about default values and inline styles is: https://www.w3schools.com/
You want to use background image in your email and you want it rendered in outlook. Use this site http://backgrounds.cm/ to generate code for background image that will work in all outlook desktop versions. Then you can add links etc. over the image.
Also, please don't use same id more than once in your code. You can assign an ID to one element only. To cover multiple elements, use class attribute.

Overwrite inline CSS Tag

After a migration of an existing Content Management System i have some problems with existing classes - sometimes the Richtext Editor created the following HTML Code:
<span style="font-weight: bold; "><a href=""....>
Now, the Link is not bold, but i dont know if it is possible to overwrite any rule in CSS when having a custom inline Style property.
Is there any chance (without changing the HTML Code) to make the link as bold text?
Thanks in advance for any help.
Thanks for the first comments - but to be sure i want to add the "bold" tag only when ill have this "special" inline property. So i dont want to overwrite all classes with bold text.
When i have
<span><a style="font-weight: bold;">....</a>
Everthing is fine, the Link is bold
But when i have
<span style="font-weight: bold;">....
The link is NOT bold (but it should be bold).
This is little stupid Code from the Richtext Editor.
Original:
Use !important :
span {
font-weight: normal !important;
}
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
Edit:
This means that in your CSS, there is somewhere :
span {
font-weight: normal !important;
}
You need to overwrite it by selecting the span with more specificity than the declaration in the current css, e.g:
/* somewhere in the css you can't modify */
span {
font-weight: normal !important;
}
/* the css you add */
.container span {
font-weight: bold !important;
}
<div class="container">
<span style="font-weight: bold; ">
<a href=""....>
link
</a>
</span>
</div>
The is because classes, ids, attributes, etc all have a score which add up to see which declaration will be used.
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
- smashingmagazine.com
And here is an cheat sheet :

html, displaying a link as normal text

I was wondering if you could display a link as normal text.
<a id="" href="" target="_parent"><img src="" width="121" height="20" alt="">
<div style="position:absolute;left:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font></a>
I'm trying to overlap an image that is also a button, with the text "Log in", it works as it is with the code above, but I was wondering if I can change the "log in" which displays as blue and underlined to appear as normal text.
In css:
a {
color: inherit;
text-decoration: inherit;
}
These values can also be stuck in your anchor tag's style attribute.
Should result in your anchor tags looking the same as the text color and decoration of the parent(s).
If you have a look at Cascading Style Sheets (CSS) you can change the colour and the text style of the link.
In your example, you could use
<a id="" href="" target="_parent" style="color: white; text-decoration: none;"><img src="" width="121" height="20" alt="">
<div style="position:absolute; sleft:163px;top:1px;font-size: 12px; display: block">
<font color="white">Log in</font>
</div>
</a>
However I would learn how to use external stylesheets and link them to your HTML through the <link> tag in the <head> of your html. You can then style up individual tags through the tag name, an id or a css class. So an updated example would be:
<link rel="stylesheet" href="link-to-your-css-file" />
in your css file have
a.imgLink{
color: white; text-decoration: none;
}
div.imgLink{
position: absolute; left: 163px; top: 1px; font-size: 12px; display: block;
}
Then your html would be
<a class="imgLink" id="" href="" target="_parent">
<img src="" width="121" height="20" alt="">
<div class="imgLink">
Log In
</div>
</a>
Not only does it make your HTML "dry" but it gives you greater control over the styles of your html by only changing the css file.
If you don't want the link to be underlined,
set " text-decoration:none"
use this code in your html file
<style>
a {
text-decoration: none;
color: #000; /* or whatever colour your text is */
}
</style>
Short answer: yes.
Longer answer:
Yes, here is a fiddle, but you probably don't want to hide links from your user.
stslavik makes a good point with "text-decoration: inherit". Here is another fiddle. On my browser the "blam" and "stslavic" both show with strike-through, but I'd go with the "inherit" versus the "none"; just seems better to me.
(P.S not advertising this and no spam. Click on 'Hate AI' to reach my project)
You can do this =>
<h1><a style="text-decoration: none; color: inherit;" href="https://obnoxiousnerd.github.io/hate-ai">Hate AI</a></h1>
<p>A personal assistant that hates you but still helps you.</p>
The logic here was adding a style to the a tag which contains the following:-
text-decoration: none;
color: inherit;
text-decoration for removing the underline under the text.
color: inherit for removing the usual purple color of links.
Sure - just adjust the CSS for 'a' elements on the page.
Just a simple snippit to show some size/coloring possibilities, to make your link fit thematically when the rest of your text a bit better.
Wow, Look at this website! It's called Website! It's a shame that this link looks horrible, though!
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.website.com/">Oh, boy! You can now click here to visit Website's website without the link looking bad!</a></h2>
<h2><a style="color: #A52A2A;; text-decoration: none;" href="https://www.bing.com/">Uh oh, the Website website is broken! Visit the pinnacle of innovation, Bing, instead!</a></h2>