privaten Tab farbig hervorheben

Zitronella

Hallo, ich habe eine userChrome.css angelegt und durch verschiedene Tipps, auf diversen Seiten im Internet, angepasst.
Mein Wunsch ist, dass nun beim starten vom privaten Fenster/aktiven Tab dieser Tab farblich (lila) dargestellt wird. Leider finde ich dafür keinen Code und ich habe dafür zu wenig Ahnung das selbst zu erstellen. Ich zeige euch einfach mal meinen momentanen Code der userChrome.css vielleicht hat jemand ja eine Idee

CSS

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


#appmenu-button {
  background: #A90101 !important;
}


#appmenu-button dropmarker:before {
  content: "My Firefox" !important;
  color: #FFFFFF !important;
  text-shadow:none;
}


#appmenu-button .button-text {
  display: none !important;
}
tabs.tabbrowser-tabs#tabbrowser#tabs{


	 background-color: transparent!important;
	}




.tabbrowser-tab, .tabs-newtab-button {


	 background: transparent !important;
	 color: #ffffff !important;
	 text-shadow: #00000 0px 0px 2px !important;
	 font-size: 0.9em !important;
	 border: #000000 1px solid !important;
	 padding-left: 4px !important;
	 padding-right: 4px !important;
	box-shadow: inset 0px 0px 1em 0px rgba(255,255,255,.5) !important; 
	border-radius: 6px 6px 0px 0px !important;
	 height: 24px !important;
	}

.tabbrowser-tab:not([pinned="true"]){


	 margin-left: 1px !important;
	 margin-right: 1px !important;
         color: #ffffff !important;
	}


.tabbrowser-tab[selected="true"]{
	 background: transparent !important;
	 color: #ffffff !important;
         text-shadow: #ffffff 0px 0px 2px !important;
	box-shadow: inset 0px 0px 10px 0px #EE0000 !important;
	}
/* privates Fenster/Tab */
#main-window[privatebrowsingmode=temporary] #appmenu-button {
  background: #6913A3 !important;
}

Alles anzeigen

2002Andreas

Hallo Zitronella...

teste das bitte mal:

Code

#main-window[privatebrowsingmode=temporary][tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
background:#6913A3!important}

Zitronella

danke Andreas, ich habe deinen code einfach mit rangehängt, ich hoffe das war richtig so? Aber leider ist der private Tab immer noch rot

2002Andreas

In deinem anderen Code ist ein Fehler, ich suche den mal und melde mich wieder.

Zitronella

ui, toll, hoffe du findest etwas [Blockierte Grafik: http://images2.wikia.nocookie.net/__cb20100515125023/de/images/2/25/Trippel.gif]
Das der Code etwas "unsauber" ist kann schon möglich sein, da ich, wie schon gesagt, aus einigen Tipps den zusammen gestückelt habe. Funktionierte aber bisher immer ganz gut.

2002Andreas

Das ist der kompl. neue Code

CSS

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


    #appmenu-button {
      background: #A90101 !important;
    }


    #appmenu-button dropmarker:before {
      content: "My Firefox" !important;
      color: #FFFFFF !important;
      text-shadow:none;
    }


    #appmenu-button .button-text {
      display: none !important;
    }
    tabs.tabbrowser-tabs#tabbrowser#tabs{


        background-color: transparent!important;
       }




    .tabbrowser-tab, .tabs-newtab-button {


        background: transparent !important;
        color: #ffffff !important;
        text-shadow:  0px 0px 2px !important;
        font-size: 0.9em !important;
        border: #000000 1px solid !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
       box-shadow: inset 0px 0px 1em 0px rgba(255,255,255,.5) !important;
       border-radius: 6px 6px 0px 0px !important;
        height: 24px !important;
       }

    .tabbrowser-tab:not([pinned="true"]){


        margin-left: 1px !important;
        margin-right: 1px !important;
             color: #ffffff !important;
       }


    .tabbrowser-tab[selected="true"]{
        background: transparent !important;
        color: #ffffff !important;
             text-shadow:  0px 0px 2px !important;
       box-shadow: inset 0px 0px 10px 0px #EE0000 !important;
       }
    /* privates Fenster/Tab */
    #main-window[privatebrowsingmode=temporary] #appmenu-button {
      background: #6913A3 !important;
    }




#main-window[privatebrowsingmode=temporary][tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
background:#6913A3!important}

Alles anzeigen

Ich habe 2x die Farbe aus:
text-shadow: #00000 0px 0px 2px !important;

entfernt weil das nicht funktioniert.

[Blockierte Grafik: http://www7.pic-upload.de/thumb/04.04.13/k5iidmau572f.jpg]

Zitronella

hm. bei mir ist der Tab aber weiterhin rot. Ich frage mich gerade warum bei dir nicht :-?? habe es extra in einem neuen Profil ausprobiert

[Blockierte Grafik: http://i.imgur.com/XguRX38s.png]

2002Andreas

Ich sehe gerade das du die Tabs ganz oben hast, und das kann ich hier nicht so einfach testen.

Mein Code war für die Tabs unten.

Teste es bitte mal mit:

Code

#main-window[privatebrowsingmode=temporary][tabsintitlebar]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
    background:#6913A3!important}

Sollte das auch nicht funktionieren gib mir bitte mal deinen Code für die Tabs in der obersten Leiste.

Zitronella

klasse, das sieht schon fast perfekt aus. Hinter dem lila scheint aber noch das rötliche hervor. Bekommst du das noch hin dass es wirklich richtig lila ist?

2002Andreas

Entfern bitte mal aus diesem Code:

CSS

.tabbrowser-tab[selected="true"]{
            background: transparent !important;
            color: #ffffff !important;
                 text-shadow:  0px 0px 2px !important;
           box-shadow: inset 0px 0px 10px 0px #EE0000 !important;
           }

diesen Teil:
box-shadow: inset 0px 0px 10px 0px #EE0000 !important;

und teste es bitte. ( Zumindest die Farbe: #EE0000

Zitronella

dann ist beim normalen aktiven Tab die rote Farbe ganz weg und beim privaten Tab ist der Schatten des Tabs weg.

2002Andreas

Sowas ist immer etwas fummelig, sorry.

Teste bitte mal diesen kompl. Code

CSS

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


        #appmenu-button {
          background: #A90101 !important;
        }


        #appmenu-button dropmarker:before {
          content: "My Firefox" !important;
          color: #FFFFFF !important;
          text-shadow:none;
        }


        #appmenu-button .button-text {
          display: none !important;
        }
        tabs.tabbrowser-tabs#tabbrowser#tabs{


            background-color: transparent!important;
           }




        .tabbrowser-tab, .tabs-newtab-button {


            background: transparent !important;
            color: #ffffff !important;
            text-shadow:  0px 0px 2px !important;
            font-size: 0.9em !important;
            border: #000000 1px solid !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
           box-shadow: inset 0px 0px 1em 0px rgba(255,255,255,.5) !important;
           border-radius: 6px 6px 0px 0px !important;
            height: 24px !important;
           }

        .tabbrowser-tab:not([pinned="true"]){


            margin-left: 1px !important;
            margin-right: 1px !important;
                 color: #ffffff !important;
           }


        .tabbrowser-tab[selected="true"]{
            background: transparent !important;
            color: #ffffff !important;
                 text-shadow:  0px 0px 2px !important;
           box-shadow: inset 0px 0px 10px 0px  #EE0000 !important;
           }
        /* privates Fenster/Tab */
        #main-window[privatebrowsingmode=temporary] #appmenu-button {
          background: #6913A3 !important;
        }




    #main-window[privatebrowsingmode=temporary][tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
box-shadow: inset 0px 0px 10px 0px  !important;
    background:#6913A3!important}

Alles anzeigen

Es ist für mich einfacher immer den kompl. Code hier reinzusetzten.

Zitronella

du brauchst dich keinesfalls entschuldigen, ich bin sooo froh dass du mir hilfst :klasse:
also gerade ausprobiert: der Code ist wohl wieder für Tabs unten. Ich habe meine Tabs mal nach unten umgestellt um das Ergebnis zu sehen und muss sagen, es ist schon sehr gut gelungen, nur die Transparenz in dem Tab fehlt noch irgendwie.

Was mich generell wundert ist dass da überhaupt ein Unterschied im Code sein muss ob Tabs unten oder oben :-?? denn beim Aussehen des normalen Tab scheint das ja keine Rolle zu spielen.

2002Andreas

Zitat von Zitronella

ein Unterschied im Code sein muss ob Tabs unten oder oben

Wusste ich bis eben auch noch nicht, keine Ahnung warum das so ist :-??

So sieht der Code jetzt hier aus, normal und privater Modus.

[Blockierte Grafik: http://www10.pic-upload.de/thumb/04.04.13/xz1k9g29lmx1.jpg]

[Blockierte Grafik: http://www7.pic-upload.de/thumb/04.04.13/wuc98qbdhc7h.jpg]

Zitronella

genau, sieht bei mir auch so aus.(wenn ich die Tabs unten habe) Durch das fehlen des Schattens im privaten Modus wirkt das lila natürlich sehr stark. Kann man da irgendwie dieses transparente noch reinbasteln? Lass dir aber ruhig Zeit, wie gesagt, bin sehr froh dass du hier so viel bastelst.

2002Andreas

Zitat von Zitronella

das lila natürlich sehr stark

Du könntest mit diesen Werten mal rumspielen und testen z.B.

box-shadow: inset 0px 9px 18px 3px !important;

2002Andreas

Oder auch die Farbe white noch einfügen.

box-shadow: inset 0px 9px 18px 3px white !important;

Zitronella

Juchuuu, ich glaube nun hab ich den perfekten Code. Danke dir ganz doll für die Hilfe [Blockierte Grafik: http://www.island-forum.com/wcf/images/smilies/danke.gif]

Jetzt ist alles so wie ich es haben will, egal ob Tabs oben oder unten und alles schön durchsichtig. Kannst es dir ja mal ansehen.

CSS

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");


        #appmenu-button {
          background: #A90101 !important;
        }


        #appmenu-button dropmarker:before {
          content: "My Firefox" !important;
          color: #FFFFFF !important;
          text-shadow:none;
        }


        #appmenu-button .button-text {
          display: none !important;
        }
        tabs.tabbrowser-tabs#tabbrowser#tabs{


            background-color: transparent!important;
           }




        .tabbrowser-tab, .tabs-newtab-button {


            background: transparent !important;
            color: #ffffff !important;
            text-shadow:  0px 0px 2px !important;
            font-size: 0.9em !important;
            border: #000000 1px solid !important;
            padding-left: 4px !important;
            padding-right: 4px !important;
           box-shadow: inset 0px 0px 1em 0px rgba(255,255,255,.5) !important;
           border-radius: 6px 6px 0px 0px !important;
            height: 24px !important;
           }

        .tabbrowser-tab:not([pinned="true"]){


            margin-left: 1px !important;
            margin-right: 1px !important;
                 color: #ffffff !important;
           }


        .tabbrowser-tab[selected="true"]{
            background: transparent !important;
            color: #ffffff !important;
                 text-shadow:  0px 0px 2px !important;
           box-shadow: inset 0px 0px 10px 0px  #EE0000 !important;
           }
        /* privates Fenster/Tab */
        #main-window[privatebrowsingmode=temporary] #appmenu-button {
          background: #6913A3 !important;
        }




    #main-window[privatebrowsingmode=temporary][tabsintitlebar]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
box-shadow: inset 0px 0px 10px 0px  #8b00e9 !important;
    }
    #main-window[privatebrowsingmode=temporary][tabsontop=false]:not([disablechrome]) .tabbrowser-tab[selected=true]:not(:-moz-lwtheme) {
box-shadow: inset 0px 0px 10px 0px  #8b00e9 !important;
    }

Alles anzeigen

2002Andreas

Freut mich das wir es letztlich zusammen geschafft haben, war gern geschehen

Dein Code ist einwandfrei. :klasse:

Zitronella

mir fällt nun doch noch etwas auf: Wenn ich Firefox nicht maximiert habe, dann wechselt der lilane private Tab wieder die Farbe zu rot :-??? Woran könnte das nun wieder liegen?