CMSimple - Forum

Hier sind Eigenschaften notiert, die für beides gelten: ul li::after UND ul summary::before

div.pex_csstreeSitemap ul li::after, 
div.pex_csstreeSitemap ul summary::before {content: ''; display: block; position: absolute; top: 3px; left: 0; background: #fff; width: 18px; height: 18px; border: 1px solid #999; border-radius: 50%; margin: 2px 0;}

Da könnte man in der nächsten Zeile sicher das meiste weglassen. Ich habe zwischendurch tatsächlich mit unterschiedlichen Werten experimentiert, indem ich die Werte der ersten Zeile überschrieben habe. Dann habe ich es halt nicht mehr entfernt.

Vielleicht sollte ich das grundsätzlich trennen, ich denk morgen mal drüber nach,

Gert

Hallo Gonzo,

das ist halt das Ergebnis, wenn man das CSS anderer Autoren bearbeitet. Man trennt sich nicht konsequent genug von den Ideen der ursprünglichen Autoren, in diesem Fall vom Original Stylesheet von Kate.

Ich habe jetzt mal alles ausgeklammert, was bei den 3 Markern gleich ist (1. Block), und danach die speziellen Eigenschaften für jeden einzelnen Marker notiert:

Code: Select all

div.pex_csstreeSitemap ul li::after, 
div.pex_csstreeSitemap ul summary::before, 
div.pex_csstreeSitemap ul details[open] > summary::before {content: ''; width: 18px; height: 18px; border: 1px solid; border-radius: 3px; margin: 2px 0;}

div.pex_csstreeSitemap ul li::after {position: absolute; top: 3px; left: 0; background: #fff; border-radius: 50%;}
div.pex_csstreeSitemap ul summary::before {z-index: 1; position: absolute; top: 3px; left: 0; background: #fff url('expand-collapse.gif') -1px -1px;}
div.pex_csstreeSitemap ul details[open] > summary::before {background: #fff url('expand-collapse.gif') -21px -1px;}

Der border-radius für "div.pex_csstreeSitemap ul li::after" wird im 2. Block überschrieben, damit die Marker für Seiten ohne Unterseiten rund werden.

Das Ergebnis ist das gleiche wie vorher, aber der CSS Code ist logischer und verständlicher (z. B. zum überschreiben im Template),

Gert

Hallo Gert,

vielen Dank fur die Belehrung. Ich muss gestehen, dass ich die Konkatenierung kommasepariert übersehen hatte, deshalb ist diese bei mir nicht auf mehrere Zeilen verteilt.

Ich habe dein Werk mit Abwandlung auch gleich auf pex_csstreeToc angewandt.

Code: Select all

div.pex_csstreeToc ul li::after, div.pex_csstreeToc ul summary::before, div.pex_csstreeToc ul details[open] > summary::before {content: ''; background: #fff; width: 18px; height: 18px; border: 1px solid; border-radius: 3px; margin: 1px 0;}

div.pex_csstreeToc ul li::after {position: absolute; top: 3px; left: 0; background: rgba(245, 245, 245, 0.8); border-radius: 3px;} /* Hier radius fuer Elemente ohne child */
div.pex_csstreeToc ul summary::before {z-index: 1; position: absolute; top: 3px; left: 0; background: #fff url('expand-collapse.gif') -1px -1px;}
div.pex_csstreeToc ul details[open] > summary::before {background: #fff url('expand-collapse.gif') -21px -1px;}

Funzt soweit ganz gut, aber vielleicht habe ich etwas übersehen. Bei Elementen ohne Unterelement habe ich mich für ein Quadrat mit rounded corners entschieden und den Hintergrund mit rgba() angepasst. In der pex_circles dann auch noch den Hintergrund bei Elementen ohne Unterelement angepasst.

Danke für die Blumen bei SubsiteFuncs 2.6

Habe Verion und Released in den Dateien geändert.

Gruß
Gonzo

Hallo Gert,

abschließend muss ich etwas schreiben. Eigendlich benötige ich den PageXplorer nicht, aber ich war interessiert an deiner Lösung Klappe auf/Klappe zu für Listenelemente nur mit HTML5 und CSS. Das CSS von Kate habe ich mir natürlich auch angetan und da wird ja richtig herumgerechnet. Wusste gar nicht, dass das geht.

Warum das ganze? Nach 1 1/2 Jahren habe ich endlich wieder Bock darauf im Code herumzuwühlen und ich kümmere mich auch wieder viel mehr um meine Website. Das ist etwas Gutes. Ach ja und ich schreibe wieder mehr Blödsinn ins Forum

Gruß
Gonzo

Hallo Gert,

eimal daran - nicht davon.

Ich habe bei pex_circles die Kreise ausgerichtet, weil ich border 1px drumherum haben wollte. Dann sah ich einige Verschiebungen.

Code: Select all

div.pex_circles ul li::after, 
div.pex_circles ul summary::before {background: rgba(205, 205, 205, 0.5); border: 1px solid red; border-radius: 50%; width: 28px; height: 28px; margin: 0 0 2px 0;} /* Hier background geaendert fuer Elemente ohne child, border wirkt auch bei Elementen mit child */
div.pex_circles ul summary::before {background: #363 url('expand-collapse_white.gif') 4px 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; margin: 1px 0 0 1px;}
div.pex_circles ul details[open] > summary::before {background: #600 url('expand-collapse_white.gif') -16px 4px; width: 28px; height: 28px; border-radius: 50%;margin: 0 0 0 1px;}

Die Kreise sind jetzt in korrekter Höhe zu den Listenbeschriftungen (Mit und ohne child). + und - sind jetzt in der richtigen Ausrichtung inneralb der Kreise bei childs.

Ich war mit der Höhenausrichtung der Kreise zur Listenbeschriftung nicht zufrieden. Die Kreise hingen ein wenig. Dann hatte ich gesehen, dass + zu weit links oben ist und das - zu weit oben mitte ist.

Von border bin ich abgegangen und bei mir sieht es mit outline jetzt so aus.

Code: Select all

div.pex_circles ul summary::before {background: rgba(205, 205, 205, 0.5); outline: 1px solid rgba(145, 145, 145, 0.5); border-radius: 50%; width: 28px; height: 28px; margin: 0 0 2px 0;} /* Hier background geaendert fuer Elemente ohne child, border wirkt auch bei Elementen mit child */

Mir gefällt das so

Gruß
Gonzo

Hallo Gemeinde,

da dieser Thread schon über 290 Mal angeschaut wurde und ich weiß, dass jemand dieses Plugin verwendet, habe ich eine Frage zu meiner Änderung.

Ich habe an der Klasse div.pex_circles ul summary::before noch ein wenig herumgeschraubt.

Code: Select all

div.pex_circles ul summary::before {background: rgba(205, 205, 205, 0.5); outline: 1px solid rgba(145, 145, 145, 0.5); box-shadow:inset 0px 0px 7px 5px rgba(145,145,145,.65); border-radius: 50%; width: 28px; height: 28px; margin: 0 0 1px 0;} /* Hier background geaendert fuer Elemente ohne child, border wirkt auch bei Elementen mit child. Jetzt auf outline umgestellt und box-shadow: inset hinzugefuegt */

Jetzt sehen die Kreise vor Elementen ohne child fast aus, als seien es Halbkugeln. Je öfter ich die Werte für box-shadow: inset ändere und je öfter ich mir das Ergbnis anschaue, desto unsicherer bin ich mir, ob es wirklich so aussieht als ob...

Habt ihr Ideeen dazu oder ist das ganz OK so?

Gruß
Gonzo

Gonzo Gates wrote: ↑Wed 26. Nov 2025, 13:32 Jetzt sehen die Kreise vor Elementen ohne child fast aus, als seien es Halbkugeln.

Meinst Du sowas? Schöne Weihnachtsbaumkugeln

https://www.ge-webdesign.de/demotpl/?CM ... er_cssTree

Statt Code zu posten, solltest Du besser eine Demo zu zeigen. Ich glaube nicht, dass Du mit Code irgendjemanden (ausser mir vielleicht) interessieren kannst. PageXplorer wurde bis jetzt 5x heruntergeladen, und da sind Edi und Du schon dabei ...

Ich denke, box-shadow:inset ist wohl nicht die beste Wahl für Lichtreflexe, wenn Du dann auch noch Plus oder Minus haben willst. Ich habe das mit radial-gradient gelöst:

Code: Select all

div.pex_circles ul li::after {width: 28px; height: 28px; background: radial-gradient(circle at 30% 30%, #ccc 0, #000 120%); border: 0; border-radius: 50%; box-shadow: 4px 3px 3px #999;}
div.pex_circles ul summary::before {width: 28px; height: 28px; background: url('expand-collapse_white.gif') 4px 4px, radial-gradient(circle at 30% 30%, #9c9 0, #020); border: 0; border-radius: 50%;}
div.pex_circles ul details[open] > summary::before {width: 28px; height: 28px; background: url('expand-collapse_white.gif') -16px 4px, radial-gradient(circle at 30% 30%, #f99 0, #300)!important; border: 0; border-radius: 50%;}

Gert

Hallo Gerd,

Danke für die Nachhilfe. radial-gradient ist mir nicht fremd, aber ich habe lange nicht damit gearbeitet. Ich wundere mich immer, was du so aus dem Hut ziehen kannst. Bist du ein CSS Lexikon?

Dein Beispiel wollte ich mir sofort ansehen, aber FF meinte, dass deine Demo immer noch den alten Style hat. Edge hatte es mir sofort gezeigt. Als ich die neuen Klassen in mein CSS eingefügt hatte, fühlte FF sich doch geneigt die Änderungen anzuzeigen. Der ist bei Änderungen manchmal ein bisschen zickig. Dein radial-gradient sieht 1000 Mal besser aus als mein box-shadow: inset.

Gruß
Gonzo

Gonzo Gates wrote: ↑Wed 26. Nov 2025, 17:56 aber FF meinte, dass deine Demo immer noch den alten Style hat.

Cache ist das Zauberwort. Bevor ich den gelöscht habe, habe ich den Browser gschlossen und wieder geöffnet, dabei wird der Cache in der Regel gelöscht. Bei CSS ist der Cache meist besonders hartnäckig, bei meinem Arbeitsbrowser habe ich den deshalb komplett deaktiviert.

Gonzo Gates wrote: ↑Wed 26. Nov 2025, 17:56 Ich wundere mich immer, was du so aus dem Hut ziehen kannst. Bist du ein CSS Lexikon?

Das war jetzt eher Zufall. Ich habe mich letztens mit linear-gradient beschäftigt, nicht um Farbverläufe zu erzeugen, sondern um Bereiche nur halb mit Farbe zu füllen. Dabei ist mir im Gedächtnis geblieben, dass das auch radial geht.

Ausserdem warst DU es doch, der mich vor einiger Zeit animiert hat, Dinge mit CSS zu lösen anstatt mit Hintergrundgrafiken,

vielen Dank dafür - Gert

Hallo Gert,

ich hätte da gern mal ein Problem.

In einer Subsite, die im Inhaltsverzeichnis/Sitmap nicht auftaucht, habe ich eine Unterseite, die 'Ideen Sammlung' heißt und dort den PageXplorer eingebaut, weil du gemeckert hast, dass ich nur Code poste und keine Demo habe. Im Seitenmanager gibt es eine Seite, die 'Video-Abteilung' heißt, die ich aus dem Seitenmenü (ToC) herrausgenommen habe. Unterhalb 'Video-Abteilung' gibt es eine Unterseite (_level3_page_) 'A Very Lemmy Christmas'. Die habe ich im Seitenmanager immer noch angehakt als 'Erschein im Menü'. Der PageXplorer zeigt jetzt unter der Seite 'Testerossa', die oberhalb der Seite 'Video-Abteilung' liegt den Link zu 'A Very Lemmy Christmas' an, der nicht zu 'Testerossa' gehört. Unterhalb 'Video-Abteilung' gibt es noch mehrere Level3-Pages, bei denen ich jetzt den Haken entfernt habe, weil die Videos online nicht mehr existieren. Ich habe halt nur 1 GB Webspace und den hatte ich mal deutlich überschritten.

http://dorilaraukft.bplaced.net/sites/C ... n_Sammlung

Wenn du das Login-KW brauchst, ist das kein Problem. Da habe ich nix zu verbergen.

Oder wenn ich etwas falsch gemacht habe, dann her damit. Das oben beschriebene ist entstanden, weil ich zu faul war die ganzen Haken zu enfernen.

Nachtrag: Ich habe auf der Seite 'Testerossa' einen Link auf 'Video-Abteilung' und mir wird im alten Menü (ToC) auch 'A Very Lemmy Christmas' unter 'Testerossa' angezeigt. Also doch mein Fehler.

Gruß
Gonzo

CMSimple - Forum

PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published

Re: PageXplorer 1.0 veröffentlicht / published