TEST: Template "fhs-left-right-17x"

olape · Post by **olape** » Thu Mar 08, 2018 6:10 pm

Im Template gibt es:

<?php
// Accordions im Edit-Mode aufklappen
if (XH_ADM && ($edit || ($s < 0))):?>
<style>.accordion .acctxt {display: block; !important}#header {display:none;}</style>
<?php endif?>

Code: Select all

.accordion .acctxt {display: block; !important}

sollte eigentlich

Code: Select all

.accordion .acctxt {display: block !important;}

sein. Oder?

Ausserdem schein die Zeile auch gar nicht nötig. Wenn ich nicht ganz daneben liege.

Frage dazu:
Ich habe das ergänzt um

Code: Select all

h1 a[id], h2 a[id], h3 a[id], h4 a[id], h5 a[id], h6 a[id] {position: relative; top: 0 !important;}

Damit der Style (vorhergehender Post) im Editor nicht greift. Leider ohne Erfolg.

frase · Post by **frase** » Fri Mar 09, 2018 8:15 am

olape wrote: ↑
Thu Mar 08, 2018 6:10 pm
Im Template gibt es:
Code: Select all
<?php
// Accordions im Edit-Mode aufklappen
if (XH_ADM && ($edit || ($s < 0))):?>
<style>.accordion .acctxt {display: block; !important}#header {display:none;}</style>
<?php endif?>
Code: Select all
.accordion .acctxt {display: block; !important}
sollte eigentlich
Code: Select all
.accordion .acctxt {display: block !important;}
sein. Oder?

Ausserdem schein die Zeile auch gar nicht nötig. Wenn ich nicht ganz daneben liege.

Du hast recht. Hier liegt ein Tippfehler vor. Das Semikolon gehört hinter !important.
Das sollte allerdings keinen Fehler hervorrufen, sondern die Style-Deklaration hört dann einfach nur auf.

Der Grund für den ganzen Spaß ist folgender:
Die Accordions sollten während der Bearbeitung geöffnet sein (eben, damit man den Text (.acctxt) im Editor bearbeiten kann). Standardmäßig sind diese Texte ja ausgeblendet.
Im Stylesheet gibt es dieses (Zeile 185):

Code: Select all

#tinymce .accordion .acctxt {
	display: block;
}

Da das nur für den TinyMCE funktioniert, wurde obiger Code im Template eingefügt.
Jetzt, nach deinem Hinweis, stellte ich fest, dass das gar nicht klappt, wenn man z.B. den CKEditor verwendet.
Warum das nicht funktioniert, weiß ich noch nicht. (?)
Als Lösung schlage ich folgendes vor.
Im Stylesheet die Zeile 185 ändern zu:

Code: Select all

#tinymce .accordion .acctxt, .cke_editable .accordion .acctxt {
	display: block;
}

Das funktioniert dann im Tiny und im CKE.

olape wrote: ↑
Thu Mar 08, 2018 6:10 pm
Frage dazu:
Ich habe das ergänzt um
Code: Select all
h1 a[id], h2 a[id], h3 a[id], h4 a[id], h5 a[id], h6 a[id] {position: relative; top: 0 !important;}
Damit der Style (vorhergehender Post) im Editor nicht greift. Leider ohne Erfolg.

Hier verstehe ich überhaupt nicht, was du da vorhast.
Sollen die Anker nicht sichtbar sein?
Du könntest, falls du Anspringpunkte brauchst, den h1, h2, h3 ... eine ID verpassen und auf die Anker komplett verzichten.
Aber, vielleicht verstehe ich da was falsch ... ?

lck · Post by **lck** » Fri Mar 09, 2018 10:59 am

frase wrote: ↑
Fri Mar 09, 2018 8:15 am
Da das nur für den TinyMCE funktioniert, wurde obiger Code im Template eingefügt.
Jetzt, nach deinem Hinweis, stellte ich fest, dass das gar nicht klappt, wenn man z.B. den CKEditor verwendet.
Warum das nicht funktioniert, weiß ich noch nicht. (?)

Das Problem hatte ich vor kurzem auch mit dem admintemplate.css. Die stylesheet-Dateien und style-Definitionen die im <head> eingebunden werden, werden im Editor nicht eingebunden, nur das stylesheet.css vom Template. Die Style-Angabe müsste also in stylesheet.css erstellt werden. Dazu bietet sich das hier an (Erweiterung für den body-Tag) oder eben oder eben eine ähnliche Lösung wie:

Code: Select all

<div class="acctxt<?php if (XH_ADM && $edit) { echo '_open'; } else { echo '';}?>">

olape · Post by **olape** » Fri Mar 09, 2018 1:44 pm

olape wrote: ↑
Thu Mar 08, 2018 6:10 pm
Hier verstehe ich überhaupt nicht, was du da vorhast.
Sollen die Anker nicht sichtbar sein?

Wenn ich einer Überschrift einen Anker verpasse und diesen Anspringe, dann verschwindet die Überschrift hinter dem Menübalken.
Das ist ja auch eigentlich korrekt so, aber eben nicht schön.

Screenshot-2018-3-9_2.png

Mit diese Änderung im CSS bleibt die Überschrift sichtbar.
viewtopic.php?f=16&t=13241&start=50#p65755

Screenshot-2018-3-9_1.png

Leider sieht es dann im Editor so aus. Auch hier steht der Anker 60px weiter oben.
Im Editor hätte ich den Anker aber gern da, wo er hingehört.

Screenshot-2018-3-9_3.png

frase wrote: ↑
Fri Mar 09, 2018 8:15 am
Du könntest, falls du Anspringpunkte brauchst, den h1, h2, h3 ... eine ID verpassen und auf die Anker komplett verzichten.
Aber, vielleicht verstehe ich da was falsch ... ?

Ja, aber, ich denke, das würde die Situation nicht verbessern.
Und, es soll auch eine massen taugliche Lösung herauskommen.
Also für jeden nutzbar, der nicht im Quelltext herumwurschteln will.
Und der Editor setzt den Anker mit a.

cmb · Post by **cmb** » Fri Mar 09, 2018 2:35 pm

olape wrote: ↑
Fri Mar 09, 2018 1:44 pm
Leider sieht es dann im Editor so aus. Auch hier steht der Anker 60px weiter oben.
Im Editor hätte ich den Anker aber gern da, wo er hingehört.

Der Editor lädt normalerweise nur das Stylesheet des Templates. Daher kann man Regeln, die nicht im Editor wirken sollen, in einem zusätzlichen Stylesheet definieren. Eine Alternative, um bestimmte Regeln nicht im Editor wirken zu lassen, ist dem <body> im Template eine ID/Klasse zuzuweisen, und dann nur für diese Klasse zu stylen. Beispiel:

Code: Select all

<body id="body>

Code: Select all

#body h1 a[id] {…}

olape wrote: ↑
Fri Mar 09, 2018 1:44 pm
Und der Editor setzt den Anker mit a.

Eigentlich nicht so schön.

olape · Post by **olape** » Fri Mar 09, 2018 3:01 pm

cmb wrote: ↑
Fri Mar 09, 2018 2:35 pm
Eine Alternative, um bestimmte Regeln nicht im Editor wirken zu lassen, ist dem <body> im Template eine ID/Klasse zuzuweisen, und dann nur für diese Klasse zu stylen.

So funktioniert das.

Code: Select all

<body <?php echo onload(); if(!(XH_ADM && $edit)) {echo 'class="anchor"';} ?>>

Code: Select all

.anchor h1, .anchor h2, .anchor h3, .anchor h4, .anchor h5, .anchor h6 {
	position: relative;
}
.anchor h1 a[id], .anchor h2 a[id], .anchor h3 a[id], .anchor h4 a[id], .anchor h5 a[id], .anchor h6 a[id] {
	position: absolute; top: -60px;
}

cmb wrote: ↑
Fri Mar 09, 2018 2:35 pm
olape hat geschrieben: ↑09 Mär 2018 14:44
Und der Editor setzt den Anker mit a.
Eigentlich nicht so schön.

Jedenfalls in TinyMCE

frase · Post by **frase** » Fri Mar 09, 2018 4:37 pm

lck wrote: ↑
Fri Mar 09, 2018 10:59 am
Die stylesheet-Dateien und style-Definitionen die im <head> eingebunden werden, werden im Editor nicht eingebunden, nur das stylesheet.css vom Template.

Ah, ja.
Ich denke allerdings, dass in diesem speziellen Fall der Selector nach Tiny oder CKE ausreicht.

Und jetzt die Geschichte mit den Anchors:
Irgendwie hatte ich im Hinterkopf, dass dieses Problem schonmal da war.
Und heute kam's mir.
Bei fhs-anchorific-pure hatte Holger eine JS-Lösung gefunden, die das Problem elegant löst.
Nix mit Styles oder so.
Füge in "scripts.min.js" folgenden Code ein:

Code: Select all

//Smooth scroll to ID on pageload / reload
var hash = window.location.hash;
if (hash.length) {
	jQuery('[canvas="container"]').animate({
		scrollTop: $(hash).offset().top - 50}, 300);
}

Wie der Kommentar schon sagt, funktioniert das Ganze nur als Deep-Link von irgendwoher extern (oder bei Reload).
Es klappt nicht, wenn man das Ankerziel (den Hash #) einfach in der Browser-Adresszeile anfügt. Der Link muss schon irgendwo stehen und man muss ihn anklicken. Dann scrollt alles bis zum Ziel und der Offset-Wert wird beachtet.

Es spielt übrigens dabei keine Rolle, ob ein Anker oder eine ID angesprungen wird.
War das des Ankers Lösung?

olape · Post by **olape** » Fri Mar 09, 2018 4:51 pm

frase wrote: ↑
Fri Mar 09, 2018 4:37 pm
Und jetzt die Geschichte mit den Anchors:
Irgendwie hatte ich im Hinterkopf, dass dieses Problem schonmal da war.
Und heute kam's mir.

Mir kommt's auch manchmal.

Aber du siehst, diese Probleme kommen immer wieder.
Also besser gleich mit rein ins Template.

Ich probiere deine/Holgers Lösung aus. (Wenn ich das aber richtig verstehe, dann würde die Verlinkung innerhalb einer Seite nicht funktionieren.)

Da ich nun aber keine Freund von JS bin, bleibe ich vielleicht trotzdem bei meiner Lösung.
Mal sehen.

frase · Post by **frase** » Fri Mar 09, 2018 4:57 pm

olape wrote: ↑
Fri Mar 09, 2018 4:51 pm
Aber du siehst, diese Probleme kommen immer wieder.

Ja, vor allem bei fixen Headern.

olape wrote: ↑
Fri Mar 09, 2018 4:51 pm
Da ich nun aber keine Freund von JS bin, bleibe ich vielleicht trotzdem bei meiner Lösung.
Mal sehen.

Kein Freund von JS?
Warum hast du dann dieses Template gewählt?

Aber:
Ich habe gerade festgestellt, dass die JS Anspring-Lösung zwar in Chrome-Browsern und sogar im IE11 gut funktioniert - aber im Firefox 58.0.2(64) spinnt.

olape · Post by **olape** » Fri Mar 09, 2018 5:57 pm

frase wrote: ↑
Fri Mar 09, 2018 4:37 pm
Wie der Kommentar schon sagt, funktioniert das Ganze nur als Deep-Link von irgendwoher extern (oder bei Reload).
Es klappt nicht, wenn man das Ankerziel (den Hash #) einfach in der Browser-Adresszeile anfügt. Der Link muss schon irgendwo stehen und man muss ihn anklicken. Dann scrollt alles bis zum Ziel und der Offset-Wert wird beachtet.

https://new.penschke.net/?Datenschutz#Kontaktaufnahme

Nee, das haut nicht hin, nicht in Firefox.
Chrome funktioniert, IE11 auch,
Edge sogar zu gut, das ginge sogar fast ohne, da kann ich von 60 auf 10px runtergehen.

https://olaf.penschke.net/?Datenschutz#Kontaktaufnahme
Meine Lösung funktioniert überall und überall gleich.

Ja, da war ich wieder zu spät, hatte den Entwurf stehen lassen. Inzwischen hast du den Fehler schon bemerkt.

CMSimple_XH–Forum

TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"

Re: TEST: Template "fhs-left-right-17x"