TOP-Pfeil in template

[olape]

Hier Version 2, mit fixedem Top-Button rechts am Rand inklusive fade-in/fade-out.

Das ist doch perfekt.

Nur, der Button überlagert eben, die Boxen unterm Content.
Das hatte mich gestört. Aber irgendeinen Kompromiss muss man wohl eingehen.

[Tata]

Noch habe ich dies:
In templates/fhs-simple-2019/scripts/script.js

Code: Select all

jQuery(document).ready(function ($) {
	var offset = 150;
	var duration = 600;
	jQuery(window).scroll(function () {
		if (jQuery(this).scrollTop() > offset) {
			jQuery('#topLink').fadeIn(duration);
		} else {
			jQuery('#topLink').fadeOut(duration);
		}
	});
});

in template.htm - woimmer platziert - es erscheint na dem skrollen rechts unten (in stylesheet.css definiert).

Code: Select all

<div><a id="topLink" href="#"><i class="fa fa-angle-up fa-3x"></i></a></div>

in stylesheet.css

Code: Select all

#topLink {
	z-index: 1000;
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	background: rgba(255,255,255,.30);	width: 40px;
	text-align: center;
}
a#topLink {
	color: rgba(0,0,0,.30);
}
#topLink:hover{
	background: rgba(255,255,255,.70);}
a#topLink:hover {
	color: rgba(0,0,0,.70);
}

btn-up-off.png

btn-up-on.png

Der Knopf escheint nur nachdem die Seite mehr als 150px nach unten gescrollt ist (var offset = 150; in jQuery einstellbar).

[FirstPage]

Einen Vorschlag für den Top-Link neben dem Content mache ich noch.

180213_gardening_b.zip
Aber, ich bin kein Profi in CSS, es gibt sicher bessere Lösungen.

Es ist auch nicht so ganz neben dem Content, das ist bei dem Hintergrund etwas schwierig.
Auch die Positionierung ist durch die Boxen unter dem Content schwer.
Eigentlich wäre es schöner, den Link fest zu positionieren.

Hallo nochmal.
leider ist hinter der 180213_gardening_b.zip nichts gespeichert.

Mit leeren Dateien kann ich auch umgehen ....

[olape]

Mit leeren Dateien kann ich auch umgehen ....

das ist komisch, Ludwig konnte sie problemlos runterladen und auch entpacken.

Du solltest eh die von Ludwig verbesserten Versionen nehmen.

Mit angepasstem CSS für die images: 180213_gardening__olape.zip

Hier Version 2, mit fixedem Top-Button rechts am Rand inklusive fade-in/fade-out. 180213_gardening__olape_v2.zip

Und um dem vorzubeugen:

(Download am besten mit Rechtsklick, dann "Link speichern unter ..." und "Behalten" bestätigen bei "Hinweis "Unsicherer Download")

[FirstPage]

Hallo,
das mit dem download ist nicht immer so, aber nun weiß ich ja, wie man das macht!

zu meiner grundsätzlichen Anfrage:
die Vorlage mit Link: http://luz.bplaced.net/_downloads/18021 ... ape_v2.zip hat zwar schon geholfen und mit viel Suchen und Suchen in der CSS-Datei habe ich auch eine Möglichkeit der Änderung von Farbe (Hintergrund) und dem Pfeil irgendwie gefunden ist aber nicht die perfekte Lösung.
Soweit alles OK
Aber wie bekomme ich diese Pfeile "Seite zurück" und "Seite vor" weg
Meine Frage war ja eigentlich, ob es möglichh wäre so einen "TOP-Button" als grundsätzliches "Teil" in einer Seite so zu plazieren, dass es
a) sichtbar wird, wenn man die Seite scrollt
b) der Button editierbar ist = Farbe/Hintergrund/Art = "*.png" änderbar wäre
c) leider finde ich keine Lösung, wie man zwar mit "F12" viel Sehen kann, aber die Antworten nicht im "template" oder auch der "CSS-Datei" zu finden sind.
F12 = Inspektor
Ich wollte keine Vor oder Zurück Button, aber ich probiere weiter ...
Leider habe ich wenig Ahnung von CSS (leider gibt es keine deutsche Anleitung und jede Seite übersetzen macht nicht immer Spaß)

[olape]

a) sichtbar wird, wenn man die Seite scrollt
b) der Button editierbar ist = Farbe/Hintergrund/Art = "*.png" änderbar wäre

Na das ist doch gegeben.
Klar, man muss min. im CSS etwas tun, um i.e. die Farbe zu ändern.

Die Bilder werden in der template.htm ab Zeile 3 festgelegt:

Code: Select all

<?php
    $tx['navigator']['next']='<img src="' . $pth['folder']['template'] . 'images/right.png">';
    $tx['navigator']['previous']='<img src="' . $pth['folder']['template'] . 'images/left.png">';
    $tx['navigator']['top']='<img src="' . $pth['folder']['template'] . 'images/top.png">';
?>

Die Farbe der eigentlich schwarzen Bilder ist in der stylesheet.css festgegelgt:

Code: Select all

#subnav span a img {
  filter: invert(99%) sepia(1%) saturate(1%) hue-rotate(230deg) brightness(106%) contrast(100%);
  width: 24px;
  }

und der Hintergrund:

Code: Select all

#subnav span a {
  background-color: #79916e;
  border: 1px solid #79916e;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  }

Aber wie bekomme ich diese Pfeile "Seite zurück" und "Seite vor" weg

Entferne aus der template.htm die Zeilen:

Code: Select all

<span id="subnav_prev"><?php echo previouspage(); ?></span> 

und

Code: Select all

<span id="subnav_next"><?php echo nextpage(); ?></span>

Bei mir ist das Zeile 35 und 37.

[FirstPage]

Hallo olape,
ich hatte diese beiden Zeilen "auskommentiert" mit dem bekannten Code, aber kein Erfolg, darum meine Anfrage.
Die Lösung mit Löschen war erfolgreich.
Wieder was gelernt ...

[olape]

ich hatte diese beiden Zeilen "auskommentiert" mit dem bekannten Code, aber kein Erfolg, darum meine Anfrage.

Zeilen wie diese:

Code: Select all

<span id="subnav_prev"><?php echo previouspage(); ?></span> 

müsste man 2x auskommentieren:

Code: Select all

<!--<span id="subnav_prev"><?php //echo previouspage(); ?></span>-->

oder:

Code: Select all

<!--<span id="subnav_prev"><?php /*echo previouspage();*/?></span>-->

Hier ist löschen einfacher.