Remove background-image from the weather informer code

Question

There is a task to remove background-image from the weather informer code. The problem is that if you remove the class="booked-wzs-160-110" from the HTML code, the actual weather data stops loading, the informer hangs. Tried to prescribe in front of the class style="background-image: none !important;" But whatever I wrote in this style, nothing changes - for some reason the background-color: #transparent; always constantly written background-color: #transparent; and not going anywhere. I'm not strong in javascript, maybe something needs to be registered in it?

 < script type = "text/javascript" charset = "UTF-8" src = "http://widgets.booked.net/weather/info?action=get_weather_info&ver=4&cityID=18901&type=1&scode=124&ltid=3539&domid=589&cmetric=1&wlangID=20&color=transparent&wwidth=250&header_color=ffffff&text_color=333333&link_color=08488D&border_form=1&footer_color=ffffff&footer_text_color=333333&transparent=0" > < /script> <script type="text/javascript "> var css_file=document.createElement(" link "); css_file.setAttribute(" rel "," stylesheet "); css_file.setAttribute(" type "," text / css "); css_file.setAttribute(" href ",'//s.bookcdn.com/css/w/booked-wzs-widget-160.css?v=0.0.1'); document.getElementsByTagName(" head ")[0].appendChild(css_file); function setWidgetData(data) { if(typeof(data) != 'undefined' && data.results.length > 0) { for(var i = 0; i < data.results.length; ++i) { var objMainBlock = document.getElementById('m-booked-bl-simple-7511'); if(objMainBlock !== null) { var copyBlock = document.getElementById('m-bookew-weather-copy-'+data.results[i].widget_type); objMainBlock.innerHTML = data.results[i].html_code; if(copyBlock !== null) objMainBlock.appendChild(copyBlock); } } } else { alert('data=undefined||data.results is empty'); } } </script>

 <div style=" position: absolute; right: 13px; top: -148px; z-index: 999;" id="m-booked-bl-simple-7511"> <a href="//nochi.com/weather/tbilisi-18901" style="background-image: none !important;" class="booked-wzs-160-110"> <div class="booked-wzs-160-data wrz-01"> <div class="booked-wzs-160-right"> <div class="booked-wzs-day-deck"> <div class="booked-wzs-day-val"> <div class="booked-wzs-day-number"><span class="plus">+</span>21</div> <div class="booked-wzs-day-dergee"> <div class="booked-wzs-day-dergee-val">&deg;</div> <div class="booked-wzs-day-dergee-name">C</div> </div> </div> <div class="booked-wzs-day"> <div class="booked-wzs-day-d"><span class="plus">+</span>21&deg;</div> <div class="booked-wzs-day-n"><span class="plus">+</span>7&deg;</div> </div> </div> <div class="booked-wzs-160-city">Тбилиси</div> <div class="booked-wzs-160-date">Воскресенье, 24</div> </div> </div> <div class="booked-wzs-center"> <span class="booked-wzs-bottom-l">Прогноз на неделю</span> </div> </a> </div> <!-- weather widget end -->

Now add the inspector code.

 element.style { background-color: #transparent; } .booked-wzs-160-110 { background-image: url('//s.bookcdn.com/images/we160x110.png') !important; background-repeat: no-repeat !important; border-radius: 10px !important; display: block !important; margin: 0 auto !important; padding: 0 !important; width: 160px !important; height: 110px !important; overflow: hidden !important; color: #fff !important; font: normal 11px/11px verdana, sans-serif !important; text-decoration: none !important; border: none !important; text-align: left !important;

 <div style=" position: absolute; right: 13px; top: -148px; z-index: 999;" id="m-booked-bl-simple-7511"> <a href="//nochi.com/weather/tbilisi-18901" class="booked-wzs-160-110" style="background-color:#transparent;"> <div class="booked-wzs-160-data wrz-18"> <div class="booked-wzs-160-right"> <div class="booked-wzs-day-deck"> <div class="booked-wzs-day-val"> <div class="booked-wzs-day-number"><span class="plus">+</span>21</div> <div class="booked-wzs-day-dergee"> <div class="booked-wzs-day-dergee-val">°</div> <div class="booked-wzs-day-dergee-name">C</div> </div> </div> <div class="booked-wzs-day"> <div class="booked-wzs-day-d"><span class="plus">+</span>22°</div> <div class="booked-wzs-day-n"><span class="plus">+</span>14°</div> </div> </div> <div class="booked-wzs-160-city">Тбилиси</div> <div class="booked-wzs-160-date">Понедельник, 25</div> </div> </div> <div class="booked-wzs-center"> <span class="booked-wzs-bottom-l">Прогноз на неделю</span> </div> </a> </div>

To begin with, I would try not to prescribe styles in the html- style attribute, but to describe them in a css file, with the same !important modifier.
Then they will take precedence over the styles added by the script, unless they are also used !important
It does not seem to be prescribed, the browser does not display it.
@BamNait code from the inspector throw off this element, and CSS and html

Accepted Answer · 2016-04-25T20:14:32

It is necessary immediately after the informer code to put:

 <style> .booked-wzs-160-110 { background-image: none !important; } </style>

If you just add this code to the styles, then there will be no effect.

To remove the rain cloud and other weather symbols, you need to do the same with .booked-wzs-160-data

In the window of issuing the informer there is a ban on changes in the code of the informer, but in this decision no one touches the code of the informer.

 <!-- weather widget start --><div id="m-booked-bl-simple-70303"> <a href="//nochi.com/weather/tbilisi-18901" class="booked-wzs-160-110" style="background-color:#137AE9;"> <div class="booked-wzs-160-data wrz-18"> <div class="booked-wzs-160-right"> <div class="booked-wzs-day-deck"> <div class="booked-wzs-day-val"> <div class="booked-wzs-day-number"><span class="plus">+</span>18</div> <div class="booked-wzs-day-dergee"> <div class="booked-wzs-day-dergee-val">&deg;</div> <div class="booked-wzs-day-dergee-name">C</div> </div> </div> <div class="booked-wzs-day"> <div class="booked-wzs-day-d"><span class="plus">+</span>18&deg;</div> <div class="booked-wzs-day-n"><span class="plus">+</span>12&deg;</div> </div> </div> <div class="booked-wzs-160-city">Тбилиси</div> <div class="booked-wzs-160-date">Понедельник, 25</div> </div> </div> <div class="booked-wzs-center"> <span class="booked-wzs-bottom-l">Прогноз на неделю</span> </div> </a> </div><script type="text/javascript"> var css_file=document.createElement("link"); css_file.setAttribute("rel","stylesheet"); css_file.setAttribute("type","text/css"); css_file.setAttribute("href",'//s.bookcdn.com/css/w/booked-wzs-widget-160.css?v=0.0.1'); document.getElementsByTagName("head")[0].appendChild(css_file); function setWidgetData(data) { if(typeof(data) != 'undefined' && data.results.length > 0) { for(var i = 0; i < data.results.length; ++i) { var objMainBlock = document.getElementById('m-booked-bl-simple-70303'); if(objMainBlock !== null) { var copyBlock = document.getElementById('m-bookew-weather-copy-'+data.results[i].widget_type); objMainBlock.innerHTML = data.results[i].html_code; if(copyBlock !== null) objMainBlock.appendChild(copyBlock); } } } else { alert('data=undefined||data.results is empty'); } } </script> <script type="text/javascript" charset="UTF-8" src="http://widgets.booked.net/weather/info?action=get_weather_info&ver=4&cityID=18901&type=1&scode=2&ltid=3540&domid=589&cmetric=1&wlangID=20&color=137AE9&wwidth=250&header_color=ffffff&text_color=333333&link_color=08488D&border_form=1&footer_color=ffffff&footer_text_color=333333&transparent=0"></script><!-- weather widget end --> <style> .booked-wzs-160-data, .booked-wzs-160-110 { background-image: none !important; } </style>

Many thanks, but I need to remove the picture, which gives a white frame and a gradient closer to the top.
@BamNait Yes, I got carried away, and began to demolish everything ...))

Nicolas Chabanovsky ♦ 38.2k 54 220 437 · Answer 2 · 2016-04-25T13:39:18

Try to remember the specificity of selectors. The style attribute take it away. Specify id="какой_то_айди" , then in the CSS file define it below all other selectors, well, add !important . As an option.

The browser doesn’t see either the id or the style. In the question I gave the code from the browser below. - Valery Emelyanov

Remove background-image from the weather informer code

2 answers 2

More articles: