Wordpress - Forum Plugin - CSS Fehler?

[Nynex]

Hallo zusammen,

ich habe ein ziemlich spezifisches Problem mit einem Wordpress Plugin.
Ich benutze das Theme "Gamepress", und dass hier ist die noch nicht ganz fertige Website:
http://level03network.de/

Dort gibt es ein Forum für das ich das Plugin "Mingle Forum" benutze.
Damit kann ich ganz simpel ein Forum wie man es z.B von hier kennt, auf meiner Website implementieren.
Mein Problem sieht wie folgt aus:

http://imageshack.us/photo/my-images/248/alignmentproblem.jpg

Das Problem ist, dass das Alignment der einzelnen Buttons, Grafiken etc. falsch ist.
Der "Forum durchsuchen" Button z.B sollte direkt rechts neben dem Textfeld sein.

Des weiteren plagen mich diese seltsamen schwarzen Rändern weiter unten. Um die Buttons "Thema erstellen" und "Abonnieren" herum.

Das mir da jetzt so keiner konkret ne antwort geben kann, warum das so ist, ist mir klar.
Aber kennt sich jemand einigermaßen mit der Wordpress Geschichte aus, um mir sagen zu können ob diese Ränder sich in der .css abändern lassen oder hat vielleicht schon einmal jemand so Problem gehabt?

Ich wäre unendlich dankbar für Hilfe, weil ich schon den ganzen Tag nach ner Lösunug suche und nichts finde.
Die .css habe ich schon mehrfach durchsucht aber ich finde da nichts konkretes.
Ich habe bereits mehrere Themes ausprobiert -> ändert nichts (bloß die Farbe der Ränder)
Ich hab unterschiedlichste Skins für das Forum Plugin selbst getestet.
Irgendwelche Dateien vertragen sich da nicht...

Schönen Abend noch
- Daniel

 

[Kausalat]

Alle gängigen Browser bieten entsprechende Entwicklertools an, mit denen du nahezu jedes Element einer Website hinsichtlich der CSS-Vererbung untersuchen kannst. Damit lassen sich Formatierungskonflikte relativ einfach aufspüren.

 

[Daaron]

1.) style.css, Zeile 56:
img{max-width:100%;...} <- die max-width rausschmeißen. Die zerschießt die Icons in den Zeilen
2.) "Forum durchsuchen": Da ist ein <br> im HTML-Code vorm Button. Entsorge da <br>, und der Button rutscht hoch

Rest seh ich grad nicht, da ich nicht angemeldet bin.

Aber: Entwickler-Tools in Browsern sind dein Freund. Was denkst du, warum sogar der IE inzwischen leidlich brauchbare mitbringt? Die besten hat meiner Meinung nach Chrome. Schneller, geradliniger und übersichtlicher als z.B. FireBug.

 

[MaverickM]

Das Problem ist, dass das Alignment der einzelnen Buttons, Grafiken etc. falsch ist.
Der "Forum durchsuchen" Button z.B sollte direkt rechts neben dem Textfeld sein.

Des weiteren plagen mich diese seltsamen schwarzen Rändern weiter unten. Um die Buttons "Thema erstellen" und "Abonnieren" herum.

Wenn es nur um ein paar Pixel hin und herschieben geht, kannst Du das ganz einfach mit eigenen CSS Definitionen ändern. Du musst nur sicher stellen, dass Deine .css als letzte geladen wird, damit sie nicht überschrieben werden, oder Du verwendest !important. Das integrieren der Definitionen kann auch ein Plug-In für Dich übernehmen, da gibt es genügend für Wordpress.

Der Button für die Forumssuche oben ist via br in die nächste Zeile verschoben. Das lässt sich nicht so leicht via CSS lösen bzw. wird sehr krude. Es empfiehlt sich das Template an dieser Stelle anzupassen, dass kein manueller Umbruch mehr statt findet.

Ergänzung (24. April 2013)

Aber: Entwickler-Tools in Browsern sind dein Freund. Was denkst du, warum sogar der IE inzwischen leidlich brauchbare mitbringt? Die besten hat meiner Meinung nach Chrome. Schneller, geradliniger und übersichtlicher als z.B. FireBug.

Stimmt. Auch wenn Firefox der bessere Browser ist, die Entwicklertools sind bei Chrome deutlich besser. Ich benutz fürs Arbeiten mittlerweile nur noch Iron.

 

[Nynex]

Danke für die vielen hilfreichen Antworten! Ich werde mal sehen, was sich machen lässt

Ergänzung (24. April 2013)

Ok also das mit dem max witdh = 100 rauslassen hat schonmal super geklappt!
Und diese schwarzen Linien kommen glaube ich von irgendwelchen Tables...?
Aber weg bekommen habe ich sie noch nicht.

Ergänzung (24. April 2013)

Und kann mir jemand sagen, wie ich heraus finde, wo sich die Datei deren Quellcode ich mit dem Code gerade sehe, befindet?

 

[Daaron]

Stimmt. Auch wenn Firefox der bessere Browser ist, die Entwicklertools sind bei Chrome deutlich besser. Ich benutz fürs Arbeiten mittlerweile nur noch Iron.

Iron ist Scam, purer Scam.
Der Iron-Schöpfer tut so, als wäre er der Heilsbringer gegen Tracking und Werbung, aber er hat seine eigene Webseite bis zur Vergasung mit Popup-Werbung und Google Ads zugekleistert. Er hat sogar in einem Entwickler-Chat mit den Chromium-Machern offen zugegeben, dass es ihm nur ums Geld geht und dass er nur die Datenschutzhysterie in Deutschland ausnutzt.
Die allgemeine DS-Panik in Deutschland sorgte für massig negative Presse über Chrome (durch die Bank weg erstunken und erlogen bzw. bezogen auf Version 1-4, also hundealt) und massig Hype-Presse für Iron (obwohl der NICHTS macht. Er löscht Optionen aus dem Setup, die standardmäßig eh auf "aus" stehen).

Iron ist pure Abzocke, mehr nicht.

Ergänzung (24. April 2013)

Und kann mir jemand sagen, wie ich heraus finde, wo sich die Datei deren Quellcode ich mit dem Code gerade sehe, befindet?

Im Chrome Entwicklertool: einfahc bei der Definition auf die angegebene CSS-Datei hovern um den gesamten Pfad zu sehen. Oder draufklicken und die ganze CSS-File im Browser angucken.

 

[winmaster]

Absolut richtig. Ich benutzte nur noch Google Chrome, die Entwicklertools sind meiner Meinung nach die besten. Einfach mit der rechten Maustaste auf das problematische Element klicken und 'Inspect Element' auswählen. Ich benutze die Englische version, da ich lange Zeit in den USA gelebt habe, sollte in Deutsch genauso funktionieren.

 

[Nynex]

Hallo Leute,
ich muss sagen, dass ihr mir wirklich richtig geholfen habt.
Ich hab fast jeden Fehler gefunden und erfolgreich richtig abgeändert. Und dazu noch was gelernt!
Vielen dank!

Nur eine Frage habe ich noch:
Wie kann ich mir den Code von erstellten Wordpress-Seiten ansehen?
Also ich meine nicht den Code der Templates sondern den einer einzelnen erstellten Seite.
Ist das überhaupt möglich? Irgendwo müssen die ja abgespeichert sein... Denn sonst bekomme
ich die verrutschten Buttons nicht hin. So ein <br> lässt sich ja nicht über die .css wegradieren

Wäre super, wenn das auch jemand weiß

Grüße
- Daniel

 

[Daaron]

Die Seiten werden beim Aufruf dynamisch anhand von Templates zusammengebaut (oder aus einem Cache abgerufen). Du musst also das passende Template-File, in dem sich eine wilde Mischung aus PHP und HTML befindet, herauspicken und da entsprechend die <br>'s killen.
Tatsächlich ließe sich ein <br> aber über CSS "wegradieren". Wenn man das <br> präzise genug selektieren kann, dann könnte man einfach "display:none;" darauf anwenden. Die Kunst ist hier, einen passenden Selektor zu schreiben.

 

[Nynex]

Danke für den Tipp!
Allerdings habe ich das Template bereits durchforstet und dort ist nirgens ein <br>.
Das habe ich halt schon befürchtet, das die Seite dynamisch aufgebaut wird und nicht gespeichert wird.
Schade eigentlich. Wäre beim Aufrufen sogar schneller!
Gibt es vielleicht ein Plugin oder so, was das macht?

 

[Daaron]

In einem Forum wäre so etwas kontraproduktiv, da deine Besucher ja nicht die Threads von letztem Montag sehen wollen, sondern von vor 10 Sekunden. Man kann aber trotzdem viel mit guten Caching-Algorithmen erreichen. Ich weiß aber echt nicht, ob Wordpress in der Beziehung überhaupt etwas bietet. So wie ich das Schindluder in deren Code kenne: eher nein.
Lösungsansätze für so etwas gibts übrigens vieles, wie z.B. einen weiteren Webserver vor den eigentlichen zu schalten, als Cache. Das macht man aber nicht für Pillepalle-Foren mit 10 Hanseln, das macht man für einen Webshop mit einigen tausend Besuchern pro Tag und einigen hundert oder tausend Artikeln.

Und was dein <br> angeht: Das kann sich genauso gut irgendwo in einer PHP-Datei, weit außerhalb der Templates, verstecken. Das wird vielleicht einfach irgendwo per echo mit angeklatscht.

 

[MaverickM]

Die Seiten werden beim Aufruf dynamisch anhand von Templates zusammengebaut (oder aus einem Cache abgerufen). Du musst also das passende Template-File, in dem sich eine wilde Mischung aus PHP und HTML befindet, herauspicken und da entsprechend die <br>'s killen.
Tatsächlich ließe sich ein <br> aber über CSS "wegradieren". Wenn man das <br> präzise genug selektieren kann, dann könnte man einfach "display:none;" darauf anwenden. Die Kunst ist hier, einen passenden Selektor zu schreiben.

Man könnte womöglich auch über jQuery das br selektieren und eliminieren. Ist aber alles sehr krude und es ist deutlich einfacher und sinnvoller einfach das Template entsprechend anzupassen.

Man könnte dann auch noch schauen, ob es bei Wordpress sowas wie die Overrides bei Joomla! gibt, damit man bei einem Update der PlugIns nicht wieder Gefahr läuft alles nochmal machen zu müssen.

Edit:

Bezüglich des br, probier mal nochmal folgendes:

#profileHeader .wpf-bright form br {
   display:none
}

 

[Daaron]

Man könnte womöglich auch über jQuery das br selektieren und eliminieren. Ist aber alles sehr krude und es ist deutlich einfacher und sinnvoller einfach das Template entsprechend anzupassen.

1.) jQuery ist hier Kanonen vs. Spatzen. Es geht auch in bibliotheksfreiem JS.

brArray = document.body.querySelectorAll(".wpf-input + br");
for(var i = 0; i < brArray.length; i++){brArray[i].parentNode.removeChild(brArray[i])}

sollte gehen...

2.) JS-Lösungen hinterlassen IMMER einen bitteren Nachgeschmack. Ich hab z.B. gerade ein eingekauftes Template an der Backe, bei dem ohne JS die Navigation nicht bedienbar ist. Mit nem Dutzend Zeilen CSS(3) hab ich im Endeffekt eine animierte Dropdown-Navi gebaut, die besser aussieht als das, was die da mit JS produziert haben...
Baue IMMER ohne JS und füge JS erst hinzu, wenn CSS nicht weiter kommt.

3.) .wpf-input + br { display:none; } ist viel schneller als JS und benötigt außerdem weniger Übertragungsvolumen. In Zeiten, in denen sogar DSL-Usern wieder Volumentarife drohen, zählt jedes Byte. Spätestens im Smartphone-Bereich ist Sparsamkeit oberstes Gebot. Weniger ist mehr.

Obiger Selektor ist ein wirklich kruder Hack. er entfernt auch <br>'s, die man gern noch hätte. Man muss hier weiter tricksen, z.B. indem folgende Labels eben zu Blockelementen mit passendem Margin-Top werden

 

[MaverickM]

2.) JS-Lösungen hinterlassen IMMER einen bitteren Nachgeschmack. Ich hab z.B. gerade ein eingekauftes Template an der Backe, bei dem ohne JS die Navigation nicht bedienbar ist. Mit nem Dutzend Zeilen CSS(3) hab ich im Endeffekt eine animierte Dropdown-Navi gebaut, die besser aussieht als das, was die da mit JS produziert haben...
Baue IMMER ohne JS und füge JS erst hinzu, wenn CSS nicht weiter kommt.

Stimmt, man sollte es immer möglichst einfach halten. Allerdings ist zumindest bei CMS Systemen ja eigentlich immer eine der "großen" Bibliotheken sowieso schon geladen durch das System also kann man auch gleich drauf zugreifen...

 

[Daaron]

Mit der Bibliothek (egal ob jQuery oder Mootools) hätte man meinen obigen Code um ne Zeile verkürzen können. In Mootools wäre es glaube ich:
$$(".wpf-input + br").each(function(item){item.destroy()});
Das hilft aber nur bedingt weiter. Wenn der User NoScript nutzt, dann ist es egal welche Bib du einbindest. CSS > JS.

 

[MaverickM]

Stimmt, aber irgendwo is auch mal schluss. Paranoide Leute die mit NoScript rumrennen sind nur ein Bruchteil... Und die sind IMHO selber Schuld wenn etwas nicht funktioniert. (Was natürlich nicht heißt, dass man es nicht mit CSS machen sollte, wenns via CSS geht)
Ich nehme auch keine Rücksicht mehr auf veraltete Internet Explorer Versionen.