[3.2] we_universal Style verädern

[Anila]

Hallo,

ich hoffe, dass ich auch mit solchen Fragen hier richtig bin: Ich habe den we_universal Style eingebaut und das dashboard.jpg durch ein eigenes, etwas helleres Bild ersetzt.

Sieht toll aus - aber nicht auf dem Handy, weil da alles zusammen geschoben wird und dann die weiße Schrift (.inventea-sitename) direkt über meinem farbenkräftigeren Bildteil sitzt. Auf dem Original sieht es gut aus, weil das Dashboard.jpg dunkel ist.

Mein Bild hat genau dieselbe Größe, sieht aber optisch kleiner aus, weil ich das Originalbild zunächst in der Hintergrundfarbe gefärbt habe und dann ein kleineres - aber farbenkräftigeres Bild drüber gesetzt habe.

Wenn jetzt der Forentitel mehr am oberen Rand wäre und die Forenbeschreibung mehr am unteren Rand, dann würde es auch auf dem Handy gut aussehen, denn dann wäre der Text genau oberhalb und unterhalb von dem Bildteil von mir, der nun mal heller ist.

Wie mache ich das? Padding habe ich mal verändert und einfach damit rum gespielt, aber wenn man die Seite verkleinert hatte, sprang der Text wieder in die Mitte (vertikal) und hat doch wieder meinen Bildteil überdeckt. Vermutlich hat es was mit Padding und Position zu tun - aber ich bin absolute CSS Laiin.

Viele Grüße
Anila

[Lehrling]

Könntest du bitte dein Forum hier verlinken?

[Anila]

Http://Problemhundforum.de/

Absolut super wäre natürlich, wenn der Text nur dann, wenn der Platz nicht reicht, anders positioniert wird.

Am PC, jedenfalls bei meiner Auflösung, sieht es jetzt prima aus.

Viele Grüße,
Anila

[Lehrling]

Das ist wirklich verzwickt. Wäre es denn eine Option für dich, wenn du in der responsiven Ansicht das Bild ausblendest oder ein anderes Bild verwendest?
In diesem Falle müsstest du in das common.css wahlweise diesen Abschnitt (anderes Bild)

Code: Alles auswählen

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)  {

.inventea-dashboard {
	background: url("./images/dashboard_small.jpg") center center no-repeat;
	background-color: #628172;	
}
}

oder diesen Abschnitt (kein Bild)

Code: Alles auswählen

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)  {

.inventea-dashboard {
	background-image: none;
	background-color: #628172;	
}
}

einbauen. Den Wert für max-width musst du entsprechend anpassen.

[Joyce&Luna]

Was ich nicht so gut finde, das dieses Logo mit den Hunden schon nicht responsiv ist. Ab 1152px schiebt sich der Seitenname über das Bild mit den Hunden. Da jetzt schon die Hunde wieder aus zu blenden, wäre auch nicht optimal.
Viele Möglichkeiten hat man da leider nicht. Man könnte noch den Seitenname unter der unteren Navbar setzen, so das dieser gar nicht oben im Logo erscheint. Oder hinter dem Logo legen und das mit der responsiven Ansicht von Lehrling nutzen.
Dann könntest du im Logo einen Schriftzug setzen mit dem Seitenname.
Aber all diese Lösungen, muss gut durchdacht werden und kontrolliert werden ob danach noch alles so zusammen passt.

Anke

[Anila]

Hallo,

vielen Dank für deine Antwort. Ich bin jetzt auch auf diese Idee gekommen, habe es vermutlich aber weniger elegant gelöst als du es vorschlägst. Und auf meinem Handy klappt es jetzt auch.

Ich habe 3 Background-Bilder gemacht für normale Auflösungen, dann für Media only Screen 700px und noch eines für Media only Screen 500px.

Die Bilder enthalten jetzt den Hintergrund mit meinem Filmstreifen drauf und auch den Forumtitel + Seitenbeschreibung. Im ACP habe ich das einfach gelöscht.

Bei Inventea.dashboard lade ich gar kein Bild.
Bei Inventea.SiteDescription habe ich aber meine Bilder als BAckground-Image mit no-repeat geladen.

In responsive.CSS habe ich die leicht veränderten Background-Bilder bei Media only Screen 700 und 500px geladen.

Sieht prima aus bei mir auf XAMPP

Ich finde dein Style übrigens sehr gelungen! Sieht sehr aufgeräumt aus und gut strukturiert.

Viele Grüße
Anila

[Joyce&Luna]

Hallo

Habe mir das mal angeschaut und ich finde es passt alles soweit. Dein Filmstreifenwürde ich noch etwas später einblenden lassen, so ab 400px oder sogar 350px

Anke

Edit: optisch lieber auf 400px

[Anila]

Oh, sehe gerade noch eine Antwort.

Ich bin jetzt unterwegs, lese es mir nachher durch.

Viele Grüße
Anila

[Melmac]

Hi,

mit Verspätung noch eine weitere Alternative hinterher ...

Von Kirk gibt es die Extension [3.1][3.2] Sitelogo responsive ...
Normalerweise, also "out of the box", läuft sie bei dem Style we_universal etwas gegen die Wand: der Aufbau des Headerbereichs weicht bei diesem zu sehr von dem von prosilver ab. Normalerweise ...

Du könntest dennoch mal folgendes probieren (es erfordert keine Änderungen an den Files des Styles!):
In der Anlage sind zwei Archive enthalten

• we_universal.zip: enthält das neue Logo site_logo.jpg, so wie es momentan bei Dir auch eingesetzt ist - leicht in den Abmessungen angepasst, ansonsten aber original.
  Archiv entpacken und den Ordner "we_universal" komplett ins Styleverzeichnis des Bords hochladen (alternativ: die enthaltene Grafik ins Verzeichnis /theme/images/ des Styles laden.
• siteloge_responsive_mod.zip: Kirks Extension, ergänzt um eine Stylevorlage für we_universal
  Diese Ext ganz normal installieren und konfigurieren
  • "Position der Site-Description:" => "nirgends"
  • "Position der Search-Box:" => "Header"
  • "Position der Search-Box in der Headerbar:" => "Rechts unten"

Caches leeren

Den bisherigen Tests nach sorgt die Ext jetzt in allen Auflösungen für ein responsives Verhalten des Logos/Headerbereichs.
Da außerdem an den Style-Dateien keinerlei Anpassungen vorgenommen werden, wird nach Deaktivieren der Ext der "Originalzustand" des Styles automatisch wiederhergestellt.
Alle stylespezifischen Anpassungen wurden in den für we_universal vorgesehenen Files der Extension vorgenommen

[Anila]

Hallo,

das ist ja ein tolles Forum und eine fantastische Sache, diese Extensions.

Ich hatte noch nie eine Extension installiert. Hatte zunächst auch den neuen Reiter gar nicht gesehen und schon in den CSS Dateien gesucht, wo ich diese Konfigurationen vornehmen muss

Aber das geht ja alles ganz einfach. Gemacht für Leute wie mich

Wirklich super. Nachdem mein Forum eine Woche lang down war, weil das Upgrade nach 3.2 auf dem Live-Server nicht gelang, bin ich jetzt wirklich überglücklich.

Nochmals vielen Dank für eure schnelle Hilfe und schöne Ostern,
Anila