Ja eben, weil ich ja den Teil den du vorher gesagt hast, entfernt habe. Nur taucht dann auch dieser Pfeil ganz rechts in der Tableiste auf.
Aber ich konnte das Problem jetzt lösen und zwar lösche ich den Teil den du gesagt hast nicht raus und zusätzlich mit diesem code funktioniert es dann (habe ich ergooglet):
.tabbrowser-tab:not([pinned]) .tab-close-button {
display: inline-flex !important
}Ahh, ja ich habe den entfernt, weil er dafür sorgt, dass der Tab-schliessen Button nur noch auf dem aktiven Tab angezeigt wird.
Wie kann ich denn die Tab-schliessen Button auf allen anzeigen ?
ok, ich werde es mir ansehen und mal schauen, ob ich da was basteln kann 
Noch eine Frage: Ich sehe gerade, dass diese Version in der Tableiste ganz recht so ein Pfeil hat. Wenn ich da drauf klicke, popt ein Menu mit meinen Tabs auf. Kann ich das entfernen? Oder weisst du, an welcher Stelle im Skript das ist?
Ok, also der blaue Strich ist mir ja egal. Ich meinte einfach, dass ich beim Tab Umherschieben auch sehe, wie der Tab umhergeschoben wird. Wenn da noch ein blauer Strich ist, ist mir das eig. egal. Ich würde nur gerne sehen, wie der Tab auch umhergeschoben wird, so wie in aktuellen Firefoxversionen.
Wenn du mir sagst, wie du das mit diesen Videos machst, kann ich auch eins machen.
Ich habe jetzt versucht, die Tabs mit diesem Skript wieder so zu machen, wie es ohne Script ist. Hat soweit funktioneirt, denke ich:
// ==UserScript==
// @name zzzz-MultiRowTab_LiteforFx48.uc.js
// @namespace http://space.geocities.yahoo.co.jp/gl/alice0775
// @description Experimentelle CSS Version für Mehrzeilige Tableiste
// @include main
// @compatibility Firefox 113
// @author Alice0775
// @version 2016/08/05 00:00 Firefox 48
// @version 2016/05/01 00:01 hide favicon if busy
// @version 2016/03/09 00:01 Bug 1222490 - Actually remove panorama for Fx45+
// @version 2016/02/09 00:01 workaround css for lwt
// @version 2016/02/09 00:00
// ==/UserScript==
"use strict";
MultiRowTabLiteforFx();
function MultiRowTabLiteforFx() {
var css =` /* USER_SHEET */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
/* Anpassung der Symbolleisten */
#titlebar,#tabbrowser-tabs { appearance: none !important; }
/* Anpassen der Titelleistenschaltfläche [- x] der Tableiste */
#TabsToolbar > .titlebar-buttonbox-container { margin: 0 !important; }
#TabsToolbar > .titlebar-buttonbox-container .titlebar-button {
height: calc(8px + var(--tab-min-height));
padding: 0 !important;
width: 46px;
}
#toolbar-menubar:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) > .titlebar-buttonbox-container { display: none !important; }
/* Mehrzeilige Tableiste */
box.scrollbox-clip[orient="horizontal"] > scrollbox {
flex-wrap: wrap !important;
max-height: calc(calc(8px + var(--tab-min-height)) * 3); /* Anzahl der Tabzeilen(Standard = 3 Zeilen)*/
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* --- Ziehbereich der Tab-Leiste --- */
/* Anpassung */
hbox.titlebar-spacer[type="pre-tabs"] { width: 0px !important; } /* Linker Ziehbereich: Standard 40px */
hbox.titlebar-spacer[type="post-tabs"] { width: 0px !important; } /* Rechter Ziehbereich: Standard 40px */
/* ↓ Wenn Sie die linke und rechte Seite des CSS-Codes auskommentieren und den CSS-Code aktivieren,
können Sie den Ziehbereich links einblenden, der beim Maximieren des Fensters ausgeblendet wird. */
/* :root:not([sizemode="normal"]) hbox.titlebar-spacer[type="pre-tabs"] { display: block !important; } */
/* ↓Wenn Sie die Auskommentierung links und rechts von unten stehenden CSS-Code entfernen und den CSS-Code
aktivieren, können Sie den linken und rechten Ziehbereich einblenden, der im Vollbildmodus ausgeblendet wird. */
/* :root[inFullscreen] hbox.titlebar-spacer { display: block !important; } */
} `;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.USER_SHEET);
var css =` /* AGENT_SHEET */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
/* Bei Überschreitung der angegebenen Zeilenanzahl, mit der Maus,
über die dann eingeblendetet Scrolleiste zur gewünschten Zeile wechselnる */
box.scrollbox-clip > scrollbox[orient="horizontal"] > scrollbar { -moz-window-dragging: no-drag !important; }
} `;
var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
var css =` /* AUTHOR_SHEET */
/*
#tabbrowser-arrowscrollbox::part(scrollbox) {
flex-wrap: wrap !important;
max-height: calc(calc(8px + var(--tab-min-height)) * 3);
overflow-x: hidden !important;
overflow-y: auto !important;
}
*/
/* Bildlaufschaltfläche und Abstandshalter in der Schattenwurzel der Tab-Leiste ausblenden */
#tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator),
#tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator),
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) { display: none !important; }
.tabbrowser-tab:not([pinned]) {
flex-grow: 0 !important;
min-width: 180px !important; /*Feste Breite für die Tabs, kann geändert werden*/
}
*|*:root {
--tab-toolbar-navbar-overlap: 0 !important;
--tab-min-height: 21px !important;
}
/*Keine Abstände um den Tab rum, die durch neuere Firefoxversionen enstanden sind*/
.tab-background {
margin-block: 0px !important;
}
#urlbar {
margin-top: -2px !important;
--urlbar-toolbar-height: 25px !imporant;
--urlbar-height: 22px !important;
}
.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
padding: 0 0px !important;
}
#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: -0px !important;
}
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}
`;
var sss = Components.classes['@mozilla.org/content/style-sheet-service;1'].getService(Components.interfaces.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AUTHOR_SHEET);
if(location.href !== 'chrome://browser/content/browser.xhtml') return;
// Tabbar scrollIntoView
gBrowser.tabContainer.addEventListener("SSTabRestoring", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
gBrowser.tabContainer.addEventListener("TabAttrModified", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
gBrowser.tabContainer.addEventListener("TabMove", function(event) {event.target.scrollIntoView({behavior: "instant", block: "nearest", inline: "nearest"})}, true);
// drag & drop & DropIndicator
gBrowser.tabContainer.on_dragover = function(event) {
var effects = this.getDropEffectForTabDrag(event);
var ind = this._tabDropIndicator;
if (effects == "" || effects == "none") {
ind.hidden = true;
return;
}
event.preventDefault();
event.stopPropagation();
var arrowScrollbox = this.arrowScrollbox;
if (effects == "link") {
let tab = this._getDragTargetTab(event, { ignoreTabSides: true });
if (tab) {
if (!this._dragTime) {
this._dragTime = Date.now();
}
if (Date.now() >= this._dragTime + this._dragOverDelay) {
this.selectedItem = tab;
}
ind.hidden = true;
return;
}
}
var rect = arrowScrollbox.getBoundingClientRect();
var newMarginX, newMarginY;
let newIndex = this._getDropIndex(event);
let children = this.allTabs;
if (newIndex == children.length) {
let tabRect = this._getVisibleTabs().at(-1).getBoundingClientRect();
if (RTL_UI) {
newMarginX = rect.right - tabRect.left;
} else {
newMarginX = tabRect.right - rect.left;
}
newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;
} else {
let tabRect = children[newIndex].getBoundingClientRect();
if (RTL_UI) {
newMarginX = rect.right - tabRect.right;
} else {
newMarginX = tabRect.left - rect.left;
}
newMarginY = tabRect.top - rect.top + tabRect.height / 2 - rect.height / 2;
}
ind.hidden = false;
newMarginX += ind.clientWidth / 2;
if (RTL_UI) {
newMarginX *= -1;
}
ind.style.transform = "translate(" + Math.round(newMarginX) + "px," + Math.round(newMarginY) + "px)";
}
gBrowser.tabContainer.on_drop = function(event) {
var dt = event.dataTransfer;
var dropEffect = dt.dropEffect;
var draggedTab;
let movingTabs;
if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) {
// tab copy or move
draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
// not our drop then
if (!draggedTab) {
return;
}
movingTabs = draggedTab._dragData.movingTabs;
draggedTab.container._finishGroupSelectedTabs(draggedTab);
}
this._tabDropIndicator.hidden = true;
event.stopPropagation();
if (draggedTab && dropEffect == "copy") {
// copy the dropped tab (wherever it's from)
let newIndex = this._getDropIndex(event);
let draggedTabCopy;
for (let tab of movingTabs) {
let newTab = gBrowser.duplicateTab(tab);
gBrowser.moveTabTo(newTab, newIndex++);
if (tab == draggedTab) {
draggedTabCopy = newTab;
}
}
if (draggedTab.container != this || event.shiftKey) {
this.selectedItem = draggedTabCopy;
}
} else if (draggedTab && draggedTab.container == this) {
let oldTranslateX = Math.round(draggedTab._dragData.translateX);
let tabWidth = Math.round(draggedTab._dragData.tabWidth);
let translateOffset = oldTranslateX % tabWidth;
let newTranslateX = oldTranslateX - translateOffset;
if (oldTranslateX > 0 && translateOffset > tabWidth / 2) {
newTranslateX += tabWidth;
} else if (oldTranslateX < 0 && -translateOffset > tabWidth / 2) {
newTranslateX -= tabWidth;
}
let dropIndex;
if (draggedTab._dragData.fromTabList) {
dropIndex = this._getDropIndex(event);
} else {
dropIndex = this._getDropIndex(event);
// "animDropIndex" in draggedTab._dragData &&
// draggedTab._dragData.animDropIndex;
}
let incrementDropIndex = true;
if (dropIndex && dropIndex > movingTabs[0]._tPos) {
dropIndex--;
incrementDropIndex = false;
}
if (oldTranslateX && oldTranslateX != newTranslateX && !gReduceMotion) {
for (let tab of movingTabs) {
tab.setAttribute("tabdrop-samewindow", "true");
tab.style.transform = "translateX(" + newTranslateX + "px)";
let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow");
this._finishAnimateTabMove();
if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
gBrowser.syncThrobberAnimations(tab);
};
if (gReduceMotion) {
postTransitionCleanup();
} else {
let onTransitionEnd = transitionendEvent => {
if (
transitionendEvent.propertyName != "transform" ||
transitionendEvent.originalTarget != tab
) {
return;
}
tab.removeEventListener("transitionend", onTransitionEnd);
postTransitionCleanup();
};
tab.addEventListener("transitionend", onTransitionEnd);
}
}
} else {
this._finishAnimateTabMove();
if (dropIndex !== false) {
for (let tab of movingTabs) {
gBrowser.moveTabTo(tab, dropIndex);
if (incrementDropIndex) {
dropIndex++;
}
}
}
}
} else if (draggedTab) {
// Move the tabs. To avoid multiple tab-switches in the original window,
// the selected tab should be adopted last.
const dropIndex = this._getDropIndex(event);
let newIndex = dropIndex;
let selectedTab;
let indexForSelectedTab;
for (let i = 0; i < movingTabs.length; ++i) {
const tab = movingTabs[i];
if (tab.selected) {
selectedTab = tab;
indexForSelectedTab = newIndex;
} else {
const newTab = gBrowser.adoptTab(tab, newIndex, tab == draggedTab);
if (newTab) {
++newIndex;
}
}
}
if (selectedTab) {
const newTab = gBrowser.adoptTab(
selectedTab,
indexForSelectedTab,
selectedTab == draggedTab
);
if (newTab) {
++newIndex;
}
}
// Restore tab selection
gBrowser.addRangeToMultiSelectedTabs(
gBrowser.tabs[dropIndex],
gBrowser.tabs[newIndex - 1]
);
} else {
// Pass true to disallow dropping javascript: or data: urls
let links;
try {
links = browserDragAndDrop.dropLinks(event, true);
} catch (ex) {}
if (!links || links.length === 0) {
return;
}
let inBackground = Services.prefs.getBoolPref(
"browser.tabs.loadInBackground"
);
if (event.shiftKey) {
inBackground = !inBackground;
}
let targetTab = this._getDragTargetTab(event, { ignoreTabSides: true });
let userContextId = this.selectedItem.getAttribute("usercontextid");
let replace = !!targetTab;
let newIndex = this._getDropIndex(event);
let urls = links.map(link => link.url);
let csp = browserDragAndDrop.getCsp(event);
let triggeringPrincipal =
browserDragAndDrop.getTriggeringPrincipal(event);
(async () => {
if (
urls.length >=
Services.prefs.getIntPref("browser.tabs.maxOpenBeforeWarn")
) {
// Sync dialog cannot be used inside drop event handler.
let answer = await OpenInTabsUtils.promiseConfirmOpenInTabs(
urls.length,
window
);
if (!answer) {
return;
}
}
gBrowser.loadTabs(urls, {
inBackground,
replace,
allowThirdPartyFixup: true,
targetTab,
newIndex,
userContextId,
triggeringPrincipal,
csp,
});
})();
}
if (draggedTab) {
delete draggedTab._dragData;
}
}
}Danke, ich werde den Code ausprobieren. War gestern schon nicht mehr hier.
Aber nein, ich meinte nicht das mit der Tab-Vorschau (die gibt es zwar auch bei mir, sehe ich gerade). Wenn du ja ein Tab rumschiebst, siehst du doch diesen blauen Strich (in deiner Version), der einem signalisiert, wo der Tab abgelegt wird. Im aktuellen Firefox ist es aber so, dass dass der Tab an sich rumgeschoben wird (ohne diesen blauen Strich). Ich weiss nicht, wie du das immer machst mit diesen kleinen Videos, deswegen kann ich dir nur ein Bild machen.
Bezüglich abgeschnittenen Tabs: Naja also bei meinem Code geht es ohne Multirow-Tabs (dann ist es nicht abgeschnitten). Irgendwas muss da also in Konflikt geraten. Ich suche ja gerne selber, aber kannst du mir sagen, ob ich nur den CSS Code anschauen muss? Oder könnte es auch sein, dass es am Javascript liegt?
Was ich mich gerade noch frage: Ist es mit CSS technisch möglich, dass sich die Tabbreite folgendermassen verhält: Alle Tabs sollen immer gleich breit sein, sich aber in der Grösse an den verfügbaren Platz in der Leiste oben anpassen. ich nutze oft verschieden breite Fenster. Bei fixen Tabbreiten habe ich dann unter umständen rechts immer leere Bereiche. Nutze ich aber variable Tabbreiten, sind alle Tabs verschieden breit (in den versch. Zeilen). Daher die Idee, dass sie zwar untereinander gleich breit sein sollen, insgesammt aber sich am verfügbaren Platz anpassen sollen in der Breite.
Habe mittlerweile das "Original" ausprobiert, ist ganz ok, aber mir gefällt einiges am Style nicht. Habe mich auch schon aufgemacht, es zu ändern, aber deins ist ja viel besser 
Danke!
Also nehme ich jetzt deins mal. Ich habe noch folgendes abgeändert/hinzugefügt:
*|*:root {
--tab-toolbar-navbar-overlap: 0 !important;
--tab-min-height: 21px !important;
}
.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
}
#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: 0px !important;
}
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}Jetzt frage ich mich aber folgendes bei dem Skript: Egal ob mit oder ohne meine Änderung, die Tabs sind abgeschnitten. Man sieht das auch auf deinem Bild beim angewählten Tab. Oben ist er noch abgerundet, unten aber nicht. Ich weiss nicht, wie das zustande kommt. Hast du da eine Idee?
Dann hätte ich noch eine Frage wegen der Animation beim Tab umherziehen: Im Original ist der ja anders, wie in deiner Version und deine Version anders, wie die aktuelle FF Version. Wäre es möglich, die Animation der aktuellen FF Version da einzubauen? Also so, dass man den Tab immer sieht beim umherziehen. Also nicht nur diese Linien. Ich habe mir alle CSS Einschübe da angeschaut, aber ich erkenne nicht, was für diese Animation verwantwortlich ist.
Edit: Ach ja, und wie mache ich es, dass ich immer den Tabschliessen-Button sehe bei allen Tabs? Fällt mir gerade auf, dass die weg sind.
Ich nutze jetzt folgenden Code:
/*Ab hier Code, der für neuere Firefoxversionen nötig ist, damit alles wieder richtig positioniert ist. Stand 10.07.2023*/
/*Verändert glaube ich den schwarzen Hintergrund hinter den Tabs. Ist nötig, damit es keinen freien, schwarzen Hintergrund hinter den
Tabs hat, wenn man sie mittels ".tabbrowser-tab" auf z.B 21px begrenzt (sonst ist der Hintergrund weiterhin so gross, wie original).
Ist auch wegen den Multi-Tabreihen wichtig, denn der Code arbeitet mit "--tab-min-height" und dieser muss dann so hoch sein, wie meine Tabs. */
#tabbrowser-tabs {
--tab-min-height: 21px !important;
}
/*Keine Abstände um den Tab rum, die durch neuere Firefoxversionen enstanden sind*/
.tab-background {
margin-block: 0px !important;
}
/*verschiebt den "New-Tab"-Button. Darf nicht zu hoch sein die Zahl, sonst hat man bei den Multi-Tabreihen fehler*/
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
margin-top: -3px !important;
}
/*Ab hier "alter" code*/
/*Verändert die höhe der Browser-Tabs und den Abstand zwischen Tabs (padding)*/
.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
padding: 0 2px !important;
}
/*Top-Linie beim (aktiven) tab in "solid #429CE3"*/
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}
/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/
#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: -4px !important;
}
/* Stand 10.07.2023. Ab hier code für "mehrere Tabreihen" mit 145px "min-width" (sonst verschwindet das Kreuz zum Tabschliessen, wenn die Tabs kleiner sind)*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/
/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */
/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll */
:root{
--multirow-n-rows: 3;
--multirow-tab-min-width: 100px;
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}
/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */
/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */
/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */
#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important
}
@-moz-document url(chrome://browser/content/browser.xhtml){
#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }
scrollbox[part][orient="horizontal"]{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
scrollbar-gutter: stable;
scroll-snap-type: y mandatory;
}
}
.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
overflow: -moz-hidden-unscrollable;
display: inline;
--scrollbutton-display-model: none;
}
.tabbrowser-tab{ scroll-snap-align: start; }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}
.tabbrowser-tab[fadein]:not([pinned]){
min-width: 145px !important;
flex-grow: var(--multirow-tab-dynamic-width) !important;
/*
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
Don't set to none or you'll see errors in console when closing tabs
*/
/*max-width: 100vw !important;*/
}
.tabbrowser-tab > stack{ width: 100%; height: 100% }
/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button{ margin-bottom: 0 !important; }
#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
display: flex !important;
align-items: center; /* Fx <112 compatibility */
}
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }Ich habe herausgefunden, dass Zeile 14, 20, 31 und 45 einen Einfluss darauf haben, ob ich mit den Tabs beim ziehen irgendwo "hängen" bleibe.
Mit obigem Code funktioniert das horizontale verschieben innerhalb einer Tabreihe soweit gut. Von oben nach unten geht es in beide Richtungen, aber nicht so ganz "normal". Wenn ich den Tab eine (oder mehrere) Reihe nach unten ziehen will, muss ich mit dem Tab ganz nach rechts gehen und dann kann ich den Tab eine oder mehrere Reihen nach unten ziehen. Umgekehrt zum nach oben Ziehen muss ich ganz nach links.
Soweit funktioniert es, auf diese Weise zumindest, aber ich sehe es schon kommen, dass mir noch mehr Fehler auffallen. Naja, wenn ich nichts mehr schreibe dazu, dann funktioniert es.
Aber ja, vlt. mache ich mich irgendwann ja doch mal auf und nutze Javascript. Ich kann nur gar nix mit Javascript. Wenn, dann starte ich mit deinem Script, denn du ein paar Beiträge vorher gepostet hast.
Nutzt du da jetzt mein Code?
Weil bei mir funktioniert es nicht. Ich kann sie ein bisschen bewegen und dann aber bleiben sie auf einmal irgendwo "hängen", als wäre da eine Wand oder so.
Ok, update: Es geht doch nicht xD
Irgendwas, nach Post #8 hat dazu geführt, dass ich jetzt die Tabs nicht mehr frei bewegen kann. Irgendwas geht nicht mehr.
Und zu min-width: Ja aber, das muss ich zuerst aktivieren, indem ich da ein Wert ändere. Da steht in der Beschreibung, es seien dann fixe Tabbreiten, habs noch nicht ausprobiert.
Aber muss zuerst das andere Problem lösen
Denkt man, man hats und schon kommt das nächste Problem^^
Ok, ich habe jetzt jeweils einzelne Codeteile rausgelöscht und geschaut, ob sich das Problem in Luft auflöst. Konnte dann das Problem mit dem leeren Platz lösen und musste dann dafür aber noch an anderen Stellen anpassungen machen. Jetzt ist aber alles perfekt soweit.
Also danke für die ganzen Hinweise und so. Manchmal brauchts bisschen Input von aussen
Hier der Code, falls jemand Interesse hat:
/*Ab hier Code, der für neuere Firefoxversionen nötig ist, damit alles wieder richtig positioniert ist. Stand 10.07.2023*/
/*Verändert glaube ich den schwarzen Hintergrund hinter den Tabs. Ist nötig, damit es keinen freien, schwarzen Hintergrund hinter den
Tabs hat, wenn man sie mittels ".tabbrowser-tab" auf z.B 21px begrenzt (sonst ist der Hintergrund weiterhin so gross, wie original).
Ist auch wegen den Multi-Tabreihen wichtig, denn der Code arbeitet mit "--tab-min-height" und dieser muss dann so hoch sein, wie meine Tabs. */
#tabbrowser-tabs {
--tab-min-height: 21px !important;
}
/*Keine Abstände um den Tab rum, die durch neuere Firefoxversionen enstanden sind*/
.tab-background {
margin-block: 0px !important;
}
/*verschiebt den "New-Tab"-Button. Darf nicht zu hoch sein die Zahl, sonst hat man bei den Multi-Tabreihen fehler*/
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
margin-top: -3px !important;
}
/*Ab hier "alter" code*/
/*Verändert die höhe der Browser-Tabs*/
.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
}
/*Top-Linie beim (aktiven) tab in "solid #429CE3"*/
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}
/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/
#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: -5px !important;
}
/* Stand 10.07.2023. Ab hier code für "mehrere Tabreihen" mit 145px "min-width" (sonst verschwindet das Kreuz zum Tabschliessen, wenn die Tabs kleiner sind)*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/
/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */
/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll */
:root{
--multirow-n-rows: 3;
--multirow-tab-min-width: 100px;
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}
/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */
/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */
/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */
#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important
}
@-moz-document url(chrome://browser/content/browser.xhtml){
#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }
scrollbox[part][orient="horizontal"]{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
scrollbar-gutter: stable;
scroll-snap-type: y mandatory;
}
}
.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
overflow: -moz-hidden-unscrollable;
display: inline;
--scrollbutton-display-model: none;
}
.tabbrowser-tab{ scroll-snap-align: start; }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}
.tabbrowser-tab[fadein]:not([pinned]){
min-width: 145px !important;
flex-grow: var(--multirow-tab-dynamic-width) !important;
/*
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
Don't set to none or you'll see errors in console when closing tabs
*/
/*max-width: 100vw !important;*/
}
.tabbrowser-tab > stack{ width: 100%; height: 100% }
/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button{ margin-bottom: 0 !important; }
#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
display: flex !important;
align-items: center; /* Fx <112 compatibility */
}
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }Also hier noch ein Bild, wie es jetzt aussieht, für Interessierte:
Ja , das habe ich gemacht und versuche ich gerade immer noch. ich finde es aber nicht.
Der andere Code ist in Post #8. Also von Zeile 1-52 ist bezüglich des Designs. Alle Zeilen danach sind bezüglich Tabreihen.
Falls das hilft hier noch ein Bild, wie es aussieht mit dem multi-tab und einmal ohne:
Dann nimm doch den von mir
Ja aber da hat es viel Code drinn, der noch andere Dinge verändert und ich weiss nicht, welche Dinge ich nur für das mit den mehreren Tabreihen brauche und welche nicht.
Denn einiges davon gerät in Konflikt mit dem Design, das ich habe, so dass bei mir alles verschoben wird.
Der neue Code von dir (sowie der alte) hat bei mir aber genau das gleiche Problem, wie der von github. Also auch bei dem von dir ist die Scrollbox höher, wie die Tabreihen selber.
Es liegt eig. nicht am Github-Code. Wenn ich nur diese nverwende, funktioniert es. Aber in kombination mit dem Code, den ich sonst noch nutze (alles vor Zeile 53 im Post #8), funktioniert es nicht. Ich weiss nur nicht, warum.
Hmm, naja bei mir eben schon ab der 2. Reihe und wenn ich rechts die Scrollbar-Leiste mit der Maus (linksklick) bewege, geht das auch schon mit nur einer Tabreihe.
Da der CSS Code von #2 noch einige andere Anpassungen hat und ich nicht weiss, was genau alles da jetzt für die Tabreihe gebraucht wird, habe ich wie gesagt das von github genommen.
Aber auch wenn ich bei "max-height:" das aus #9 nehme, ist das immer noch gleich.
Also wie gesagt: Ich kann mit dem Mausrad scrollen und unterhalb der letzten Tabreihe hat es noch freien Platz, der eben schwarz ist. Dann sehe ich leeren Freiraum. Und manchmal beim löschen von Tabs oder ganzen Tabreihen rutscht mir diese Scrollbox automatisch nach ganz unten (wo eben freier, leerer schwarzer Bereich ist). Dann sehe ich die Tabreihen nicht mehr vollständig.
Danke für die Mühe.
Ist das jetzt quasi so eine Art "schlanke Version" ?
Ich habe kurz bevor du den CSS-Code gepostet hast noch bei github einen code für CSS gefunden (Eig. mehr oder weniger das selbe wie bei deinem oben, nur da hats noch andere Dinge drinn, die z.B die Tabs unter die Adresszeile schieben und ich wollte mir die Arbeit ersparen, die ganzen Zusatzdinge rauszulöschen). Es funktionieren aber beide Codes.
Ich nutze jetzt diesen code (das mit den mehreren Tabreihen geht ab Zeile 53 los):
/*Ab hier Code, der für neuere Firefoxversionen nötig ist, damit alles wieder richtig positioniert ist. Stand 10.07.2023*/
/*Verändert glaube ich den schwarzen Hintergrund hinter den Tabs. Ist nötig, damit es keinen freien, schwarzen Hintergrund hinter den
Tabs hat, wenn man sie mittels ".tabbrowser-tab" auf z.B 21px begrenzt (sonst ist der Hintergrund weiterhin so gross, wie original) */
#tabbrowser-tabs {
--tab-min-height: 21px !important;
}
/*Keine Abstände um den Tab rum, die durch neuere Firefoxversionen enstanden sind*/
.tab-background {
margin-block: 0px !important;
}
/*verschiebt den "New-Tab"-Button*/
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-text, #TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
margin-top: -7px !important;
}
/*Ab hier "alter" code*/
/*Verändert die Tabs (nicht den schwarzen Hintergrund hinter den Tabs)*/
#TabsToolbar #tabs-newtab-button {
margin-top: -7px !important;
margin-bottom: -15px !important;
margin-left: -2px !important;
}
/*Verändert die höhe der Browser-Tabs*/
.tabbrowser-tab {
min-height: 21px !important;
max-height: 21px !important;
}
/*Top-Linie beim (aktiven) tab in "solid #429CE3"*/
.tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background {
border-top: 2px solid #429CE3 !important;
}
/*Das ist die Navigationsleite (dort, wo die Url-Leiste, Addonsymbole & Vor-und Zurückbutton sind)*/
#nav-bar {
min-height: 22px !important;
max-height: 22px !important;
margin-top: 0px !important;
}
/* Stand 10.07.2023. Ab hier code für "mehrere Tabreihen" mit 145px "min-width" (sonst verschwindet das Kreuz zum Tabschliessen, wenn die Tabs kleiner sind)*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Makes tabs to appear on multiple lines */
/* Tab reordering will not work and can't be made to work */
/* You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar*/
/* You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */
/* Change the --multirow-n-rows to change maximum number of rows before the rows will start to scroll */
:root{
--multirow-n-rows: 3;
--multirow-tab-min-width: 100px;
--multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}
/* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
/* Uncomment the next line if you want to be able to use the scrollbar with mouse clicks */
/* #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag } */
/* Uncommenting the above makes you unable to drag the window from empty space in the tab strip but normal draggable spaces will continue to work */
#tabbrowser-tabs{
min-height: unset !important;
padding-inline-start: 0px !important
}
@-moz-document url(chrome://browser/content/browser.xhtml){
#scrollbutton-up~spacer,
#scrollbutton-up,
#scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }
scrollbox[part][orient="horizontal"]{
display: flex;
flex-wrap: wrap;
overflow-y: auto;
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
scrollbar-color: currentColor transparent;
scrollbar-width: thin;
scrollbar-gutter: stable;
scroll-snap-type: y mandatory;
}
}
.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
overflow: -moz-hidden-unscrollable;
display: inline;
--scrollbutton-display-model: none;
}
.tabbrowser-tab{ scroll-snap-align: start; }
#tabbrowser-tabs .tabbrowser-tab[pinned]{
position: static !important;
margin-inline-start: 0px !important;
}
.tabbrowser-tab[fadein]:not([pinned]){
min-width: 145px !important;
flex-grow: var(--multirow-tab-dynamic-width) !important;
/*
Uncomment to enable full-width tabs, also makes tab dragging a tiny bit more sensible
Don't set to none or you'll see errors in console when closing tabs
*/
/*max-width: 100vw !important;*/
}
.tabbrowser-tab > stack{ width: 100%; height: 100% }
/* remove bottom margin so it doesn't throw off row height computation */
#tabs-newtab-button{ margin-bottom: 0 !important; }
#tabbrowser-tabs[hasadjacentnewtabbutton][overflow="true"] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
display: flex !important;
align-items: center; /* Fx <112 compatibility */
}
#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }Soweit funktioniert alles, bis auf etwas: Manchmal, wenn ich die Tabs schliesse in einer Reihe, fällt die Ansicht nach unten. Das Problem ist jetzt, dass diese "scrollbox" höher ist, wie die Tabreihen selbst. D.h es fällt dann ganz nach unten und dort ist "freier Platz", also bei mir schwarzer Hintergrund.
D.h, ich will eig., dass die Scrollbox immer genau! so hoch ist, wie die Tabs (also bei 2 Reihen, soll sie genau so hoch sein wie 2 Tabs, bei 3 Reihen so hoch wie 3 usw).
Im Grunde will ich also gar keine vertikale Scrollfunktion haben. Ich will einfach eine Box haben, die so hoch ist, wie eben die Tabs (natürlich soll sich die Box automatisch vergrössern/verkleinern, wenn mehr Tab-Reihen entstehen).
Geht das irgendwie? Ich blicke da nicht ganz durch.
Also ich denke dieser code sollte die Scrollbox genau so hoch machen, wie es meine Tabreihen sind (tut er aber nicht):
max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows))Ich verstehen nur nicht, was ich da jetzt quasi für Werte eingeben muss bzw. wo ich diese variabel-Werte finde (also z.B --multirow-n-rows). Das einzige, was ich weiss ist --tab-min-heigth, denn das habe ich selber schon auf 21px gestellt in meinem code ganz oben.
Ok, danke ich werde es mal ausprobieren. Wenn es nicht so gut geht, wie ich es mir erhoffe, kann ich es dann immer noch mit dem javascript probieren.
Danke für die Antwort und sorry, manchmal ist man sich nicht sicher, wo das hingehört.
Was meinst du denn damit, dass die Tabs nicht "beliebig" verschoben werden können? Kann ich dann die Tabs nicht mehr verschieben?
Ich hätte eine Frage bezüglich dieses Scripts:
In Post 1 steht, das Script ist für Leute, die sich nicht mit CSS auseinander setzen wollen. Und ich glaube, dieses Projekt wurde früher nur mit CSS umgesetzt und später dann mit javascript gemacht, oder ? Weil ich wäre mit CSS sehr zufrieden.
Weil wenn ich mir das Script anschaue, sind das schon seeeehr viele Zeilen. Und ich will eig. nur 2 Reihen an Tabs haben, mehr nicht. Keine speziellen Zusatzfunktionen wie scrollen oder sowas. Daher frage ich mich: Ist das nicht etwas "schlanker" möglich ? Also eben nur mit CSS scripts?
Ich bin mir nicht ganz sicher, ob ich das hier fragen soll oder eine eigene Frage auchmachen soll.
Ich hätte noch eine letzte Frage (ich stelle sie gleich hier, weils grad auch um Stylus ging):
Wie kann ich mit
@-moz-documentalle URLs beginnend mit "URL" mit einbeziehen? Also ich will (bei ner anderen Sache), dass sich der ganze Code auf Webseiten bezieht, die mit einer bestimmten URL beginnen. Also z.B alle URLs, die mit "HTTPS://TESTEST.COM/" beginnen.
Geht das?
Edit: Habe es rausgefunden. Es geht damit:
@-moz-document url-prefix ()Wobei dann in der Klammer die URL steht.
Will man mehrere Links nutzen, muss man es so machen:
@-moz-document url(), url()Bzw. mit "url-prefix" oder "domain"
Naja, es macht aber die Sache wesentlich einfacher und schneller. Und man kann ja eben mit verschiedenen Webseiten arbeiten.
Aber es geht ja jetzt mit dem Code aus #11 sowohl angemeldet als auch als Gast. Habe es ausprobiert.
Letzter Beitrag halte ich auch für wichtig (das brauche ich schlieslich, um direkt zum letzten Beitrag zu springen). Das funktioniert mit dem Code aus #11 aber auch alles.
Danke nochmals für die Hilfe.
Ich glaube, jetzt klappt alles. Und ja, bei Stylus wird das automatisch "umgewandelt" (habe am Anfang nur einen Copy-Paste Fehler gemacht). Habe jetzt auch gesehen, dass man da auf "Hinzufügen" klicken kann.
Habe jetzt den Code von dir nochmals erweitert auf:
@-moz-document url("https://www.forum-3dcenter.org/vbulletin/index.php"), url(https://www.forum-3dcenter.org/vbulletin/) {
tr:nth-child(n+1) > td:nth-child(4),
tr:nth-child(n+1) > td:nth-child(5) {
display: none !important;
}
}
@-moz-document domain("forum-3dcenter.org") {
td.thead:nth-child(4), td.thead:nth-child(5),
tr:nth-child(n+1) > td:nth-child(5), tr:nth-child(n+1) > td:nth-child(6) {
display: none !important;
}
}So wird auch in den Unterforen die "Antworten" Spalte rausgelöscht.
Edit: Habe den Code noch aktualisiert. Es braucht die beiden url. Die mit index.php ruft man auf, wenn man sich angemeldet hat. Wenn man aber von der Hauptseite ins Forum wechselt, ist es die 2. URL.