ja, das stimmt!
Beiträge von derkps
-
-
#19
Hallo Christine,
das Thema <button> funktioniert, ist abgeschlossen und, halt dich fest, die Bedeutung der user.css ist mir schon aus Protostar-Zeiten bekannt
Meine Frage aus #18 bezieht sich auf #14 und die Klasse .metismenu.mod-menu .metismenu-item.divider:not(.parent) zum Trennermenu.
Ich habe diese Klasse, natürlich nach dem Durchlesen der Erläuterungen (sonst wäre es ja auch nicht möglich ) mit dem Inspector gefunden und habe - wie in #14 beschrieben - die Quelllenangabe template.min.css (wie auch in #14 dargestellt) mit Originalwerten gefunden und nicht in der user.css mit den neuen/gültigen Werten.Vermutlich habe ich aber bei ungünstiger Bildschirmaufteilung schief geguckt. Es sind beide Quellen aufgeführt, eine durchgestrichen.
Alles gut!
vG
-
Na, da staune ich aber!
Nun habe ich mir mit dem Inspector so viel Mühe gegeben, eine .Klasse in css zufinden und dann geht es viel einfacher
Danke für den Hinweis!
Wenn ich jetzt noch erfahre, warum der Inspector nicht auf die user.css verweist sondern auf das Original, welches überschrieben wurde, bin ich erstamal schlau genug.
Zitat#14
Wenn du im Inspektor das Trennerzeichen anklickst und das HTML-Element <li dadurch ausgewählt ist erscheint der Selektor
.metismenu.mod-menu .metismenu-item.divider:not(.parent)
derzeit als 6. Selektor in der Mitte
mit der Verlinkung zu der "Zeile 12982" der template.min.css
-
OK, Danke,
habe ich gefungen.
ZitatMann darf eben nicht erwarten das man den benötigten Selektor schon an 1. oder 2. Stelle findet!
Geduld ist nicht mein Ding
Zitatmit der Verlinkung zu der "Zeile 12982" der template.min.css
Nun habe ich das aber in user.css überschrieben und hätte gedacht, dass diese aktuellen Werte angezeigt werden.
Doch so weiß ich wenigstens, was ich in user.css zu tun habe.
Aktuell arbeite ich mich geduldig(!) an dieser Seite http://demo.derkps.de/geest ab.
Zu den beiden <button> mit der ausgeblendeten function window.history.back(); möchte ich Border und Background entfernen.
Mit Inspector finde ich aber (wieder) keinen Hinweis. Doch irgendwoher muss diese Formatierung doch kommen. -
Hallo,
warum ich template.css nicht gefunden habe, erschließt sich mir nicht
Ich erinnere mich, dass ich die Datei früher mal als 'Stichwortgeber' benutzt habe.
Meine Klassensammlung ist soweit komplett. Nur die Trenner mit den Abständen sind jetzt neu gewesen.
Wer kommt wie auf '.metismenu.mod-menu .metismenu-item.divider:not(.parent)' im Zusammenhang mit dem Trennermenü?
OK. es steht in der template.css; aber unkommentiert. Ich kommentiere meine user.css immer und kann es später zuordnen.
SelfHtml ist mir bekannt. Die sind zu umständlich. Es dauert (mir) zu lange, bis sie auf den Punkt kommen. Layout/Organisation sagen mir auch nicht zu.
Mit dem altem SelfHtml (Spinnennetz im Logo) kam ich besser zurecht. Ist aber 15-20 Jahre her. Aktuell benutze ich w3schools.
Aber welches Nachschlagewerk soll mich bei geg. Problemstellung zu '.divider:not(.parent)' führen?
Vielleicht ist ein globalerer Ansatz erforderlich, statt quick&dirty aus der Hüfte zu schießen.
Bzgl. F12/inspector verfahre ich wie du es beschrieben hast. Meistens erfoglos. Vielleicht bin ich aber auch zu ungeduldig. Quick&dirty?
Jedenfalls vielen Dank für die zahlreichen Hinweise.
Das ursprüngliche Problem ist gelöst und bei mir kommentiert in der user.css gespeichert.
vG
Die Beschreibung #6 zu 'Trennzeichen' startet mittendrin und mir erschließt sich der kausale Zusammenhang nicht.
Wer das auch so sieht, kann jetzt abschalten.
Für die anderen habe ich das mal zusammen gefasst:
Es existiert ein mainmenu mit Menüeinträgen vom Menüeintragstyp: Beiträge|Einzelner Beitrag
Nun sollen zum vorhandenen mainmenu neue Menüeinträge erzeugt werden, die nur einen Trennstrich in der Zeile der vorhandenen Menüeinträge erzeugen.
Erster Trennstrich
Alle Menüeinträge|+Neu
Titel*: TRENNER1; Menüeintragstyp: Sytemlinks|Trennzeichen,
Menü*: mainmenu
Modulzuweisung: Main Menu; Menüzuweisung: alle Seiten
Status: Veröffentlicht
Zweiter Trennstrich
Alle Menüeinträge|+Neu
Titel*: TRENNER2; Menüeintragstyp: Sytemlinks|Trennzeichen,
Menü*: mainmenu
Modulzuweisung: Main Menu; Menüzuweisung: alle Seiten
Status: Veröffentlicht
usw.
Die neuen Menüeinträge erscheinen rechts und müssen in 'Alle Menüeiträge|Menüs: Einträge' passend sortiert werden.
Tipp:
Mit 'Speichern & Schließen' sowie 'Als Kopie speichern', kann die Arbeit erleichtert werden.
Titel* und Alias müssen in der Kopie neu vergeben werden.
Diese Klassen in der user.css sind für die Formatierung hilfreich:
Code
Alles anzeigen/* komplette navbar */ .container-header .container-nav { background-color: pink; margin: 1px; /* Außenabstand, komplette navbar */ padding: 1px; /* Innenabstand, komplette navbar */ display: flex; justify-content: right; /*center; left;*/ } /* bestückte navbar */ .container-header .mod-menu { background-color: lightgreen; color: red; /* Schriftfarbe, Menütitel */ (margin: 0px; /* Außenabstand, bestückte navbar */) (padding: 0px; /* Innenabstand, bestückte navbar */) font-weight: bold; flex-wrap: wrap; /*zweizeiliges mainmenu*/ } /* menu item idle */ .container-header .mod-menu a { -webkit-border-radius: 6px 6px 6px 6px; -moz-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; margin: 2px; /* Außenabstand Menüeintrag */ padding: 2px; /* Innenabstand Menüeintrag */ } .metismenu.mod-menu .metismenu-item { (margin: 4px; /* Außenabstand item */) padding: 4px; /* Innenabstand item */ } .metismenu.mod-menu .metismenu-item a img { vertical-align: 0px; /* -5px; 5px; */ /* vert. Ausrichtung Menüeinträge */ } /* Menü Trennzeichen, Text/Inhalt = Menütitel */ .metismenu.mod-menu .metismenu-item.divider:not(.parent) { border: 5px solid #777777; /* Trennerrahmen */ width: 40px; /* Trennerbreite */ margin: 3px; /* Außenabstand Trenner */ padding: 3px; /* Innenabstand Trenner */ background-color: yellow; }
-
Ok, da kommen wir der Sache schon näher bzw. zur Lösung. Vielen Dank!
Abstände werden mehrfach definiert. Die Summe aller ist das, was man sieht.
Alle Klassen sind jetzt bekannt und alle margin/padding müssen gesetzt werden.
Da sind dann auch wieder meine zwei Standardfragen:
1. Gibt es eine systemematische Lösung, um die Klassen nachzulesen?
1.1 Mit der Einführung von Cassiopeia habe ich mal die original css gesehen. Wo ist sie hin?
2. Gibt es eine systematische Lösung, um die Klassen mit F12/inspector zu ermitteln?
-
Hallo,
um zu sehen, was wo wie wirkt, habe ich die Abstände auf >0px gesetzt und eingefärbt
Code
Alles anzeigen.container-header .mod-menu a { margin: 5px; padding: 5px; background-color: green; color: red; } .metismenu.mod-menu .metismenu-item.divider:not(.parent) { margin: 10px; /*0px;*/ padding: 10px; /*0px;*/ background-color: yellow; color: blue; } .trenner { border: 15px dotted magenta; /*Seitenklasse Trenner*/ }
Die 'weißen' Abstände sind mir (dem Kunden) zu groß.
Aber die beiden Klassen haben mit 0px keinen Einfluss; kleiner/enger geht im Moment nicht
Die Trenner sind grau (warum?) und der obere Rand der Menüeinträge ist größer als der untere (warum?)
-
Ok und danke!
Es ist etwas tricky. Hier das Ergebnis
http://demo.derkps.de/Zwei Probleme noch:
1)
Der Trenner kann über eine Seitenklasse ( trenner) 'Linktyp|CSS-Klasse für Link' angesprochen werden:
user.css:
.trenner {border: 15px double red;} /*15px zeigt aber keine Wirkung und dotted ist dem grauen Strich nur überlagert*/
2)
Der Abstand zwischen den Elementen soll verkleinert werden.
Alle mir vorliegenden margin/padding stehen schon auf 0.
-
Hallo, es geht um dieses Menü:
Ich habe zu jedem Eintrag ein Bild gesetzt.
#2
li-Elemente habe ich in der user.css nur hier
Code.container-header .metismenu > li.active > a::after, .container-header .metismenu > li.active > button::before, .container-header .metismenu > li > a:hover::after, .container-header .metismenu > li > button:hover::before {...
Border funktioniert da nicht
#3
Zitat"Menüpunkte des Typs Trennzeichen"
Was ist das, wie geht das?
-
Hallo,
ich habe in Cassiopeia ein horizontales Mainmenü und möchte senkrechte Trennstriche zwischen den einzelnen Menüpunkten einbauen.
Mit fällt nichtmal das richtige Suchwort dazu ein. Text-decoration ist es nicht.Wer kann mir helfen?
vG
-
ist nach Überarbeitung wieder aktiv bis Di oder Mi.
Ich finde die Beiträge ab #18 zum Thema 'ImageMap' recht zielführend, bin aber nicht sicher ob, die Info unter dem Thema 'Audioplayer mit JS' gefunden wird.
vG
-
-
#18 Indigo66
Danke für das Stickwort!
#19 Sieger66
In der Tat ist der Link defekt. Es fehlt ein ';' am Ende.
Beschrieben wird, wie eine ImageMap aufgebaut ist. Gut zu wissen.
Ich habe zahlreiche ImageMap-Generatoren gefunden, die insbesondere die Ermittlung der Koordinaten der Tippflächen vornimmt.
Zwei KO-Kriterien sind wichtig:
1. Das Image muss aus der URL der Website geladen werden. Das können nicht alle; KO!
2. Das Ergebnis der Map muss responsive sein. Der erzeugte HTML-Code ist es nicht; KO!
Programme, die aus einem URL-Image eine svg-(Bild) Datei erzeugen sind geeignet.
Mit dem online-Tool fla-shop.com/image-maep ist das recht komfortabel möglich; free!
Auch 'Anker sind als Link mit "/rel.Adresse/#anker3" target="_parent" möglich.
Die erzeugten svg-Daten müssen (mit Editor/Notepad) als map.svg abgelegt und in den image-Pfad der Website geladen werden.
Wichtig:
Style im svg-Code ggf. bearbeiten.
Das urprüngliche Image ist als Pfad in der map.svg eingebunden; nicht doppelt im Beitrag einfügen!
Joomla unterstützt kein svg-Format, nichtmal im upload.
Mit dieser Codezeile kann die map.svg aus o.g. Pfad über das JCE-Codefenster im Beitrag eingebunden (und skaliert) werden:
Code<p style="text-align: center; margin-bottom: 1em;"> <object data="/images/stories/.../map.svg" type="image/svg+xml" style="width: 90%; height: auto;" width="90%" height="auto"> </object> </p>
Der Herstellen bietet Support an!
Dieser Beispiellink ist nur vorübergehend aktiv.
vG
Moderator: Ggf. wäre dieses ein eigener Thread. Mit dem ursprünglichen JS-Player hat das nicht mehr zu tun.
-
Hallo Sieger 66
Zitat...Mich wundert, welche Infomationen aus fremden Seiten gezogen werden...
ZitatWelche Informationen möchtest du erklärt bekommen wie man diese in fremden Seiten findet?
Mit Chrome und Firefox kann ich - mit genügend Lesekompetenz - im Quelltext z.B. erkennen, welche Scripte und welches Template_child verwendet wird.
Wenn ich nun versuche mittels user.css über eine .class etwas zu verändern, wähle ich F12.
Meine Suche ist aber sehr unsystematisch und nicht selten erfolglos.
Gibt es Tutorials, die mich in die Systematik einführen?
vG
Moderator: Ggf. wäre dieses ein eigener Thread. Mit dem ursprünglichen JS-Player hat das nicht mehr zu tun.
-
Zitat
In deiner user.js mußt du auf jedenall zuerst die beiden html-Tags <script> am Anfang und Ende komplett entfernen.
Richtig, das war's. Eigentlich logisch, was soll hier sonst stehen?! Danke!
ZitatSofern du das mehrfache gleichzeitige wiedergeben der windfege_mam.mp3 meinst,
lege die Variable bellSound auserhalb der Funktion windfege fest wie es auch im Beispiel bei codepen ist.
Wieder Treffer. Ich weiß zwar nicht warum es so sein muss, aber Danke!
Bei Mehrfachklick auf 'Windfege' quatscht jemand dazwischen.
Der arme Kuckuck wird bei 5x 'Knall' unter Dauerfeuer genommen.
Kann der Koll. ja jetzt ändern.Habe mich letztmalig vor 20 Jahren mit JS befasst. Nur meine Französichkenntnisse sind noch schlechter.
JS etc. ist ja ganz interessant, ich bin aber nicht sicher, ob es nicht dem CMS-Konzept (Plugin, Erweiterung...) widerspricht. Egal!Abschließend aber noch 2 Fragen:
1. Ich habe das komplette Bild als <button> definiert.
Kann man auch in einem großen Bild mehrere kleine Bilder auf bestimmter Position jeweils als einzelnen <button> setzen?
Hat das schonmal jemand gemacht?2. Ich arbeite mit Chrome bzw. Firefox und nutze F12. Mich wundert, welche Infomationen aus fremden Seiten gezogen werden.
Schaffe ich nicht!vG
-
Zitat
In deiner user.js mußt du auf jedenall zuerst die beiden html-Tags <script> am Anfang und Ende komplett entfernen.
Danke, das war der Fehler! Eigentlich logisch. Es läuft auch mit iOS.
Script:
Codedocument.addEventListener("DOMContentLoaded", function() { if (document.getElementById("wind")) { document.getElementById("wind").addEventListener("click", windfege); } }); function windfege() { var bellSound = new Audio('../images/stories/media/media4/windfege_mam.mp3'); bellSound.play(); }
HTML:
Code<button id="wind" style="padding: 0; border: none; background: none;"><img src="images/stories/media/windfege1p.jpg" alt="windfege1" width="400" height="300" style="margin: 5px; float: left;" /> </button>
Im Beitrag mit Text soll das Bild mit float links stehen, rechts und darunter der Text.
Sobald das Bild in <button> ... </button> eingefasst wird, sieht es aus wie in diesem Link zum Problem http://test.derkps.de/index.ph…article&id=107&Itemid=540 .
Das ist nicht ok, aber wie kann man es ändern?
Der Player spielt mit jedem Klick. Der Kuckuck im knipser von den stwerner-schuetzen piepst um sein Leben, während er von rechts unter Dauerfeuer steht.
Das ist nicht ok, aber wie kann man es ändern?vG
-
Link zum Problem!
-
Hallo Sieger66
#9 Nein, der Link spielt auf iOS nicht. Es wird etwas geladen und ich werde auf eine andere Seite geführt ?!
#8 Den Code <button.. habe ich sinngemäß im JCE in den Beitrag gestellt. MIt Bild und Text. <button>...</button> schließt nur das Bild ein.
Bei mouseover verändert sich der Mauszieger über dem Bild, ok.
Text mit eingefügtem Bild/links funktioniert nicht: Bild links, Text darunter statt daneben.
Das Script habe ich sinngemäß in einer user.js eingebaut /media/templates/site/cassiopeia_med/js/user.js
Es wird aber mit Klick auf das Bild nicht ausgeführt.
Was habe ich falsch gemacht?
-
Nun war es doch so, dass StMa hier MP3 abspielen nach einer Lösung für seinen Kuckucksknipser gesucht hat.
Ihm wurde JS gemäß codepen.io/gunnarbittersmann/pen/apmyWQ empfohlen.Inswischen hat er wohl auch eine Lösung gefunden, ich weiß aber nicht welche. Jedenfalls funktioniert http://www.stwerner-schuetzen.de/index.php/kuckucksknipser auch auf iOS.
Die Anwendung codepen.io/gunnarbittersmann/pen/apmyWQ - definitiv JS - funktioniert auf iOS (Safari, Firefox) nicht! JS ist aber aktiviert.
Daraus muss ich wohl schlussfolgern, dass ein JS MP3 Player für Apple-Geräte nicht geeignet ist.
Blöd, irgendwie.
-
ja, nee, ich möchte nur die Seite https://tass.ewbb.ch/test-mp3-bild mit meinem iPhone aufrufen, um das Thema abzuschließen.
Am PC hat es ja funktioniert. Aber iOS???
Danach entscheide ich, ob ich noch einen Ansatz mit JS versuche oder nicht.vG