I can't figure out how to change these blue links Gmail is adding to the email I'm trying to code.
I've searched online and implemented their fixes but to no avail.
Here's my code.
<th class="small-12 large-6 last columns text-right show-for-large" valign="middle" style="Margin:0 auto;color:#fff;font-family:'Open Sans',sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0 auto;padding:0;padding-bottom:16px;padding-left:8px;padding-right:16px;padding-top:16px;text-align:right;width:274px">
Wealth
News
Contact Us
</th>
I added a <span> tag around the links to get it working per Alon's suggestion in the comments.
You'll want to change the colours the 6 digit values, I don't think any email clients support 3 digit colours. I'd also remove all the inline styles on the a tags apart from color & text-decoration, also drop the !important. The font styling will all be inherited from the th.
An overall css fix I use in all templates is below. You'll also need to add an id="body" to your <body> element.
u+#body a,
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
(#MessageViewBody a will remove blue links from Samsung Mail too, no need to add that ID into your code though. A handy fix to have.)
So for gmail in order to pick up the an actual style for a hyperlink anchor ( ) you have to use the following inline css to set the colour and remove the underlining :
style="color: #FF0000; text-decoration:none; cursor:text; pointer-events: none;"
This is how a complete tag would look like :
Click here to go to Google
This works as of date answered : 19/09/2019
Related
I am attempting to build a page that offers RSS feeds, just title and dates of articles. This is a snapshot of what I have so far.
.wp-block-rss__item {font-size: 12px; color: #000000}
.wp-block-rss__item-publish-date {font-size: 12px; color: #000000}
Now, the second line of code, tells me I got something right. The font size and color both change the date to what I want. But the first line, only the font-size is working, I can change the article title (rss item) font size, but the color remains.
I am also trying to hide the bullet point image that flows from the RSS feed.
I tried
.wp-block-rss_item::marker {display: none;}
For what it's worth, this is my first attempt at this type of CSS manipulation, I'm using the Chrome developer tools / inspector to help identify what needs changing. Prior, I had a web page that used a paid theme, and would just post "how do I do this?" and someone would reply with code within a day or two. I'd like to learn to do these simple things myself. Happy to clarify anything or post other details from the Chrome tool.
Adding this in response to comments - my inspector view looks like this. (yes, a different rss feed from posted above, same issue for all the feeds)
Try using !important behind your statements to override already given properties.
For example:
.wp-block-rss__item {font-size: 12px; color: #000000 !important}
writing this to make it easier for people to find the solution that i wrote in the comments.
To fix this the easiest way is to change the .wp-block-rss__item {font-size: 12px; color: #000000} rule into
.wp-block-rss__item a {
font-size: 12px;
color: #000000
}
Why does this happen? To make it easy, you are dealing with CSS specificity, which is what makes CSS so flexible (while also making it difficult for people to approach it). So, to get on your point, every HTML element has it's "basic" styling, in the case of an a like yours it's blue colored and underlined like it was showing in the first screenshot, but why was your code changing the font-size but not the color? Simply because the "basic" styling of the a doesn't have a font-size, but it has a color and that color was overriding your rule, this is because for CSS the rules that were applied to the a are more specific than the rules applied to .wp-block-rss__item which was the parent of the parent of your a. Changing the rule like i suggested you tells the browser that every anchor inside a .wp-block-rss__item has to get that styling, which, in this case is more specific than the "basic" styling. I'll give you an example, maybe it's easier to understand
.parent{
color: red;
}
.parent .green{
color: green;
}
.kid a{
text-decoration: none;
color: black;
}
.kid .custom-link{
color: white;
background-color: red;
padding: 5px;
}
<div class="parent">
<span> This text is red </span> <br>
<span class="green">This text is green</span> <br>
This is a normal link <br>
<div class="kid">
This is a custom styled link <br> <br>
This is another custom styled link with a more specific selector
</div>
</div>
Notice how the normal link doesn't get the color of the .parent (red) BUT when i use a more specific class .kid a both links in the kid element get the style without the underline and the color black. The second link has a more specific class so it gets the color from that.
You can read Here and over here for more info. I know this might look scary and hard to understand, but trust me, work with CSS for a month or so and it will become natural.
Hope I explained myself good enough, let me know if you don't understand something
I have modified an email signature for the company that i'm working with, everything looked great when i tested it.
The things is that i did code on a mac, and when my client send a mail to a windows user, there is a small part of that signature that does not apply my styles options
Here's my code :
<tr>
<td style="width: 167px; padding: 0px 13px 8px 30px; border:none;" class="">
<span style="font-family: Verdana, Arial, sans-serif; padding-top: 5px; font-size: 9pt; margin-right: 10px; color: rgb(119, 119, 119); vertical-align: top;" >partner of</span>
<a href="link" title="brand website link" style="color: rgb(4, 180, 134); text-decoration: none;" class="">
<img moz-do-not-send="false" width="35%" src="http://www.website.com/wp-content/themes/brand/images/logo-inner#2x.png" alt="Logo brand" style="padding: 10px; border-radius: 5px; background-color:#153754; border: 0px;" class="">
</a>
</td>
</tr>
This code already works with another image on the top of the signature so i assume it must come from my styling ?
Which is suppose to do this : right behavior of the style
But this is the behavior i get on Windows :wrong behavior of the style
I can't find anything anywhere, so if you have an explanation, i'd be glad to hear it !
Thank you all !
The background-color isn't working because you're applying it to the image. Outlook 2007-2016 does not support styling ALT. Apply the background color to the actual table cell for the image and it will work.
No image is loading because YOU POSTED A DUMMY LINK TO AN IMAGE. If you're going to come here asking for help, post your actual code. I took the time to test your code to determine the best way to help you. Don't make us work harder just to help you. That's rude.
Outlook has partial buggy support for Padding:
https://www.campaignmonitor.com/css/box-model/padding/
Outlook has partial buggy support for background colors:
https://www.campaignmonitor.com/css/color-background/background-color/
My suggestion is to create a table with two cells. Color the one with the image using bgcolor="#ff0000" or whatever color you wish. That will give you a reliable background color. Apply your font styles to the image style which will change the font for the ALT if an image doesn't load. Use cellpadding to give yourself the padding you want with Outlook.
Good luck.
I'm having some difficulties styling mdl-textfield.
Specifically, styling size and color the floating label, and height and color of the animation after pressing the input field.
Effectively, this is my starting point, as taken from the component list.
https://jsfiddle.net/2aznyc4n/1/
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3" placeholder="Text here.">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
</form>
I am able to set the size and color of the floating label by adding into the label in the html
style="font-size:x-large; color:purple"
So is it some kind of bug that this has no effect when the label goes floating, if this is set in the css? If I set the style in the html and the css, then both of them suddenly has an effect. I just cant wrap my head around this.
If all possible, I want to avoid having styling in my html.
I have been digging through the source code, with no success in figuring out the styling of the mdl-js-textfield color and height.
Customization of MDL is a little bit tedious. At the beginning you can choose your primary and accent color and have a set of useful and beautiful componets, but when you need customize something a little bit, difficulties come out.
I digged for MDL source code in order to find what classes added color and font-size styling. I solved the need to adjust color and font-size of input text floating adding this hacking code in my css.
.mdl-textfield{ input[type="text"]{ font-size: 24px; color: #color500;} }
.mdl-textfield--floating-label.is-focused .mdl-textfield__label, .mdl-textfield--floating-label.is-dirty .mdl-textfield__label, .mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{
font-size: 14px;
top: -5px; //Manages floating label fly
}
.mdl-textfield__label{ font-size: 24px; top: 20px; color: #color500;}
Normally the customization should be done with the custom CSS theme builde.
But if you prefer to use your own css you should use !important.
.mdl-textfield__input {
color: black !important;
}
For the pleaceholder text you need to use vendor prefix CSS:
::-moz-placeholder { /* Firefox 19+ */
color: red !important;
}
::-webkit-input-placeholder {
color: red;
}
I really struggled lots specifically with the bottom-border-color after the animation but thankfully after some research I could deduct a solution mentioned over here (it's prohibited to duplicate answers, so I rather put a direct link to it):
https://stackoverflow.com/a/43512625/1920145
Hope it helps many more people.
I am using a link tag styled to look like a button in my email . The css for the tag is as follows.
Submit
a.submit{
background: none repeat scroll 0 0 #FF9900;
border: 1px solid #FF9900;
color: #FFFFFF;
display: inline-block;
padding: 6px;
text-decoration: none;
}
The link style works everywhere except in outlook . Where only the text gets the background color
I noticed the same issue in the google+ email too. Their buttons show the same css styling problem in outlook
A bit of a work around the padding issue in Outlook, you can use a border with the same color as the background to create the padding for the button. For example:
<a style="border:15px solid #FFAE00;background-color:#FFAE00;color:#FFF;font-size:14px; font-family:Arial;text-decoration:none" href="#">
Click Here
</a>
This would only work for basic button styles.
http://jsbin.com/pohidedayo/edit?html,output
EDITED:
Unfortunately Outlook supports something roughly equivalent to IE5 compatible HTML. It's really terrible. Here's a detailed MSDN article on the Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007, which I don't believe changed much for Outlook 2010.
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
See CSS Support in Mail Clients - The Ultimate Guide
In the above link you can see css background property is not supported in outlook so you should use background-color which is supported in outlook.
As other answers suggest, the support for anything really universal in Outlook 2007, 2010 and 2013 is pretty terrible. The main problem in the case of this button is that the margin property is not supported in these versions of Outlook (they use MS Word as the rendering engine, yuk!) Litmus explains this and the solution really well.
I managed to create an HTML table-based button that will work in almost all major email clients.
Here is the HTML for your reference:
<table cellpadding="0" cellmargin="0" border="0" height="44" width="178" style="border-collapse: collapse; border:5px solid #c62228">
<tr>
<td bgcolor="#c62228" valign="middle" align="center" width="174">
<div style="font-size: 18px; color: #ffffff; line-height: 1; margin: 0; padding: 0; mso-table-lspace:0; mso-table-rspace:0;">
MY BUTTON
</div>
</td>
</tr>
</table>
Hope this helps!
You havent assigned a class to your <a> tag, but if it still doesnt work its because certain email services dont allow certain CSS tags, check here for more info: http://www.campaignmonitor.com/css/
I am coding a simple HTML e-mail and I am experiencing strange behaviour in gmail and Outlook 2003 and 2007. There is a white space below all images. My inline styling for images looks like this:
border: none;
font-size: 14px;
font-weight: bold;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
text-transform: capitalize;
margin: 0px;
padding: 0px;
All styling is taken from MailChimp HTML code and should avoid inconsistencies. Do you have any experiences with this? Images are inside table td markup. Table cells have cellspacing and cellpadding set to 0 as well. Here is a screenshot of the problem: http://cl.ly/EnFt/o
Images are inline by default. That small gap you're seeing is the space for descenders such as those on 'g' and 'q'. To combat the problem, you need to explicitly set all images to be block elements, like this:
<img src="path/to/img.jpg" style="display:block;" border="0" alt="My Image" />
You can use a service like premailer, which lets you add this style in the head of your HTML file, and will automatically place it inline for you.
It's worth mentioning that display:block; will, obviously, mean that each image should be in a separate td or similar: images that need to display side-by-side will be pushed down below each other.
Just use style="display:block;" to image tag.Its works fine.
write border:0; in your <img> tag. Like this:
<img style="vertical-align:top; border:0;">