Naja, der eine färbt ein, der andere macht sie geschwungen. Ich steh vor einem Dilemma...
Werde mal versuchen, den Code von Aris zu zerpflücken, so dass der die Farbe spendet und der andere die Form. Puh...
eckige Tabs bei Quantum abrunden
-
spiderman -
14. November 2017 um 17:04 -
Erledigt
-
-
Halte dich erst einmal an die Form. Farben lassen sich gewöhnlich einfacher und schneller anpassen.
-
klickman
Ich habe die Tabs "gefärbt" und "gerundet" mit dem Code von https://github.com/wilfredwee/photon-australis.
In diesem Code habe ich die Farbwerte geändert... :wink:In meinem Fall: nix mit Aris...
-
Halte dich erst einmal an die Form. Farben lassen sich gewöhnlich einfacher und schneller anpassen.Nun ja, es sollen auch Buttons verändert werden. Um es zu verdeutlichen:
So (ff57) ist es jetzt:
[attachment=2]Bildschirmfoto 2017-11-28 um 21.20.16.jpg[/attachment]So (FF56)
[attachment=1]FF56, 1 Tab.jpg[/attachment]bzw. so (auch FF56)
[attachment=0]FF56, 2 Tabs.jpg[/attachment]soll es sein. :-???
-
Ich habe die Tabs "gefärbt" und "gerundet" mit dem Code von https://github.com/wilfredwee/photon-australis.
In diesem Code habe ich die Farbwerte geändert... :wink:In meinem Fall: nix mit Aris...
Interessant! Bei dir sind sämtliche Leisten gleich wie die Tabs gefärbt. Das würde mir in Farbe Aero gut gefallen. Und die Buttons sind, nehm ich an, auch umgestaltet. Tabs unten ebenso. Alles nur mit dem Code von wilfredwee?
-
:wink: Nee, dass ist ein Mix aus Beidem, Aris + wilfred...
Und das Theme-Design nennt sich "blueNight" -
:wink: Nee, dass ist ein Mix aus Beidem, Aris + wilfred...Also doch auch Aris. Hast du den Code irgendwie zerpfückt, oder beide (Aris und wilfred), so wie sie im Download angeboten werden, in die userChrome.css kopiert? Klar, bei Aris muss dann die komplette Konfiguration noch angepasst werden.
-
Eins nach dem anderen.
Wenn ich das richtig sehe, wäre der Code von wilfredwee richtig, was die Form angeht. Also übernimm den einfach mal so. Die Farben passt du dann noch so an, wie du das gerne möchtest.
Die Buttons sind eine andere Geschichte. -
Eins nach dem anderen.
Wenn ich das richtig sehe, wäre der Code von wilfredwee richtig, was die Form angeht. Also übernimm den einfach mal so. Die Farben passt du dann noch so an, wie du das gerne möchtest.
Die Buttons sind eine andere Geschichte.Ja, das siehst du völlig richtig! Ich begebe mich mal in die Tiefen der userChrome.css...
-
Meine userChrome.css ist nur die "Schaltzentrale" für einzelne Codes, von Ari so übernommen.
Den Code von Wilfred nach Aris Art eingefügt/hinzugefügt... -
Meine userChrome.css ist nur die "Schaltzentrale" für einzelne Codes, von Ari so übernommen.
Den Code von Wilfred nach Aris Art eingefügt/hinzugefügt..."Schaltzentrale" soll heißen, du hast die userChrome:css so von Aris übernommen und die diversen Optionen mittels "/*" aktiv geschaltet bzw. inaktiv, korrekt? Also so z. B.:
Aktiv:
Code@import url(./css/tabs/classic_squared_tabs_australized_aero.css); /**/ /* <-- AERO colors */
Inaktiv:Code/* @import url(./css/tabs/classic_squared_tabs_australized_aero.css); /**/ /* <-- AERO colors */ -
Jepp :klasse:
-
Jepp :klasse:Ok, doch der userChrome.css-Code von wilfredwee sieht ja komplett anders aus und funktioniert nicht nach diesem "@import"-System des Aris-Codes. Hast du dir den "umgebastelt", um auch mit "@import" zu arbeiten? Sorry, wenn ich mich sehr laienhaft ausdrücke, ich hab von der Materie so gut wie keine Ahnung.
-
Ich hab es mittlerweile geschafft, Aris' und wilfredwees Code zu kombinieren, ohne dass sie einander stören.
Eine aktiv geschaltete Option im Aris-Code war der Übeltäter. Nämlich diese hier:Code/* @import url(./css/tabs/classic_squared_tabs_australized_aero.css); /**/ /* <-- AERO colors */
Vorweg siehts mal so aus:
[attachment=0]Bildschirmfoto 2017-12-02 um 21.54.42.jpg[/attachment] -
klickman
Ich habe die Tabs "gefärbt" und "gerundet" mit dem Code von https://github.com/wilfredwee/photon-australis.
In diesem Code habe ich die Farbwerte geändert... :wink:Verrätst du mir bitte, was genau du wo für die orange Färbung des aktiven Tabs geändert hast?
-
Hallo klickmann,
siehe Beitrag #121
Gruß
EDV-Oldi -
Danke für den Hinweis, Beitrag 121 habe ich schon gesehen. Bloß ist das mit der Zeilennummer ein Problem, da bei unterschiedlicher Größe meines Texteditorfenster entweder mehr oder weniger Zeilen angezeigt werden und ich dadurch keine Ahnung habe, wo welche Werte angepasst werden sollen. :-???
EDIT:
Ich schätze, es müsste irgendwo in diesem Abschnitt sein? Hab null Ahnung von dem, was da drinnen steht. :roll:Code
Alles anzeigen/* Color specific customizations */ :root { --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(249,249,250);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(249, 249, 255);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --background-selected-middle: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgb(249,249,255) 2px, rgb(249,249,255) ), none; --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='30' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); --background-hover-middle: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgba(255,255,255,.1) 2px, rgba(255,255,255,.1) ), none; --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"), linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); } -
Im Dark CSS sieht der Code so aus:
Code.tab-background[selected="true"] > spacer { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgb(50, 50, 52) 2px, rgb(50, 50, 52) ),
Jetzt muss Du diesen Code (50, 50, 52) durch eine andre Farbe ersetzen.
Ich habe alle mit diesem Code durch 220, 220, 220) ersetzt.
Gruß
EDV-Oldi -
Danke, doch abgesehen davon, dass ich das Standard-Theme und demnach die "default-css" verwende, finde ich im kompletten Code keinen Abschnitt, der dem deinen gleicht.
Es gibt zwar ein paar Abschnitte, in denen rgb-Werte eingetragen sind, doch keine Ahnung, welche die nötigen sind. Ich werde mal mittels "trial and error" durchtesten. -
Das
Code.tab-background[selected="true"] > spacer { background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient( transparent 2px, rgb(255,255,255) 2px, rgb(255,255,255) ),
sollte beim default Thema stehen.
Gruß
EDV-Oldi