3
Homepagewetter-Code (iframe) von WetterOnline an WordPress-Seite anpassen (Schriftart u. -farbe, Trennbalken entfernen, etc.)
Moin Moin liebe Leute, ich bin gerad dabei, html zu entdecken und freu mich über Hilfe.
Ich möchte das Homepagewetter von WetterOnline (http://www.wetteronline.de/homepagewetter/bremen) für meine Seite in der Sitebar nutzen, weil ich insbesondere den Regenradar gebrauchen kann. Der Code dafür sieht so aus:
Ich habe schon versucht, folgende Dinge zu ändern:
- Hintergrundbild bzw. -farbe entfernen
- Logo nach unten setzen
- Text "Das Wetter für Bremen" entfernen
- "Anwendung" zentrieren
Ich habe den Wert width auf 203 gesetzt, um die "Anwendung" zu zentrieren, gibt es dafür eine echte Lösung? Mein Code sieht jetzt folgendermaßen aus:
Gerne würde ich noch folgendes ändern:
- Schriftfarbe und Schriftart (von #000 zu #666)
- Entfernen der vertikalen und horizontalen grauen Balken
Ich hoffe, dass mir jemand helfen kann, danke schonmal im Vorraus
Ich möchte das Homepagewetter von WetterOnline (http://www.wetteronline.de/homepagewetter/bremen) für meine Seite in der Sitebar nutzen, weil ich insbesondere den Regenradar gebrauchen kann. Der Code dafür sieht so aus:
<!-- WetterOnline Homepagewetter Beginn //-->
<div style="position:relative;background-image:url(http://st.wetteronline.de/img/p_city_hpweather/background/orange.gif?v=1.0.542);background-repeat:repeat-x;border:0px solid #BCBCBC;width:158px;text-align:center;font-family:arial,verdana;">
<a href="http://www.wetteronline.de" target="_blank" style="text-decoration:none;color:#000;outline:none;"><img src="http://st.wetteronline.de/img/logo/wetteronline_blue_114x22.png?v=1.0.542" title="WetterOnline" alt="WetterOnline" style="border: 0; padding-top: 2px;"></a>
<div style="font-size:12px;margin-bottom:2px; font-weight:bold; color:#000; text-align:center;">Das Wetter für<br />Bremen</div>
<iframe marginheight="0" marginwidth="0" frameborder="0" scrolling="no" src="http://www.wetteronline.de/?pid=p_city_hpweather&WMO=10224&FORMAT=long&MENU=dropdown&MAP=rainradar" allowtransparency="true" width="158" height="281"></iframe>
<div style="font-size:10px;height:18px; color:#000; text-align:center;">Mehr auf <a href="http://www.wetteronline.de/" target="_blank" title="WetterOnline Homepage" style="text-decoration:none;color:#000;">wetteronline.de</a></div>
</div>
<!-- WetterOnline Homepagewetter Ende //-->Ich habe schon versucht, folgende Dinge zu ändern:
- Hintergrundbild bzw. -farbe entfernen
- Logo nach unten setzen
- Text "Das Wetter für Bremen" entfernen
- "Anwendung" zentrieren
Ich habe den Wert width auf 203 gesetzt, um die "Anwendung" zu zentrieren, gibt es dafür eine echte Lösung? Mein Code sieht jetzt folgendermaßen aus:
<div style="position:relative;width:203px;text-align:center;font-family:arial,verdana;">
<iframe marginheight="0" marginwidth="0" frameborder="0" scrolling="no" src="http://www.wetteronline.de/?pid=p_city_hpweather&WMO=10224&FORMAT=long&MENU=dropdown&MAP=rainradar" allowtransparency="true" width="158" height="281"></iframe>
<a href="http://www.wetteronline.de" target="_blank" style="text-decoration:none;color:#000;outline:none;"><img src="http://st.wetteronline.de/img/logo/wetteronline_blue_114x22.png?v=1.0.542" title="WetterOnline" alt="WetterOnline" style="border: 0; padding-top: 2px;"></a>
</div>Gerne würde ich noch folgendes ändern:
- Schriftfarbe und Schriftart (von #000 zu #666)
- Entfernen der vertikalen und horizontalen grauen Balken
Ich hoffe, dass mir jemand helfen kann, danke schonmal im Vorraus
Auf Facebook teilen
Auf X (Twitter) teilen
Auf Reddit teilen
Auf Linkedin teilenBitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 247292
Url: https://administrator.de/forum/homepagewetter-code-iframe-von-wetteronline-an-wordpress-seite-anpassen-schriftart-u-farbe-trennbalken-247292.html
Ausgedruckt am: 16.04.2025 um 06:04 Uhr
3 Kommentare
Neuester Kommentar
Moin Christoph,
die fehlt zum zentrieren ein margin: 0 auto im Style des iFrames:
http://jsfiddle.net/x4ccak81/
Aber noch etwas zu der sonstigen Umgestaltung des Contents im iFrame:
Hier gilt die SameOrigin-Policy:
http://stackoverflow.com/questions/583753/using-css-to-affect-div-style ...
Wenn der iFrame von deiner eigenen Seite geladen würde ginge das, ansonsten hast du schlechte Karten.
Würde ich ausserdem unbedingt die Finger von lassen. Das ist nicht im Sinne des Erfinders und könnte dir rechtliche Probleme einhandeln...
Grüße Uwe
p.s. bitte nutze Codetags für das Posten von Programmcode. Merci.
die fehlt zum zentrieren ein margin: 0 auto im Style des iFrames:
http://jsfiddle.net/x4ccak81/
Aber noch etwas zu der sonstigen Umgestaltung des Contents im iFrame:
Hier gilt die SameOrigin-Policy:
http://stackoverflow.com/questions/583753/using-css-to-affect-div-style ...
Wenn der iFrame von deiner eigenen Seite geladen würde ginge das, ansonsten hast du schlechte Karten.
Würde ich ausserdem unbedingt die Finger von lassen. Das ist nicht im Sinne des Erfinders und könnte dir rechtliche Probleme einhandeln...
Grüße Uwe
p.s. bitte nutze Codetags für das Posten von Programmcode. Merci.
Danke dir schonmal. Man hat mir erlaubt, meine angesprochenen Punkte zu verändern, dann müsste ich doch rechtlich auf der sicheren Seite sein?!? Nur das Logo von denen sollte wohl erhalten bleiben...
P.S. Das mit den codetags merke ich mir, sorry
P.S. Das mit den codetags merke ich mir, sorry
Den eigentlichen Inhalt des iFrames wirst du aber wegen der angesprochenen SameOrigin-Policy nicht verändern können, da es von den Browsern aus Sicherheitsgründen(XSS) blockiert wird.
http://stackoverflow.com/questions/4724904/how-to-change-style-of-ifram ...
Alles was sich drum herum befindet kannst du ja nach blieben ändern.
Ansonsten bleibt dir noch die Möglichkeit die Infos selber mit einem PHP-Script von deren Seite auszulesen, dann hast du alle Möglichkeiten der Gestaltung auf deiner Seite...
http://stackoverflow.com/questions/4724904/how-to-change-style-of-ifram ...
Alles was sich drum herum befindet kannst du ja nach blieben ändern.
Ansonsten bleibt dir noch die Möglichkeit die Infos selber mit einem PHP-Script von deren Seite auszulesen, dann hast du alle Möglichkeiten der Gestaltung auf deiner Seite...
