Template Slider als Keyframe-Animation mit CSS3

  • Hallo
    Ich habe viel geggoogelt dance
    und habe das gefunden:

    http://ebene11.com/slider-als-…e-animation-mit-css3.html

    Im unteren Teil stehen die Dateien html und css


    Möchte diese einbaun und meine Fragen sind ....


    - Das was in der html Datei steht, soll in den Template index.html eingefügt werden ?
    - Das was in der css Datei steht
    , soll in den Template/CSS template.css eingefügt werden ?
    - Funktioniert das mit Joomla ?


    -

  • Das was in der html Datei steht, soll in den Template index.html eingefügt werden ?


    Joomla verwendet keine index.html fürs Template.
    Aber in ein Benutzerdefiniertes Modul könnte man das einbauen.

    Das was in der css Datei steht, soll in den Template/CSS template.css eingefügt werden ?


    Das ist eine von mehreren Möglichkeiten.

    Funktioniert das mit Joomla ?


    Ja!

  • Module > Neu > Benutzerdefiniertes Modul!


    ok :DVielenDank. Ich beisse mich noch durch Jommla durch
    Achso.. und unter Werkzeug Quellcode, ist dann der Inhalt was in der html Datei auf der Seite steht?
    So füge ich also html Cods & andere ein chinese und es ist übersichtlich chinese
    und natürlich der Template zuweisen vain


    Bei der CSS Datei, ist es ratsamm eine neue anzulegen (mit dem Inhalr der CSS Datei) ?


    Und dann sollte es funktionieren, wenn die Quelltexte stimmen ? hmm


    RICHTIG ?

  • Hallo,


    aber aufpassen, dass bei dem verwendeten Editor nicht html-Code wieder bereinigt wird.
    Wenn Du weißt, wie man eine zusätzliche CSS-Datei einbindet, ist das ein guter Ansatz,
    aber evtl. existiert bereits eine Datei namens custom.css, die in der Regel für Anpassungen gedacht ist.
    Man kann das CSS auch in einer CSS-Datei anhängen, wenn man entsprechend kommentiert und die Anweisungen sich nicht mit den anderen "ins Gehege kommen".


    Christian

  • aber aufpassen, dass bei dem verwendeten Editor nicht html-Code wieder bereinigt wird.


    Dankeschön für die Antworten 8o
    Warum tut er das denn, der Schlingel. Sehe ich das wenn es leer ist?


    Wenn Du weißt, wie man eine zusätzliche CSS-Datei einbindet, ist das ein guter Ansatz,


    Weiss ich noch nicht, aber bald ;) oder kannst du es mir kurz schreiben, bevor ich google frage


    aber evtl. existiert bereits eine Datei namens custom.css, die in der Regel für Anpassungen gedacht ist.


    Im Template Ordner nehme ich an


    Danke im Voraus
    Ich heisse auch Christian :D

  • Hallo Namens Bruder :D Danke


    Wenn ich die Datei, im CSS Ordner reinschupse, sieht das Jommla nicht?


    Benutze die Template von siteground-j16-41.zip.
    In der Datei templateDetails.xml wird der Ordner ja zugewiesen
    <folder>css</folder>


    Christian

  • Habe bei der Index.php das gefunden


    <head>
    <jdoc:include type="head" />
    <!-- The following line loads the template CSS file located in the template folder. -->
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />


    Muss ich die Zeilen kopieren und die neue CC Datei einschreiben ?


    <head>
    <jdoc:include type="head" />
    <!-- The following line loads the template CSS file located in the template folder. -->
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/background.css" type="text/css" />

  • ebene11.com/slider-als-keyframe-animation-mit-css3.html


    Hat das mit dem schon jemand hier getestet?


    Ok, das mit der Neuen CCS Datei hat so funktioniert . Danke Namensbruder beer
    Hier eine kurze Anleitung zum erstellen einer neuen CCS Datei


    1. im Ordner Template/CSS/ , die templates.css einfach kopieren, mit dem Namen z.B background.css
    2. mit dem Editor z.B Notepad++ öffnen & die oberen Zeilen mit * drinne lassen und das drunter entfernen
    3. Nun unter den Zeilen mit * das einfügen was man ändern möchte z.B
    .page_bg{background:url(../images/Hintergrundbild5.gif) repeat-x scroll center top #889699}
    .page_bg{background-size: 100% 100%}
    Diese Zeilen natürlich aus der Datei templates.css entfernen, da sie ja in der neuen CCS Datei übernommen werden.


    4. Jetzt noch in der index.php einbinden
    mit dem Editor z.B Notepad++ öffnen & diese Zeile kopieren, drunter einfügen & den neuen Namen eingeben
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />


    dann sieht es so aus

    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/background.css" type="text/css" />


    5. - Testen kann es übern Browser z.B Firerfox (Webseite aufrufen) über Extras > Web-Entwickler (Tasten Strg+Umschalt+c) > Silbearbeitung
    Da sollte dann lings, die neue CSS Datei drinne stehen.
    - Testen kann man es auch, wenn man übern Browser z.B Firerfox die Webseite geöffnet hat und er führt die Regel der neuen CCS Datei aus ;)

  • ebene11.com/slider-als-keyframe-animation-mit-css3.html


    Habe es hinbekommen, aber leider kriege ich es nicht als Hintergrundbild eingestellt.
    Ich nehme an, das ich im Modul, die Position für den Hintergrund nicht wählen kann.


    Den html Code habe ich so eingefügt:


    Erweiterung > Module > Neu > Benutzerdefiniertes Modul
    - Werkzeuge > Quelltext (Code)
    - Kann man Cods z.B html einfügen & wenn dieser Richtig ist, wird er im Editor angezeigt


    Kriege es unter Positionen nicht als als Hintergrundbild eingestellt.
    Kann jemand helfen bitte hmm

  • Zitat

    Kann man Cods z.B html einfügen & wenn dieser Richtig ist, wird er im Editor angezeigt


    Im Prinzip ja. Warum bekommst du es nicht als Hintergrundbild eingestellt? Ist der Slider als solcher im Quelltext sichtbar und erscheinen nur die Bilder nicht? Dann ist wohl der Pfad zu den Bildern falsch. Bist du online, damit man das sehen kann?

  • Hi, Danke für die Hilfe
    ja bin mit Test seite www.mansieht.eu Online dance
    Slider funktioniert nur nicht im Hintergrund.
    Ich muss ja im Modul die Position vergeben und kann die nicht als Hintergrund setzen.
    Habe es auch mit einer andern Template versucht. Das selbe Ergebnis.
    CSS (im Template/CSS) und html Code (im Modul) habe ich übernommen und nur den Pfad für Bilder geändert.

    ebene11.com/slider-als-keyframe-animation-mit-css3.html


    Weiter unten sind die kompletten Dateien

  • Du könntest dein Template mit ein paar Kniffen anpassen.


    Lege in der index.php eine Modulposition unterhalb des body-Tag an.


    <jdoc:include type="modules" name="hintergrund" style="none" />


    Sorge dafür, dass das Modul über den ganzen Hintergrund gestreckt wird, setze dafür die Modul-Suffix-Klasse im Modul auf " hintergrund". Sorge dafür, dass body keinen background bzw. keine Hintergrundfarbe hat und im CSS auf min-height: 100% gesetzt wird.


    Hier das CSS für den Hintergrund:


    Code
    .hintergrund {
      position:fixed;
      left:0px;
      top:0px;
      bottom:0px;
      right:0px;
      z-index:-1;
    }


    Bei Hintergrund-Bildern muss man noch mit background-size: cover; nachhelfen.

  • Ok, ich habe in der index.php die Zeilen, für die Position kopiert.


    <?php if( $this->countModules('position-7') ) : ?>
    <div class="leftcol">
    <jdoc:include type="modules" name="position-7" style="rounded"/>
    </div>
    <?php endif; ?>
    <div class="cont">
    <jdoc:include type="message" />
    <jdoc:include type="component" />
    </div>


    und den Inhalt " name="position-7" style="rounded"/>
    in " name="Hintergrund" style="none"/> geändert.


    Es wird mir aber keine Position Hintergrund im Modul angezeigt :S

  • Ok muste noch Position in der templateDetails.xml einfügen
    <positions>
    <position>hintergrund</position>
    Jetzt wird mir der Bericht im Hintergrund angezeigt hmm
    Denke ma das ich noch was in der Index.php ändern muss, aber was


    Diese sieht nun so aus
    <?php if( $this->countModules('hintergrund') ) : ?>
    <div class="leftcol">
    <jdoc:include type="modules" name="hintergrund" style="none" />
    </div>
    <?php endif; ?>

    <div class="hintergrund">
    <jdoc:include type="message" />
    <jdoc:include type="component" />


    Wo ist der Fehler? in den letzen 2 Zeilen ?

  • Na endlich :thumbup: nach mehreren Kopfgrübbeln hab igs hinbekommen
    Wie vermutet lag es an den letzen 2 Zeilen
    Hier nochmal die funktionierende index.php


    <?php if( $this->countModules('hintergrund') ) : ?>
    <div class="leftcol">
    <jdoc:include type="modules" name="hintergrund" style="none"/>
    </div>
    <?php endif; ?>

    <div class="hintergrund">
    <jdoc:include type="modules" name="hintergrund" />

    </div>