Hi all,
to enrich my sitemaps I use some generated web-snippets; as you know some of them do not fit the style well; or have elements you do not want to display on your sitemap.
Be aware that such modifications may violate the terms of use of those elements; thus check carefully first. This is only a theoretical example how this works (do not use this technique on real webpages - if it’s legally ok for private use in a home automation system I can not say).
Anyhow - below the example:
The original snipped uses different dimensions and also shows additional elements I do not want to use/see. Once you have generated your snipped embed it in a page in “\conf\html” and add it to your UI. Then you can identify the unnecessary elements with a browser in development mode (in german chrome that’s “right click > Untersuchen”) - what you need are the CSS selectors for the elements.
Then add additional style sheet info with “!important” to your container page to override the defaults; for the page above this looks like this (note - I’ve changed some UID’s - thus you need to generate your own snipped to try this):
<html>
<head>
<style>
#wcom-city {
visibility : hidden !important;
height : 0px !important;
width : 0px !important;
}
#wcom-6efa66cf5460627997c641123567-weather > div:nth-child(3) {
visibility : hidden !important;
height : 0px !important;
width : 0px !important;
}
#wcom-6efa66cf5460627997c641123567{
height : 200px !important;
padding-bottom : 0px !important;
padding-right : 0px !important;
padding-left : 10px !important;
padding-top : 0px !important;
}
</style>
</head>
<body>
<div
id="wcom-6efa66cf5460627997c641123567"
style="border: 0px; background-color: transparent;"
class="wcom-default w300x250">
<link rel="stylesheet" href="//static1.wetter.com/woys/5/css/w.css" media="all">
<div id="wcom-city" class="wcom-city">
<a style="color: #000" href="http://www.wetter.com/schweiz/unterehrendingen/ehrendingen/CH0CH4064001.html" target="_blank" rel="nofollow" title="Wetter Ehrendingen">Wetter Ehrendingen</a>
</div>
<div id="wcom-6efa66cf5460627997c641123567-weather"></div>
<script type="text/javascript" src="//static1.wetter.com/woys/5/js/w.js"></script>
<script type="text/javascript">_wcomWidget({id: 'wcom-6efa66cf5460627997c641123567',location: 'CH0CH4064001',format: '300x250',type: 'summary'});</script>
</div>
</body>
</html>
with kind regards,
Patrik Gfeller
P.S.: I hope that future native Android & iOS app will have improved support for web elements; as they are very powerful to enrich the experience of the automation.