Rahmen für Menüleiste

laubenpieper

Hallo Andreas, ich brauche nochmal diene Hilfe.

Wie im Überhangmenü sollte meine Menüleiste auch aussehen.

Leider bekomme ich das nicht hin und deine Hilfe ist gefragt wenn du Zeit dazu hast

Grüsse vom laubenpieper

2002Andreas

Zitat von laubenpieper

sollte meine Menüleiste auch aussehen.

Meinst du das so?

Wenn ja, dann bedarf das erst einer Vorbereitung dir hier beschrieben ist.

Beitrag

ShadowRoot: Neue Aufruf-Methode für CSS-Regeln

Damit das alles so funktioniert, wie weiter unten beschrieben, muss in erster Linie @aborix erwähnt werden, der mit seinem Lade-Skript die neue Aufruflogik überhaupt erst möglich gemacht hat und @2002Andreas , @Sören Hentzschel für ihre Hilfe und den beigesteuerten Code. Vielen Dank!

Um auch weiterhin alle Elemente der Firefox-Oberfläche mittels 'css' gestalten zu können, ist es notwendig, eine zusätzliche Aufruflogik für bestimmte 'css'-Regeln zu benutzen.

Bei diesen Elementen…

BrokenHeart

18. Juni 2021 um 09:36

In diesem Fall geht es nämlich um: ::part(content)

So sieht der Code dann dazu aus:

CSS

menupopup menu, 
menupopup menuitem  {
  border: 2px solid green !important;
  border-radius: 15px !important;
}

:is(panel, menupopup)::part(content) {
  --panel-color: white !important;
  --panel-border-radius: 0px !important;
  background: black !important;
  margin-top: 1px !important;
 }

Alles anzeigen

laubenpieper

Danke Sören, den Buchstaben f habe ich übersehen

2002Andreas

Zitat von 2002Andreas

In diesem Fall geht es nämlich um: ::part(content)

Warte bitte noch, ich teste gerade etwas anderes

Teste es bitte mal so:

CSS

menupopup {
  --panel-background: black !important;
  --panel-padding: 1px 0 !important;
}

menupopup >  menu,
menupopup menuitem {
  margin-top: -3px !important;
  border: 2px solid green !important;
  border-radius: 0 !important;
  color: white !important;
  background: black!important;
}

menupopup menuitem:hover,
menupopup menu:hover {
  border: 2px solid green !important;
  background: lightgray !important;
  color: black !important;
}

Alles anzeigen

laubenpieper

Andreas können wir den unlaufenden Rahmen rausnehmen?

lp

2002Andreas

Zitat von laubenpieper

den unlaufenden Rahmen rausnehmen?

Der letzte Code ist nicht wirklich ideal dafür.

Besser wäre der erste, wo du dann eben eine Datei und ein Script erst installieren müsstest.

Oder auch so bitte mal testen.

CSS

menu > .menu-text, menuitem > .menu-text,
menu > .menu-iconic-text, menuitem > .menu-iconic-text {
  border: 2px solid green !important;
  border-radius: 20px !important;
  padding-left: 10px!important;
}

menupopup {
  --panel-background: black !important;
  --panel-padding: 1px 0 !important;
}

menupopup >  menu,
menupopup menuitem {
  margin-top: -3px !important;
  color: white !important;
  background: black!important;
}

menupopup menuitem:hover,
menupopup menu:hover {
  border: 2px solid green !important;
  background: lightgray !important;
  color: black !important;
}

Alles anzeigen

laubenpieper

Andreas da muss ich mich erst mal durchlesen mit

/* userChromeShadow.css */

Danke erst mal

Grüsse vom laubenpieper

2002Andreas

Zitat von laubenpieper

Andreas da muss ich mich erst mal durchlesen mit

Ist nur ein weiteres Script und eine weitere Datei die du dir installieren müsstest.

Und der Code kommt dann statt in die userChrome.css in die userChromeShaddow.css.

Kannst ja den Code aus Beitrag Nr. 6 mal ausprobieren.

2002Andreas

Zitat von 2002Andreas

Ist nur ein weiteres Script und eine weitere Datei die du dir installieren müsstest.

Noch sind es zwar nur wenige Codes die so sein müssen.

Ich denke aber in Zukunft wird das immer mehr, und darum kommt man um das Script und die Datei langfristig nicht drumrum.

.DeJaVu

Wenn man so extrem tief in Firefox umbauen will - ja, leider.

laubenpieper

Ja Andreas passt

2002Andreas

Zitat von laubenpieper

Ja Andreas passt

Welchen Code hast du letztlich nun genommen?

laubenpieper

Andreas diesen hier, aber bei mir pfuscht noch eine andere css dazwischen, bin noch am suchen

/*********************************************************/

/*Rahmen für Menüleiste Sternchen-grün 21.08.2021*/

/********************************************************/

menu > .menu-text, menuitem > .menu-text,

menu > .menu-iconic-text, menuitem > .menu-iconic-text {

border: 2px solid #00FF00 !important;

border-radius: 8px !important;

padding-left: 10px!important;

}

menupopup {

--panel-background: black !important;

--panel-padding: 1px 0 !important;

}

menupopup > menu,

menupopup menuitem {

margin-top: -3px !important;

color: white !important;

background: black!important;

}

menupopup menuitem:hover,

menupopup menu:hover {

border: 2px solid #00FF00 !important;

background:yellow !important;

color: black !important;

}

2002Andreas

Zitat von laubenpieper

diesen hier

Danke.

Zitat von laubenpieper

bin noch am suchen

Mach es ganz in Ruhe, dann findest du den anderen Code auch.

2002Andreas

Zitat von laubenpieper

bin noch am suchen

Teste doch bitte mal diesen Code:

CSS

/*********************************************************/

/*Rahmen für Menüleiste Sternchen-grün 21.08.2021*/

/********************************************************/

#main-menubar .menu-text, #main-menubar > menuitem .menu-text,

#main-menubar menu > .menu-iconic-text, #main-menubar menuitem > .menu-iconic-text {

border: 2px solid #00FF00 !important;

border-radius: 8px !important;

padding-left: 10px!important;

}


#main-menubar menupopup {

--panel-background: black !important;

--panel-padding: 1px 0 !important;

}


#main-menubar menupopup > menu,

#main-menubar menupopup menuitem {

margin-top: -3px !important;

color: white !important;

background: black!important;

}


#main-menubar menupopup menuitem:hover,

#main-menubar menupopup menu:hover {

border: 2px solid #00FF00 !important;

background:yellow !important;

color: black !important;

}

Alles anzeigen

Solltest du dich für die neue Möglichkeit per Shadow entschließen, dann:

CSS

#main-menubar menupopup menu, 
#main-menubar menupopup menuitem  {
  border: 2px solid green !important;
  border-radius: 15px !important;
}

#main-menubar :is(panel, menupopup)::part(content) {
  --panel-color: white !important;
  --panel-border-radius: 0px !important;
  background: black !important;
  margin-top: 1px !important;
 }

Alles anzeigen

laubenpieper

Hallo Andreas, kannst du mir den umlaufenden Rahmen von der css rausnehmen.

Einen yellow Fehler gefunden.

CSS

/*********************************************************/
/*Rahmen für Menüleiste Sternchen-grün  22.08.2021*/
/********************************************************/

#main-menubar .menu-text, #main-menubar > menuitem .menu-text,

#main-menubar menu > .menu-iconic-text, #main-menubar menuitem > .menu-iconic-text {

border: 2px solid #00FF00 !important;

border-radius: 8px !important;

padding-left: 10px!important;

}


#main-menubar menupopup {

--panel-background: black !important;

--panel-padding: 1px 0 !important;

}


#main-menubar menupopup > menu,

#main-menubar menupopup menuitem {

margin-top: -3px !important;

color: white !important;

background: black!important;

}


#main-menubar menupopup menuitem:hover,

#main-menubar menupopup menu:hover {

border: 2px solid #00FF00 !important;

background:yellow !important;

color: black !important;

}

Alles anzeigen

2002Andreas

Zitat von laubenpieper

den umlaufenden Rahmen

Meinst du das so bei hover?

Wenn ja teste bitte:

CSS

/*********************************************************/
/*Rahmen für Menüleiste Sternchen-grün  22.08.2021*/
/********************************************************/

#main-menubar .menu-text, #main-menubar > menuitem .menu-text,

#main-menubar menu > .menu-iconic-text, #main-menubar menuitem > .menu-iconic-text {

border: 2px solid #00FF00 !important;

border-radius: 8px !important;

padding-left: 10px!important;

}


#main-menubar menupopup {

--panel-background: black !important;

--panel-padding: 1px 0 !important;

}


#main-menubar menupopup > menu,

#main-menubar menupopup menuitem {

margin-top: -3px !important;

color: white !important;

background: black!important;

}


#main-menubar menupopup menuitem:hover,

#main-menubar menupopup menu:hover {

background:yellow !important;

color: black !important;

}

Alles anzeigen

laubenpieper

Andreas, der umlaudende Rahmen ist noch da

Andreas, der umlaufende Rahmen ist noch da

2002Andreas

Zitat von laubenpieper

der umlaufende Rahmen ist noch da

Meinst du den grünen um den Text, oder wo genau

laubenpieper

Ja den grünen um den Text

Sören Hentzschel 21. August 2021 um 14:16

ShadowRoot: Neue Aufruf-Methode für CSS-Regeln