i would like to change the font colour of my title(i managed to give it a black background) into white. I figured i would make a font tag around it, which didn't seem to work. Any help would be appreciated(don't blame me, i am a newbie. And yes, i googled first)
<tr bgcolor="#000000">
<font face="courier" color="white">
<th>Black Components</th>
</font>
</tr>
It appears as a Black window with a black font in it
as a little bonus, if someone could tell me how to change the font style too, that would be amazing
Inside your table or another part of pdf you can use
<fo:block font-weight="bold" color="#ffffff"> your text or somethig else </fo:block>
In modern HTML, it is preferred to use CSS stylesheets instead of things like a bgcolor attribute or a font tag, as those are considered obsolete. The following should help you:
<tr style="background: black;">
<th style="color: white; font-style: italic; font-family: Courier, monospace;">Black Components</th>
</tr>
Professional websites also usually encapsulate such styles into classes so that you don't need to copy these attributes all the time. This would look like:
/* CSS file, e.g. main.css */
.row {
background: black;
}
.column-header {
color: white;
font-style: italic;
font-family: Courier, monospace;
}
<!-- HTML file, should reference main.css with a <link> tag inside <head> -->
<table>
<tr class="row">
<th class="column-header">Header 1</th>
<th class="column-header">Header 2</th>
</tr>
</table>
See also MDN documentation about CSS.
Related
Today I tried the new "Virtual Deliverability Manager" feature of AWS SES. Here I immediately noticed a problem with our emails.
For Outlook, there is an extra markup element "v:roundrect" in our email template.
The href in this element is not replaced by the tracking link from AWS.
All other links from our template are successfully replaced.
Snippet of our Email-Template:
<div align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://MYWEBSITE.com/produkt/#Model.ProductNumber" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" strokecolor="#800500" fillcolor="#da251d">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Jetzt Bestellen!</center>
</v:roundrect>
<![endif]-->
Jetzt Bestellen!
</div>
Link in other EmailClients (Correct - replaced):
Link in Outlook (Incorrect - Not replaced):
Has anyone had similar experience in this regard?
It looks like AWS SES only replaces the classic a-tag hrefs.
Unfortunately I didn't find anything in their documentation about this.
My temporary workaround:
(No fix!)
I changed the Html of my Template. As a result, the button in Outlook no longer has the desired rounded edges. But now the tracking works.
<div align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 12px 18px 12px 18px; border-radius:5px; background-color: #da251d;" align="center">
<a rel="noopener" target="_blank" href="https://MYWEBSITE.com/produkt/#Model.ProductNumber" target="_blank" style="font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; color: #ffffff; text-decoration: none; display: inline-block;">Jetzt Bestellen!</a>
</td>
</tr>
</table>
Currently AWS is scanning only the links that are presented in the email and converting them. There is only possibility to remove the specific links from tracking using additional ses:no-track
Here is an example:
<a ses:no-track href="aws.amazon.com">Amazon Web Services</a>
On the other hand they do not allow(YET, maybe in the future) to provide a field to specifically convert some links in the other elements (as in your case
I must repair a bug on the emails sent by my company when a new customer's account is created for the website, it must show a HTML <a> tag with the link to go on the new account, but in Gmail and Outlook, this <a> tag does not appear.
The code just here:
<tr>
<td style="font-size: 0px; padding: 10px 25px; padding-top: 30px; padding-bottom: 30px;
word-break: break-word;" align="center">
<table style="border-collapse: separate; line-height: 100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="border: none; border-radius: 37px; cursor: auto; mso-padding-alt: 10px 25px;
background: #5F9AB0;" align="center" valign="middle" bgcolor="#5F9AB0"> Demander mon mot de passe
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Screenshot of expected result (actual when I read my mail with the Mail mac app)
Screenshot of the display of the mail in Chrome and Firefox using Gmail and Outlook webapp
#Syfer suggested email queries are involved. If they are, check out https://www.caniemail.com/search/?s=media.
That says support for media queries is absent or spotty for all Gmails, all the Outlooks (except for the one that uses Apple Mail), all Yahoo's, all AOL's, and others.
Ain't it grand writing email HTML? 😁
I wanted to post the highlighted annotation of a document [highlighted using GATE developer tool] to new file [either word or Excel]. Can someone help me with any suggestions or this?
Thanks in Advance.
Regards,
Gayatri
Sorry, I can't comment yet...
Similar question here Read annotated data from GATE datastore
The provided answer (By Ian Roberts) has means to store selected annotations in files.
Suggestion: Use GATE embedded (with Java).
Reading annotated documents in html is fairly straight forward. You can follow the instructions for printing which can be executed using a text editor. Remember to select the annotations you wish to display and save the artifact using the ‘Save Preserving Format’. The resulting xml will have the annotation tags you select embedded in the saved document.
You can also visualize in html.
<!DOCTYPE html>
<div id="topContent">
<h1>Report Example</h1>
<p>
This example provide a visualization of a annotated document produced by GATE using ANNIE with defaults. To use with Javascript, the document can be formatted as an xml document using xmlHttpRequest.
</p>
</div>
<div id="pageView">
<div id="legendView">
<h3>Document Legend</h3>
<div>
<table id="annotationTable">
<tr>
<th>Facet</th>
<th>Color</th>
</tr>
<tr>
<td>Date</td>
<td id="dateFill"></td>
</tr>
<tr>
<td>Location</td>
<td id="locationFill"></td>
</tr>
<tr>
<td>Organization</td>
<td id="organizationFill"></td>
</tr>
<tr>
<td>Person</td>
<td id="personFill"></td>
</tr>
</table>
</div>
</div>
<p>..Add GATE XML contents here..</p>
</div>
Once the html is set up, add the css:
body {}
table, th, td {
border: 1px solid black;
text-align: center;
font-family: arial;
}
#annotationTable {
border-collapse: collapse;
width: 10%;
}
#topContent {
font: 18px arial;
}
#pageView {
border: 1px solid black;
font: 14px arial;
}
#legendView {
margin: 10px 10px 10px 10px;
}
#dateFill {background-color: rgb(51, 255, 119)}
#locationFill {background-color: rgb(204, 153, 255)}
#organizationFill {background-color: rgb(102, 255, 255)}
#personFill {background-color: rgb(255, 204, 153)}
Date {background-color: rgb(51, 255, 119)}
Location {background-color: rgb(204, 153, 255)}
Organization {background-color: rgb(102, 255, 255)}
Person {background-color: rgb(255, 204, 153)}
This provides a basic view of the GATE annotations. Of course it can be more complicated depending on what you are trying to express. See the Fiddle
To view in MS Word:
Open the saved annotated xml file in MS Word.
Add the css file to the same directory where the annotated document is stored.
Open the Developer Tab in Word.
Select the Document Template icon.
Select the Linked CSS tab, navigate to the location of the annotated document and css file.
Add the css file to the Linked Style Sheets.
Save the document as a Web Page.
Navigate to where you saved the html page and open in your favorite browser.
Ensure that you have selected Print Background Colors and Images from the Page Setup.
Print for a highlighted document.
Kind of a pain in the butt but it works if you want a printed copy. The document will not present css in Word. I hope this helps.
I have a table whose rows are generated dynamically depending on users' input (it is a summary of charges that may or may not take a promo code--if the user have one--and a gift message--if the user sends one). There is no way to generate the items of the summary of charges on a loop since the items come from different places in my application. I only have conditionals for the items to appear or not on the users' order depending on what the order is like. The table needs to have zebra-stripping. Because the number of items may vary, I cannot hardcode the color inline (it is an e-mail). I tried twig's divisibleby and modulo on the rows, so the colors would alternate for even and odd rows. Although the color changes it does not change to the color I want and it is not doing the zebra stripping (all rows change to blue. I need colors to alternate between light beige (#fcf9f5) and white (#ffffff)). What am I missing?
Here is the code for one tr:
{% set index = 0 %}
<tr bgcolor="{% if index is divisibleby(2) %} #fcf9f5 {% else %} #ffffff {% endif %}">
<td align="left" style="height: 30px; width: 273px; padding-left: 40px;">
<span style="font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,'Lucida Grande', sans-serif;font-weight: 500;">Order Subtotal:</span>
</td>
<td align="left" style="height: 30px; width: 273px; padding-left: 40px;font-family:'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,'Lucida Grande', sans-serif; font-weight: 300;">
<span>{{ order.itemsTotal|sylius_price }}</span>
</td>
</tr>
{% index++ %}
Sorry but Twig can't correct the fact that your code is dirty.
Let's say you have 3 diferents sources. If you display them all in an array they have all comon attributes right?
you just have to combine all the source objects in a simple displayable object (a DTO).
Twig can't contain business logic, it just display stuff.
If you want to keep your logic in your view, try to use twig merge fuction to combien your arrays and display them in a loop
I'm trying to integrate CKEditor into Wordpress for a client. I'm not too familiar with it, it's the first time I use it.
The client wants to use CKEditor on a textarea that gets stored into a custom field and is displayed in the sidebar of a page.
I added support for this form of editing by adding meta boxes to the page edit window. I have FCKEditor plugin installed, so I just call CKEditor.replace on the relevant metabox.
The problem is that when the meta box contains THIS: (I trimmed the CSS for convenience. There's actually quite a bit).
<style type="text/css">
<!--
.side-banner .style1 {
font-family: Arial;
font-size: 14px;
}
.side-banner .style2 {
font-family: Helvetica;
font-size: 12px;
-->
</style>
<table width="246" border="0" cellspacing="0" cellpadding="0">
<tr>
<th width="246" height="15" colspan="2" scope="col"> </th>
CKEditor turns it into this:
<p><style type="text/css">
<!--{cke_protected}%3C!%2D%2D%0A.side-banner%20.style1%20%7B%0A%09font-family%3A%20Arial%2C.side-banner%20.style2%20%7B%0A%09font-family%3A%20Arial%2C%20Helvetica%2C%20sans-serif%3B-->
</style></p>
<table border="0" cellpadding="0" cellspacing="0" width="246">
<tbody>
<tr>
My client insists on editing the sidebox at the CSS/HTML level rather than just content, and I'd like to provide what is requested rather than spend time educating them (this, perhaps, is a topic for another S.O. question?).
I realise this has to do with CKEDITOR.config.protectedSource but I found very little documentation to help me, and I wouldn't know what kind of RegEx to provide to avoid this.
How do I keep CKEditor from gobbling up the HTML/CSS code in this <textarea> tag?
Remove the HTML comments (<!-- and -->) from the <style>
Edit: It's tracked in this ticket http://dev.fckeditor.net/ticket/4880