Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Widget-Breite über CSS anpassen [WordPress]“

Rata

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“ :p
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 :D
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;
}
 
Zuletzt bearbeitet:

patrick_l

Hat es drauf

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

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

Hat es drauf

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.
Das vorausgesetzt bringt mir das Einfügen der Zeile ... nix :neee:
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
 

Squeendot

Aktives Mitglied

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben