I have sent a test email to Outlook and opened in Outlook app of iOS and the default style of the text for dates/times has its own color.
(The white/gray part is there just to hide the text, you can see the green-ish underline text (which is a date a time)
Apps don't allow debugging so it's difficult to say which class it might have been applied to the displayed HTML.
How to prevent this behavior and have the text by the color defined in CSS?
Note: this is HTML generated via MJML. The transpiled HTML for that paragraph looks like the following:
<tr>
<td align="center" style="font-size:0px; word-break:break-word">
<div style="font-family:helvetica; font-size:10px;">
TEXT WITH DATE
</div>
</td>
</tr>
text-decoration: none works to remove the underline style, but the color doesn't change (color: white) - with or without !important
Solution to avoid date/time auto-linking on iPhone:
Adding:
(Zero Width Space character) between the date/time text parts
nbsp; (Non-breaking space) for blank spaces in between
Example:
Date (WITH smart linking/highlighting): November, 1st 10:15
Non-linked date (WITHOUT smart linking/highlighting): November, 1st 10:15
Some devices auto link date and addresses bc it allows users to one-click add to their calendar or map apps.
To resolve you could wrap that copy with with inline styling so when those devices link that copy it has preset styling for it. Smart phones will auto add the href portion.
Example:
<a style="color:#FFFFFF;text-decoration:none;">
November 13, 2021
</a>
Related
Using <a name="foobar">Hello</a> in the text mode editor and switching to visual mode and back to text editor results in 'Hello'. Using latest wordpress 4.8.2. Anchor tag itself works but not sure why the contents are moved out of the a tag. Any idea?
This is the default behaviour of TinyMCE - the default WP editor, and also used in many other applications.
The format you are using is valid according to the HTML 4.01 spec:
<a name="foobar">Hello</a>
However when you use TinyMCE to insert anchors into content, it uses the following format:
<a name="foobar"></a>
...and it appears that it enforces this structure, even if you manually add an anchor manually with text between the tag.
However, you can use any tag (not just <a>) to define the anchor point, if you need to have text in your anchor. The following example from the HTML 4.01 spec shows an id on a h2 tag being used as the anchor:
Section Two
//...later in the document
<h2 id="section2">Section Two</h2>
So if you want to keep the structure you have, you can change your anchor to
Go to foobar
[...]
<p id="foobar">Hello</a>
Note on HTML5 the name attribute of the <a> tag has been deprecated in HTML 5 - use id instead
Hope that helps :)
I am trying to create email template like below
I have the style as in
<style type="text/css">
.rich-text a{color:#ffffff !important;} .ii a[href] { color:#ffffff!important;}
</style>
and inside my template I have as in below
<p class="rich-text" style="color:#ffffff !important;">
<font color="#ffffff" style="color:#ffffff !important;">
<xsl:value-of select="body/contents" disable-output-escaping="yes"/>
</font>
</p>
Now the problem is it can contains blob of text including links. Links come out as blue color on some email clients such as gmail. It seems like gmail is stripping out the .rich-text a style I added at the top. How to ensure it gets applied? Basically I want all links in the template to be color white.
Different e-mail clients applies different styles. It's best to use inline CSS. You can check if some style are supported in this list of most common email clients. Always remember, that your client may use some extra safe (or old/simple) client that does not support any CSS/HTML and shows it as text/plain
We used tinymce in our application and trying to migrate to CKEDITOR .
All the contents are stored in the database with <p><!-- pagebreak --></p> to do pagebreaking while generating pdf contents.
Now we are trying to migrate to CKEDITOR , the HTML code works fine and pdf generation also works fine . But the problem is that CKEDITOR doesnt display anything display for
<p><!-- pagebreak --></p> - It is like blank in WSIWYG editor .
I need to create a solution wherein CKEDITOR <p><!-- pagebreak --></p> with a CSS display ... like say a RED LINE .
I cant modify the code as it is stored in the DB , hence I need CKEDITOR to do some CSS tricks to display <p><!-- pagebreak --></p> as a red line in its editor
Is what I would do if you truly want to migrate and not have to hack any code would be to convert all the <p><!-- pagebreak --></p> in your database entries to <div class="page-break"></div> and set the css value of
.page-break
{
page-break-after:always`
}
Or to use what CKEDITOR does
<div style="page-break-after: always;">
<span style="display: none;"> </span>
</div>
Unfortunately you cannot style that HTML tag without affecting other content in that field.
You see it is defined as simply a paragraph tag with no class or other defining attributes at all (<p> as opposed to <p class="line-break">). That makes it impossible for you to "hook" your custom style into just those nodes with CSS.
The tag content is simply an HTML comment, which is never displayed and therefore cannot be styled.
You could style this if you are pulling the CK-encoded text from a database using a language like PHP for display, in which case you could do a str_replace for the HTML you noted and virtually injecting a hook such as a class name.
One other option is to use JavaScript to search the HTML for that node and dynamically inject either a class name or another node such as a horizontal rule (<hr>).
Once you have a class on just those paragraphs, the CSS you'd use would be something like:
p.line-break { border-bottom: 2px solid red; }
I have a DIV tag. Inside the DIV, I have a Table and in a row, I have placed a script code which displays random images which on a click leads to a url.
This is how the script renders inside the Div Tag
<div>
<table>
<tr>
<td>
<script />
<a href="some random url">
<img></img>
</a>
...
When the user hovers over these images, the anchor url shows as a message on browser status bar. This is very misleading for users. I want to know how to use CSS to hide this status message - Cross Browser and display a custom message instead. On the Div, I have given onmouseout and onmouseover, however it does not help.
Can this be done?
See https://developer.mozilla.org/en/DOM/window.status :
This property does not work in default configuration of Firefox and some other browsers: setting window.status has no effect on the text displayed in the status bar. To allow scripts change the the status bar text, the user must set the dom.disable_window_status_change preference to false in the about:config screen.
This is a security feature that you can't realistically bypass.
common users dont know that they should look at that place in the browser window.
but you can hide that message... you can maybe just redirect with javascript
something like this:
<a href="javascript:void(0);" onclick="someredirectfunction('someurl');return false;" >
<img />
</a>
onmouseout and onmouse over are used for events for client side scripting. Those are used "mostly" for a language called ecmascript(javascript). You unfortunately will not be able to do what you are asking with CSS, css is desinged to represent the appearance of a site, HTML the form, and javascript (other scripting sources) the function.
Dear all, I save formatted text (bold, changed in font, style...etc) in an nvarchar(max) field, its for some Description field, on another stage, I want to be able to edit this description, so in the Editing Page, I read the original inoformation, fill it in the fields and wait for the user to change it and save, this is working for all kinds of normal text fields, and also with normal text displayed in a text area, but when I fill the text area with the styled text, it shows the HTML code and not it result, so for instance, it shows:
<span style="font-weight: bold; text-decoration: line-through;">SM</span><span style="background-color: rgb(51, 102, 255);">ART</span><br>
Instead of a what it should look like, any suggestions on how I can make the textArea (normal asp.net textbox with the mode set to multiline) display the HTML as it should look and not the code??
You can not display HTML result in TextArea/TextBox control. But to display HTML result you have many options.
As Schnalle said, best and the easy way to use an editor. Like tinyMCE or FCKEditor.
In a project I used a div to display and edit HTML content. It allows users to edit, copy, paste, make bold, make italic, .. etc. :
<div runat="server" ID="divContent" contenteditable="true">
Editable Area, set your content here...
</div>
Maybe you can combine textarea and div to do what you want.
you need a wysiwyg-editor like tinyMCE http://tinymce.moxiecode.com/
If you just want it to display the code, use < as <, and > as >.
Eg:
<textarea>
<html>
<body>
</body>
</html>
</textarea>