zu Stylish Anfänger Frage

Fubu

Hallo,
ich wollte mal nachfragen wie die erste Zeile in Stylish vom Code her aussehen muß.

Ich lese hier schon einige Zeit mit und sehe immer verschiedene Anfangszeilen.

z.B

Code

@-moz-document url-prefix(chrome://browser/content/browser.xul){
      irgenein CSS Code
        }

oder

Code

/*AGENT_SHEET*/
irgenein CSS Code

oder

Code

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

vielen Dank

Endor

Hallo Fubu.
Erst mal willkommen hier im Forum.

Ein Code Beispiel: zbs, zum Abrunden der Adressleiste:

CSS

/*AGENT_SHEET*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {


#urlbar{ border-radius: 14px !important;} 


}

Im Prinzip sollte es immer so in der Art sein.
Aber es unterscheidet sich je nachdem was Du wo wie ansprechen willst.
Da müsstest Du mal genauer sagen was Du möchtest.

Wenn man mehrere Codes unter einander packen will, sieht dann so aus:

CSS

/*AGENT_SHEET*/
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {
/*Urlbar abrunden*/
#urlbar{ border-radius: 14px !important;} 


#notification-popup-box { border-radius: 16px !important;}


#identity-box{border:none!important; background:none!important;}


/* Suchfeld in Findbar abrunden */
#FindToolbar .findbar-textbox.findbar-find-fast {
    -moz-appearance: none !important;
    border-radius: 16px !important;
    padding-right: 8px !important;
    padding-left:  8px !important;
    margin-right:  4px !important;}


/* Suchfeld in Symbolleiste abrunden */
#searchbar .searchbar-textbox {
    -moz-appearance: none !important;
    border-radius: 14px !important;
    padding-right: 8px !important;
    padding-left:  8px !important;
    margin-right:  4px !important;}
}

Alles anzeigen

Mfg.
Endor

Fubu

Hallo,
eigentlich die Farben ändern z.B. wo steht Datei Bearbeiten Ansicht usw
die Lesezeichenleiste, AddOn Leiste.
Naja kosmietische Sachen in erster linie.

Endor

Hintergrund Weiß Text rot :

CSS

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
@-moz-document url(chrome://browser/content/browser.xul) {


#main-menubar {background: #ffffff !important; color:red!important;}


}

Mfg.
Endor

Fubu

erstmal den Hintergrund.

Endor

Siehe Code im letzten Beitrag, der ändert Hintergrund und Text
Mfg.
Endor

2002Andreas

Hallo und Willkommen hier im Forum.

Nur mal so allgemein:

Hintergrund = Background

Color = Schriftfarbe

Fubu

aa Ok,
CSS kann ich ein wenig.

danke mal sehen was ich machen kann.

wenn nicht Frage ich hier im Forum.

2002Andreas

So wäre es incl. der Lesezeichen:

CSS

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url(chrome://browser/content/browser.xul) {


#main-menubar,#PlacesToolbarItems > toolbarbutton{
background: #ffffff !important; 
color:red!important;}


    }

Fubu

dann muß ich mal was Fragen und zwar habe ich mir den Code für die URL Leist hier aus dem Forum gesucht.

Das sieht bei mir komplett so aus

CSS

#main-window, #nav-bar-customization-target, #PlacesToolbarItems { background-color: #fbfbfb !important; }




/* ---- URL Bar - Rahmen ---- 1/2 */
/*AGENT_SHEET*/
#main-window[defaultfxtheme="true"] toolbox toolbar #urlbar-container #urlbar-wrapper #urlbar,
#main-window[defaultfxtheme="true"] toolbox toolbar #search-container searchbar .searchbar-textbox {
  border-color: #c1c1c1 !important;
  background: #fbfbfb !important;
  color: #333333 !important;
}


/* bei klick in URL Leiste */
#main-window[defaultfxtheme="true"] toolbox toolbar #urlbar-container #urlbar-wrapper #urlbar[focused],
#main-window[defaultfxtheme="true"] toolbox toolbar #search-container searchbar .searchbar-textbox[focused] {
  border-color: #ff9500 !important;
}


/* mit Maus drüberfahren */
#main-window[defaultfxtheme="true"] toolbox toolbar #urlbar-container #urlbar-wrapper #urlbar:not([focused]):hover,
#main-window[defaultfxtheme="true"] toolbox toolbar #search-container searchbar .searchbar-textbox:not([focused]):hover {
  border-color: #343f48 !important;
}
/* ---- URL Bar - Rahmen 2/2 ---- */

Alles anzeigen

mehr habe ihc in Stylish noch nicht.

ist doch so richtig oder kann man es einfacher machen ?

2002Andreas

Richtig: ja
Einfacher: nein

anders: Ja :wink:

CSS

/*AGENT_SHEET*/


@-moz-document url-prefix(chrome://browser/content/browser.xul){    


#main-window, #nav-bar-customization-target, #PlacesToolbarItems { background-color: #fbfbfb !important; }




    /* ---- URL Bar - Rahmen ---- 1/2 */

    #main-window[defaultfxtheme="true"] toolbox toolbar #urlbar-container #urlbar-wrapper #urlbar,
    #main-window[defaultfxtheme="true"] toolbox toolbar #search-container searchbar .searchbar-textbox {
      border-color: #c1c1c1 !important;
      background: #fbfbfb !important;
      color: #333333 !important;
    }


    /* bei klick in URL Leiste */
    #main-window[defaultfxtheme="true"] toolbox toolbar #urlbar-container #urlbar-wrapper #urlbar[focused],
    #main-window[defaultfxtheme="true"] toolbox toolbar #search-container searchbar .searchbar-textbox[focused] {
      border-color: #ff9500 !important;
    }


    /* mit Maus drüberfahren */
    #main-window[defaultfxtheme="true"] toolbox toolbar #urlbar-container #urlbar-wrapper #urlbar:not([focused]):hover,
    #main-window[defaultfxtheme="true"] toolbox toolbar #search-container searchbar .searchbar-textbox:not([focused]):hover {
      border-color: #343f48 !important;}
    }
    /* ---- URL Bar - Rahmen 2/2 ---- */

Alles anzeigen

Fubu

LOL,
na das ist ja eine Geniale Antwort.

Neuer CSS Code kan nich dann hier vor einfügen ?

Code

}
    /* ---- URL Bar - Rahmen 2/2 ---- */

bzw so

Code

/* ---- URL Bar - Rahmen 2/2 ---- */
NEUER CODE
}

2002Andreas

Zitat von Fubu

kan nich dann hier vor einfügen ?

Ja, und dran denken, das am Ende des Codes 2 }} dann sind.

Fubu

alles klar,
werde ich sehe ob der Fux will wie ich

Danke erstmal.

2002Andreas

also so dann:

/* mit Maus drüberfahren */
#main-window[defaultfxtheme="true"] toolbox toolbar #urlbar-container #urlbar-wrapper #urlbar:not([focused]):hover,
#main-window[defaultfxtheme="true"] toolbox toolbar #search-container searchbar .searchbar-textbox:not([focused]):hover {
border-color: #343f48 !important;}
} <<<< diese Klammer muss dann entfernt werden, und ganz am Ende wieder eingefügt.
/* ---- URL Bar - Rahmen 2/2 ---- */

neuer Code xyz }}

2002Andreas

Diese rote Klammer ist der Abschluss für den oberen Befehl:

@-moz-document url-prefix(chrome://browser/content/browser.xul) {

PS:
Bin dann aber für heute offline...viel Spaß dann noch beim testen :klasse:

Fubu

das mit der geschweiften klammer ha be ich verstanden.

Danke nochmal und schönen Abend.

Fubu

huhu da bin ich wieder

wie bekomme ich einen hover Effekt bei den Buttons z.B. Seite Neu Laden, Home Seite und Drucken ?

hover Effekt reicht mir ein normaler border.

getestet habe ich es mit den Seite neu Laden mit Hintergrundfarbe, das klappt ja aber ich möchte einen hover Effekt mit border.

Das bekopmme ich nicht hin

hier mal mit hintergrundfarbe

CSS

#ctraddon_reload-button > .toolbarbutton-icon{
background: #ff0000 !important;
}

2002Andreas

Bitte mal testen:

CSS

/*AGENT_SHEET*/    


@-moz-document url-prefix(chrome://browser/content/browser.xul){


#ctraddon_reload-button:hover{
border:3px solid blue!important;
    }


#ctraddon_reload-button{
border:3px solid transparent!important;
    }


#ctraddon_reload-button > .toolbarbutton-icon{
background: #ff0000 !important;}
    }

Alles anzeigen

Zitat

mit Hintergrundfarbe, das klappt ja

Ist doch schon ein erster Erfolg dann :klasse:

2002Andreas

So incl. Home Button:

CSS

/*AGENT_SHEET*/    


@-moz-document url-prefix(chrome://browser/content/browser.xul){


#home-button:hover,
#ctraddon_reload-button:hover{
border:3px solid blue!important;
    }


#home-button,
#ctraddon_reload-button{
border:3px solid transparent!important;
    }


#home-button > .toolbarbutton-icon,
#ctraddon_reload-button > .toolbarbutton-icon{
background: #ff0000 !important;}
    }

Alles anzeigen

Farben und Wert kannst du dir natürlich noch anpassen.

Jetzt versuch du doch bitte mal den Code incl. dem Druckersymbol selber zu erstellen....du schaffst das :klasse: