neues Onepage-Template: fhs-sectionsOP - Tester?

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
knollsen
Posts: 382
Joined: Wed Nov 06, 2013 2:28 pm

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by knollsen » Wed Oct 06, 2021 5:58 pm

Habs schnell mal für tinymce5 gemacht. Einfach die Zeile

Code: Select all

"style_formats": [{"title": "Special Classes","items": [{"title": "Lightbox", "selector": "a", "classes": "zoombox"}]},{"title": "Animation Classes","items": [{"title": "Attention Seekers","items": [{"title": "bounce", "selector": "*", "classes": "ani_bounce"},{"title": "flash", "selector": "*", "classes": "ani_flash"},{"title": "pulse", "selector": "*", "classes": "ani_pulse"},{"title": "rubberBand", "selector": "*", "classes": "ani_rubberBand"},{"title": "shake", "selector": "*", "classes": "ani_shake"},{"title": "swing", "selector": "*", "classes": "ani_swing"},{"title": "tada", "selector": "*", "classes": "ani_tada"},{"title": "wobble", "selector": "*", "classes": "ani_wobble"},{"title": "jello", "selector": "*", "classes": "ani_jello"}]},{"title": "Bouncing Entrances","items": [{"title": "bounceIn", "selector": "*", "classes": "ani_bounceIn"},{"title": "bounceInDown", "selector": "*", "classes": "ani_bounceInDown"},{"title": "bounceInLeft", "selector": "*", "classes": "ani_bounceInLeft"},{"title": "bounceInRight", "selector": "*", "classes": "ani_bounceInRight"},{"title": "bounceInUp", "selector": "*", "classes": "ani_bounceInUp"}]},{"title": "Bouncing Exits","items": [{"title": "bounceOut", "selector": "*", "classes": "ani_bounceOut"},{"title": "bounceOutDown", "selector": "*", "classes": "ani_bounceOutDown"},{"title": "bounceOutLeft", "selector": "*", "classes": "ani_bounceOutLeft"},{"title": "bounceOutRight", "selector": "*", "classes": "ani_bounceOutRight"},{"title": "bounceOutUp", "selector": "*", "classes": "ani_bounceOutUp"}]},{"title": "Fading Entrances","items": [{"title": "fadeIn", "selector": "*", "classes": "ani_fadeIn"},{"title": "fadeInDown", "selector": "*", "classes": "ani_fadeInDown"},{"title": "fadeInDownBig", "selector": "*", "classes": "ani_fadeInDownBig"},{"title": "fadeInLeft", "selector": "*", "classes": "ani_fadeInLeft"},{"title": "fadeInLeftBig", "selector": "*", "classes": "ani_fadeInLeftBig"},{"title": "fadeInRight", "selector": "*", "classes": "ani_fadeInRight"},{"title": "fadeInRightBig", "selector": "*", "classes": "ani_fadeInRightBig"},{"title": "fadeInUp", "selector": "*", "classes": "ani_fadeInUp"},{"title": "fadeInUpBig", "selector": "*", "classes": "ani_fadeInUpBig"}]},{"title": "Fading Exits","items": [{"title": "fadeOut", "selector": "*", "classes": "ani_fadeOut"},{"title": "fadeOutDown", "selector": "*", "classes": "ani_fadeOutDown"},{"title": "fadeOutDownBig", "selector": "*", "classes": "ani_fadeOutDownBig"},{"title": "fadeOutLeft", "selector": "*", "classes": "ani_fadeOutLeft"},{"title": "fadeOutLeftBig", "selector": "*", "classes": "ani_fadeOutLeftBig"},{"title": "fadeOutRight", "selector": "*", "classes": "ani_fadeOutRight"},{"title": "fadeOutRightBig", "selector": "*", "classes": "ani_fadeOutRightBig"},{"title": "fadeOutUp", "selector": "*", "classes": "ani_fadeOutUp"},{"title": "fadeOutUpBig", "selector": "*", "classes": "ani_fadeOutUpBig"}]},{"title": "Flippers","items": [{"title": "flip", "selector": "*", "classes": "ani_flip"},{"title": "flipInX", "selector": "*", "classes": "ani_flipInX"},{"title": "flipInY", "selector": "*", "classes": "ani_flipInY"},{"title": "flipOutX", "selector": "*", "classes": "ani_flipOutX"},{"title": "flipOutY", "selector": "*", "classes": "ani_flipOutY"}]},{"title": "Lightspeed","items": [{"title": "lightSpeedIn", "selector": "*", "classes": "ani_lightSpeedIn"},{"title": "lightSpeedOut", "selector": "*", "classes": "ani_lightSpeedOut"}]},{"title": "Rotating Entrances","items": [{"title": "rotateIn", "selector": "*", "classes": "ani_rotateIn"},{"title": "rotateInDownLeft", "selector": "*", "classes": "ani_rotateInDownLeft"},{"title": "rotateInDownRight", "selector": "*", "classes": "ani_rotateInDownRight"},{"title": "rotateInUpLeft", "selector": "*", "classes": "ani_rotateInUpLeft"},{"title": "rotateInUpRight", "selector": "*", "classes": "ani_rotateInUpRight"}]},{"title": "Rotating Exits","items": [{"title": "rotateOut", "selector": "*", "classes": "ani_rotateOut"},{"title": "rotateOutDownLeft", "selector": "*", "classes": "ani_rotateOutDownLeft"},{"title": "rotateOutDownRight", "selector": "*", "classes": "ani_rotateOutDownRight"},{"title": "rotateOutUpLeft", "selector": "*", "classes": "ani_rotateOutUpLeft"},{"title": "rotateOutUpRight", "selector": "*", "classes": "ani_rotateOutUpRight"}]},{"title": "Sliding Entrances","items": [{"title": "slideInUp", "selector": "*", "classes": "ani_slideInUp"},{"title": "slideInDown", "selector": "*", "classes": "ani_slideInDown"},{"title": "slideInLeft", "selector": "*", "classes": "ani_slideInLeft"},{"title": "slideInRight", "selector": "*", "classes": "ani_slideInRight"}]},{"title": "Sliding Exits","items": [{"title": "slideOutUp", "selector": "*", "classes": "ani_slideOutUp"},{"title": "slideOutDown", "selector": "*", "classes": "ani_slideOutDown"},{"title": "slideOutLeft", "selector": "*", "classes": "ani_slideOutLeft"},{"title": "slideOutRight", "selector": "*", "classes": "ani_slideOutRight"}]},{"title": "Zoom Entrances","items": [{"title": "zoomIn", "selector": "*", "classes": "ani_zoomIn"},{"title": "zoomInDown", "selector": "*", "classes": "ani_zoomInDown"},{"title": "zoomInLeft", "selector": "*", "classes": "ani_zoomInLeft"},{"title": "zoomInRight", "selector": "*", "classes": "ani_zoomInRight"},{"title": "zoomInUp", "selector": "*", "classes": "ani_zoomInUp"}]},{"title": "Zoom Exits","items": [{"title": "zoomOut", "selector": "*", "classes": "ani_zoomOut"},{"title": "zoomOutDown", "selector": "*", "classes": "ani_zoomOutDown"},{"title": "zoomOutLeft", "selector": "*", "classes": "ani_zoomOutLeft"},{"title": "zoomOutRight", "selector": "*", "classes": "ani_zoomOutRight"},{"title": "zoomOutUp", "selector": "*", "classes": "ani_zoomOutUp"}]},{"title": "Specials","items": [{"title": "hinge", "selector": "*", "classes": "ani_hinge"},{"title": "jackInTheBox", "selector": "*", "classes": "ani_jackInTheBox"},{"title": "rollIn", "selector": "*", "classes": "ani_rollIn"},{"title": "rollOut", "selector": "*", "classes": "ani_rollOut"}]}]}],
unterhalb "external_plugins": {... einfügen.
Dann kannst Du das auch verwenden, was ja Sinn macht, um bei CMSimple zu bleiben. Und Lightbox habe ich auch gleich als Special Classes dazu gemacht.

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Wed Oct 06, 2021 6:18 pm

knollsen wrote:
Wed Oct 06, 2021 5:58 pm
Dann kannst Du das auch verwenden, was ja Sinn macht, um bei CMSimple zu bleiben.
Wie schon gesagt, ich habe es anders gelöst - ohne dein Plugin. Das CSS dürfte auch etwas aktueller sein.
Schau' mal im Download die "init_full-animations" an.
Bei mir wird dann auch noch der wow-Trigger eingefügt.
Und bei mir werden die Animationen immer nur einmal ausgeführt ;-)

knollsen
Posts: 382
Joined: Wed Nov 06, 2013 2:28 pm

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by knollsen » Wed Oct 06, 2021 8:09 pm

... Das CSS dürfte auch etwas aktueller sein.
Da gibt nix neues, animate, translate..., keyframes usw gibts schon lange - höchstens paar neue Funktionen - aber da habe ich im Detail nicht nachgeschaut.
...Schau' mal im Download die "init_full-animations" an.
hab ich. "style_formats" ist genau die selbe struktur wie bei mir
... Und bei mir werden die Animationen immer nur einmal ausgeführt
Ich habe 3 Funktionen die man sich aussuchen kann und ein Schalter für Wiederholfunktion (REPEAT)
Ich hab's mir jetzt doch mal angeschaut. Viele Wege führen zum Ergebnis, trotzdem finde ich die template.htm unübersichtlich für unerfahrene user. Der Kern ist ja gar nicht so viel, was ja gut ist aber gerade das was zur Spielerei (eben die Animations..) gehört, macht das wieder weg.
Die Seite ist wirklich von der Idee zum grafischen für SimpleXH wirklich gut gemacht! Jetzt kommt es nur drauf an, wie kompatible die Seite mit Erweiterungen sich verträgt. zum Beispiel will jetzt einer ne Galerie oder virtuelle Rundgänge extern intern einfügen usw.
Last edited by knollsen on Sun Oct 17, 2021 9:24 am, edited 1 time in total.

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Thu Oct 07, 2021 6:25 am

knollsen wrote:
Wed Oct 06, 2021 8:09 pm
... Das CSS dürfte auch etwas aktueller sein.
Da gibt nix neues, animate, translate..., keyframes usw gibts schon lange - höchstens paar neue Funktionen - aber da habe ich im Detail nicht nachgeschaut.
ISEYE = Version 3.7.0 (2018)
fhs = Version 4.1.1 (2020)
Aber, du hast schon recht. Bis auf ein paar Kleinigkeiten, hat sich nur wenig geändert.
knollsen wrote:
Wed Oct 06, 2021 8:09 pm
Viele Wege führen zum Ergebnis, trotzdem finde ich die template.htm unübersichtlich für unerfahrene user.
Ja, unübersichtlich für Unerfahrene. Aber, was will man machen?
Ich habe mich zwar sehr bemüht es optisch und mit Kommentaren verständlich zu machen - in einer Datei Variablen zu ändern ist auf jeden Fall nicht sehr anwenderfreundlich und vor allem auch fehleranfällig.
Aus diesem Grunde haben wir (Christoph! u.a.) ja schon im November 2017 eine Möglichkeit der Template-Konfiguration erarbeitet. Damit kann man alles im Template einstellen, so wie bei den Plugins.
Seit Langem sehne ich den Tag herbei, an dem dieses Ding in XH EInzug hält. Wahrscheinlich wird das mit Version 1.8 passieren.
knollsen wrote:
Wed Oct 06, 2021 8:09 pm
Jetzt kommt es nur drauf an, wie kompatible die Seite mit Erweiterungen sich verträgt. zum Beispiel will jetzt einer ne Galerie oder virtuelle Rundgänge extern intern einfügen usw.
Rein theoretisch, sollte alles was in einem Onepager möglich ist, auch in diesem Template möglich sein. Warum auch nicht?
Ob es für jeden Anwendungsfall ein passendes Snippet gibt - das bezweifle ich.
Aber: Man kann sich dann ja ein eigens bauen ;)

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Thu Oct 07, 2021 12:51 pm

Hallo,
es ist ganz gut, wenn man erst einmal eine Vorschau-Version veröffentlicht, oder zwei oder drei ;-).

Ich konnte den Code der Init-Dateien, die für die Animations-Klassen im TinyMCE 4 und 5 zuständig sind, noch etwas eindampfen. Da hatte ich es ursprünglich zu gut gemeint.

Es gibt also ab sofort eine zweite, neue Version des Templates mit CMSimple_XH 1.7.5 zum Herunterladen.

knollsen
Posts: 382
Joined: Wed Nov 06, 2013 2:28 pm

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by knollsen » Thu Oct 07, 2021 8:11 pm

In TinyMCE 5 musst Du in Deiner init_full-animations.json noch das formatselect anlegen und das was ich in den Beitrag geschrieben habe. Sonst erkennt dein Editor die Style nicht mehr, wenn Du dein Cursor an ne gewisse Stelle platzierst.
Das aber nur, weil Du (wie auch ich) auch das style_formats verwendest.

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Fri Oct 08, 2021 7:24 am

knollsen wrote:
Thu Oct 07, 2021 8:11 pm
In TinyMCE 5 musst Du in Deiner init_full-animations.json noch das formatselect anlegen und das was ich in den Beitrag geschrieben habe. Sonst erkennt dein Editor die Style nicht mehr, wenn Du dein Cursor an ne gewisse Stelle platzierst.
Das aber nur, weil Du (wie auch ich) auch das style_formats verwendest.
Ja. Das habe ich jetzt auch gemerkt :(
Danke für den Hinweis!
Es wird also noch eine weitere Template-Version geben müssen.
Vorher muss aber erstmal eine Lösung gefunden werden (an oben genannter Stelle).

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Mon Oct 11, 2021 10:41 am

Sooo,
nachdem das Problemchen mit dem Tiny5 behoben ist, gibt es nun die erste endgültige Template-Version.
Ein paar minimale Änderungen am Template selbst wurden auch noch durchgeführt.

Hier die Ankündigung und Download-Adresse.

Tata
Posts: 3439
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by Tata » Mon Oct 11, 2021 12:09 pm

Ist es nur bei mir so, oder ist die Textanimation in dieser Version abgestellt (irgendwo einstellbar)?
You do not have the required permissions to view the files attached to this post.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

frase
Posts: 4283
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: neues Onepage-Template: fhs-sectionsOP - Tester?

Post by frase » Mon Oct 11, 2021 12:21 pm

Tata wrote:
Mon Oct 11, 2021 12:09 pm
Ist es nur bei mir so, oder ist die Textanimation in dieser Version abgestellt (irgendwo einstellbar)?
Ha, das ist ganz einfach:
Gib der Überschrift einfach die Klasse "spotLight" - und schon wird der Text animiert.
Also so:
(<span> ist wichtig! Zur Not mal mit der Browserkonsole untersuchen)

Code: Select all

<h2><span class="spotLight">Main Title</span></h2>
Diese Animation ist nicht Teil von animate.css, sondern ist extra von mir zusätzlich ins Template-Stylesheet eingefügt worden.
Deshalb findest du diese Klasse nicht unter "Animation classes", sondern etwas weiter unten im Format-Menü.

Es gibt dann auch noch "spotDark" für Text-Animationen auf hellem Untergrund - und zu beiden Versionen jeweils noch eine "fast"-Version, die etwas schneller abläuft.

Der Beispiel-Content aus dem Download ist komplett ohne Animationen. Ich möchte diese "Spielereien" ja niemandem aufdrängen - wer will kann, muss aber nicht.

Post Reply