[fullsize_background] - Fullsize Background mit Mootools

Hallo Leute.

Ich habe jetzt endschieden meine Erweiterung online zu stellen.
Eigentlich sollte es von 2.9 bis 2.11.5 funktionieren.

Die Erweiterung ist erst in der Alpha-Phase.
Werde immer wenn ich Zeit habe, daran arbeiten :)

Bitte könntet ihr es testen und mir mit Angabe eurer Contao Version sagen ob es klappt oder auch nicht.

Anleitung:

1. Installieren
http://contao.org/de/extension-list/...und.10.de.html
2. Modul erstellen
3. Modul in Seitenlayout einbinden
4. Fullsize Background -> Bilder reinstellen
5. Bei einem Bild "Fallback" setzen, damit wenn keines vorhanden ist dieses verwendet wird.

Bildformat:

Starwert: Breite: 640px Höhe: 400px
Was ich verwende: Breite: 1280px Höhe: 800px

Kann aber individuell gemacht werden.

Was noch kommt:

1. "NUR" ein Fallback setzen möglich
2. Bilder vererben

Freu mich schon auf eure Tests :)

2.10.4 habe ich es schon installiert.

lg Matthias

Hi Messa,

Erstmal vielen Dank für die Erweiterung!
Ich habe sie gerade erfolgreich getestet mit Version 2.11.5
Man darf halt nicht vergessen das Modul zu konfigurieren + einzubinden

Kann es sein daß die Anleitung
http://de.contaowiki.org/Fullsize_Ba...Tools_MooSizer
mit 2.11.5 nicht funzt?

vg
mike

Zitat:

---

Man darf halt nicht vergessen das Modul zu konfigurieren + einzubinden

---

Ja das steht auch in der Anleitung in meinem Post drinnen.
Soll ja auch möglich sein 2 Layouts zu machen (1 mit Fullsize-Background und eines ohne)
Wenn es immer drinnen wäre, würde ja die Freiheit fehlen es auch abstellen zu können :)
Und bei News etc,. muss ja auch ein Modul erstellt werden :)

Zitat:

---

Kann es sein daß die Anleitung

---

Ist genau der gleiche Javascript.

Du musst dann nur die Templates anderst anpassen (HMTL5, xhtml)

PS: danke für deinen Test :)

lg Matthias

Zitat:

---

Zitat von Messa

Ja das steht auch in der Anleitung in meinem Post drinnen.

---

1. amal probieren
2. erst wenns nit geht lesen
;)

Zitat:

---

Du musst dann nur die Templates anderst anpassen (HMTL5, xhtml)

---

wo steht das wie ich sie anpassen muss?

Zitat:

---

PS: danke für deinen Test :)

---

ich danke dir!

lg Matthias

vg
mike

Denke, dass es so gut zum Anwendend funktioniert.
Ist ja erst die Alpha kommen noch Sachen dazu :)

Naja das steht nicht drinnen in der Anleitung ist jetzt auch nicht mehr notwendig,
da es diese Erweiterung gibt :)

Sollte ich vielleicht in der Anleitung oben noch dazuschreiben, dass es jetzt eine Erweiterung gibt.

Sollte aber schon rauskommen, das die Templates angepasst werden müssen ;)

lg Matthias

Vielen dank für diese super Arbeit.
Endlich ein Hintergrundbild ohne große Probleme.
Alles läuft super.:D
Vielen Dank.

Bitte gerne, kannst du noch schreiben was für eine Version du verwendest?

lg

Version: 2.11.4
Wenn man das Modul tiefer als die Position Kopfzeile einbaut werden alle darunter liegenden Elemente im Chrome 22 überblendet. Scheint irgendwas im CSS zu sein. FF hat damit kein Problem.


Frage: Muss eine CSS-Datei eigenständig eingebunden werden? Kann man das irgendwo ausstellen und den Code in die eigene Datei eingebunden werden? Oder direkt in die Contao System-CSS?

Hallo makai.

Oky das muss ich mir anschauen.
Die CSS wird im Ordner der Erwetiurng gespeichert. Dort ist eine Vorhanden.
Ist aber nicht viel. Du kannst es auch mit !important überschreiben in deinem CSS.

Kann es sein, dass deine anderen Sachen auch einen Z-index haben?

Zitat:

---

#supersize
{
top:0;
left:0;
position:fixed;
z-index: -1;
}

---

Da es so gemacht ist, dass es einfach eine Ebene hienter null liegen soll :)
Hast du mir einen Link, wo ich das ganze anschauen kann?

//////////////////////////////////////////////////////////////////////////////////////////////////////

Habe gerade eine Seite von mir in Google Chrome Version 22.0.1229.94 getestet.
Da geht alles, denke, es lieg daran, dass du andere Element mit einem hörheren "-" Z-index hast.



lg Matthias

Erstmal vielen Dank für die coole Erweiterung. Allerdings hab ich ein Problem, bei dem ich nicht weiterkomme:
Bei mir füllt das Hintergrundbild immer nur die Breite des Browserfensters aus. Sprich, wenn man das Fenster ganz schmal macht, wird der Hintergrund leider nicht in der Höhe "gestretcht" und es bleibt unten was frei.
Wenn man es mit CSS beschreiben müsste, würde ich sagen, es zieht mir das Background-Image auf wie "background-size: contain", mein Kunde wünscht sich aber dringend einen vollgefüllten Hintergrund.
Was mach ich falsch? Kann mir jemand einen Rat geben?

Hallo Conny.

Schwirg so zum sagen. An was es liegt.
Hast du vielleicht einen Link. Wo ich es mir anschauen kann? Eventuell hast du im CSS etwas drinnen, dass das nicht anpassen erzwingt. Da bei der Erweiterung nur minimal ein CSS babei ist. Du hast auch motools aktiv?
Wenn du NUR jquery aktiv hast geht die Erweiterung nicht.

Lg Matthias

Hallo Matthias,
vielen Dank für Deine Rückmeldung. Mootools ist aktiv. Da die Seite zur Zeit passwortgeschütz läuft, schick ich Dir einen Link per Mail.

Wir haben die Lösung gefunden. Es lag an jQuery. Habe das entsprechende Script rausgenommen, nochmal die Seitenverhältnisse der Bilder geprüft und siehe da: Es läuft. Nochmal vielen Dank für die tolle Unterstützung.

Hallo & vielen Dank für diese Erweiterung!

Ein Problem tut sich mir noch auf: Wenn ich bei aktivierter Erweiterung dem Footer "opacity: 0.95" zuweise, dann ist alles weg :-). War vorher nicht so - gleiches Spiel, wenn ich dem #wrapper opacity-Werte zuordne. Diese beziehen sich dann auf die gesamte Seite?!

Viele Grüße
MNO

Kommt drauf an wie du es im CSS definiert hast.
Bei CSS sachen immer einen Link posten.
Sonst tu ich mich und auch andere die helfen könnten extrem schwer.
Habe aber auch schon Transparenz verwendet.
Falls du keinen Link posten möchteste geht es auch noch wenn du in PS ein Bild machst.
1x1 px mit der gewünschten Farbe und Transparent und es als .gif oder .png speicherst.
Das dann als Backgroundimage definieren.

lg Matthias

Hallo MetroNewsOne,
verwende besser rgba Werte (das a steht für Alpha-Transparenz). opacity vererbt sich immer auf ALLE Elemente innerhalb dieses einen...
Dann solltest du weniger Probleme haben ;-)

Viele Grüße

Hallo ihr beide,

vielen Dank für eure Antworten. Auf die Sache mit dem Link hätte ich auch selbst kommen können :-).
http://www.braunloeckchen.de/ Hier habe ich für jemanden einen Blog mit Contao aufgesetzt (bzw. bin noch dabei teilweise).

#container und #header sind bereits mit opacity: 0.95 belegt, 255,255,255,0.95 bringt beim Fehler im #footer leider keine Änderung. Wenn ich diesem (z.B. per FireBug) opacity: 0.95 oder die RGBA-Variante zuweise, sieht man im Grunde nix mehr von der Seite ;-).

Grüße
MNO

Hallo MetroNewsOne,
naja, ich glaub da ist dein CSS etwas komisch geworden. Ich sehe da einmal ne Definition für #footer etc. wo alles erst mal #ffffff bekommt. Das ganz nach #footer, was das dann überschreibt...
Ich würde das also anders aufbauen. Und mit rgba(255,255,255,095) solltest du eigentlich gut fahren können. So wie das jetzt ist (durch opacity) ist sogar die Schrift durchsichtig... ich weiß nicht ob das so sinnig ist ^^

Viele Grüße

Hallo MacXP,

danke für den Tipp - es funktioniert, wie man nun auch online sehen kann. Ich frag mich nur wieso, da ich auch vorher das ganze per Firebug getestet habe. Wie dem auch sei, danke dir! :-)

Grüße
MNO

Hallo Messa,

vielen Dank für diese Erweiterung! Klappt bei mir auch unter frühere Versionen (2.9.x) einwandfrei.

Was mir aufgefallen ist:
Wäre es möglich für nächste Version bei der Seitenauswahl eine mehrfachauswahl zu machen?
Wenn man z.B. eine mehrsprachige Seite hat muss man zweimal (oder auch mehr) den gleichen Background-Datensatz erstellen.

Viele Grüsse
rflx

Hallo.

Oky super, dann kann ich sie für frühere Versionen auch freigeben.
Ja klar schau mir das an, habe so um Weihnachten wider mehr Zeit (hoff ich)
und werde dann eine neue Version machen.

Geplant ist auch, dass das Fallbackbild dann nur 1 mal im Modul direkt
ausgwählt wird.

lg Matthias

hallo mathias,
ich habe ein problem mit der erweiterung in contao 3.0.1. ,soweit alles nach anleitung gemacht, in einer früheren version hat es ja auch funktioniert. jetzt habe ich das problem, dass ich kein fullsize bg modul erstellen kann. trotz des imports wird mir die option nicht angeboten. hast du es in der version schon mal erprobt? gibt es eine lösung?
grusz
hamlet

Mein Modul ist nicht 3.x kompatible.
Das mache ich erste wenn ich die Version für 2 Stable habe
und alle Funktionen eingebunden sind.
Am besten du schaust dir auf Wiki meinen Beitrag an.
Und baust es mit einem fertigen Modul auf (page_image... eines das für Contao 3 freigeben ist)

Bis wann ich für 3.x mache, weiß ich noch nicht.

lg Matthias

Zitat:

---

Zitat von Messa

Kann es sein, dass deine anderen Sachen auch einen Z-index haben?

---

Hallo Messa

Habe bislang immer mit Erfolg deine Anleitung im Wiki für die Fullsize Backgrounds verwendet. Auf einer Seite hatte ich jetzt aber mit dem IE8 das Problem, dass das Hintergrundbild einen Teil der restlichen Elemente überdeckt hat. Ich hab dann das neue Modul installiert, alles Alte gelöscht. Nope. Dann habe ich von Hand den z-Index von -1 auf -10 geändert und siehe da: Jetzt funzt es auch im IE8 so, wie es sollte. Warum oder wieso, keine Ahnung. Ich hab immer alles so gemacht wie es im Wiki steht und z-Index habe ich auch sonst nie gebraucht. Vielleicht macht der IE selbst irgendwas in die Richtung, beim Aufbau der div-Elemente?

Achja zur Info: Läuft unter 2.11.7 :-)

hey tinoo.

Danke fürs testen ;)
Könnt es eventuell sein, das was überdeckt worden ist.
einen Z-index von mehr als -1 hat?
Es ist so eingerichtet oder gedacht, von mir :)
Background -1
Ebene: 0
Ebene2: 1
und dann immer so weiter.

Ich mach das immer so. Verwende auch nie so krasse Z-indexe wie 100000 :)
Aber kann es gerne im CSS auf -100 stellen, dann sollte so was nicht mehr passieren :)

lg

Hoi Messa

Du, keine Ahnung. Ich habe nicht willentlich oder wissentlich irgendwas geändert. Und bislang
hat die Seite immer funktioniert. Letzthin hab ich dann das Update auf 2.11.7 gemacht - und
heute hat mir ein User geschrieben dass man den Text nicht mehr lesen kann, auf dem dunklen
Hintergrund. Ich hab mich dann gewundert...

Komischerweise habe ich auf einer zweiten Seite mit dem IE kein Problem - obwohl auch 2.11.7
läuft. An Contao liegt es also wohl nicht...

Ich würde -1 lassen. Funktioniert ja normalerweise auch. Aber vielleicht ein Hinweis im Wiki oder
im "Handbuch" der neuen Erweiterung? Oder eine Option in den Einstellungen des Moduls? ;-)

Oky ja ist notiert :)
Es werden immer mehr sachen für die Stable version :)

lg

Hallo,
die Erweiterung funktioniert super (Version 2.11.6).
Ich möchte jedoch die Opacity Diskussion nochmal aufgreifen.
Man muss dazu sagen: Ich bin kein Programmierer! :(
Ich möchte trotz dieser mir fehlenden Eigenschaft die Transparenz einstellen, ABER: Ich weiß nicht wie und wo!
Ich finde die Lösung wie in der ersten Beschreibung gepostet http://www.we-are.cc/ unglaublich elegant. Vielleicht ein bißchen zu viel Transparenz, aber vom Grundgedanken her, echt super!
Mir würde aber auch erstmal eine Transparenz von 90% auf alles außer den Hintergrund reichen.
Wie kann ich dies erreichen? Wo muss ich den Befehl einbauen? Wird rgba von allen Browsern ausgeführt?
Danke für eure Unterstützung!
Keith

Ich habe eine Lösung gefunden indem ich die Bilder selbst bearbeite und diese als png transparent abspeichere....
zumindest funktioniert es.

:cool:

Hallo messa,
danke für diese geniale Erweiterung!
Daumen hoch!

Hallo messa,
danke für diese Erweiterung. In 2.11.11 funktioniert sie soweit - aber erst, nachdem ich die Anleitung gelesen habe... ;-)
Kleines Problem: Das Hintergrundbild füllt nicht den kompletten Bildschirm aus, sondern hat oben 15 pixel Rand - und links und rechts je 40 pixel Rand.
Das Bild skaliert offensichtlich von 1800 auf 1840 pixel, aber nicht auf die komplette Bildschirmbreite (1920 pixel, Mac, Firefox 22.0).

Hast du bzw. jemand eine Idee, woran das liegen könnte?

Mein Bild ist 1800 x 1600 pixel groß.
Gibt es eine bestimmte Postion, an der man das Modul im Seitenlayout einfügen muss? An erster Stelle? In der Kopfzeile/Fusszeile/Hauptspalte? Egal? (aktuell habe ich es an erster Stelle, in der Kopfzeile)
Ich habe nur moo_analytics aktiviert - werden noch andere Templates benötigt?
CSS und JS sind im Quellcode vorhanden.

Beispiel - Seite noch in Arbeit: http://www.rosenrot.net/startseite.html

Das liegt am Browser-Stil zu figure um das Bild. Mach auf figure ein padding + margin 0 und alles ist gut. :)

Danke Dirch für den Tipp, funktioniert!
Hätte ich auch selbst drauf kommen können... :o