Frage Image um appear erweitern

[Pixelschubser]

Hi,

ich hab folgendes Problem, dass Bilder in einer Box, die nur bei einem Mouse-Over erscheint, angezeigt werden, wenn das Broswer-Fenster eine bestimmte Breite unterschreitet. Das heisst, der Fehler liegt im Zusammenhang mit dem Responsive Layout.

Der Entwickler, dessen Plugin die Box erzeugt sagt, dass die Ursache für das Problem, die CSS-Klasse "no-display" ist, die an jedes Bild anhängt wird. Die Lösung wäre, wenn man zusätzlich die Klasse "appear" anhängen würde z.B. class="no-display appear".

Die Frage ist nun, welchen CSS-Code füge ich bei einem Wordpress-Theme ein, dass ein Feld für eigenen CSS-Code besitzt?

Für eure Hilfe wäre ich sehr dankbar. :)

 

[threadi]

Ohne einen Link zu deiner Seite kann man dir dabei kaum helfen. Auf Grund des Klassen-Namens "no-display" vermute ich, dass dort

.no-display { display: none; }

gesetzt wird. Wenn das so wäre, könnte

.appear { display: block; }

eine Lösung sein. Aber ob das stimmt, kann man ohne den Code in deiner Seite zu sehen nicht sagen.

 

[Pixelschubser]

Da hast du wohl Recht. :) Erst mal danke für das Code-Schnipsel. Das hat leider nicht funktioniert, aber war ja ohne Bezug zum Seiten-Code nicht zu erwarten. :)

Zum Beispiel hier: https://www.smarthomearea.de/netzwe...-book-duo-20tb-externe-festplatte-raid-10096/

Hover mit der Mouse über den ersten Link im Text. Erst wenn das Browserfenster eine bestimmte Breite unterschreitet, erscheint auch das Bild in der Pop-Up-Box. Das sollte aber immer zu sehen, egal wie breit das Browserfenster ist.

Es wäre grandios, wenn ihr mir bei der Lösung helfen könntet.:) Ich steh auf dem Schlauch.

 

[basti1012]

hilfe. Was ist mit dein Quelltext passiert.(+160 valiator Fehler )Ich bin ja schon chaos Mensch aber das ist doch etwas mehr.Ich werde aber trotzdem mal kucken ob man da den Fehler findet .Kann aber etwas dauern:)

Schmeiß mal deine CSS in einer Extra Datei dann sieht es schon mal etwas besser aus;)

 

[Pixelschubser]

Hi, wo siehst du +160 Fehler? Mit welchem Validator-Took checkst du das? Ich bekomm mit dem offiziellen W3C Validator 27 CSS-Fehler. Aber hey, das sind alles CSS-Fehler in Plugins. Da greif ich ungern ein, weil im nächsten Update sind meine Korrekturen wieder weg oder wenn im Child-Theme gesichert, kann das zu üblen Wechselwirkungen führen. Ich schreib lieber die Plugin-Entwickler an und bitte sie, sich der Fehler anzunehmen. Dann haben alle was von den Verbesserungen. :

Wie meinst du das mit "deine CSS"? Meinst du das Responsive-CSS meines Themes? Weil nur dort hab ich die .no-display Klasse gefunden.

 

[basti1012]

Eigentlich nehme ich den gleichen oder nicht https://validator.w3.org/nu/?showso...-book-duo-20tb-externe-festplatte-raid-10096/

Mit der Css meine ich auslagern. So das du die ganze Css style anweisungen in einer extra Datei schreibst und die dann Einbindest.
Ob es dann scneller läuft kann ich nix zu sagen,aber ist schöner und einfacher zu lesen.Gerade wenn du mal hilfe suchst ,haben die Helfende es leichter da durch zu steigen.
Und du selber natürlich auch.Man muß immer wieder mal was ändern und dann sucht man sich dumm und dähmlich.
Du hast ja sehr viel CSS.
Brauchst du die den alle?
Das sieht so aus als wenn du da mehrere Bibiliotheken rein kopiert hast.( Ist nicht böse gemeint ).

 

[Pixelschubser]

Ach i wo ... böse. ;) Ich bin um deine Hilfe dankbar! :)
Also mein Theme allein hat schon 12 CSS-Dateien im CSS-Ordner. Hinzu kommen unzählige CSS-Dateien von den Plugins. Yepp, die werden alle gebraucht, denke ich. :(
Aber wenn es um meinen konkreten Fall geht, müsste das doch egal sein. Ich weiss, ja wer der Übeltäter ist. Nur nicht, wie ich den Fehler eliminiere. Der Tipp mit dem .no-display stammt vom Entwickler des Affiliate-Plugins, dass die Pop-Up-Box erzeugt. Und mit ein wenig googeln bin ich auf die Appear-Klasse gekommen. Ich kann mir für die Lösung leider aber nicht das nötige Snippet schreiben. Da bin ich auf clevere Leute wie dich angewiesen. :)

 

[Pixelschubser]

Ich hab eine Lösung gefunden:

.no-display{ opacity:1; }

Das überschreibt die Originalanweisung. Ist zwar die Holzhammermethode, aber vorerst funktioniert sie. ;)