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
Related
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've been frustrated by this problem for days on end and just cannot solve it. My CSS/HTML skills are somewhat elementary, any help much appreciated.
(To start let me mention that I am using Weebly editor and using the HTML/CSS editor to customize.)
So I have a horizontal list which is inside a wrapper. The problem is I cannot get it to take up the entire width of the #navwrap ul { or the #navwrap parent/s. Also I can't get the list to center inside its parent.
I have put borders around the elements to see what is going on. (Hopefully I can attach a pic). Some of the CSS is leftover from trying so many different things to fix this, so some if it may be unnecessary.
HTML:
<div id="header-wrap">
<table id="header">
<tr id="header-row">
<td id="logowrap"><img id="logo" src="img.svg"></td>
<td id="navwrap">{menu}
</td>
ETC...
CSS:
#navwrap {
height: 50px;
border: 1px solid red;
background-color: none;
}
#navwrap ul {
width:100%;
border:1px solid orange;
}
#navwrap li {
height:40px;
float:auto;
display:inline-table;
border:1px solid green;
}
#navwrap a {
vertical-align: text-bottom;
height:50px;
border: 1px solid blue;
color:white;
}
SOLVED: I managed to fix this with a display: table (wrapper) display:table-row (ul) display:table-cell solution.
I want to create a directive that will take tree-like data and feed it to some tree-view script (that uses markup as input), using specific HTML template to render nodes. So, directive takes data + node template as input, inserts DOM subtree, and then calls third-party plugin to make it sortable (http://dbushell.github.com/Nestable/ is on my mind, if this matters).
I have a solution, but it is far from being elegant. Here is HTML code (full sample can be found at http://jsfiddle.net/DQjve/):
<div ng-app="TestApp" ng-controller="TestCtrl">
<script type="text/ng-template" id="tree.html">
<div>
<ng-include src="'branch.html'"></ng-include>
</div>
</script>
<script type="text/ng-template" id="branch.html">
<ul>
<li ng-repeat="leaf in leaf.children" ng-include src="'leaf.html'">
</li>
</ul>
</script>
<script type="text/ng-template" id="leaf.html">
<ng-include src="template"></ng-include>
<ng-include src="'branch.html'"></ng-include>
</script>
<script type="text/ng-template" id="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</script>
<tree root="tree" template="my-leaf.html"></tree>
</div>
Desired code would look like this:
<div ng-app="TestApp" ng-controller="TestCtrl">
<tree root="tree" template="my-leaf.html">
<span style="display: block; border: 1px solid gray; border-radius: 4px; background: yellow; margin: 3px 0; padding: 4px;">{{leaf.name}}</span>
</tree>
</div>
Goals:
(less important) Put all utility templates inside directive JavaScript code.
(more important) Use contents of the <tree> tag as node template.
But I cannot find the solution.
For point 1: Probably, I need to use $templateCache to pre-cache my templates? With some unique template names? Is there any better solution?
For point 2: Should I use ngTransclude for p.2? If yes, how? Is there a way to get contents of initial <tree> tag as a string, before any compilation occurs?
I am using ZURB foundation CSS framework to design a website. Currently I am trying to create a footer that will stay at the bottom of my page. I have the following code for the footer but its not going to the bottom, rather its showing up in the middle.
Could you please tell me how to create a footer (using ZURB foundation framework) that will stay at the bottom?
<div class="row">
<div class="twelve columns" style="background-color:#000000; height:30px; bottom:0;"></div>
</div>
Simple! Zurb Foundation is itself based on Compass. So you can use the 'Compass Sticky Footer' mixin.
http://compass-style.org/reference/compass/layout/sticky_footer/
There is an example of how to do it here:
http://compass-style.org/examples/compass/layout/sticky-footer/
But you just go:
<div class='example'>
<div id='layout'>
<div id='header'>
<h1>Sticky Footer Example</h1>
</div>
<p>
This is the main content area.
</p>
<p>
In this example you should pretend that the red box
is actually the browser window.
</p>
<p>
Because, being a contrived example, it's not actually sticking
to the bottom of the page.
</p>
<div id='layout_footer'></div>
</div>
<div id='footer'>
This is the footer area.
</div>
</div>
And in you SCSS
#import "compass/reset.scss";
#import "compass/layout.scss";
#include sticky-footer(72px, "#layout", "#layout_footer", "#footer");
#header {
background: #999999;
height: 72px; }
#footer {
background: #cccccc; }
.example {
height: 500px;
border: 3px solid red;
p {
margin: 1em 0.5em; } }
I would create two different footers - one for desktop & tablets - and one for phones.
Using Zurb's "show on and hide on options" it's very easy to do. You can have any graphics used by both footers so any "download penalty" is small.
To create a sticky footer for you website you'll have to add some CSS to Zurb. (You can add this to the app.css file, which is Zurb's repository for your extra CSS)
Also the Brad Frost article (posted by Ed Charbeneau) is a great read - I hadn't seen that before.
HTML:
<div id="footer">
My Awsome Footer 2014
</div>
CSS
#footer{
height: 50px;
position: fixed;
bottom: 0px;
left: 0px;
line-height: 50px;
color: #aaa;
text-align: center;
width: 100%;
}
working fiddle: http://jsfiddle.net/AunmM/
Check out this simple sticky footer for foundation, no need for a #wrapper or a fixed height! Works in mobile as well. http://tangerineindustries.com/download/sticky_footer/
For reference, here's how I accomplished this using Foundation 4.0.
Given a <footer> tag.
footer {
#include panel($panel-color, $panel-padding);
width: 100%;
margin: 0;
position: fixed;
bottom: 0;
}
With foundation 6 the compass import isn't possible out of box. And workaround is hard to find.
Good solution together with foundation can be this little helper:
http://tangerineindustries.com/download/sticky_footer/
Pro:
Developer created this for using together with ZF 6.
You only need a <footer> tag.
Works with responsive depending flexible height of footer, even with
window resizing.
You don't need any extra #wrapper, #pusher, #footer whatever
html-elements.
You don't need any extra CSS.
Contra:
Uses JavaScript.
What you are trying to do is create a "Sticky Footer" or "Fixed Position Footer". This is something which is independent of Foundation and instead is a function of CSS in general.
I would suggest reading this article by Brad Frost. It identifies the basic CSS involved in creating a Fixed Position element and the compatibility issues that arise from doing so.
http://bradfrostweb.com/blog/mobile/fixed-position/