[ProSilver] Umgestaltung - Designprobleme

[binolino]

Hallo zusammen,

meine Webpräsenz besteht im Moment aus 3 Produkten: Wordpress, phpBB3 sowie eqDKP Plus. Ich verwende das Wordpress-Standardlayout, welches ich mit grafischen Elementen und Widgets angepasst habe. Am Wochenende habe ich das Forumdesign (basierend auf proSilver und proNight) nachgezogen und habe jetzt noch ein paar kleinere Probleme (ich hoffe es sind kleinere ). Das meißte konnte ich schon lösen, aber ich bin kein CSS-Guru daher hoffe ich, dass mir hier geholfen werden kann.

Mein Forum zur Ansicht erreicht ihr unter diesem Link: http://phoenixraid.de/phpBB3/index.php
Da man für ein Problem einen User benötigt, habe ich einen Testuser samt Testunterforum angelegt: Benutzername: Testuser / Passwort: test123.

Sooo zu meinen Problemchen:

1. Der Kopfbereich schaut im Firefox 3.6.12 gut aus. Im IE 8 wirkt er verworfen. Kann mir jemand einen Tipp geben wie ich das auch im IE hinbekomme? Hier ein Bild: [ externes Bild ]
2. Die Forenübersicht ist in beiden Broswern nicht ideal. Den Überschriftenbereich, der die einzelnen Forenabschnitte voneinander trennt, finde ich zu hoch. Diese Box würde ich gerne etwa auf die Hälfte schrumpfen. Dort wo die einzelnen Foren angezeigt werden, ist ebenso zuviel Platz unterhalb - Im IE wird dieser Bereich Schwarz dargestellt. Wie bekomm ich das weg? Auch hierzu ein Bild zur Visualisierung: [ externes Bild ]
   In der Übersicht der Beiträge besteht das selbe Problem. Ich hoffe diese beiden Probleme hängen zusammen.
3. Ruft man einen Beitrag auf (ich habe vorsorglich 2 Beiträge im Testunterforum angelegt - nur sichtbar wenn mit Testuser eingeloggt - alternativ eine der Bewerbungen aufrufen) erhält man manchmal zwischen den Beiträgen eine weiße Trennlinie, manchmal nicht. Habe da noch kein Muster erkannt. Ich hätte diese Trennlinie gerne immer. Könnt ihr mir hier einen Tipp geben? IE und Firefox arbeiten hier scheinbar gleich.
4. Mein letztes Problem für das ihr zwingend den Login benötigt. Beim Beitrag neuerstellen oder antworten hat man oben die bekannten Buttons für Fettschrift, Italic usw. Bei Schriftfarbe werden die Schriftfarben zwar "ausgeklappt" aber nicht angezeigt. Anklicken kann man sie hingegen schon. Hat jemand eine Idee?
5. Abseits von meinen Designproblemenen habe ich noch ein "Wordpress-Integrationsproblem". Im Moment ist das Menü oben hardcodiert im Style des Forums hinterlegt. Ich würde es allerdings gerne dynamisch auslesen. Kann ich php-Code in den Style integrieren, der auf die selbe Datenbank zugreifen kann wie das Forum oder muss ich den Forencode hierfür anpacken?

Ich hoffe dieser Beitrag entspricht allen Regeln/Pflichten

Wenn es noch Fragen gibt oder ihr noch weitere Informationen benötigt, wäre es schön, wenn ihr mir schreibt.

Danke schon mal vorab !!

mfg, binolino

[binolino]

Hallo zusammen,

leider konnte ich meine Probleme noch nicht selbst lösen. Hat jemand eine Idee?

Hoffe das mein Thread nur übersehen wurde und nicht als unlösbar gilt

mfg, Binolino

[Talk19zehn]

Hello binolino,

ich habe mir deine Seite bestimmt schon zehn Mal angeschaut und Firebug, Web Developer (s. Firebug Add-ons ) als auch andere Spezies genutzt. Das CSS ist so kompakt, dass es nicht einfach sein wird, dir eine optimale Lösung zu unterbreiten. M. E. müsste man sich in das Konstrukt direkt einarbeiten. Grundsätzlich habe ich bspw. Schriftgrößen sowohl in em, px und pt gefunden. Das sollte einerseits überdacht werden. Einfach ausprobieren, was der IE macht. Strittig im Design ist immer wieder die Nutzung "pt". Ggf. nutze besser einheitliche Größen undzwar die, die phbbb nutzt ? ?

Welches CSS hier in das andere greift, erschließt sich mir leider nicht grundsätzlich. Ich suche ja eigentlich recht gerne nach "solchen Sachen" und gebe eigentlich nicht auf. "Es muss gehen", lautet ein Tenor meinerseits!

Die erweiterte Suche kannst du auch gänzlich ggf. an anderer Stelle *verlinken, so dass dieses Problem gelöst werden würde. Ich würde das ursprüngliche Teilchen einfach auskommentieren und einen *Link setzen. Oder eben "Zeilenumbrüche" oder "Margin" nutzen.

Die Abstände und Umbrüche zu lösen, scheint das kleinere Problem zu sein.

Ich glaube, du hast ein gewaltiges Stück Arbeit vor dir.

Viel Glück!

LG

Edit:
Ggf. helfen dir jene Informationen ( Wordpress ): viewtopic.php?p=1162203




.

[binolino]

Hallo Talk19zehn,

da ich schon ein wenig ungeduldig wurde und nicht recht voran kam, habe ich mein Startposting auf Englisch übersetzt und hab es auch ins englische Supportforum kopiert. Hier ein Link: http://www.phpbb.com/community/viewtopi ... &t=2111379

Damit konnte Problem 2 und 4 erstmal gelöst werden. Ich schreibe es auch nochmal in den Startpost. Des weiteren habe ich weitere Infos - aber leider noch keine Lösung - für Problem 3, die ich auch im Anschluss an dieses Posting ins Startpost einarbeite.

Problem 1 -> Suchbox nicht mehr einblenden und nur den Link zur erweiterten Suche anbieten, ist meine letzte Lösung falls es keine Lösung gibt. In das Headerbild möchte ich es ungern platzieren, da der Code aktuell noch austauschbar bleiben muss (wg. Problem 5 ) *puh* das Arbeit vor (und auch hinter) mir liegt weiß ich... ist aber nicht zu ändern (wo ist der Smily der mit den Fäußten auf den Tisch haut und "Ich will Ich will Ich will" schreit? )

WP_United, was in deinem Link behandelt wird und die Nutzung der gleichen Userdaten in beiden Systemen, ist nicht mein Anliegen. Dafür würde es auch entsprechende WP-Plugins geben, die die Daten aus phpBB nützen (andersrum möchte ich es ohnehin nicht - Registrierung über's Forum finde ich gut!). Ganz davon ab, dass es bei WP_United oft mal Entwicklungspausen gibt, wo man keine Ahnung hat, ob das Projekt tod ist oder ob im Hintergrund gewerkelt wird. Man erhält zeitweise (über Monate) leider keine Antwort in den Foren. Momentan scheint das Projekt wieder aktiv zu sein... wie lang nur. Darauf möchte ich mich nicht verlassen müssen. Ganz davon ab das es hier um ein Designproblem geht und nicht um Nutzerkonten.

Vielleicht hast du ja eine Idee für meine Zwischenlinien. Das Verhalten selbiger versteh ich nicht wirklich (Problem 3).

Ich danke dir für deine Hilfe !

mfg, Binolino

[binolino]

Okay... ich darf meinen ersten Beitrag nicht editieren (steht es nicht im Knigge das man alle Infos in den ersten Beitrag dazuschreiben soll?), daher mehr Infos in diesem Thread... hoffe er wird nicht zu unübersichtlich.

Problem 1 - Noch offen - Mögliche aber nicht schöne Lösung

Der Kopfbereich schaut im Firefox 3.6.12 gut aus. Im IE 8 wirkt er verworfen. Kann mir jemand einen Tipp geben wie ich das auch im IE hinbekomme? Hier ein Bild: [ externes Bild ]

Mögliche Lösung ist der Entfall der Suchbox. Dadurch wäre das reine Anbieten eines Links auf die erweiterte Suche notwendig. Im Worst Case werde ich das wohl machen. Mit einem Link hat man am wenigsten Probleme *hm* vielleicht fällt jemandem aber noch etwas auf?

Problem 2 - gelöst durch Sinom (auf phpbb.com) - Links anbei

Die Forenübersicht ist in beiden Broswern nicht ideal. Den Überschriftenbereich, der die einzelnen Forenabschnitte voneinander trennt, finde ich zu hoch. Diese Box würde ich gerne etwa auf die Hälfte schrumpfen. Dort wo die einzelnen Foren angezeigt werden, ist ebenso zuviel Platz unterhalb - Im IE wird dieser Bereich Schwarz dargestellt. Wie bekomm ich das weg? Auch hierzu ein Bild zur Visualisierung: [ externes Bild ]
In der Übersicht der Beiträge besteht das selbe Problem. Ich hoffe diese beiden Probleme hängen zusammen.

Vorschlag von Sinom findet ihr hier: http://www.phpbb.com/community/viewtopi ... #p12901765
Ich habe die Lösung allerdings nicht direkt ins Wordpress-Standard-Stylesheet aufgenommen, sondern in ein Subtemplate - beschrieben hier: http://www.phpbb.com/community/viewtopi ... #p12902548

Problem 3 - edit: gelöst

Ruft man einen Beitrag auf (ich habe vorsorglich 2 Beiträge im Testunterforum angelegt - nur sichtbar wenn mit Testuser eingeloggt - alternativ eine der Bewerbungen aufrufen) erhält man manchmal zwischen den Beiträgen eine weiße Trennlinie, manchmal nicht. Habe da noch kein Muster erkannt. Ich hätte diese Trennlinie gerne immer. Könnt ihr mir hier einen Tipp geben? IE und Firefox arbeiten hier scheinbar gleich.

Ich denke (bin mir nicht so sicher), dass Problem 3 mit dem Tag

Code: Alles auswählen

<hr class="divider">

zusammenhängt. Wenn ich folgende Zeilen

Code: Alles auswählen

hr.divider {
display:none;
}

via Firebug deaktiviere, wird zwischen jedem Text eine Linie dargestellt, auch zwischen den Texten, die normaler-/fälschlicherweise keine Linie haben. Ich habe aber keine Ahnung, was an dieser Zeile falsch sein könnte. Die Linie darstellen wäre eine "Worst Case" Lösung.

Habe 2 Bilder zur Visualisierung gemacht: [ externes Bild ] [ externes Bild ]

edit: war mir nicht sicher und es ist auch anders als ich dachte
Lösung: Die Beiträge wurden nur "zusammengehalten" wenn der User online war also das online-Bildchen angezeigt wurde. Notwendige Änderung in der Color.css:

Code: Alles auswählen

.online {
   [...]
   margin-top: 5px;
}

ändern zu

Code: Alles auswählen

.online {
   [...]
   margin-top: 0px;
}

Problem 4 - gelöst durch mich (auf phpbb.com) - Links anbei

Mein letztes Problem für das ihr zwingend den Login benötigt. Beim Beitrag neuerstellen oder antworten hat man oben die bekannten Buttons für Fettschrift, Italic usw. Bei Schriftfarbe werden die Schriftfarben zwar "ausgeklappt" aber nicht angezeigt. Anklicken kann man sie hingegen schon. Hat jemand eine Idee?

Problem wurde auch hier durch das Wordpress-Template verursacht, wobei ich nicht ganz verstehe, warum phpbb an dieser Stelle auf style="..." verzichtet. Mehr hinter diesem Link: http://www.phpbb.com/community/viewtopi ... #p12902559

Problem 5 - Noch offen

Abseits von meinen Designproblemenen habe ich noch ein "Wordpress-Integrationsproblem". Im Moment ist das Menü oben hardcodiert im Style des Forums hinterlegt. Ich würde es allerdings gerne dynamisch auslesen. Kann ich php-Code in den Style integrieren, der auf die selbe Datenbank zugreifen kann wie das Forum oder muss ich den Forencode hierfür anpacken?

Dafür habe ich leider noch gar keinen Ansatzpunkt

Danke besonders dir Talk19zehn das du dir Zeit genommen hast meine Probleme mal anzusehen

mfg, Binolino

[Talk19zehn]

Hello binolino,

der Suchbox würde ich eine "eigene Navbar" spendieren (?), da sich mit Einblendung der anderen Icons (bspw. Druckersymbol) keine optimale Darstellung (innerhalb der jetzigen Konstellation der Navbar) ergibt. Oder, diese ggf. doch bspw. im Dropdownmenü aufnehmen / verlinken?

Ich frage mich, ob die verwendeten Schriftarten, nicht besser gleichlautend verwendet werden sollten?

Ich fand neben:

Code: Alles auswählen

font-family:Arial,Georgia,"Bitstream Charter",serif;

ebenso:

Code: Alles auswählen

font-family:Verdana,Helvetica,Arial,sans-serif;

Und unter "h2" bspw. folgenden Eintrag für die Schriftart:

Code: Alles auswählen

h2 {
color:#3F3F3F;
font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;
font-size:2em;
}

Hier würde ich bspw. 1.2em anstatt 2em unter Vorbehalt nutzen wollen. Warum unter Vorbehalt: margin ist irgendwie "verloren gegangen"?

Code: Alles auswählen

margin:0.8em 0 0.2em;

Diesen Sachverhalt sollte man ggf. noch einmal näher untersuchen?


"h3" ... ?

Code: Alles auswählen

h3 {
border-bottom:1px solid #CCCCCC;
color:#989898;
font-family:Arial,Helvetica,sans-serif;
font-size:1.05em;
font-weight:bold;
margin-bottom:3px;
margin-top:20px;
padding-bottom:2px;
text-transform:uppercase;
}

"uppercase" ändern?

Code: Alles auswählen

text-transform:none;

Die visuelle Trennung der Beiträge ( Linie, die im Grunde nur einen Abstand darstellt ) finde ich in Ordnung und zweckdienlich. Warum: Nicht alle User verwenden eine Signatur, die zusätzlich in der Lage wäre, eine Trennung, d.h. einen visuellen Beginn eines neuen Beitrages zusätzlich zu kennzeichnen.

Das Suchen oberhalb eines Beitrages ist dem Testuser nicht erlaubt, so dass ich nicht austesten konnte, was sich hier im IE auswirkt, da es auch zu einer Verschiebung kommt. So wird der Button Neues Thema nicht in voller Höhe dargestellt. Jedenfalls in meinem Falle. Das Line-Height von 18px scheint ihm nicht so richtig zu gefallen.

Alles ohne Gewähr..., --> was mir Firebug eben so angeboten hatte

Viele Grüße