I am making a HTML email and testing using Litmus, however Lotus Notes 8.5 does not appear to be displaying any link styles. I am using pretty old school methods to make sure it works in older mail clients, but nothing seems to work. The links are getting styled in every other client, including Lotus Notes 7 & 8.
Here is the code:
<font face="Arial" size="2" color="#00b4da" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
<a href="http://www.link.com/" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
www.link.com
</a>
</font>
It could just be a bug with the app, however, it could also be me. I am not really sure what my other options are.
Put the <font> tag inside the <a> tag instead.
<a href="http://www.link.com/" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
<font face="Arial" size="2" color="#00b4da" style="font-size: 16px; line-height: 22px; color: #00b4da; text-decoration: none;">
www.link.com
</font>
</a>
Since <font> tags are inline elements, you can either nest them or wrap them around multiple blocks of text without affecting layout.
in the inline style, try adding "color: #00b4da; color: #00b4da !important;"
I seem to remember coming across something similar in hotmail and needing to do this but that was a while ago. Hope that helps.
Related
I am inserting html code through database, we don't have separate styling sheet. So we are using inline styling.
I used below code
<li style="font-family: Arial; font-size: 13pt;Color: #711984; font-weight: bold">
Cross-border Transfer
</li>
But font-weight property is not applicable, I don't see bold fonts.
I tried below code, it works but I don't think its recommended for best practices:
<b>
<li style="font-family: Arial; font-size: 13pt;Color: #711984;">
Cross-border Transfer
</li>
</b>
Pl
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).
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:
1350-177 Lisboa
All CSS you need in this example will be the ones you use on your HTML/
Hope this answers your question.
I have the below JSP code, which prints on page like
USE BY:APR/04/2017
Now I want it to be printed as
Use By:APR/04/2017
Though the value of label.global.useBy is "Use By" it is getting capitalized because of the style I have defined in CSS. I have done that to render the month in all CAPS. Else it was getting printed as
Use By : Apr/04/2017
Could you please suggest as to how can I Keep "Use By" as is and juts make month in caps, as:
Use By: APR/04/2017
<td class="contentArea"><bean:message key="label.global.useBy"/>: <bean:write name="details"property="expirationDate" formatKey="format.date.certificate" /></td>
Associated CSS
.contentArea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
text-transform: uppercase;
}
Thanks #Rahul Kapuriya,
I use SPAN tag inside TD like so,
<td class="contentArea"><bean:message key="label.global.useBy"/>: <span style="font-weight:bold; text-transform: uppercase;"><bean:write name="details"
property="expirationDate" formatKey="format.date.certificate" /><span></td>
Thanks!
"You are welcome" -Rahul Kapuriya
You can use <strong> tag so you don't have to add style font-weight:bold
Like this:
<td class="contentArea"><bean:message key="label.global.useBy"/>: <strong style="text-transform: uppercase;"><bean:write name="details"
property="expirationDate" formatKey="format.date.certificate" /><strong></td>
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>