How to set style for email address link in Gmail? - html

I am making an HTML template to email messages to users. I need to make all links in the message of given color.
For the tag <a> the following variant can be used:
...
The problem is that my template contains an email address as plain text. When the message is opened in Gmail, it makes a link from it. How to change that link's color?

Use an attribute selector:
a[href^="mailto"]
{
color:#009900
}
This will select any anchors that are mailtos.

Use a tag with its attribute href to have mailto: in it
a[href^="mailto:"] { //style your link hear }

separate each part of the email address alone using span tag
for example, if you have example#sitename.com it will be like below
<span>example</span>#<span>sitename</span>.<span>com</span>

Related

Overwriting child link style properties inline

I'm making an email template to be used with AWS. In the body text of the email we add a {username} variable which gets replaced by the user's actual username. In our case the username will be an email address and when Amazon works their magic it gets replaced with a mailto: link
e.g:
<p>{username}</p>
will become
<p>example#domain.com</p>
I want to be able to change the style of the link, but don't have access to the format of the <a> tag itself. Also because email clients don't widely recognise style tags I can't use CSS so all solutions must be inline.
I've tried:
<p style="color: #fff !important">example#domain.com</p>
and that has no effect.
Any ideas very welcome!
Fiddle for the sake of testing.

HTML anchor link going to the same page with different query string

Within a web document (http://example.com/bla.php?x=123&y=321), is it possible to create an anchor link which goes to http://example.com/bla.php?z=111 without putting bla.php in the anchor's href?
This should work:
link

Can disable or comment inside value of href in anchor tag?

My problem is i wanna have some comment or disable some text inside value of href attribute of anchor tag.
I mean look like this:
Jquery.com
And when i click url redirect to stackoverflow.com and behave with domain.com like a comment or don't have any effect to link. Value in square bracket just like a comment inside url :[domain.com]
Can i do this without using jquery or javascript just like // or /**/ for normal comment inside code.
Please help me and thanks for reading.
Comments in HTML are this way :
<!-- [domain.com] -->
but that won't work in your case.
Why do you need to leave the [domain.com] if you want it to be effectless ?
Anyway, you could do something like that :
Jquery.com
and JS:
$('a.linkWithComment').click(function(e) {
$(this).attr('href', $(this).attr('href').replace(/\[(.*)\]/g,''));
});
Here's a JSFiddle for it : http://jsfiddle.net/kJDUB/
BUT be aware that this is absolutely not a recommended behaviour: SEO is probably broken, and there a many solutions to achieve same behaviour while being cleaner (like HTML5 tags : Jquery.com
and you can still reach the domain.com ...)

How to disable an email link?

I am using Ruby on Rails 3 and I would like to disable an email address link in a HTML email.
For example, if in an email I send some raw HTML like
Hi, you email is: <br/>
test#email.com
Gmail autodetects that this is an email address and changes it to
Hi, you email is: <br/>
<a target="_blank" href="mailto:test#email.com">test#email.com</a>
I would like to have this output
# Text without the 'mailto:' link
Hi, you email is:
test#email.com
How can I do that?
I have a more natural suggestion: wrap the email/url in an anchor hyperlink.
<a name="myname">test#email.com</a>
Since the text is already wrapped in a hyperlink, Gmail gives up and leave it alone. :)
(Note: also worked for Apple mail client.)
By 2021, the best for me would be:
<a href='#' style='text-decoration: none; color:#000000' name='myname'>x#somemail.com</a>
Explanation
After trying different services like Gmail, Outlook 365, Mailinator, and MyTrashMail, the results are:
• <a> - wrapping the email into anchor is essential, as raugfer pointed
• href='#' is necessary for Outlook. Linking to a fake anchor disables following the link.
• text-decoration: none, color:#000000 removes underline and changes color from blue link color to natural text color. For those who want not only to disable the link but make its appearance as usual text.
• name='myname' wouldn't harm, however, I haven't noticed its necessity.
Any javascript should be avoided, it won't pass Gmail. E.g. onClick="return false;", <script>...</script>.
If you want to change the cursor to default, cursor: default or cursor: auto won't help. For Gmail only, do without href='#'
Using <span> or <myspan> works for Gmail as Prince Mishra stated, but it doesn't help in all the services (in Outlook, for instance).
Even I had the same problem. Gmail would detect and convert mail addresses and ip addresses to links. I used string.replace to enclose dots (.) and # in blocks. And that works fine for me. sample python code looks like.
text = myname#gmail.com
chars = ['.','#']
encloseIn = 'span'
for char in chars:
text = string.replace(text, char, '<'+encloseIn+'>'+char+'</'+encloseIn+'>')
This is what worked for me in Laravel.
<a style="pointer-events: none; color: inherit">
{{$user->email}}
</a>
You can try
Hi, you email is:<br />
test#email.com
Reading all answers, I tried this in a Joomla article and it worked:
<p><strong>This is the email address: </strong><a name="whatever">youremail&#64domain.com</a></p>
Result:
This is the email address: youremail&#64domain.com
Worked on Chrome and Firefox.
Late reply but i think I have found a way to get over this auto linking issue.
The easiest and fastest way is to add a zero width non joiner between each alphabets. Now that sounded hard so I developed a small script that made things easy for me. Run the code below, add email address (paste or type) and it adds the required code around the email address. Paste the result in your email.
$('#userInput').keyup(function() {
var s = $(this).val().trim();
var text = "";
for ( var i = 0; i < s.length; i++ )
{
text += s[i]+'‌' ;
}
$('p').text( text );
});
#userInput{max-width:400px;width:100%;padding:10px 5px;}
*{outline:none;}
p,#userInput{font-family: 'Roboto', sans-serif;}
p{word-break:break-all;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<input type="text" id="userInput" />
<p></p>
You just need to add the "zero width space" character, his code in HTML is:
​
This code adds a space in the string where you need.
For a respectable solution you need to complement this method with a <nobr> tag, because with this tag you can prevent from breaking to the next line.
The only way to get around this is to convert the email address into an image and include that in the email. Of course this means the user might choose to not download the image, which would mean they won't get the email address either.
What it really comes down to is that you can't control what Gmail or any other email client does once it receives an email, so there isn't another way around this. It's Gmail's, or any other email client's, choice to do what they want with emails, and that includes hyper-linking email addresses.
If you are very adamant about not converting emails into hyperlinks you can try to do other things to conceal the fact that it's an email, like writing it out instead:
Hi, your email is:
test at email dot com
Of course this is probably more confusing. If I were you, I would simply settle for the fact that Gmail will hyper-link your emails.

HTML Tags for email and link to other sections on page

I am writing a HTML page and my requirements are as follows:
HTML Page contains some email ID's and when clicked on those EmailID's... it should open new page of the outlook.
Page has certains sections and when clicked on that.. it should reach out to the respected paragraph/section.
Ex: click to Link to go to the .... section
Thanks in advance...
For email address link
Email Me
fore link navigation
http://www.w3schools.com/html/html_links.asp
more about navigation with in page : http://www.yourhtmlsource.com/text/internallinks.html
Linking to sections:
Go to X
<h2 id="sectionId">X</h2>
This way you can link to anything that has an ID, be it a header, a paragraph, a DIV or anything else.
Try looking at tag (Anchor). You'll get what you need...
mailto will suffice your e-mail needs and hash tags will solve the second one.
This should do it:
Email
This should open the new window on your email client (outlook or whatever you have set).