Yahoo Wetter Widget

[Taf73]

Hallo,

gibt es eine Möglichkeit, das oben genannte Widget transparent erscheinen zu lassen?

Danke und Grüße

[pix]

Hallo,

ja das geht. Du kannst die CSS-Anweisungen aus dem Widget in VIS übersteuern.

Die CSS-Datei des Widgets ist diese:

http://IP-VIS:8082/vis/widgets/timeandw … /yahoo.css

! ````
@charset "UTF-8";
/**

• Stylesheet: example.css
• (c) 2011-2012 Zazar Ltd
• Description: Stylesheet for examples

**/
.weatherFeed {
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
overflow: hidden;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.weatherFeed a { color: #888; }
.weatherFeed a:hover {
color: #000;
text-decoration: none;
}
.weatherItem {
padding: 0.8em;
text-align: right;
}
.weatherCity { text-transform: uppercase; }
.weatherTemp {
font-size: 2.8em;
font-weight: bold;
}
.weatherDesc, .weatherCity, .weatherForecastDay { font-weight: bold; }
.weatherDesc { margin-bottom: 0.4em; }
.weatherRange, .weatherWind, .weatherLink, .weatherForecastItem { font-size: 0.8em; }
.weatherLink, .weatherForecastItem {
margin-top: 0.5em;
text-align: left;
}
.weatherForecastItem {
padding: 0.5em 0.5em 0.5em 60px;
background-color: #000;
background-position: left center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.weatherForecastDay { font-size: 1.1em; }

! .odd { background-color: #e8e8fc; }
.even { background-color: #d4d4e8; }
! .day {
border: 4px solid #555;
background: #222 url(../img/bg.jpg) repeat-x;
color: #fff
}
.day a { color: #555; }
! .night {
border: 4px solid #555;
background: #222 url(../img/bg.jpg) repeat-x;
}
.night a:hover { color: #fff; }

Du packst aber diesen Code in den CSS Reiter (Projekt) im VIS Editor:

/* Übersteuerung Weather Widgets */
.weatherItem, .weatherFeed {
background-color: transparent !important;
}

.weatherForecastItem {
background-color: red !important; /* default is #000 */
}

Die vorletzte Zeile habe ich auch geändert. Dort kann man die einzelnen Vorhersage Felder farblich anpassen. Standard ist schwarz, also __black__ oder __#000__. Habs mal für die Übersicht in rot gestaltet.
 ![261_bildschirmfoto_2017-02-19_um_15.27.24.jpg](/assets/uploads/files/261_bildschirmfoto_2017-02-19_um_15.27.24.jpg) 
Viel Spass!

Gruß

Pix

EDIT: Muss ich ändern, Moment!

EDIT (19.2.2017 / 15:28 Uhr): Jetzt geht es! :lol:

[Taf73]

Hey, vielen Dank, das funktioniert schon mal (fast) super!

Hab jetzt nur noch im unteren Teil vom Widget ein weißes Feld was ich nicht

weg bekomme :? !

!

Weißt Du Rat :)?

Grüße und Danke

[radiorichter]

Hallo Taf37,

hast du das weiß wegbekommen?

Wie kann ich zudem den Rahmen ausblenden bzw schwarz färben?

Danke!

[haselchen]

Das weisse Feld ist weg, wenn ich das eingebe:
3723_unbenannt4.png

[haselchen]

So sieht es dann ganz transparent aus (die Ränder stören mich nicht)

Gibt man bei CSS Ränder noch bei Color auch transparent ein verschwindet der blaue Rahmen.
3723_unbenannt5.png