eckige Tabs bei Quantum abrunden

Schrauberecke: Hier geht es um optische und funktionelle Veränderungen (ohne Themes oder Personas) von Firefox oder von Webseiten per CSS-Codes oder JavaScript.
Benutzeravatar
edvoldi
Senior-Mitglied
Beiträge: 1866
Registriert: Mo, 18. Aug 2008 13:40

Re: eckige Tabs bei Quantum abrunden

#151

Beitrag von edvoldi » Mi, 22. Nov 2017 10:01

Hallo spidermann,
da ich immer ein Silvermel Fan war, habe ich mir mein Firefox selber gestaltet.
Da es im oberen Bereich sehr schwer ist alles nach meinen Wünschen zu gestalten, habe ich das Thema Bamboo Feed Reader - Silver installiert.
Suche einmal im Themen Bereich nach Bamboo Feed Reader, vielleicht es etwas dabei was dir gefällt und keinen Fehler produziert.

Gruß
EDV-Oldi
WIN10 pro & WIN10 Home Version 1803 (Build17134.112)
Firefox 60.0.2 x64
Thunderbird 52.8.0 / Lightning 5.4.8
Meine Erweiterungen

Benutzeravatar
spiderman
Mitglied
Beiträge: 391
Registriert: Fr, 09. Mai 2003 13:23

Re: eckige Tabs bei Quantum abrunden

#152

Beitrag von spiderman Themen-Starter » Mi, 22. Nov 2017 10:23

@edvoldi Danke! Habe jetzt in einem frischen Profil getestet - funktioniert bestens. Für diejenige, die Tabs abrunden wollen, ich habe nach der Installation des Bamboo Feed Reader Themes dann photon-australis CSS eingebunden. Wie gesagt - gilt alles für ein frisches Profil. In einem existierendem wackelte das Tab nach der Installation Bamboo Feed Reader - warum auch immer - Reste halt von vorherigen CSS-Experimenten.

//EDIT 2017-11-22: Wichtig! Die Reihenfolge einhalten:
  1. erst Bamboo Feed Reader installieren
  2. dann ggf. photon-australis
Ich habe die Reihenfolge mal auf einem frischen Profil geändert mit dem Ergebnis, dass die Tabs beim hover wackelten.
Demo-Zugang Hubzilla-Installation https://demo.hubzilla.org username: demo, password: hubzillademo
Was ist Hubzilla? - https://project.hubzilla.org/help/about
Hubzilla-Features - https://project.hubzilla.org/help/features
Hubzilla verbindet Menschen - https://hub.libranet.de/page/hucope/hub ... _theses_de

Benutzeravatar
spiderman
Mitglied
Beiträge: 391
Registriert: Fr, 09. Mai 2003 13:23

Re: eckige Tabs bei Quantum abrunden

#153

Beitrag von spiderman Themen-Starter » Mi, 22. Nov 2017 11:54

Also ich habe mich zu früh gefreut. Nach dem ich vier meiner Profile neu aufgesetzt habe, stelle ich jetzt fest, dass Bamboo Feed Reader Theme das Problem nicht gelöst hat. Schuld für das Wackeln bei mir ist die Menüleiste. Sobald man die Menüleiste deaktiviert, gibt es kein Wackeln beim hover. War meine "Profile neu Aufsetzen Aktion" quasi umsonst gewesen. Beim frischen Profil ist die Menüleiste nämlich standardmäßig deaktiviert und ich kam nicht auf die Idee für den Test für Bamboo Feed die Menüleiste zu aktivieren.

Man lernt immer was dazu und ich bin immer noch an Anregungen, Lösungsansätzen für die Beseitigung des hover-Wackelns
  • beim aktiven Tab
  • und bei einer aktiven Menüleiste
interessiert.
Demo-Zugang Hubzilla-Installation https://demo.hubzilla.org username: demo, password: hubzillademo
Was ist Hubzilla? - https://project.hubzilla.org/help/about
Hubzilla-Features - https://project.hubzilla.org/help/features
Hubzilla verbindet Menschen - https://hub.libranet.de/page/hucope/hub ... _theses_de

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#154

Beitrag von klickman » Mi, 29. Nov 2017 20:07

Hallo Kollegen,

ich bekomme die geschwungenen/gerundeten Tabs einfach nicht hin. :| (FF57 auf MacBook Pro mit macOS Sierra 10.12.6)

Ich habe die Oberfläche mittels der Konfigurationsdateien von Aris auf Github schon zu einem guten Teil meinen Bedürfnissen angepasst (wie sie verwendet werden, ist mir bekannt). Zwecks Übersichtlichkeit ist der Code in der userChrome.css um die nicht gebrauchten Funktionen gekürzt und es steht sonst kein weiterer Code in der Datei:

Code: Alles auswählen

/************************************************************************************************/
/* TOOLBAR BUTTONS ******************************************************************************/
/************************************************************************************************/
/* icon appearance - only use one at a time (custom icons do not scale in HiDPI modes) **********/
@import url(./css/buttons/icons_custom_icons_fx45.css); /**/

/* bookmarks menu button - 'button & popup' appearance ******************************************/
@import url(./css/buttons/bookmarks_menu_button_localized_label_on_bookmarks_toolbar.css); /**/
@import url(./css/buttons/bookmarks_menu_button_popup_classic_appearance.css); /**/

/************************************************************************************************/
/* APPLICATION/HAMBURGER BUTTON *****************************************************************/
/************************************************************************************************/
/* application/hamburger button popup ***********************************************************/
@import url(./css/buttons/appbutton_popup_icons_colorized.css); /**/
@import url(./css/buttons/appbutton_popup_sync_hidden.css); /**/

/************************************************************************************************/
/* TABS - appearance and position ***************************************************************/
/************************************************************************************************/
@import url(./css/tabs/classic_squared_tabs_australized_aero.css); /**/	/* <-- AERO colors */

/************************************************************************************************/
/* TABS TOOLBAR POSITION (not in titlebar / not on top) *****************************************/
/************************************************************************************************/
@import url(./css/tabs/tabs_below_navigation_toolbar_aero.css); /**/	/* <-- AERO colors */

/* restore empty/missing tab favicon - only use one at a time ***********************************/
@import url(./css/tabs/missing_tab_favicon_restored_default.css); /**/

/* tab close icon settings - only use one at a time *********************************************/
@import url(./css/tabs/tab_close_hidden.css); /**/

/* other tab settings ***************************************************************************/
@import url(./css/tabs/tab_icon_colors.css); /**/

/************************************************************************************************/
/* GENERAL UI ***********************************************************************************/
/************************************************************************************************/
@import url(./css/generalui/private_mode_indicator_hidden.css); /**/
@import url(./css/generalui/bookmark_icons_colorized.css); /**/
@import url(./css/generalui/send_to_device_menuitems_hidden.css); /**/
@import url(./css/generalui/popup_animation_fade_time_reduced.css); /**/

/* findbar **************************************************************************************/
@import url(./css/generalui/findbar_show_full_quickfindbar.css); /**/

/* page context menu items: 'back', 'forward', 'reload', 'stop', 'bookmarks' ********************/
@import url(./css/generalui/context_bfrsb_labels_without_icons.css); /**/

/* SEARCHBAR ************************************************************************************/
@import url(./css/generalui/searchbar_glassplus_indicator_hidden.css); /**/
@import url(./css/generalui/searchbar_go_button_hidden.css); /**/

/************************************************************************************************/
/* TOOLBARS *************************************************************************************/
/************************************************************************************************/
/* general toolbar settings *********************************************************************/
@import url(./css/toolbars/toolbars_old_padding.css); /**/
@import url(./css/toolbars/tabs_toolbar_adjustments.css); /**/
@import url(./css/toolbars/navbar_more_compact_mode.css); /**/

/* edit target file to select which items to hide ***********************************************/
/* @import url(./css/toolbars/toolbar_context_menuitems_visibility.css); /**/

/* bookmarks toolbar ****************************************************************************/
@import url(./css/toolbars/bookmarks_toolbar_old_height.css);

/* toolbar colors - only use one at a time ******************************************************/
@import url(./css/toolbars/general_toolbar_colors_aero.css); /**/	/* <-- AERO colors */

/************************************************************************************************/
/* LOCATION BAR *********************************************************************************/
/************************************************************************************************/
@import url(./css/locationbar/locationbar_adjustments.css); /**/
@import url(./css/locationbar/compact_mode_reduce_fontsize.css); /**/
@import url(./css/locationbar/locationbar_reduce_height.css); /**/

/* autocomplete/history dropmarker **************************************************************/
@import url(./css/locationbar/dropmarker_at_the_end.css); /**/

/* additional icons/buttons and third party page action buttons *********************************/
@import url(./css/locationbar/icons_colorized.css); /**/
@import url(./css/locationbar/pageaction_separator_in_location_bar_hidden.css); /**/
@import url(./css/locationbar/zoom_button_hidden.css); /**/
@import url(./css/locationbar/go_button_in_location_bar_hidden.css); /**/

/* identity box / page identity button **********************************************************/
@import url(./css/locationbar/identitybox_replace_i_icon_with_globe.css); /**/
@import url(./css/locationbar/identitybox_colors.css); /**/

/* padlock icons in identity box / page identity button - only use one at a time ****************/
@import url(./css/locationbar/identitybox_padlock_icon_classic2.css); /**/

/************************************************************************************************/
/************************************************************************************************/
/************************************************************************************************/
Das Ergebnis sieht so aus:
Bildschirmfoto 2017-11-29 um 19.33.12.jpg

Jetzt wollte ich die "Curved Tabs" von wilfredwee auf Github aktivieren, was sich allerdings folgendermaßen auswirkt:
Füge ich den Code oberhalb der Aris-Konfiguration in die userChrome.css ein, dann werden zwar die Tabs geschwungen, doch die Farben, Symbole und die Reihenfolge der Leisten (Tableiste unten) lt. Aris-Konfig werden nicht mehr angepasst:
Curved Tabs, keine Farbe mehr und Position.jpg
Füge ich den Code unterhalb der Aris-Konfiguration in die userChrome.css ein, dann ist er offensichtlich wirkungslos und alles sieht wie im ersten Screenshot aus.
Es scheint, als würden die Codes einander wirkungslos machen.

Findet jemand den Fehler? Ich wär echt dankbar dafür :!:
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
aborix
Senior-Mitglied
Beiträge: 4002
Registriert: So, 06. Sep 2009 0:57

Re: eckige Tabs bei Quantum abrunden

#155

Beitrag von aborix » Sa, 02. Dez 2017 12:58

Anscheinend weiß niemand etwas dazu. Aris kann vielleicht helfen, hat das aber nicht unbedingt gelesen. Vielleicht eine PN an ihn?

Benutzeravatar
Boersenfeger
Senior-Mitglied
Beiträge: 51430
Registriert: So, 21. Mär 2004 13:21
Wohnort: Brunswiek anne Oker dranne

Re: eckige Tabs bei Quantum abrunden

#156

Beitrag von Boersenfeger » Sa, 02. Dez 2017 14:54

Hier werkelt dieser Code:

Code: Alles auswählen

/* Tabs rund und farbig */


/**********************************************************
 ********** Reihenfolge der Leisten ***********************
 **********************************************************

/* Die Reihenfolge der Leisten im Leisten-Container wird durch die
 * zugewiesenen Zahlen der "-moz-box-ordinal-group" bestimmt:
 * Oben die Menü-Leiste, darunter die Navigations-Leiste danach
 * die Lesezeichen-Leiste, unten die TAB-Leiste, so wie man es
 * von früher her gewohnt ist.
 *
 * Oft wird eine andere Vorgehensweise beschrieben.
 * Ob es wichtig ist? Ich habe sie jedenfalls einfach von 1 bis 4
 * durchnummeriert, das ist übersichtlich und hat bisher geklappt. */

#toolbar-menubar {
  -moz-box-ordinal-group: 1 !important;
}
#nav-bar {
  -moz-box-ordinal-group: 2 !important;
}
#PersonalToolbar {
  -moz-box-ordinal-group: 3 !important;
}
#TabsToolbar {
  -moz-box-ordinal-group: 4 !important;
}


/**********************************************************
 ********** Vollbildmodus *********************************
 **********************************************************/

/* Damit die Rückkehr aus dem Vollbildmodus mit der Maus klappt:
 * Bei 0 bleiben die URL-Leiste und die Tab-Leiste immer sichtbar,
 * je größer der negative Wert, desto mehr verschwindet aus dem sichtbaren
 * Bereich, ein Pixel muß für den Mauskontakt am oberen Rand immer sichtbar
 * bleiben. Den Wert an die Leistenhöhe anpassen!
 */
#main-window[inFullscreen="true"] #navigator-toolbox {
  margin-top: -80px !important;
}

/* Bei Mauskontakt des noch sichtbaren Pixels die Leisten wieder einblenden
 */
#main-window[inFullscreen="true"] #navigator-toolbox:hover {
  margin-top: 0 !important;
}

/* Etwas schnellere Animation beim ein- und ausblenden, normal ist 1.5s
 */
#navigator-toolbox {
  transition: 0.5s !important;
}


/**********************************************************
 ********** Angaben für die TAB-Leiste ********************
 **********************************************************/

/* TAB normal (inaktiv):
 * Hintergrundfarbe, Schriftfarbe,
 * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
 * unten kein Rahmen -> Abschlußrahmen vom Container.
 */

 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background {
  border:none!important;}

#TabsToolbar .tabbrowser-tab {

  color: black !important;
  border: 1px solid !important;
  border-bottom: none !important;

  border-radius: 15px 15px 0 0 !important;
  margin: 3px 1px 1px 2px !important;
  padding: 1px 0 !important;
}

/* TAB bei Mauskontakt:
 * Hintergrundfarbe, Rahmen
 */
#TabsToolbar .tabbrowser-tab:hover {

  color: black !important;

}

/* TAB bei bei angewähltem TAB (aktiv):
 * Hintergrundfarbe, Rahmen,
 * Schriftfarbe.
 */
#TabsToolbar .tabbrowser-tab[selected="true"] {
 background: red !important;
  font-weight:bold !important;
  color: black ! important;

}

/* Tab-Icon etwas größer,
 * links weniger, unten etwas mehr Abstand zum TAB-Rand.
 */
#TabsToolbar .tab-icon-image {
  height: 20px !important;
  width:  20px !important;
  margin-left: -4px !important;
  margin-bottom: 2px !important;
}
/* Tab-Schließen-Button:
 * Rechts weniger Abstand zum TAB-Rand, etwas größer,
 * Textfarbe (Kreuz)
 * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt.
 */
#TabsToolbar .tab-close-button {
  margin-right: -4px !important;
  padding: 0 !important;
  color: white !important;
}
#TabsToolbar .tab-close-button .toolbarbutton-icon {
  height: 22px !important;
  width:  22px !important;
  background-color: red !important;
  border-radius: 5px !important;
}

/* Tab-Schließen-Button bei angewähltem TAB (aktiv):
 * Hintergrundfarbe.
 */
#TabsToolbar .tab-close-button[selected="true"] .toolbarbutton-icon {
  background-color: blue !important;
}

/* Alle anderen Elemente in den TABs ohne Hintergrund. */
#TabsToolbar .tabbrowser-tab * {
  background: none !important;
} 
... mit diesem Ergebnis:
Unbenannt.PNG
Unbenannt.PNG (148.49 KiB) 469 mal betrachtet
Stand 22.6.2018
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:60.0) 20100101 Firefox/60.0.2
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:61.0) 20180621 Firefox/61.0rc3
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:62.0) 20180622 Firefox/62.0a1

Meine Füchse|Fehlersuche|Anleitung für Fragen im Forum|Sicherheitskonzept für Windowsnutzer

Dato
Mitglied
Beiträge: 451
Registriert: Di, 17. Mai 2011 7:31

Re: eckige Tabs bei Quantum abrunden

#157

Beitrag von Dato » Sa, 02. Dez 2017 17:04

Hallo,
ich beoachte das Thema hier von anfang an, aber mal ehrlich ich ps bin froh die schei.. abgerundeten Tabs nicht mehr zu haben. Die einfachen finde ich besser.

wäre es eventl nicht einfacher wenn Mozilla direkt diese Tabs einfügen würde ?

Benutzeravatar
Boersenfeger
Senior-Mitglied
Beiträge: 51430
Registriert: So, 21. Mär 2004 13:21
Wohnort: Brunswiek anne Oker dranne

Re: eckige Tabs bei Quantum abrunden

#158

Beitrag von Boersenfeger » Sa, 02. Dez 2017 17:20

.. ist halt Geschmackssache.. und Mozilla orientiert sich offensichtlich an deinem Geschmack... :)
Ich finde meine Version schöner... :mrgreen:
Stand 22.6.2018
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:60.0) 20100101 Firefox/60.0.2
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:61.0) 20180621 Firefox/61.0rc3
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:62.0) 20180622 Firefox/62.0a1

Meine Füchse|Fehlersuche|Anleitung für Fragen im Forum|Sicherheitskonzept für Windowsnutzer

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#159

Beitrag von klickman » Sa, 02. Dez 2017 17:46

aborix hat geschrieben:
Sa, 02. Dez 2017 12:58
Aris kann vielleicht helfen, hat das aber nicht unbedingt gelesen. Vielleicht eine PN an ihn?
Gute Idee, werde ich machen.
Boersenfeger hat geschrieben:
Sa, 02. Dez 2017 14:54
Hier werkelt dieser Code:
Danke, wenn das an mich gerichtet ist. Die Sache ist, dass ich den von Aris zur Verfügung gestellten Code wegen der Aerofarbe für alle Leisten inkl. Tabs verwenden möchte, plus einiger weiterer Anpassungen. Doch wenn ich irgendeinen anderen Code hinzufüge, wie z. b. den Code für geschwungene Tabs von wilfredwee, tritt dieser Effekt auf:
Füge ich den Code oberhalb der Aris-Konfiguration in die userChrome.css ein, werden zwar die Tabs geschwungen, doch alle Anpassungen des Aris-Code werden wirkungslos.
Füge ich den Code unterhalb der Aris-Konfiguration in die userChrome.css ein, ist eben dieser wirkungslos und keine Spur mehr von geschwungenen Tabs.
Es scheint, als würden die Codes einander wirkungslos machen.
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

EffPeh
Senior-Mitglied
Beiträge: 1290
Registriert: Mi, 04. Okt 2017 10:22

Re: eckige Tabs bei Quantum abrunden

#160

Beitrag von EffPeh » Sa, 02. Dez 2017 18:24

klickman hat geschrieben:
Sa, 02. Dez 2017 17:46
Es scheint, als würden die Codes einander wirkungslos machen.
So wird es wohl auch sein. :wink:
Das sind, soweit ich das sehe, zwei komplette Anpassungen für Tabs.
Falls du nun einfach die Codes der beiden aneinanderreihst, wird logischerweise immer Murks dabei herauskommen.
Vor allem auch, weil vielen der Anweisungen mit !important Priorität eingeräumt wird.
Du solltest dich erst einmal zwischen beiden "Styles" entscheiden und dann den benutzen, der deinen Vorstellungen am nächsten kommt. Den kannst du dann evtl. weiter deinen Wünschen entsprechend anpassen bzw. abändern.
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#161

Beitrag von klickman » Sa, 02. Dez 2017 19:34

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...
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

EffPeh
Senior-Mitglied
Beiträge: 1290
Registriert: Mi, 04. Okt 2017 10:22

Re: eckige Tabs bei Quantum abrunden

#162

Beitrag von EffPeh » Sa, 02. Dez 2017 19:54

Halte dich erst einmal an die Form. Farben lassen sich gewöhnlich einfacher und schneller anpassen. :)
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
Tommy Tulpe
Junior-Mitglied
Beiträge: 14
Registriert: Sa, 29. Mär 2014 9:21

Re: eckige Tabs bei Quantum abrunden

#163

Beitrag von Tommy Tulpe » Sa, 02. Dez 2017 20:28

@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:

Bild

In meinem Fall: nix mit Aris...

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#164

Beitrag von klickman » Sa, 02. Dez 2017 20:31

EffPeh hat geschrieben:
Sa, 02. Dez 2017 19:54
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:
Bildschirmfoto 2017-11-28 um 21.20.16.jpg
So (FF56)
FF56, 1 Tab.jpg
bzw. so (auch FF56)
FF56, 2 Tabs.jpg
soll es sein. :-???
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#165

Beitrag von klickman » Sa, 02. Dez 2017 20:37

Tommy Tulpe hat geschrieben:
Sa, 02. Dez 2017 20:28
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?
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast