InkScape Kostenloses, leichtes, portables Programm. Erstellen und bearbeiten Sie svg, importieren Sie svg in png 16x16, usw.
Danke, das werde ich ausprobieren! ![]()
InkScape Kostenloses, leichtes, portables Programm. Erstellen und bearbeiten Sie svg, importieren Sie svg in png 16x16, usw.
Danke, das werde ich ausprobieren! ![]()
Bis jetzt nutze ich hier keine .svg Grafiken, es ist mehr aus Interesse warum das bei manchen so ist.
Wie Mira schon geschrieben hat, es liegt wohl am context-fill und/oder context-fill-opacity, teils auch stroke statt fill.
Das braucht definierten context, der in Fx an den meisten Stellen für Icons vorgegeben und erlaubt ist.
Viele Bildprogramme berücksichtigen das nicht, und typisch ist dann ein schwarzes Rechteck/Quadrat als Darstellung, weil die gesamte Bildfläche mit dieser Basis Füllfarbe gefüllt wird.
Ohne context-... im .svg Code sind aber bestimmte Funktionen in Fx nicht verfügbar, wie zB Farbänderungen.
Alles anzeigenDie "neuen" Icons
Nur mal eine Frage.
So sehen deine Icons hier im Windows Explorer in der Vorschau aus:
Manche Icons werden also nicht angezeigt bei mir.
Liegt das evtl. an deiner Bearbeitung der .svg Dateien, oder wie kann ich das ändern
Aber wie sehen sie in Firefox aus?
Viele .svg Dateien werden nicht von jedem Programm korrekt oder überhaupt angezeigt; in Fx kommt's manchmal drauf an wo sie eingesetzt werden.
Im Zweifel mal mit Firefox öffnen.
Zum Teil!
Da habe ich mich ein wenig eingearbeitet!
Aber ich bearbeite zum Teil die Vektorgrafiken auch mit Visual Studio Code,
z.B. um festzulegen, ob sie direkt farbig sein sollen, oder ob das von außen per CSS geschehen soll.
Dankeschön, Mira! ![]()
Irgendwann muss ich da auch nochmal ran.
Bisher hab ich nur ein rudimentäres Verständnis davon; wie man den Text Code in eine Bilddatei umbenennt/verwandelt und das Einfärben manipuliert, solche Sachen.
Die "neuen" Icons
Kurze Frage: machst du deine (.svg) Icons selber, und falls ja mit welchem Programm?
es hat geklappt
Prima! ![]()
Ich benutze die Sсript about:about, about:addons, about:config, aber mir fehlen die Kenntnisse, um CSS für Textbuttons wie in Beitrag #26 #31 zu erstellen. Bitte helfen Sie mit jeder Schaltfläche und ich werde es von dort herausfinden.
Mit CSS kannst du auch einen Textbutton erstellen, zB so:
#aboutabout-ToolBarButton > image {
display: none !important;
}
#aboutabout-ToolBarButton > label {
display: flex !important;
background-color: lightgreen !important;
color: red !important;
outline: 1px solid red !important;
outline-offset: -1px !important;
}
#aboutabout-ToolBarButton:hover > label {
background-color: green !important;
color: cyan !important;
outline: 1px solid purple !important;
outline-offset: -1px !important;
}
Alles anzeigen
Im Script wäre dabei die ID aboutabout-ToolBarButton, der Text ist was im Script bei label eingetragen ist.
Farben, Outlines, Texteinstellungen etc. kannst du dann ganz normal mit CSS anpassen, oder einfach weglassen; im Prinzip brauchst du nur das, um das Icon mit Text zu ersetzen:
Mein direkter Symbolpfad enthält Leerzeichen, daher funktioniert er nur mit "my path"-Anführungszeichen.
Auf meinem Mac hatte ich das Problem auch; es hat geholfen die Leerzeichen im Dateipfad mit %20 zu ersetzen.
Für die Tabs hat's bei mir etwas gedauert bis ich es raushatte, ich teste bei mir gerade das hier, sieht soweit gut aus:
Ich habe es jetzt erst einmal Testweise eingebaut, Dankeschön.
Wenn wir schonmal dabei sind, es ist doch nur noch ein Schnipsel; das benutze ich für diverse URL Einträge; damit ist bei mir scheinbar das Meiste (Alles?) an Textverläufen abgedeckt.
Auf Mac und leider nur 115esr, sowas ändert sich gerne mal.
Du kannst die Auslassungspunkte ja aus meinem Beitrag kopieren.
Alt+0133 (auf der numerischen Tastatur)
Jajajaaa... ![]()
hab mir stattdessen überall ... reingebastelt am Textende
Zeige es doch bitte mal her.
Für die Tabs hat's bei mir etwas gedauert bis ich es raushatte, ich teste bei mir gerade das hier, sieht soweit gut aus:
/* TEST Tabs Ellipsis */
.tab-label-container {
mask-image: none !important;
}
.tab-label {
overflow: hidden !important;
/*text-overflow: ellipsis !important;*/
text-overflow: " ..." !important;
white-space: nowrap !important;
max-width: 100% !important;
}
Alles anzeigen
Für die URL Einträge hab ich auch etwas schon länger in Gebrauch, will jetzt aber nicht zu sehr OT gehen.
Horstmann Das typographische Auslassungszeichen ist manchmal bei CSS wichtig, nämlich wenn es in der Bezeichnung eines Selektors auftritt. Da funktionieren drei einzelne Punkte nicht.
Danke, das wusste ich nicht.
Hab ich noch nicht gebraucht, wird aber notiert. ![]()
wir haben doch hier eine Konvention, dass wir empfehlen, für die Grafiken einen Unterordner icons im Ordner chrome des Profils zu nutzen
(Link wäre hilfreich)
Ich denke, es sollte eine Konvention geben
Warum meinst du das? Eine Begründung wäre schön.
Es ist eher eine Art Gewohnheit, irgendwo müssen die Icons ja hin, und das wird halt öfters benutzt.
Kann jeder machen wie er will; wer sich mit Scripts rumplagt, schafft es vermutlich auch noch einen Ordnernamen oder Dateipfad anzupassen. ![]()
Selber mag ich den Verlauf ja nicht, hab mir stattdessen überall ... reingebastelt am Textende.
Dann aber bitte korrekt und … und nicht ... verwenden.
Dein Forum hat meine Formatierung gestört, ich hab nur eine "." Taste hier! ![]()
... mit Inlinecode -> ....
Treffer versenkt...
Prima! ![]()
Der Sinn ist, das der Tabtext nicht abrupt endet sondern zart ausschleicht...
Das macht Firefox aber eigentlich sowieso; wenn der Verlauf nicht von einem anderen deiner CSS Codes ausgeblendet oder der Inhalt zu breit gezogen wird, sollte ein extra Eintrag eigentlich nicht nötig sein. ![]()
Selber mag ich den Verlauf ja nicht, hab mir stattdessen überall ... reingebastelt am Textende.
Moin, nach dem heutigen UpDate ist meine Tabbeschriftung und das Icon bei den nicht ausgewählten Tab nach oben verschoben. Beim via Hover ausgewählten Tab ist alles OK.
Ein zusätzlich eingefügter Codeschnipsel margin-top: 4px !important; verschiebt den Text in die richtige Höhe, nicht aber das Icon!
Probier vielleicht mal das margin-top: 4px !important; bei .tab-content in Zeile 141 einzufügen, statt bei .tab-text.
Mein Verdacht wäre, dass .tab-text nur mit Text zu tun hat.
![]()
Dazu noch evtl. die Farbe bei geöffneten Menüs.
Wie kann ich das einstellen?
Das ist oben in meinem Code schon dabei; --toolbarbutton-hover-background ist für die Buttons bei Hover (Drüberfahren), --toolbarbutton-active-background ist für die Buttons wenn sie ein offenes Aufklappmenü haben, oder sonst aktiviert sind.
Einfach mal mit dem Code ein Aufklappmenü öffnen, dann siehst du es.
Beim Home Button, bei vor und zurück und beim reload Button habe ich das mittels folgendem Code in der userChrome.css geschafft.
Wie kriege ich auch die anderen dazu Farbe zu bekennen?
Vielleicht einfach generell die Hover-Farbe für die Navbar Buttons festlegen, statt für einzelne Buttons?
Dazu noch evtl. die Farbe bei geöffneten Menüs.
jetzt ist es perfekt
Freut mich dass es klappt! ![]()
Alles anzeigendas elendige "Türkies"
Mh.
![]()
Es hat definitiv etwas mit dem Theme zu tun!
Bei dem von mir verwendeten Theme sieht es so aus.bzw, so, wenn ich den CSS-Code nutze.
Beim Theme "Hell" bleibt ein heller Rand,
und bei den allermeisten anderen Themes bleibt halt dieser türkise Rand.D.h. das Element .sidebar-placesTreechildren::-moz-tree-cell(selected)
deckt nicht die gleiche Fläche ab, wie das Element, welches Türkis ist!
Ich finde aber ums Verrecken nicht den Selektor.
Auf dem Mac ist das alles mal wieder etwas anders, aber sowas in der Richtung könntest du noch probieren:
.sidebar-placesTreechildren::-moz-tree-row(selected) {
appearance: none !important;
background: lightblue !important;
border-color: red !important;
outline: none !important;
}
Oder sowas:
.sidebar-placesTreechildren::-moz-tree-row(selected) {
appearance: none !important;
background: lightblue !important;
outline: 1px solid red !important;
border: none !important;
}
Also -moz-tree-row mal ansprechen statt oder zusätzlich zu der -moz-tree-cell CSS.
Darauf haben 2002Andreas und Horstmann geantwortet, dass sie das Skript auch verwenden und bei ihnen der Button auch dann funktioniert wenn er in dieser Statusleiste unten abgelegt ist. Also werde ich weiter suchen bis mir das auch gelingt.
Hat jetzt nichts mehr mit dem Skript an sich zu tun.
Ich meine mich vage zu erinnern, dass es browser-bottombox (bald?) nicht mehr gibt bzw. unterstützt wird im Fx Code, was dein Script benutzt.
Andererseits funktioniert eben bei mir und Andreas dieses Zusatzleistenscript anscheinend noch, inkl. aller Buttons.
Ich kann zumindest schon einmal sagen, in einem Testprofil funktioniert schon mal Testversion_2a.js, ...
Nein, die Scripts 1a und 2a funktionieren nicht und werfen Fehlermeldungen aus, Script 1 und 2 funktionieren und geben keine Fehlermeldung aus.
Also funktioniert jetzt 1a oder 2a, oder nicht, oder nur in manchen Profilen? ![]()