So I am creating a new email template but somehow outlook mobile thought it was a good idea to turn all the text which looks like an href (but really isnt) into a link. This takes place in any HTML tag, "h1", "p", "span", "div" etc.
Is there any way to prevent this stupid feature from rendering on other peoples their phones?
Here is the code (all styles are inlined so there is no stylesheet):
<h1 style="font-family: Arial, Helvetica, sans-serif; font-weight: bold; Margin-bottom: 8px; Margin-left: 0; Margin-right: 0; Margin-top: 16px; color: #ffffff; padding: 0; font-size: 26px; line-height: 34px;">Order IDÂ 204793</h1>
<p style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 20px; Margin-bottom: 24px; Margin-top: 0; line-height: 27px; mso-line-height-rule: exactly; margin-bottom: 16px;">08/09/2018, 15:47</p>
Wrap any text you don't want linked in a <a> tag of your own and style it so that it doesn't appear to be a link (e.g "color:#000000;text-decoration:none;"). You don't need to include an href attribute.
Related
I'm writing a sript to read mail content and piping to a bunch of regexes in order to get some important status info.
my script is:
for ((i=START; counter<=${number_of_mails}; counter++))
do
mail_content=""$(echo $counter | mail -f /var/spool/mail/user)
# ....... processing mail content $counter
# doing some stuff
done
The problem is that mailcontent is "raw" mail content like this:
e: 12px; margin: 0px auto; font-family: Arial, sans-seri=
f !important;"></a> <a href=3D"http://post.spmailtechnolo.com/f/a/mg=
ds0nF2qSAHBvHw5u7zUw~~/AAEd7AA~/RgRbciuJP0EIACzE6PGZ5slXA3NwY1gEAAAAAFkHZGV=
TI5OTEmeHRvcj1FUFItMzEyOTcyNjEyLVtjb3VudGVyX29mZmVyX2NvbnRhY3RfMjAxNzA4MTRd=
LTIwMTcwODE0LVtpbnN0YWdyYW1dLVtdLVtdLVtdJnVybD1odHRwOi8vaW5zdGFncmFtLmNvbS9=
pZGVhbGlzdGFjb21HAnt9" style=3D"margin: 0px; padding: 0px; color: rgb(102, =
102, 102); font-size: 12px; font-family: Arial, sans-serif !important;"><im=
g src=3D"https://www.instagram.com/static/email/img/badge_instagram.png" al=
t=3D"instagram" style=3D"padding: 0px; border: none; font-size: 12px; margi=
n: 0px auto; font-family: Arial, sans-serif !important;"></a> </td></tr></t=
body> </table> </td></tr></tbody> </table> </td></tr></tbody> </table> </td=
></tr><tr id=3D"bottom" style=3D"margin: 0px; padding: 5px 0px 0px; font-fa=
mily: Arial, sans-serif; font-size: 15px;"> <td style=3D"margin: 0px; font-=
That's a pain to process with regexes. I just need to get some info from mail message.
How can I read the mail message not struggling with this stuff?. Just Reading text, not all HTML and such
I don't know if anyone on here uses Marketo as an ESP, and I'm not even sure if this is the right place to ask this type of question.
I'm trying to target Outlook in my HTML emails. No matter how I enter the code into marketo (template, Replace HTML, WYSIWYG HTML editor) the code is always auto corrected.
It changes <![if !mso]> to <!-- [if !mso] -->
I think you can see the problem here. Marketo sees the <! and thinks I'm trying to make a comment so it autocorrects, but the auto correct essentially renders my code invisible.
Anyone know a work around for this?
Here's the revised code (edited from emailbtn.net) that solved my ESP problem:
<div><!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://buttonlinkhere/" style="height:44px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fill="t"> <v:fill type="tile" src="http://parata.com/email-images/rx/btn-big-44.png" color="#f06609" /> <w:anchorlock /> <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:normal;" _mce_style="color: #ffffff; font-family: sans-serif; font-size: 16px; font-weight: normal;">Microsoft Outlook</center> </v:roundrect> <![endif]--><!--[if !mso]><!--><a style="background-color: #f06609; background-image: url(http://parata.com/email-images/rx/btn-big-44.png); border-radius: 22px; color: #ffffff; display: inline-block; font-family: sans-serif; font-size: 16px; font-weight: normal; line-height: 44px; text-align: center; text-decoration: none; width: 200px;" href="http://buttonlinkhere/">Not Microsoft Outlook</a><!--<![endif]--></div>
I want to add a text content slider over a full screen background website. I'm poor in css. So please help me to add a beautiful text content slider that describes about each background image. The following is my background page
http://alampady.tk/fullbg/testbackground.html
Regards
Ashraf
Add this to your
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
And this to your stylesheet
.colorbag {
position: absolute;
top: 300px;
left: 900px;
width: 500px;
border: thin dotted;
height: 200px;
background-color: #ccc;
opacity: 0.6;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 10px;
font-family: 'Open Sans', sans-serif;
line-height: 22px;
}
.colorbag span.subtext {
font-weight: 600;
font-size: 22px;
}
.colorbag font {
font-weight: 300;
font-size: 14px;
}
Then I think it will be like 10 times nicer =)
I've found this cool plugin sweet menu and i'm having trouble with making the easeoutbounce animation stop when i click a link. I would like to have a 'downstate' when, by example, i click the home animation, i would like to see the animation on (exatly like the mouseover funcion (but without going back with mouseleave. I hope someone can help me because i'm new to all this code stuff and i'm starting to go Nuts:) Thanks in advance for your help!
here is the script:
<script type="text/javascript" src="Widgets/sweetMenu/jquery.easing.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery.sweet-menu-1.0.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery.sweet-menu-min-1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'widgets/sweetmenu/images/home.png',
'widgets/sweetmenu/images/comments.png',
'widgets/sweetmenu/images/red_heart.png',
'widgets/sweetmenu/images/male_user.png',
'widgets/sweetmenu/images/yellow_mail.png',
'widgets/sweetmenu/images/computer.png'
]
});
});
</script>
Here is the css:
.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
visibility: visible;
z-index: 999999;
}
.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}
h1
{
display: block;
text-align: center;
font-size: 48px;
color: #ffffff;
text-shadow: 0px 0px 12px #000000;
font-family: "Trebuchet MS";
}
And Finally the HTML:
<ul id="exampleMenu">
<li>Home</li>
<li>Blog</li>
<li>portfolio</li>
<li>Hire Me</li>
<li>Contact</li>
<li>My Apps</li>
</strike>
My navigation bar is off in Firefox and Opera. There is noticeably more padding below the text than above. I've changed my code so many different times trying to fix this, so I apologize if there are errors in my current code. It looks fine in Safari and Chrome. Can anyone help find my error(s)?
CSS:
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
margin-bottom: 50px;
}
li {
display: inline;
margin:0;
padding:0;
}
a.one:link,a.one:visited {
font-size: 18px;
line-height: 18px;
font-weight: bold;
background-color: red;
color: white;
font-family: Helvetica,Arial,san-serif;
text-align: center;
padding: 5px 7px;
text-transform: uppercase;
text-shadow: 0.05em 0.05em 0.1em #333;
letter-spacing: 1px;
}
HTML:
<nav>
<ul>
<li><a class=one href=index.html>home</a></li>
<li><a class=one href=bio.html>bio</a></li>
<li><a class=one href=news.html>news</a></li>
<li><a class=one href=disc.html>discography</a></li>
<li><a class=one href=contact.html>contact</a></li>
</ul>
</nav>
Thanks!
There is noticeably more padding below the text than above.
Here is the issue:
Since margin:0; and margin-bottom: 50px is set, the above/below ratio is 0px/50px
It looks fine in Safari and Chrome
Compare the default stylesheets:
WebCore(Safari): html.css
Mozilla(Firefox): html.css
Blink(Chromium/Opera): html.css
Internet Explorer User Agent Style Sheets
And lookup the vendor extensions:
Mozilla CSS Extensions: -moz-padding-start