Widget-Breite über CSS anpassen [WordPress]

Rata · 05.07.2015

Moin

Fragestellung

In diversen WordPress-Installationen nutze ich für eine gewünschte Wettervorhersage seit fast 10 Jahren das Widget wp-forecast von Hans Matzen.

Immer wieder mal habe ich ein Problemchen: wird die ~~Widget-Spalte~~ Sidebar zu breit, „zerlegt“ sich das Widget und schreibt die Datumsangaben der Vorhersagungen „rechts daneben“

Bisher hat mich das nicht belästigt, denn bisher konnte ich die Spaltenbreite einfach in den Anpassungen des jeweiligen Themes etwas verkleinern, schon kam das Widget zur „Raison“

Jetzt habe ich eine Installation, bei der ich mich nicht um wohl temperiertes Hinzulernen drücken kann, ich kann mich aus Gründen der notwendigen Breite eines anderen Widgets nicht mehr durchpfuschen :confused:

So sieht die Installation zur Zeit aus:

Es sei an dieser Stelle ausdrücklich gebeichtet, daß die ganzen Programmier- und Beschreibungssprachen in mir Abneigungen erzeugen, die kaum zu kontrollieren sind. Will sagen: Rättchen und HTML, PHP, CSS et cetera pp. :cool:

sind keine (!) Freunde, weil Rättchen die „dogmatische Grammatik“ als sein Leben einschränkend empfindet; ist einfach so, wird sich auch nicht mehr ändern, Rättchen ist zu alt.

Das PlugIn als Widget besitzt eine eigene CSS-Datei.
Das lässt mich hoffen.
Eine solche Datei zu editieren traue ich mir auch zu

Es bleibt nur die Frage nach dem Wie.
Wo schreibe ich in diese CSS-Datei was rein, damit sich die Darstellung dieser Wettervorhersage auf 200px Breite beschränkt?

Lieber Gruß
Rata

PS: Übrigens liegt hier das Online-Handbuch dieses tollen PlugIns. Den Autor möchte ich nicht nerven. Wozu gibt es schließlich Euch? :frech:

PPS: Ich weiß, der Ein oder Andere von Euch kugelt sich jetzt im eigenen Saft

Sagt lieber an wie’s geht!
PPPS: Eilt nicht.
PPPPS: ...

Edit

PPPPPS: Ich hänge mal die CSS-Datei für vertikale Darstellung dran:

CSS:

/* style for current weather data */
div.wp-forecast-curr {
    font-size: 11px;
    font-family: Arial;
    border: 0px solid;
    padding: 3px;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

/* style for forecast data details left side */
div.wp-forecast-curr-left {
    border: 0px solid;
    padding: 3px;
    float: left;
    text-align:center;
    vertical-align:middle;
}

/* style for forecast data details right side */
div.wp-forecast-curr-right {
    font-size: 14px;
    font-family: Arial;
    font-weight: bolder;
    font-variant: small-caps;
    border: 0px solid;
    padding: 3px;
    text-align:left;
    float: left;
    margin-right: -100%;
}


/* style for current weather data details */
div.wp-forecast-curr-details {
    font-size: 11px;
    font-family: Arial;
    border: 0px solid;
    padding: 3px;
    text-align:left;
}

/* style for clearing float settings */
div.wp-forecast-curr-clear {
    clear:both;
    height:0;
}

/* style for current weather icon */
img.wp-forecast-curr {
    border: 0px;
    width: 48px;
    padding: 0px;
    vertical-align:middle;
}


/* style for forecast data */
div.wp-forecast-fc {
    font-size: 11px;
    font-family: Arial;
    border: 0px solid;
    padding: 2px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
}

/* style for forecast data */
div.wp-forecast-fc-head {
    font-size: 11px;
    font-family: Arial;
    border: 0px solid;
    padding: 3px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
}

/* style for forecast data details */
div.wp-forecast-fc-block {
    border: 0px solid;
    padding: 0px;
}

/* style for forecast data details left side */
div.wp-forecast-fc-left {
    font-size: 11px;
    font-family: Arial;
    border: 0px solid;
    padding: 3px;
    text-align:center;
    float: left;
}

/* style for forecast data details right side */
div.wp-forecast-fc-right {
    font-size: 11px;
    font-family: Arial;
    border: 0px solid;
    padding: 3px;
    text-align:left;
    float: left;
    margin-right: -100%;
}

/* style for clearing float settings */
div.wp-forecast-fc-clear {
    clear:both;
    height:0;
}


/* style for forecast weather icon */
img.wp-forecast-fc-left {
    border: 0;
    width: 48px;
    padding: 0px;
}

patrick_l · 05.07.2015

Da die Child-Elemente so gut wie keine fixen Angaben haben, dürfte es ausreichen wenn du dem Parent-Element (die Division mit der Klasse wp-forecast) deine gewünschte Breite mitgibst / zuweist.

CSS:

div.wp-forecast {width:200px;}

Liebe Grüße, Patrick

Rata · 05.07.2015

Hm, Patrick...

u. a. auf Dich hatte ich gerechnet

Bemerkt habe ich schon mal, daß hinter „width:“ ein Leerzeichen gehört

Das vorausgesetzt bringt mir das Einfügen der Zeile ... nix :neee:

Wahrscheinlich raff ich aber gar nix. Wo soll die hin?

Lieber Gruß
Rata

PS: ich hab da jetzt in der ersten und zweiten Zeile der wp-forecast.css.vertical stehen:

/* von Patrick vorgeschlagene Änderung */
div.wp-forecast {width: 200px;}

patrick_l · 05.07.2015

Rata schrieb:
Bemerkt habe ich schon mal, daß hinter „width:“ ein Leerzeichen gehört

Das ist wurscht

Ich lasse die Leerzeichen in der Regel weg. An der Ausgabe sich dadurch jedoch nichts ändert.

Rata schrieb:
Das vorausgesetzt bringt mir das Einfügen der Zeile ... nix
Wahrscheinlich raff ich aber gar nix. Wo soll die hin?

Eigentlich davor

Ist die Seite schon online? Wenn ja, dann schick mir wenn möglich den Link per PN. Schaue ich mir dann direkt an. Ansonsten selektiere auch die einzelnen Child-Elemente und gebe diesen ebenso eine Breite von 200px.

CSS:

/* --| Am Ende deines Stylesheet einfügen! |------- */
.wp-forecast, .wp-forecast-curr, .wp-forecast-curr-block, .wp-forecast-curr-details, 
.wp-forecast-fc-oneday, .wp-forecast-fc-block {
    width:200px;
}

Liebe Grüße, Patrick

_schatzi_ · 05.07.2015

Hallo!

Eine große Suchmaschine schmeißt bei "wp-forecast width" als ersten Treffer übrigens dies aus:
https://wordpress.org/support/topic/wp-forecast

Squeendot · 06.07.2015

Hallo Rata,

versuch mal die Breite des übergeordneten DIV-Elements zu ändern und die des wp-forecast dann auf 100%.

Also:

CSS:

.uebergeordnet {
     width: 200px;
}

.wp-forecast {
     width: 100%;
}

Wenn das auch nicht klappt, einfach mal hinter den Code von Patrick ein !Important hinklatschen. Funktioniert auch oft, wenn die Breite noch durch eine andere CSS-Datei vorgeschrieben wird.

CSS:

div.wp-forecast {width: 200px !important;}

Wenn das dann auch nicht funktioniert, brauchen wir wohl wirklich den Link zur Seite, falls sie schon online ist...

Lieber Gruß,

Julian