Hallo, ich bastel bereits eine Weile mit dem MoziloCMS herum und viele Dinge gefallen mir besser als bei einer statischen HTML Homepage. Allerdings bin ich noch nicht CMS fit!
Eine Frage am die Profis: Wie implementiert man eine Slideshow wie es viele Websiten oben in den Header haben statt dem vorhandenem statischem Headerbild.
Ich habe als Beispiel für das Headerbild im Templetscript style.css das betreffende Element herausgepickt.
/* Kopfbereich (Headerbild) */
.tg-header {
background-image:url('../grafiken/grafikname.jpg');
background-repeat:no-repeat;
height:240px;
}
An dieser Stelle würde ich gern einen Slider wie zum Beispiel WOWslider ablaufen lassen und scheiter. Im HTML bekomme ich es gebacken, im CMS leider nicht.
viele Grüße romanusko
Willkommen im Forum!
Wie bindest Du die Slideshow denn in der statischen HTML-Seite ein? Und wie im CMS?
Gibt 's Links?
Grüße!
djr
Der Slider liegt in einem Ordner, er auf mehreren Unterordnern besteht. In diesem Ordner befindet sich eine index.html. Diese Index habe ich mittels Iframe
<iframe src="./index.html" width="750" height="300" name="Galerie"></iframe>
eingebunden. Geht.
Bestimmt ist das total einfach im CMS System, weiß nur nicht wie. Wichtig, ich möchte es oben im Header haben und nicht als Slidegalerie mittels Slidebox in einer Inhaltsseite.
Generell gilt: Wenn du Elemente global (also nicht inhaltsseitenspezifisch) einbinden möchtest, wie z.B. im Header, dann kannst du das am einfachsten in der template.html des von dir genutzten mozilotemplates machen. Das liegt unter /layouts/dein-template/template.html.
Im Prinzip ist das auch nur eine HTML Datei, die von Mozilo geparst wird. Da kannst du in den Header deine Slideshow einfügen.
Du weißt, dass es auch mozilo Plugins für slideshows gibt? -> schöner als ein iframe...
lg, HPdesigner
slimbox und wsslider kenn ich als mozilocms Plugin. Diese implementiert man ja auf einer Inhaltsseite. Ich möche es oben im Header haben. Wie es auf vielen Businessseiten heute üblich ist, fliegen dort 4, 5, 6 Banner ein mit kurzer Beschreibung. So möchte es es haben. Ich versuche es mal im genanntem template.html
Zitat von: romanusko am 30. August 2013, 11:52:26Diese implementiert man ja auf einer Inhaltsseite.
Du kannst sie auch in der template.html implementieren. Was theoretisch auch möglich ist, dass du dein Sliderplugin auf einer versteckten Inhaltsseite (zB mit dem Namen "Header") implementierst, und dann im Template im Header Container
[include|Kategorie:Header] setzt. Damit sollte das Plugin dann im Header eingebunden sein und du kannst es zusätzlich noch übers Backend bearbeiten.
Da ich ewig nicht mehr hier war, frage ich lieber mal nach, ob sich das mit der Slideshow inzwischen erledigt hat. Ansonsten hätte ich da ein schlankes Script und die entsprechende Mozilo-Anpassung. Zu sehen ist das hier: http://www.motourist.de (http://www.motourist.de) Bei Interesse würde ich das Ganze mal posten.
Nachtrag: Ich arbeite immer noch problemlos mit moziloCMS 1.12.beta3. Alle Nachfolger haben mir nur die Seite zerschossen. Wahrscheinlich hatte ich schon zuviel geschraubt ;)
Servus Supercat,
als ich das Gesicht gesehen hab, war der erste Gedanke: schon lange nicht mehr gesehen :D
Eine Slideshow im Header oder sogar als Hintegrund komplett geht, zumindest unter moziloCMS 2.0 mit dem jQbackstretch Plugin (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=199) sowie mit dem coinSlider Plugin (http://www.mozilo.de/forum/index.php?action=media;sa=item;in=220), welches in der template.html eingebunden werden kann. Auf gleiche Art wie zwei Posts weiter oben beschrieben:
Zitat von: HPdesignerDu kannst sie auch in der template.html implementieren. Was theoretisch auch möglich ist, dass du dein Sliderplugin auf einer versteckten Inhaltsseite (zB mit dem Namen "Header") implementierst, und dann im Template im Header Container setzt. Damit sollte das Plugin dann im Header eingebunden sein und du kannst es zusätzlich noch übers Backend bearbeiten.
[include|Kategorie:Header]Grüße Rainer
jQbackstretch und coinSlider hatte ich mir schon angeschaut. Ohne Frage schöne Sachen, aber halt nicht ganz das, was ich wollte. Mein kleines Script reicht da. Ist womöglich ein total abgespeckter coinSlider ;) Das Einbinden ist auch nicht der Hammer. Was mich verzweifeln lässt ist, dieser Slide-Show-Header soll nur auf der Startseite laufen. Auf den Unterseiten soll wieder ein schlichtes Top-Bild erscheinen. Ich komme da einfach nicht voran und habe jetzt mal einen Thread (http://www.mozilo.de/forum/index.php/topic,3552.0.html) dazu aufgemacht. Ein Template - zwei Header 8)
Hallöchen!
Nachdem ich nun auch mal ein Headerbild mit einer Slideshow ersetzen wollte, versuchte ich das wie oben beschrieben mit jQbackstretch zu erreichen. Aber leider klappt es nicht auf Anhieb, die Slideshow ist als Hintergrund zu sehen und nicht im Header.
Ich hatte das Plugin installiert, die Galerie angelegt, dann eine versteckte Seite angelegt und dort das Plugin eingetragen:
{jQbackstretch|@=header=@}
In der template.html habe ich es so reingesetzt:
<!-- Kopfgrafik, Logo, Slogan -->
<header>
[include|@=Willkommen=@:Header]
<!-- beginn Seitentitel, Logo -->
<div id="sb-titel">
<img src="{LAYOUT_DIR}/grafiken/logo.png" width="329" height="100" alt="Logo" />
</div>
<!-- ende Seitentitel -->
</header>
Was habe ich da wieder falsch gemacht, dass es nicht im Header erscheint?
Viele Grüße!
Ein kleiner Spitz. Ich bin hin und weg :D Das Bild muss ich gleich meinen zwei Wolfsspitzen zeigen.
Aber zur Frage: Womöglich machst Du Dir es viel zu kompliziert. Ich habe einmal im Header der Template-Datei stehen:
<!-- Slideshow-Banner -->
<link rel="stylesheet" href="layouts/ein_verzeichnis/css/slideshow.css">
<script type="text/javascript" src="layouts/ein_verzeichnis/css/slideshow.js"></script>
<!-- /Slideshow Banner -->
Und dann habe ich im Body zwischen Maincontent und Mainmenu Folgendes eingebaut:
<div class="main">
<div class="maincontent">
<div class="banner_a">
<div class="banner_b">
<div id="slideshow">
<img class="start" src="layouts/ein_verzeichnis/bilder/image-001.jpg" /></div><br />
</div>
<div class="banner_logo">
<img src="layouts/ein_verzeichnis/grafiken/banner.png" alt="banner"><br>
</div>
</div>
<div class="mainmenu">...
"ein_verzeichnis" steht natürlich für das entsprechende Layout-Verzeichnis. Der Aufbau des Bodys kann sich je nach genutztem Layout etwas unterscheiden. Um die Slide-Bilder im Bedarfsfall schnell austauschen zu können, habe ich das Verzeichnis "Bilder" angelegt. Das Verzeichnis "Grafiken" ist ehedem schon da. Der hier beschriebene Weg ist halt der einfache Weg.
Das Plugin habe ich noch nicht ausprobiert. Doch wie eigentlich fast jedes Plugin funktioniert es womöglich NUR in einer Inhaltsseite und nicht in der Template-Seite. Deshalb siehst Du es als Hintergrund. Die Template-Datei ist ja das Grundgerüst Deiner Seite. Dieses durch eine untergeordnete Inhaltsseite zerstören zu wollen, wäre unlogisch.
Hi Marlis,
das Plugin jQbackstretch ist für ein Hintergrundbild bzw. eine Hintergrundslideshow gedacht.
Wenn Du eine Slideshow für den Header möchtest, dann ist das Plugin coinslider das richtige. Das fügst Du in der template.html ein:
<!-- Kopfgrafik, Logo, Slogan -->
<div id="header">
{coinSlider|@=slider=@|980|250|8|3|6000|30|0.7|500|rain|true|false|false}
<!-- beginn Seitentitel, Logo -->
<div id="titel">
<!-- Hier kann ein Bild oder Text (z.B. mit <h1>Seitentitel</h1>) eingefügt werden -->
<img src="{LAYOUT_DIR}/grafiken/logo.png" width="329" height="100" alt="Logo" />
</div>
<!-- ende Seitentitel -->
</div>
<!-- ende Kopfgrafik, Logo, Slogan -->
Der <div id="titel"> schiebt sich dann unter die Slideshow. Du kannst diesen weglassen (auskommentieren oder löschen), oder Du platzierst ihn mit position:absolute; da wo Du ihn haben möchtest. In letzterm Fall solltest Du dem header noch ein position:relative; verpassen.
Den coinslider kannst Du über die css dann noch deinen Vorstellungen anpassen. Ein Beispiel mit dem coinslider im Einsatz ist traumhunde.bplaced.net/ (http://traumhunde.bplaced.net/)
@ Supercat: Ich danke dir für deine Antwort und Hilfe. Ich würde es aber doch lieber mit einem Plugin hinbekommen. Für mich ist das dann irgendwie einfacher. Falls du noch mehr Zwergenbilder sehen möchtest, hier ist Glorys HP, natürlich auch eine mozilo-Seite: www.pomeranianzwergspitz.de (http://www.pomeranianzwergspitz.de)
@ dummwiebrot: Ich danke auch dir wieder einmal mehr für deine Hilfe! Ich dachte, ich bekomme das mit jQbackstretch hin, weil es ja auch in der Beschreibung stand. Ich habe es nun aber mit deiner Unterstützung mit dem Coinslider versucht und es klappt auch! Aber könntest du mir vielleicht bitte noch verraten, wie du die Punkte, die eigentlich immer unter der Show sind, hoch ins Bild verlegt hast? Denn drunter stören sie irgendwie. Eigentlich müsste man die gar nicht sehen.
Ganz liebe Grüße!
Ich habe nun den Teil mit der Bildbeschreibung und mit den ovalen Button aus der plugin.css entfernt und nun sind die Button ganz weg. Die werden ja auch da nicht gebraucht. Aber ich hatte die Stelle nicht gefunden, wo man sie weiter nach oben bekommt, naja, meine Unfähigkeit wieder, grins.
Hallo Marlis und Dummwiebrot,
die Übung meines Sliders bestand bzw. besteht darin, dass er nur auf der Startseite erscheint. Der Coinslider ist nach der hier genannten Verfahrensweise auf jeder Seite zu sehen. Auf den Unterseiten würde mich ein Slider aber stören. Wer auf eine Unterseite geht, braucht dann diesen Hingucker nicht mehr. Der will bestimmte Informationen lesen. Ist zumindest meine Auffassung. Außerdem macht das die Web-Seite insgesamt "schwerer", wenn auf jeder Seite der Slider geladen wird. Aber das ist am Ende alles Geschmackssache ;)
PS: Mann oh Mann, Dummwiebrot, wie kommt man denn auf so einen Nickname :mrgreen:
Hallo Supercat,
ja, da hast du Recht, ich habe auch ein Problem, dwb mit diesem Namen anzusprechen, weil er ja ganz und gar nicht der Wahrheit entspricht!!!
Auch hast du damit Recht, dass ja auch vielleicht mal so eine HP erstellt werden soll, wo nur die Home-Seite diesen Slideshow-Header erhält. Und das wäre dann bei deinem Bespiel der Fall? Das kann ich mir gar nicht so richtig vorstellen, weil man ja auch die template.html ändert.
Dann muss ich aber noch mal nachfragen. Braucht man dann dafür nicht noch ein Plugin oder eine Datei, welches die Slideshow dann erstellt und steuert?
Viele Grüße
Die Zugabe der DIV-ID(!!!!) hätte gereicht...
wie -explizit- beschrieben. Lest bitte GENAU (!)
http://www.mozilo.de/forum/index.php/topic,3448.msg16820.html#msg16820 (http://www.mozilo.de/forum/index.php/topic,3448.msg16820.html#msg16820)
Also: Ggf. deklarieren oder simpel als Parameter übergeben.
Hallo wasp, Danke für den Rüffel! Ich habe nun erst mal eine Slideshow mit diesem Plugin auf eine Inhaltsseite bekommen.
Mit dem Header habe ich es noch nicht wieder probiert.
Zitat von: wasp am 05. Juni 2014, 00:18:20
Das kann ich so nicht stehenlassen: BLÖDSINN!
ALLE hier sind sooo schlau ... Dabei hätte die Zugabe der DIV-ID(!!!!)
gereicht... wie -explizit- beschrieben. Lest bitte GENAU (!)
http://www.mozilo.de/forum/index.php/topic,3448.msg16820.html#msg16820 (http://www.mozilo.de/forum/index.php/topic,3448.msg16820.html#msg16820)
Also: Ggf. deklarieren oder simpel als Parameter übergeben.
Die Beschreibung im Plugin ist diesbezüglich etwas umständlich. In dem von Dir verlinkten Thread kommt es verständlicher rüber, aber ich gebe zu, dass ich nicht erst das Forum durchsucht habe bevor ich hier geantwortet habe.
ZitatAber könntest du mir vielleicht bitte noch verraten, wie du die Punkte, die eigentlich immer unter der Show sind, hoch ins Bild verlegt hast? Denn drunter stören sie irgendwie. Eigentlich müsste man die gar nicht sehen.
Ja, kann ich. Du kannst das in der style.css des Layouts machen:
.cs-buttons {
position : absolute !important;
bottom : 5px !important;
}oder direkt in der css-Datei des Plugins, dort ist das "!important" nicht notwendig.
Du kannst sie auch mit
display:none; direkt ausblenden.
ZitatPS: Mann oh Mann, Dummwiebrot, wie kommt man denn auf so einen Nickname
Vor ein paar Jahren hab ich mal in einem relativ neuen Reichshuber-Forum den Admin verbal auseinander genommen. Als ihm die Argumente ausgingen wurde ich erst für blöd erklärt und als das nix half durfte man nur noch nach Registrierung posten. Natürlich hab ich mich angemeldet und für dieses Forum erschien mir der Nick passend.
Als ich dann später, bei der Registrierung in einem Hundeforum das fünfte mal mit "Dieser Name ist leider schon vergeben" genervt wurde, hab ich leicht frustriert einfach dummwiebrot angegeben, und der war noch frei. Seitdem nutze ich diesen Nick und musste das nervige "leider schon vergeben" nicht mehr lesen.
@dwb: Thumbs up
Zitat von: supercat am 04. Juni 2014, 17:15:44
Hallo Marlis und Dummwiebrot,
die Übung meines Sliders bestand bzw. besteht darin, dass er nur auf der Startseite erscheint. Der Coinslider ist nach der hier genannten Verfahrensweise auf jeder Seite zu sehen. Auf den Unterseiten würde mich ein Slider aber stören. Wer auf eine Unterseite geht, braucht dann diesen Hingucker nicht mehr. Der will bestimmte Informationen lesen. Ist zumindest meine Auffassung. Außerdem macht das die Web-Seite insgesamt "schwerer", wenn auf jeder Seite der Slider geladen wird. Aber das ist am Ende alles Geschmackssache ;)
Ich hab grad mal ein wenig rumprobiert. In Verbindung mit dem Plugin Flexsidebar bekommt man es auch mit Coinslider und jQbackstretch hin.
Das eigentliche Headerbild ist über die style.css als background-image eingebunden und {FLEXSIDEBAR|sb1_} ist in der template.html im header als Platzhalter eingetragen.
In einer versteckten Inhaltsseite
sb1_Willkommen wird das gewünschte Plugin für den Slider eingetragen. Der Slider wird dann nur auf der Seite Willkommen angezeigt.
Hallöchen dwb :)
Das wollte ich nun auch mal ausprobieren, aber leider klappt es noch nicht.
Ich habe in der Kategorie Willkommen eine versteckte Seite sb1_Willkommen angelegt. Dort steht der Coinslider folgendermaßen drin:
{coinSlider|@=header=@|960|280|10|4|6000|30|0.0|500|rain|true|false|false}
In der template.html steht das:
<!-- Kopfgrafik, Logo, Slogan -->
<div id="header">
{FLEXSIDEBAR|sb1_Willkommen}
</div>
<!-- ende Kopfgrafik, Logo, Slogan -->
Das müsste doch eigentlich so ein, wie du es beschrieben hast. Nur weiß ich nicht, wie genau es bei der css reingesetzt wird. Ich denke, der Fehler liegt evtl. daran. Zur Zeit wird kein Header angezeigt.
So sieht das zur Zeit bei mir aus. Es ist ja kein Bild sondern eine Galerie, die angezeigt werden soll. Wie setzt man die dann da rein?
/********************** Layout-Hintergrund(bilder) ****************************/
body { background : #f1f1f1 url('../grafiken/bodybg.jpg') repeat-x top center;; }
header { background : transparent; }
nav { background : transparent; }
footer { background : transparent url('../grafiken/footer.png') repeat-x center center; }
/******************************* LAYOUT ***************************************/
.
.
.
.
/*** Header ***/
header
{margin : 0 auto;
width : 960px;
height : 280px;
border-bottom : 4px double #bdbdbd;
}
Liebe Grüße
Hi,
Zitat von: glory am 05. Juni 2014, 19:20:39
Ich habe in der Kategorie Willkommen eine versteckte Seite sb1_Willkommen angelegt. Dort steht der Coinslider folgendermaßen drin:
{coinSlider|@=header=@|960|280|10|4|6000|30|0.0|500|rain|true|false|false}
Das ist schon mal richtig. Ich gehe davon aus dass die Galerie wo die Bilder für den Header drin sind header heist.
Übrigens unter http://devmount.de/Develop/moziloCMS/Plugins/coinSlider.html (http://devmount.de/Develop/moziloCMS/Plugins/coinSlider.html) findest Du eine Auflistung der Parameter. Also die Bedeutung der ganzen Werte zwischen den senkrechten Strichen.
Zitat von: glory am 05. Juni 2014, 19:20:39
In der template.html steht das:
<!-- Kopfgrafik, Logo, Slogan -->
<div id="header">
{FLEXSIDEBAR|sb1_Willkommen}
</div>
<!-- ende Kopfgrafik, Logo, Slogan -->
Fast richtig. In der template.html kommt nur
{FLEXSIDEBAR|sb1_} rein.
Zitat von: glory am 05. Juni 2014, 19:20:39
Das müsste doch eigentlich so ein, wie du es beschrieben hast. Nur weiß ich nicht, wie genau es bei der css reingesetzt wird.
In der css musst Du nur das übliche statische Headerbild eintragen, das auf allen anderen Seiten angezeigt wird, wo der Slider nicht zu sehen ist.
Ich hab zu Demozwecken in meiner Layoutvorschau (http://moz2layouts.bechti.de) mal für die beiden Layouts gray_0 und gray_1 mit dem Coinslider bzw. jQbackstretch auf der Startseite den Header durch einen Slider ersetzt.
Prima!!! Danke!!! Nun habe ich es, wie ich es will!!!
Ich war schon erschrocken, als du schriebst, dass ich auf den anderen Seiten das normale Headerbild reinsetzen muss. Ich wollte es ja so haben, dass da gar kein Header zu sehen ist. Ich habe dann nur, wie du geschrieben hattest, das auf der template.html geändert und habe mal nachgesehen, ob die Show auf der Willkommens-Seite zu sehen ist und wie es auf den Folgeseiten aussieht. Ob da nun vielleicht ein freies Feld ist, wo der Header ist. Aber nein, der Inhalt war nach oben gerutscht, wie ich es eigentlich auch haben wollte! Freu!
Danke auch für den Hinweis betr. Beschreibung Coinslider. Die hatte ich schon gefunden und kam auch gut mit den Parametern zurecht. Bei diesem Plugin ist alles sehr gut und auch für mich verständlich beschrieben. Auch wie du das alles immer erklärst, ist sehr gut zu begreifen!!! Ich denke, du wärst eine sehr gute Lehrerin geworden! Oder bist du vielleicht eine eine? ;)
Auf alle Fälle habe ich wieder mal etwas dazugelernt!
Liebe Grüße!
Hallo Leute,
ich bin noch ein Frischling in diesem Forum und fange auch gerade erst an mich mit dem Thema CSS zu beschäftigen. Ich mir moziloCMS mal installiert und bin total positiv überrascht.
Ich habe mir das gray_0 Template geholt und schon einiges ausprobiert. Was ich aber nicht zufriedenstellend hinbekomme ist der Slider im Header. Der soll nämlich so ausschauen wie in der gray_0- Demo unter http://moz2layouts.bechti.de/Willkommen/Willkommen.html?layout=gray_0. (http://moz2layouts.bechti.de/Willkommen/Willkommen.html?layout=gray_0.)
Hab alles so gemacht wie im Forum beschrieben. Der Slider funktioniert auch. Aber ich habe zwei Sachen wo ich einfach nicht weiterkomme.
1. Der Slider ist nicht an der richtigen Position und man erkennt die Standardgrafik (die auch auf den restlichen Seiten angezeigt wird) im Hintergrund. Kann das auch an den Bedienelementen des Sliders liegen? Wie und was muss ich da alles abschalten.
2. Das Logog das übe dem Slider liegen sollte rutscht unter den Slider. Muss ich da in der template.html für das Logo was ändern?
Grüße aus Mittelfranken!
Hallo,
ihr könnt euch die Mühe sparen auf meine letzten Fragen zu antworten. Habe es selbst lösen können. Hartnäckigkeit hilft halt doch meistens und was über CSS gelernt!
Mann oh Mann. Diesen Thread habe ich erst jetzt wieder entdeckt. Nur mal so: Schön, dass du eine Lösung gefunden hast. Noch schöner wäre, wenn Du sie hier allen mitteilen würdest. Es möchte ja jeder etwas lernen, oder?