I am creating an email notification for when someone posts to a Sharepoint Blog. The body of this post is automatically included in the email notification using a lookup in a sharepoint workflow. This Body includes a different number(count) of images each time (ranging from 0-20).
To email using a workflow the requirment is: All styling (CSS) must be inline and must be in string form. eg.
<html><head><title>Hello World!</title></head><body><p style="color: #000000;"></p></body>
The way the blog post is inserted:
<td>[%Current Item: Body%]</td>
The body of the blog post (including images) is inserted in html format instead of the "[%Current Item: Body%]" by the workflow. The images are regular html image tags.
What I would like to do is style each of the inserted img tags (variable count), preferably as a class. What can I do so that I can style these image tags without being able to edit each individual tag as I am unable to do this (all handled by the workflow). Especially I am looking to be able to set max width:height for these images.
Using wide selector in inline style block
<style type="text/css">
td img { max-width:200px; }
</style>
depending on code generated, if for example it adds a class like class="some[01]" you can do :
img[class=^"some"] { max-width: 200px; }
Related
Instead of creating a whole other id and ruleset, why can’t I just put multiple values (ex. font-family: cursive; color: blue) in a single ruleset? I tried it and it works and seems like a quicker way to do it. For example, if I want to change the font, color, and uppercase/lowercase of a title, can't I just put all those values into one ruleset?
The preferred way to do this is using Cascading Style Sheet (CSS). This allows you to edit the visual aspects of the site without having to deal much with the HTML code itself.
Explanation :
<[tag] style="[css]"> Content </[tag]>
Where [tag] can be anything. For example "p" (paragraph), "span", "div", "ul", "li".. etc.
and where [css] is any valid CSS. For example "color:red; font-size:15px; font-weight:bold"
The recommended way to add style to a html element is by assigning it a "class" (a identifier that can be repeated on the document) or a "id" a unique identifier that shall not be repeated in the document.
For example:
<[tag] id="element1" class="red"> Content </[tag]>
<[tag] id="element2" class="red"> Content </[tag]>
Where tag is any html valid tag. id is a unique arbitrary name and class is an arbitrary name that can be repeated.
Then in the CSS (inside the tags of your document):
<style type="text/css">
.red {
color:red;
}
#element1 {
background-color:black;
}
</style>
For this example and to keep it simple to new users I named the class "red". However class="red" isn't the best example of how to name . Better to name CSS classes after their semantic meaning, rather than the style(s) they implement. So class="error" or class="highlight" might be more appropriate. ( Thanks to Grant Wagner for pointing that out )
For a complete guide to CSS you can visit this link: http://www.w3schools.com/css/
Remember:
Keep your HTML Code clean and use CSS to modify ANY visual style that's needed. CSS is really powerful and it'll save you a lot of time.
Yes you can and it’s okay to do that.
Actually this is the right way!
so you create a ruleset with a specific selector, then you write all the properties that you wish and element to have (if the selector applies to the element)
I need to show an html block if the specific link is available without using javascript.
In other words I need to reverse behaviour of object tag with data attribute, for example:
<object data="error.src">My content</object>
Shows content if error.src is not available.
There's no way to do this without some JavaScript.
You can use some css like this to hide/display object with specific data attribute:
object{
display:none;
}
object[data="error.src"]{
display:block;
}
Let's say I have a CSS sheet that holds information for how a site that shows system statuses is presented. Depending on the status of the site, one of the following will be an attribute to the status:
#green_status
{
color: white;
text-align: left;
background: url(images/green.jpg) no-repeat;
}
#yellow_status
{
color: white;
text-align: left;
background: url(images/yellow.jpg) no-repeat;
}
#red_status
{
color: white;
text-align: left;
background: url(images/red.jpg) no-repeat;
}
and an XML document that stores details for individual sites and their statuses
<site>
<name>New Site</name>
<headerImage>header image goes here</headerImage>
<systemStatus color="green">Normal</systemStatus>
<networkNotes>System status is normal</networkNotes>
</site>
I am going to use XML DOM to select values from the XML to populate elements of the page. Though after some testing I am still finding that I can change the text of the system's status but not the bar color without actually changing the site's attributes.
I'd like to be able to just change the XML file and set <systemStatus color"red">SYSTEM IS DOWN</systemStatus> and have that change not only the text, but the bar color to "red.jpg" without having to go in to the html and manually edit the status.
So far in order to solve this, I've added the 'color="green, yellow, red"' attribute to my XML elements, added 2 new statuses to the CSS (indicated by the first code block of this question), and have so far been unable to connect the dots.
Is there a way that I can make it to where the changes only need to be made to the XML file to change both the text & bar color for the system status of that site? The end goal here is to be able to just change the XML attribute and text of the systemStatus and change both the bar & the text on the site.
Use the CSS3 attribute selector.
<systemStatus color="green">
CSS:
systemStatus[color='green'] {
background-color:#2f2;
}
You can link a CSS stylesheet to an XML file using this processing instruction:
<?xml-stylesheet href="my-style.css"?>
... rest of document here...
More details about it can be found here: http://www.w3.org/Style/styling-XML
With that, you can add styling to any element and even use attributes in the selector:
systemStatus[color="red"] {
color: red;
}
I think you can also use special selectors like :first-child and such.
Afaik, there is no way to include Javascript in an XML file, but you should be able to tranform the XML into another XML if the current XML doesn't have the structure you need.
In the transformation you can add the elements and properties you need to be able to style it. See also Xml to Xml transformation using XSLT.
What everybody else said, plus you can set the content via CSS too:
systemStatus[color='green']::after {
content: "ALL IS WELL";
}
I suggest using a descriptive term for the attribute rather than explicitly a color, so that you can change your mind later about what the display should be without changing the nomenclature. Something like
<systemStatus status="ok"/>
and in CSS
systemStatus[status="ok"] {
color: green;
background-color: white;
}
XML does not specify any display or formatting, so if you really want to show a text as green, you need to do that using the display language (e.g. HTML or XSL-FO).
You can specify a tag to contain (X)HTML fragment, either as XHTML fragment, e.g.
<site xmlns:h="http://www.w3.org/1999/xhtml">
...
<systemStatus><h:p class="ok" style="color: green;">Normal</h:p></systemStatus>
...
</site>
or as CDATA:
<site>
...
<systemStatus><![CDATA[<p class="ok" style="color: green;">Normal</p>]]></systemStatus>
...
</site>
Your host display language (HTML+Javascript in your case) has to then insert this into the host document's DOM as an (X)HTML fragments or textually with element.innerHTML.
Be careful about inserting with innerHTML from untrusted source though, if the data in the XML file comes untrusted source, they may potentially contain Javascript code, which may then be executed when inserted into the host HTML.
The usual method for creating cross-references in LaTeX is to put a \label inside something you want to refer to later, and then use \ref. So for example, writing as we saw in Section~\ref{intro} in the LaTeX source might produce "as we saw in Section 1" in the final output. Is it possible to get the same effect using just HTML and CSS? Newer features of CSS allow sections and so on to be numbered automatically, but I haven't found anything that lets you reference these counter values from elsewhere in the document.
Here is a concrete example:
<!DOCTYPE html>
<html>
<head>
<title>Cross references</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: section;
}
section > h1::before {
counter-increment: section;
content: counter(section) ". ";
}
</style>
</head>
<body>
<section>
<h1 id="intro">Introduction</h1>
<p>Pineapples contain essential vitamins.</p>
</section>
<section>
<h1>Further discourse on pineapples</h1>
<p>As we saw in Section ??, pineapples contain essential vitamins.</p>
</section>
</body>
</html>
In this example, all the section headings are prepended with an automatically generated number. I would like to know if there is any HTML markup or CSS styling I could use in place of ?? that will insert the number corresponding to #intro.
I realize I could use <a href="#intro"> to create a cross-hyperlink to the Introduction, but I'd like to include the section number in the link text as well.
If this is not possible with HTML and CSS alone, are there any JavaScript libraries for adding cross-references within a document?
A better way for me to have phrased this question (in hindsight) would have been "How can you access content generated automatically by CSS without using JavaScript?", and that these questions are relevant:
Is it possible to access the content generated by a css :before rule?
How to access CSS generated content with JavaScript
It looks like accessing the automatically generated counter values is not easy even with JavaScript, and not possible without it, so that answers my question.
There are a number of documents from the W3C that discuss counters and generated content, but none as far as I could tell discuss referencing generated content from other parts of a document:
CSS Counter Styles Level 3
CSS Lists and Counters Module Level 3
CSS Generated and Replaced Content Module
There is a note in the W3C's List of suggested extensions to CSS that mentions exactly the cross-reference problem - it comes from an email written in 1998, and I haven't found any follow-up work, so I guess this wasn't a high priority.
Update
The CSS Generated Content for Paged Media Module discusses cross references explicitly, and describes the target-counter and target-text functions to implement them with CSS. However, this is a working draft dated 29 November 2011; these functions don't appear to be implemented in any major browser. An article from A List Apart talks about using these CSS features to produce PDF eBooks from HTML using some random propriety tools.
I want to write an application that sends html formatted email. I have the css and html files as I want them. I'm trying to send the email with the embedded css using the style element like so:
<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>
<h1>Title</h1>
<p>Content of the email</p>
It works in some clients (e.g. it works on Mac OSX mail app) and not others (e.g. it doesn't work when reading the email in gmail). When I translate the above to:
<h1 style="border-width: 1; border: solid; text-align: center">Title</h1>
<p>Content of the email</p>
Then it works everywhere. What I'm looking for is a way to place the css as style properties on their corresponding dom elements according the css rules I defined. So for a given file.css and file.html I want to create a new file result.html which displays correctly but in which all the css is embedded as style properties in the dom elements. Any ideas?
This is what you're looking for:
http://www.mailchimp.com/labs/inlinecss.php
Hope this helps!
Drop the style tag, use inline styles.
I have the same issue - I have a php app that sends out a confirmation email once a customer has placed an order. In various email clients it's fine, but web based clients tend to strip out the HEAD tag, which includes the STYLE tag - so any style is lost.
While it's still a good idea, as #Zack mentions, to include a plain text version of what you wanted to say, nobody likes to read plain text. I doubt that Zack is reading Stack Overflow on Lynx, for example.
A quick Google search for 'CSS inliner php' brings up: http://classes.verkoyen.eu/css_to_inline_styles
Also it seems that this question has been asked before on stackoverflow (at least once), at least for php, and there was a Ruby answer given in php class to inline css styles?
I want to write an application that sends html formatted email
Never do this. Email MUST be plain text. You cannot even rely on attachments.