I have these badges in my Github repo:
How can I make them align to left (the 2 above) and to right the one under?
They are in the format 
One way would be to use html table (since markdown table in GFM doesn't support merged cell)
this, for instance, seems to align the pictures properly within a README.md file.
<table >
<tr>
<td align="left"><img src="http://icons.iconarchive.com/icons/iconka/cat-commerce/48/add-icon.png"/></td>
<td align="right"><img src="http://icons.iconarchive.com/icons/iconka/cat-commerce/48/info-icon.png"/></td>
</tr>
<tr>
<td colspan="2"><img src="http://icons.iconarchive.com/icons/shwz/disney/512/pumbaa-icon.png"/></td>
</tr>
</table>
Result:
In your case:
<table>
<tr >
<td><img src="https://api.travis-ci.org/axemclion/grunt-saucelabs.png?branch=master"/></td>
<td align="right"><img src="https://saucelabs.com/buildstatus/grunt-sauce"/></td>
</tr>
<tr>
<td colspan="2"><img src="https://saucelabs.com/browser-matrix/grunt-sauce.svg"/></td>
</tr>
</table>
Which gives:
Related
I have a question regarding the magento order emails.
I have created my own order template by loading the default template and modifying it. When i take a look via the 'preview template' button on there, the email appears without order information (of course) but with every styling etc.
However when my customer gets the email it is pure text with no styling at all.
What could i have been doing wrong
Idk if it helps but here is my email template:
{{template config_path="design/email/header"}}
{{inlinecss file="email-inline.css"}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style='background: #fff' class="email-heading">
<h1 style='color: #68883e;'>Thank you for your order</h1>
<p>Your order is being process right now</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="order-details">
<h3 style='display: inline; float: left'>Your order <span class="no-link">#{{var order.increment_id}}</span></h3>
<p style='display: inline; float: right'>Placed on {{var order.getCreatedAtFormated('long')}}</p>
</td>
</tr>
<tr class="order-information">
<td>
{{if order.getEmailCustomerNote()}}
<table cellspacing="0" cellpadding="0" class="message-container">
<tr>
<td>{{var order.getEmailCustomerNote()}}</td>
</tr>
</table>
{{/if}}
{{layout handle="sales_email_order_items" order=$order}}
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="address-details">
<h6>Bill to:</h6>
<p><span class="no-link">{{var order.getBillingAddress().format('html')}}</span></p>
</td>
<td class="address-details">
<h6>Client:</h6>
<p><span class="no-link">{{var order.getclientfirstname().format('html')}}</span></p>
</td>
</tr>
<tr>
{{depend order.getIsNotVirtual()}}
<td class="method-info">
<h6>Shipping method:</h6>
<p>{{var order.shipping_description}}</p>
</td>
{{/depend}}
<td class="method-info">
<h6>Payment method:</h6>
{{var payment_html}}
</td>
</tr>
</table>
</td>
</tr>
</table><!-- asd-->
{{layout handle="sales_email_order_items" order=$order}}
{{template config_path="design/email/footer"}}
You shouldn't use the CSS classes to stylize the templates.
Also, you shouldn't use the file with the styles info, that is located anywhere else, as they are not supported by the majority of the email services.
Instead, you can directly use the attribute tags (to implement the stylazation) or use the styles right in the email code (using the tag <style>)
And here is the list of tags you can use:
https://www.campaignmonitor.com/css/
<table class="attributes">
<tbody>
<tr>
<td class="label title"><b>scale</b></td>
<td class="value">1/48</td>
<td class="label title"><b>products</b></td>
<td class="value">Plastic kits</td>
</tr>
<tbody>
</table>
Hit a brain block on this one...
Trying to capture specific values within the td's. So the first time around I'll grab the first, then the second and so on...
//table[#class='attributes']/tbody/tr//descendant::td[#class='value']
Gives me all the td values how to select only the 2nd or 3rd.
I've tried:
"//table[#class='attributes']/tbody/tr//descendant::td[#class='value']/td[2]"
With no success.
For example:
$x("//*[#class='attributes']/tbody/tr/td[#class='value']")
finds me
[<td class="value">1/48</td>, <td class="value">Plastic kits</td>, <td class="value">Limited edition</td>, <td class="value">Aircraft</td>, <td class="value">Eduard</td>, <td class="value">0.5 kg</td>]
So then I changed the XPath to:
$x("//*[#class='attributes']/tbody/tr/td[#class='value'][1]")
adding the [1] and what it does is returns
[<td class="value">1/48</td>, <td class="value">Limited edition</td>, <td class="value">Eduard</td>]
To select all of the class='value' td elements beneath the class='attributes' table:
/table[#class='attributes']//td[#class='value']
selects:
<td class="value">1/48</td>
<td class="value">Plastic kits</td>
To select just the second such td:
(/table[#class='attributes']//td[#class='value'])[2]
I am trying to use TinyMCE to allow my users to modify a handlebars report template. The template contains several elements that are not valid to TinyMCE and they are being moved around. See the {{#each data}} and {{/each}}
Here is good HTML code for my handlebars template:
<table class="table table-bordered">
<thead>
<tr>
<th><h4>Item</h4></th>
<th><h4 class="text-right">Quantity</h4></th>
<th><h4 class="text-right">Rate/Price</h4></th>
<th><h4 class="text-right">Sub Total</h4></th>
</tr>
</thead>
<tbody>
{{#each Details}}
<tr>
<td>{{Item}}<br><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
{{/each}}
</tbody>
</table>
After I past the code into TinyMCE, it results to the following:
{{#each Details}}{{/each}}
<table class="table table-bordered">
<thead>
<tr><th>
<h4>Item</h4>
</th><th>
<h4 class="text-right">Quantity</h4>
</th><th>
<h4 class="text-right">Rate/Price</h4>
</th><th>
<h4 class="text-right">Sub Total</h4>
</th></tr>
</thead>
<tbody>
<tr>
<td>{{Item}}<br /><small>{{Description}}</small></td>
<td class="text-right">{{Quantity}}</td>
<td class="text-right">{{Rate}} {{UnitOfMeasure}}</td>
<td class="text-right">{{Amount}}</td>
</tr>
</tbody>
</table>
Has anyone ran across a plugin or something else that may help me?
I just ran into this... I have an order confirmation email that I need to be configurable with a list of order items in a table; same issue.
I did just realize I probably shouldn't be using tables anyway, since they are not responsive, but I ultimately was able to solve the problem with HTML comments, like this:
<tr style="font-weight: bold;">
<td style="width: 145px;">Qty</td>
<td>Item</td>
<td>Unit Price</td>
<td>Total</td>
</tr>
<!--{{#order.line_items}} -->
<tr repeat="">
<td style="width: 145px;">{{quantity}}</td>
<td>{{product.name}}</td>
<td>{{currency unit_price}}</td>
<td>{{currency total}}</td>
</tr>
<!--{{/order.line_items}} -->
<tr>
<td style="width: 145px;"> </td>
<td> </td>
<td><strong>Subtotal:</strong></td>
<td>{{currency order.subtotal}}</td>
</tr>
I was able to use a custom attribute on my Element and use:
<tr repeat="{{#each Details}}">
</tr repeat="{{/each}}">
I have table with id parentTable. Also there is child table in the third column of every row. When i count the length of rows of parent table it gives me sum of rows of parent and child table. Also this happens with the tds. How do i achieve this for getting/iterating rows of parent table only and interating tds of parent rows only. I tried $('parentTable >tbody>tr') but not worked for me. Please assist. Below is the sample.
<table id="parentTable"><tr>
<td></td>
<td></td>
<td>
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
</td>
</tr>
<td></td>
<td></td>
<td>
<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
</td>
</tr>
</table>
You can assign different classes to the rows (tr s) of the parent table, and the child table. And use those classes for selecting them. You can do the same for the cells (tds) too.
For example, you if your table looks like -
<table class="parentTable">
<tr class="parentRow">
<td class="parentCell">Cell 1</td>
<td class="parentCell">Cell 2</td>
<td class="parentCell">
<table class="childTable">
<tr class="childRow">
<td class="childCell">Cell 31</td>
<td class="childCell">Cell 32</td>
<td class="childCell">Cell 33</td>
</tr>
</table>
</td>
</tr>
</table>
In your jquery, to get just the parent rows and their cells you can use
$.each($(".parentRow"), function() {
$.each($(this).find(".parentCell"), function() {
//Do Something
});
});
I have my template set up to repeat a block of html between the |RSSITEMS:| tag, but my question is how to limit the number of times that block gets repeated.
Thank you in advance.
The best solution that I've found is to use MailChimps |FEEDITEMS| merge tag as it offers more granular control than the |RSSITEMS| tag. Here's a snippet for creating a repeatable block that only pulls the 5 most recent items in an automated-RSS campaign (notice the "$count=" declaration):
*|FEEDBLOCK:http://website.com/feed/|*
<table width="600" align="center" cellpadding="0" cellspacing="0">
*|FEEDITEMS:[$count=5]|*
<tr>
<td valign="middle" align="center">*|FEEDITEM:TITLE|*</td>
</tr>
<tr>
<td valign="middle" align="center">*|FEEDITEM:DATE|*</td>
</tr>
<tr>
<td valign="middle" align="center">*|FEEDITEM:CONTENT_FULL|*</td>
</tr>
*|END:FEEDITEMS|*
</table>
*|END:FEEDBLOCK|*