When using CFdocument to create a pdf in CF10 I lose a lot of css. Is there any documentation anywhere that shows what css is allowed to be used for CFdocument or is it just keep trying and its hit or miss. Right now I am just trying to add a border-bottom style and it will not show whether its inline or a cascading style sheet.
Does anyone know where I can find what CSS can be used for CFdocument to help me make this border-bottom appear and other CSS that is not showing.
<cfdocument format="pdf" scale="75" backgroundvisible="yes" overwrite="no" fontembed="yes">
<tr style="border-bottom: solid 1px coral;">
It's right there with the documentation under Supported CSS Styles - cfdocument
I don't think the supported tags has changed since ColdFusion 9.
Supported CSS styles
The cfdocument tag supports the following CSS styles:
background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-bottom
border-bottom-color
border-bottom-style (solid border only)
border-bottom-width
border-color
border-left
border-left-color
border-left-style (solid border only)
border-left-width
border-right
border-right-color
border-right-style (solid border only)
border-right-width
border-spacing
border-style (solid border only)
border-top
border-top-color
border-top-style (solid border only)
border-top-width
border-width
bottom
clear
clip
color
content (strings, counters only)
counter-increment
counter-reset
cursor
display
float
font
font-family
font-size
font-style
font-weight
height
left
letter-spacing
line-height
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
outline
outline-color
outline-style (solid, dotted, dashed only)
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position
right
text-align (left, right, and center)
text-decoration
text-indent
top
unicode-bidi
vertical-align
visibility
white space (normal, nowrap only)
width
z-index
You Can Use CSS inside cfdocument like below :
<cfheader name="Content-Disposition" value="inline; filename=Example.pdf">
<cfcontent type="application/pdf">
<cfdocument format="pdf" orientation="landscape">
<style>
tr {padding-top: 5px}
td {font-size: 8px; padding-top: 2px}
</style>
<table>
<tr>
<td>
Example
</td>
</tr>
</table>
I resolved this issue by using a class on the tr like so.
tr.border_bottom td {
border-bottom:1pt solid black;
}
Related
I hope someone can point me in the right direction on how to change the background color of a column in Zurb Foundation for Emails 2 while using the Sass version. Is there a way to set the background color for the column or row ?
I tried multiple things but for some reason cant apply a style to columns or row.
body,
html,
h4.topline {
text-align: center;
color: rgb(0, 255, 85);
background: red;
}
p.value {
text-align: center;
color:indigo;
font-weight: bold;
background: greenyellow
}
div.test{
background: greenyellow
}
.columns.descr {
text-align: center;
color: gainsboro;
font-weight: bold
}
.row.test{
border-width: thick;
border-color: aqua
}
</style>
<container class="body-notify">
<row>
<columns small="12" large="12" >
<spacer size="10"></spacer>
<h4 class="topline">Information</h4>
</columns>
</row>
<row>
<div class="test">
<columns class="descr" small="12" large="6">Description 1</columns>
</div>
<columns small="12" large="6"><p class="value">Value 1</p></columns>
</row>
<row>
<columns small="12" large="6">Description 1</columns>
<columns small="12" large="6"><p class="value">Value 2</p></columns>
</row>
</container>
I work last year on the email marketing and I know some things , you can't add any style of css in email styles. so I think you can add background color inline on your div like this :
<div class="row" style="backgound:red;"></div>
A bit late on this, but hopefully it will still help! The columns element is part of the Inky templating markup and if you inspect it in the browser you'll see that this is actually a <th> element with the class name columns. So you should be able to target it with th.columns:
th.columns.descr {
text-align: center;
color: gainsboro; font-weight: bold }
Similarly, <row> in html markup is a table element so try table.row { add css here }
Also be wary of using <div> tags in html emails - they get stripped by some email clients. From the Foundation docs
When it comes to making emails, divs aren’t a thing. Don’t kill the messenger, but it’s true. It's not fun finding out we can't just use a with auto left and right margins for centering, or background colors; it won't work with most email clients. <div>'s can still be used for targeting CSS and for grouping semantically related elements, but shouldn’t be used for structural purposes or spacing.
You can use the <wrapper> element (also inky templating markup) instead. In actual html this is a table element with the class of wrapper, so if you needed to target this with sass it would be
table.wrapper
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 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.
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 created a CSS only navigation and I am trying to figure out if it is possible to change the color of the text in a nested list when hovered over.
<div id="navigation">
<ul class="top-level">
<li>Home</li>
<li>Residential
<ul class="sub-level">
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
<li>Project 4</li>
</ul>
So as it is when I hover over 'Residential', "Project 1 - 4" appears and I have managed to make the text a different color and background than 'Residential'. However, what I would like to do is now change the color of the text in 'Project 1-4' when hovered over. Is that possible in CSS?
You may use CSS Pseudo-classes to achieve this.
.elementclass:hover can be used to style the element on hover.
I figured it out...
I was pretty certain I already try this but maybe for some reason it didn't update. Apparently under the class below I needed to add white and then I needed to make sure the proceeding class below also had the color black(which it did). BlasterAlfred I have to give you some credit as well.
#navigation a:hover{
text-decoration: none;
color: white;
}
#navigation li li a {
color: black;
}