Tablesorter_XH

[cmb]

Aber da stimmt nun wieder irgendetwas nicht, denn nun ist ein "mehr"-Button zu genau diesen ausgeblendeten Spalten in der 3. Spalte und nicht in der 4. Außerdem werden sie alle 3 nun komplett für die 1. Zeile bzw ab da richtig in der 4. Spalte für die 2. Zeile usw angezeigt.
Das Ergebnis seht ihr hier: https://test.hhs-obertshausen.de/?BiB-Seminar-1-c

Die Zeile "Besuch der BiB an der HHS" hat nur 5 Spalten, die anderen Zeilen haben aber 6; damit kommt der Tablesorter noch nicht klar.

Ich werde das Plugin wohl dahingehend verbessern, dass solche Fehler explizit berichtet werden.

[mhz]

Danke! - Nach Einfügen von <td> </td> nun wieder richtig.
Lässt sich das so gestalten, dass in der HTML-Übersicht der <thead> -Bereich nicht zusammenschiebt, sondern wie die übrigen <td> -Bereiche jeweils Zeile für Zeile angeordnet bleibt?

[lck]

Da Du Dir das Plugin schon mal angeschaut hast: hast Du einen Tipp bzgl. des Button-Styling? Kann man nicht eine kleine Hintergrundgrafik auf einem Button platzieren, ohne dass dieser gleich furchtbar klobig aussieht (vergleiche Sortier- und Aufklappbuttons vs. Paginierungsbuttons)? Ich hab diverses ausprobiert, aber sobald background-image im Spiel ist, scheint "alles futsch".

Hier mal ein angepasstes stylesheet.css mit Hintergrundbild für die Buttons (Änderungen mit lck gekennzeichnet), alternativ könnte man ein Gradient-image verwenden:

Code: Select all

.tablesorter thead th button{
    width: 100%;
    padding-right: 24px;
}
.tablesorter_ascdesc, .tablesorter_asc, .tablesorter_desc {
    background-position: right center, center center; /* lck */
    background-repeat: no-repeat, no-repeat; /* lck */
    background-size: auto, cover; /* lck */
}
.tablesorter_ascdesc {
    background-image: url("ascdesc-black.png"), url(bgimage.jpg); /* lck */
}
.tablesorter_asc {
    background-image: url("asc-black.png"), url(bgimage.jpg); /* lck */
}
.tablesorter_desc {
    background-image: url("desc-black.png"), url(bgimage.jpg); /* lck */
}

/*
 * Zebra look
 */
.tablesorter tbody tr {
    color: black;
}
.tablesorter tbody tr:nth-child(2n+1) {
    background: #fff;
}
.tablesorter tbody tr:nth-child(2n) {
    background: #eee;
}

.tablesorter_expand, .tablesorter_collapse {
    width: 100%;
    padding-right: 24px;
    background-position: right center, center center; /* lck */
    background-repeat: no-repeat, no-repeat; /* lck */
    background-size: auto, cover; /* lck */
}
.tablesorter_expand {
    background-image: url("desc-black.png"), url(bgimage.jpg); /* lck */
}
.tablesorter_collapse {
    background-image: url("asc-black.png"), url(bgimage.jpg); /* lck */
}

.tablesorter dl {
    margin-left: 2em;
}
.tablesorter dt {
    font-weight: bold;
}

.tablesorter_pagination {
    text-align: right;
    padding: 1em 0;
}
.tablesorter_pagination button { /* lck */
    background: #fff url(bgimage.jpg) 50% 50% / cover no-repeat;
}

/*
 * Back-end
 */
.tablesorter_logo {
    float: left;
    margin-right: 1em;
}
.tablesorter_license {
    text-align: justify;
}
 

[cmb]

Danke! - Nach Einfügen von <td> </td> nun wieder richtig.

Prima!

Lässt sich das so gestalten, dass in der HTML-Übersicht der <thead> -Bereich nicht zusammenschiebt, sondern wie die übrigen <td> -Bereiche jeweils Zeile für Zeile angeordnet bleibt?

Ich habe in der Dokumentation leider nichts finden können (apply_source_formatting mit indent_before bzw. indent_after wäre wohl die richtige Stelle, aber diese Option sei seit Version 3 entfernt).

Ich würde da aber auch nicht allzu viel Zeit investieren; TinyMCE 3 ist alt, und wird in CMSimple_XH 1.7 durch TinyMCE 4 ersetzt werden, und da ist vieles wieder ganz anders. Du kannst Dir den TinyMCE 4 auch schon unter CMSimple_XH 1.6.x anschauen; ich würde aber vorher ein Content-Backup machen, falls der TinyMCE 4 die Formatierung verschlimmbessern sollte.

[cmb]

Hier mal ein angepasstes stylesheet.css mit Hintergrundbild für die Buttons (Änderungen mit lck gekennzeichnet), alternativ könnte man ein Gradient-image verwenden:

Danke, Ludwig! Das war es aber nicht, was ich meinte; sorry, wohl nicht klar genug ausgedrückt. Mir ging es beim background-image wirklich nur um die schon existierenden, also die kleinen Pfeile, die die Sortierrichtung und das Auf- bzw. Zuklappen signalisieren. Ohne diese kleinen background-images sieht der Button in Chrome so aus:

button-without.png

Mit dem Bildchen aber so:

button-with.png

Ohne Bildchen sieht der Button modern aus (dünner Rahmen, hellere Farbe mit einem dezenten Verlauf); mit dem Bildchen erinnert er an Windows 98 mit klobigem outset. In anderen Browsern sieht es ähnlich aus.

Und ja, ich weiß, solche Buttons werden vermutlich vom Template oder dem Webmaster sowieso komplett anders gestylt, aber ich würde halt gern ein Plugin-Stylesheet ausliefern, das möglichst wenig vorgibt, trotzdem aber die Pfeilchen mit anzeigt ohne das Default-Button-Styling zu verhunzen. Kann natürlich sein, dass das gar nicht geht (Default-Button ist Windows-Style; sobald ein Background-Image im Spiel ist, geht das dann nicht mehr ) – fände ich aber schade. Als Workaround könnte ich die Bildchen auch als <img> einfügen, was dann das von mir gewünschte Ergebnis bringt:

button-img.png

Das wäre semantisch vielleicht sogar korrekter, aber dann kann der Anwender nicht mehr so einfach per CSS auf die weißen Buttons umschalten (die schon im css/ Ordner liegen), falls er dunkle Buttons hat.

Und ja, statt der Buttons könnte ich Links verwenden (die dieses Problem nicht haben), aber das finde ich semantisch weniger korrekt, da der Link ja kein sinnvolles Standard-Verhalten hat (sprich, href kann nicht sinnvoll gesetzt werden).

Eine Icon-Font wäre vermutlich die Lösung nach der ich Suche, aber das fände ich zumindest für ein einzelnes Plugin zuviel des Guten, zumal es ja auch leicht mit einer Icon-Font im Template kollidieren könnte.

[cmb]

Eine Icon-Font wäre vermutlich die Lösung nach der ich Suche, aber das fände ich zumindest für ein einzelnes Plugin zuviel des Guten, zumal es ja auch leicht mit einer Icon-Font im Template kollidieren könnte.

Eureka! Icon-Font war das Stichwort, das mir fehlte. Wenn ich einfach ein leeres <span> in den Button setze, kann ich diesem ein background-image geben, und das Default-Button-Styling bleibt erhalten.

[mhz]

Den TinyMCE4 habe ich mir schon mal geladen, allerdings finde ich die Schaltflächen noch nicht so toll. Hatte vor einiger Zeit mal nachgefragt, ob sie änderbar wären ... habe das aber mit den neuen, bunten Icons nicht hinbekommen.
Zerschossen hatte der mir damals Nichts. War aber mit dem alten Template.

[cmb]

Den TinyMCE4 habe ich mir schon mal geladen, allerdings finde ich die Schaltflächen noch nicht so toll. Hatte vor einiger Zeit mal nachgefragt, ob sie änderbar wären ... habe das aber mit den neuen, bunten Icons nicht hinbekommen.

Ja, ich kann mich erinnern. Das erste Stichwort lautet "Skins". Es gibt einen Skin Creator mit dem man sich eigene Skins erstellen kann. Klassische farbige Buttons sind damit aber zunächst nicht möglich, da die Bildchen eben keine Bildchen mehr sind, sondern aus einer Icon-Font kommen. Wie man sich eine eigene erstellt wird kurz unter "Modifying the icons" beschrieben. Vielleicht mag sich das ja mal einer anschauen?

[lck]

Das war es aber nicht, was ich meinte; sorry, wohl nicht klar genug ausgedrückt. Mir ging es beim background-image wirklich nur um die schon existierenden, also die kleinen Pfeile, die die Sortierrichtung und das Auf- bzw. Zuklappen signalisieren.

Sag das doch gleich , jetzt sehe ich klarer

Code: Select all

.tablesorter thead th button {
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
    /* padding-right: 24px; */
}
/* .tablesorter_ascdesc, .tablesorter_asc, .tablesorter_desc {
    background-position: right center;
    background-repeat: no-repeat;
}
.tablesorter_ascdesc {
    background-image: url("ascdesc-black.png");
}
.tablesorter_asc {
    background-image: url("asc-black.png");
}
.tablesorter_desc {
    background-image: url("desc-black.png");
} */

.tablesorter_ascdesc:after {
    content: "▼▲";
    color: #D32F2F;
    padding: 0 0 0 1em;
}
.tablesorter_asc:after {
    content: "▲";
    color: #D32F2F;
    padding: 0 0 0 2em;
}
.tablesorter_desc:after {
    content: "▼";
    color: #D32F2F;
    padding: 0 0 0 2em;
}
...

[cmb]

Sag das doch gleich , jetzt sehe ich klarer

Danke, ich jetzt auch! Ist so natürlich viel besser.