Beiträge von ycsh

Vielen Dank für die Hinweise zum Stichwort 'Mouseover, Rollover'.

'Tooltip' ist in Joomla wohl auch geläufig und liefert zahlreiche Plugins, habe ich festgestellt:

CSS3 Tooltip plugin for Joomla

jmootips System Plugin

Styling - Tutorial - Tooltips - Regular Labs

Themes Tooltips comes with a number of preset Themes you can choose from: [onlypro] [onlypro] You can override the Theme you...

docs4.regularlabs.com

16 Best Open-Source Tooltip Plugins For UI Design

Take a shortcut to building attractive and functional tooltips with these JavaScript, jQuery, CSS, and HTML libraries. No coding skills? No worries. Scroll…

www.chameleon.io

Easy Tooltip for Joomla

Discover the best apps, extensions, plugins, widgets, and modules for website builders & CMS platforms via the Common Ninja Search Engine.

www.commoninja.com

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

Ich werde mich mit den Vorschlägen mal auseinander setzen.

vG

Korrekt, aber ich suche ein Rollover auf einen Text-link nicht auf ein Bild!

Beispiel: Mit Klick auf ‘Kontakt’ geht der Mailclient auf. Ohne Klick, während Mouseover soll ein Hinweis zum Datenschutz kommen.

Hallo!

Ich habe auf einen Text einen Link gesetzt. Mit Klick wird auf die eingestellte URL gewechselt.

Nun möchte ich ähnlich Rollover bei Bildern, dass für die Dauer von Mouseover ein Element aufpoppt; z.B. ein Bild mit Text.

Gibt es da etwas?

Ich benutze Cassiopeia und JCE.

VG

^Hallo,

#5

Beides funktioniert bzw. führt zum gleichen Ergebnis

#6
Korrekt, mit z-index:10; sieht man es.

Mit top:100px; wird der Beitrag verschoben, passt aber nicht mehr ins gesamte Gefüge.ee

Schade!

vG

Der blaue Link auf der START Seite unten ist jetzt weg. Die Redaktion hat die Freigabe des Artikels widerrufen.

Nochmal die Aufgabenstellung:
Der Link mit Anker verweist auf eine bestimmte Stelle im Zielbeitrag. Erwartet habe ich deshalb dieses

Der Anker sollte oben links im Content stehen.

Stattdessen sieht das Ergebnis so aus

Auf den Anker hätte man dann verzichten können. Der Besucher der Seite muss jetzt nach oben an den Anfang des Artikels scrollen.

Genau das wollte ich ja mit dem Anker vermeiden!

Meine Frage:
Ist das überall so/normal oder habe ich etwas falsch gemacht?
Gibt es eine Lösung (CSS) oder eine Alternative?

vG

Hallo,

ich musste den Link auf der Startseite entfernen!
Wenn man stattdessen auf den blauen Balken klickt, funktioniert es aber noch.

Hallo,

ich habe an dieser Stelle einen Anker gesetzt

auf den ich von dieser Stelle mit einem Link verweise.

Ich hätte nun erwartet, dass sich die Sprungmarke auch oben im Content wiederfindet.

Dem ist aber wohl nicht so. Man steht mitten im Beitrag wie man hier unten sieht.

Was habe ich nicht verstanden?

vG

ok, viel Info zum Breakpoint.
Das wirft bei mir eine beiläufige Frage auf:

Halte ich mich mit eigenen Umbrüchen @media (min-width: ... an die vordefinierten Werte oder setze sie so, wie ich es mit F12/Abmessungen: Responsiv gefunden habe?

Zurück zu meiner Eingangsfragestellung: Warum hat das Modul auf Position sidebar-right einen eigenen Breakpoint, der sich vom dem der sidebar-right unterscheidet?
In der Breakpoint-Hysterese führt das zu unplausiblen Darstellungen.

vG

Hallo,

ich befasse mich nochmal mit dieser Seite https://www.muster.derkps.de/

Die sidebar-right ist in Cassiopeia user.css wie folgt definiert

@media (min-width: 1024px) {
.grid-child.container-sidebar-right {
position: relative;
background: #ffff00; /*none;*/ /*Zur Entwicklungszeit sehe ich wo ich  bin!*/
}
.grid-child.container-sidebar-right > div {
/*position: relative; top: -75px; right: 10px; z-index: 0;*/
/*position: fixed; top: 300px; right: 10px; z-index:10;*/
/*position: sticky;  position: -webkit-sticky; top: 300px; right: 0px; z-index: 10;*/
}
}

Die sidebar-right folgt der Einstellung min-width (<1024px) und ist mit #ffff00 überhaupt sichtbar.

Der Position sidebar-right ist ein Modul zugeordnet und in JCE mit CSS-Klasse Modul .aside in der user.css beschrieben.

.aside {
border: solid; /*none;*/
border-color: #e68a00;
background-color: rgba(230, 138, 0, 0.3); /*#ffff00;*/  /*#d3d3d3;*/
margin: 0 auto 0 auto;
padding: 0 5px 0 5px;
width: auto;  /*Modulstil: nocard*/
height: 250px;
overflow-y: scroll;
}

Nun irritiert mich, dass dieses Modul bezüglich @media (min-width: 1024px) ganz eigene Vorstellungen hat und mit F12/Abmessungen: Responsiv (Chrome) erst später den 'Aufenthaltsort' wechselt (<992px).
Das Problem tritt in .grid-child.container-sidebar-right > div bei allen 4(3) positionen : ... auf

Warum? Das verstehe ich wieder nicht!

vG

Ich werde die URL in diesem Einzelfall über robots.txt aussperren, nur mal so.
Es ist in meinen Augen keine systematische Lösung, da alle anderen Seiten (mit CookieHint) dieses Problem genau nicht haben.

Das muss aber jeder mit sich selbst ausmachen.

Meine Frage war, wo ich diesen Link löschen kann.
In GSC kann ich ihn aufrufen aber offensichtlich nicht löschen.

Dann schließe ich das Thema mit Bezug auf

Zitat

Oder man rennt halt nicht jedem Dumpf-Gemecker von Google hinterher

Hmm,

CookieHint and Consent verwende ich seit Jahren auf allen Seiten ohne Probleme.
Welche Alternative hätte ich denn?

Mit aktivem CookieHint rufe ich https://www.miet-action-bus.de/preise?rCH=2 auf und erhalte https://www.miet-action-bus.de/preise.
Mit deaktivem CookieHint rufe ich https://www.miet-action-bus.de/preise?rCH=2 auf und erhalte https://www.miet-action-bus.de/preise ?rCH=2 zurück.

Die URL existiert also noch und es kann ja keine Lösung sein, den Zugriff auf eine nicht erwünschte Seite je Einzelfall zu unterbinden.

Aktuell ist CookieHeint ist aktiv.

Hallo,

GSC meckert Fehler dieses Typs https://www.miet-action-bus.de/preise?rCH=2 an.

Kenne ich von früher, habe aber keine Notizen zur Fehlerbehebung gemacht

So weiß ich aktuell nicht, wo ich diesen Link finden und löschen kann.

Kann mir jemand auf die Sprünge helfen?

vG

Ah ja!

Danke

Es scheint mir ratsam, sich näher mit dem Inspector (Chrome) zu befassen und nach Tutorials zu suchen.

Vielen Dank!

Dann muss ich zukünftig etwas mehr auf den Inspector achten.

VG

Es funktioniert, Danke!

Aber warum?

auf .grid-child weist mich der Inspector hin!

Warum nochmal mit > div?

Ich habe jetzt folgendes eingesetzt (obwohl mir 'sticky' besser gefäll)

@media (min-width: 1024px) {
.grid-child.container-sidebar-right {
position: relative;
background: #ffff00; /*none;*/ /*Zur Entwicklungszeit sehe ich wo ich  bin!*/
    }
.grid-child.container-sidebar-right > div {
    position: fixed; top: 300px; right: 10px; z-index:10;
    /*position: sticky;  position: -webkit-sticky; top: 300px; right: 0px; z-index: 10;*/
    }
}

VG

Hallo,

ich möchte auf der Position sidebar-right ein Modul anzeigen, dass fest/unbeweglich bleibt, während der Content gescrollt wird.

@media (min-width: 1024px) {
.container-sidebar-right {
background-color: #ffff00;
width: 300px; height: 250px;
/*position: relative; top: 5px; right: 10px; z-index: 0;*/
position: fixed; top: 400px; right: 10px; z-index: 1;
}
}

Mit position: relativ erscheint das Modul rechts auf der Position sidebar-right mit gelbem Hintergrund wie gewohnt.

Es verschiebt sich synchron mit dem Content beim scrollen.

Das Modul soll aber auf der Position sidebar-right fest/unbeweglich bleiben!

Mit position: fixed funktioniert es jedenfalls nicht wie man hier sieht!

Die gelbe sidebar-right geht über die volle Bildbreite abzüglich right: 10px.

Das Modul steht zwar fest/unbeweglich aber in der Mitte des Bildschirms.

Was mache ich falsch?

VG

Guter Hinweis.

Danke!

P.S.:

Kann man diese animierte Line auch einfärben?

Text ist es ja nicht.

Hallo,

für diese Seite benutze ich ein Child von Cassiopeia.

Wenn ich im Mainmenu ein Submenu anklicke, sehe ich dieses

Ich möchte in der user.css Zugriff auf den Unterstrich und den Rahmen haben: Farbe/Stil ändern bzw. ganz entfernen.

Ich finde keinen Weg

Hat jemand eine Idee?

vG

Zitat

Im zweiten Link ist kein Metismenü

verstehe ich nicht, ist beides identisch.

Egal, es gab auch andere Dinge, die nicht funktionierten. So habe ich die Seite neu aufgesetzt.

Alles gut, danke!

Hallo,

ich möchte im mainmenu den ausgewählten Button einfärben, sobald der zugehörige Beitrag erscheint.

Dazu verwende ich in der user.css folgenden Code:

.container-header .mod-menu a:hover {
background-color: #bbb;
color: #61a0ef;
}
.metismenu.mod-menu .metismenu-item.active > a {
background-color: #aaa;
color: red;
}

Ich verwende die Childs cassiopeia_xyz

Hier ycsh80.de funktioniert es.

Hier eventbus.derkps.de funktiert .metismenu-item.active > a nicht.

Der CSS-Code ist in beiden Seiten - bis auf die Farbe - identisch.

Das Child Cassiopeia_bus ist in der templateDetails.xml korrekt zugewiesen, beide /media/templates/site/cassiopeia/css sind identisch, die Menüzuordung stimmt.

Was läuft hier schief?