How to include CSS in import.io Connect Extract
Using the import.io connector, I was able to extract the html segment from the original website. This result is returned as "html". The result is a single datasheet with styles defined in the body of the html but not retrieved. This caused the highlighted html segment to be rendered with type NO and looked terrible.
Is there a way to INCLUDE extract the CSS styles i.e. multiple css hrefs included in the original html like
<link rel="stylesheet" href="http://cdn.ideamelt.com/1.3/css/ideamelt.min.css">
At the same time enable dynamic css like below:
<style type="text/css">
#financials-iframe-wrap {
width: 635px
}
.td_genTable table {
border: none
}
tr.net {
font-weight: bold;
border-top: 1px solid #009EC2
}
.td_genTable td {
border: 0;
padding: 0
}
a.h3-link {
color: #ffffff;
text-decoration: underline;
float: right
}
</style>
... in highlighting the connector so that the resulting html segment can be properly styled and displayed?
Thanks in advance!
source to share
This is a pretty interesting use case.
You can extract elements like links and style by using a custom html xpath, such as //link
and//style
Then you can output them to your page HTML and import css documents from pages and include styling.
(Be aware that this website may not want you to take your css and use it on another website, so they might block the css from loading on websites hosted on different domains)
source to share
Sorry, I'm not familiar with Import.io
.
Is there a way to get links to links and content from styles? Are you using javascript
?
If so, then you can use the following js functions to include your styles in the target document:
// Include css from 'style' tag
function include_css (src) {
var _head = document.head || document.getElementsByTagName('head')[0] || document.documentElement,
style = document.createElement ('style');
style.setAttribute ('type', 'text/css');
if (style.styleSheet){
style.styleSheet.cssText = src;
} else {
style.appendChild (document.createTextNode (src));
}
_head.appendChild (style);
}
// Include css referred by 'link' tag
function include_link (ref) {
var _head = document.head || document.getElementsByTagName ('head')[0] || document.documentElement,
style = document.createElement ('link');
style.setAttribute ('rel', 'stylesheet');
style.setAttribute ('type', 'text/css');
style.setAttribute ('href', ref);
_head.appendChild (style);
}
source to share