Seite 1 von 2
[3.2] we_universal Style verädern
Verfasst: 13.04.2017 03:37
von 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
Re: [3.2] we_universal Style verädern
Verfasst: 13.04.2017 09:07
von Lehrling
Könntest du bitte dein Forum hier verlinken?
Re: [3.2] we_universal Style verädern
Verfasst: 13.04.2017 11:15
von 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
Re: [3.2] we_universal Style verädern
Verfasst: 14.04.2017 07:46
von 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.
Re: [3.2] we_universal Style verädern
Verfasst: 14.04.2017 10:48
von 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
Re: [3.2] we_universal Style verädern
Verfasst: 14.04.2017 18:56
von 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
Re: [3.2] we_universal Style verädern
Verfasst: 14.04.2017 19:13
von 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
Re: [3.2] we_universal Style verädern
Verfasst: 14.04.2017 19:19
von Anila
Oh, sehe gerade noch eine Antwort.
Ich bin jetzt unterwegs, lese es mir nachher durch.
Viele Grüße
Anila
Re: [3.2] we_universal Style verädern
Verfasst: 14.04.2017 21:58
von 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
Re: [3.2] we_universal Style verädern
Verfasst: 14.04.2017 23:59
von 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