Abgerundete Ecken bei Adressleiste

bird

Zitat von loshombre

Ich hoffe, du meinst userChrome.css! Denn userCode.css kenn ich noch garnicht! Ist aber auch kein Problem, dann erstell ich halt eine! Das Logo bereitet mir auch noch Probleme! Mit einer einfachen *png ist es glaub ich nicht getan, oder? Probehalber hab ich eins gebastelt und mit Gregs Code in der *css eingebunden! Sah ziemlich bescheiden aus!
Gruß
loshombre

Tschuldigung!!! Ich meinte userChrome.css...

Um das ganze zu verstehen, ist so dass Du dieses Element "entführst" (.toolbar-primary) um ein anderes Gestalt zu verpassen... Wer sagt wie das ganze aussehen wird (neue elemente einfügen, eben das Logo) ist ein .xml Datei die existieren muss...

Einfacher ist das Ganze im Theme zu machen (.jar Datei) aber wir können es versuchen per userChrome.css

Ich melde mich wenn ich das ganze fertig habe, ok??

Gruß

Bird

bird

Ok... Mit dem Notepad Du erstellst eine neue Datei die Du toolbarBindings.xml bennenen wirst. Die platzierst Du in Deinen Chrome Ordner. Die Datei hat den Code:

XML

<?xml version="1.0"?>


<bindings id="toolbariconBindings"
   xmlns="http://www.mozilla.org/xbl"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">


 


 	<binding id="toolbar-primary" extends="chrome://global/content/bindings/toolbar.xml#toolbar">
        <content>
            <xul:hbox class="toolbar-holder toolbar-primary-holder" flex="1" xbl:inherits="orient=tborient,buttonstyle">
                <xul:hbox class="toolbar-button-box" flex="1">
                    <children/>
                </xul:hbox>
                <xul:image class="toolbar-primary-icon" xbl:inherits="buttonstyle"/>
            </xul:hbox>
        </content>
    </binding>      


</bindings>

Alles anzeigen

In Deinen userChrome.css kommt:

CSS

/*:::::Navigations Bar Icon::::::*/
.toolbar-primary {
-moz-binding: url("toolbarBindings.xml#toolbar-primary") !important;
}


.toolbar-primary-icon {
  width: 100px;
  background-repeat: no-repeat;
  background-position: top;
}


#nav-bar > .toolbar-holder > .toolbar-primary-icon {
  background-image: url("DeinBild.dino.png");
}

Alles anzeigen

DeinBild.png muss auch in Deinen Chrome Ordner...

Probieren wir mal ob es so funktioniert...

Gruß

Bird

loshombre

Eine Frage noch vorab! Die *png mit einer bestimmten Größe? Die Größe meiner Toolbar? Nehm ich an!

Gruß
loshombre

bird

Zitat von loshombre

Eine Frage noch vorab! Die *png mit einer bestimmten Größe? Die Größe meiner Toolbar? Nehm ich an!
Gruß
loshombre

Es kommt auf Dein Bild an... Ich benutze z.B. ein 32px X 32px Bild fürs Silvermel Logo. Du kannst später alles anpassen mit padding, height, width u.s.w.

Der Code von oben bezieht sich auf das Tutorial im MozillaZine.

Bei mir steht:

Code

.toolbar-primary-icon {
  background-image: url("chrome://browser/skin/toolbar-icon.png");
  margin-right: 7px;
  min-width: 40px;
  background-repeat: no-repeat;
  background-position: center;
}

Je nach Bild kann man so anpassen dass Du genau positionieren kann..

Gruß

Bird

loshombre

Hallo bird!(und natürlich alle anderen!)

So mein Bastel-Freund! Noch ein Code?! Man ,du holst hier Klamotten aus der Kiste, das ist die wahre Freude ! Also, die ersten beiden Codedateien hab ich erstellt und dementsprächend eingesetzt! Den dritten hab ich für meine Bedürfnisse etwas modifiziert und auch eigesetzt! Nach dem ich das richtige Bild entlich gefunden hatte, bereitete mir das richtige Modifizieren und Anpassen der *png die größten Probleme(Schatten, Übergänge, etc...)! Nach dem ich das aber doch noch (zu meiner Zufriedenheit :wink:)geschafft und die *png eingebunden habe, stimmte ich dann noch die margin-, padding- und width-Werte der verschiedenen Codes, aufeinander ab [Blockierte Grafik: http://www.mainzelahr.de/smile/medien/pc1.gif] ! Und das ist das Ergebniss, dank Deiner/Eurer hervorragender Unterstützung und Hilfe, für die ich mich hier nochmal ganz, ganz herzlichts bei Dir/Euch bedanken möchte! <Screenshot>Link<

Gruß
loshombre

PS: Da fällt mir grad auf, der Forecastfox-Text und Temp.-Werte, könnten auch ne andere Farbe vertragen ! Vielleicht kann man das an einer anderen Stelle im neuen Thread näher erleutern und besprächen :wink: !

bird

Hi loshombre,

Super! Sehr schön hingekriegt! Und eine richtig gute Idee von Dir!!

In Deinem Fall wurde sowieso mit dem Hintergrund Code nicht gehen da der Hintergrund selbst aus einem Bild gemacht wird....

Als Vorschlag, Ich denke das Bild könnte ein Bisschen Transparenz vertragen, damit der Hintergrund noch sichtbar wird. Ich würde versuchen den weissen Hitergrund des Logos zu entfernen (im Photoshop mit dem Zauberstab...). Wenn Du möchtest kannst Du gerne mir das Bild schicken. Ich versuche dann zu bearbeiten und schicke es Dir zurück (nach Wunsch kann ich auch eine Kopie von Silvermel mitpacken...)

Gruß

Bird

loshombre

Danke schön! Naja, ich als leidenschftlicher Biker musste unbedingt irgendwo in meinem Fuchs ein Mopet einbauen :wink:! Mit dem Bearbeiten der Bilder hab ich sowieso noch so meine Probleme(irgenwie nicht so richtig mein Fach)! Und Photoshop hab und kenn ich nicht! Da ich aber generell für jeden guten Verbesserungsvorschlag zu haben bin, würd ich dein Angebot sehr gerne annehmen! Wie kann ich dir das Bild zukommen lassen? Geht das über "PN" überhaupt?

Gruß
loshombre

loshombre

bird:
Ich stell beide Versionen hier rein! Vllt. kann man das dann besser vergleichen! Die obere ist vor, die untere nach der Bearbeitung!

[Blockierte Grafik: http://img301.imageshack.us/img301/3494/zwischenablage018rb.png]
[Blockierte Grafik: http://img301.imageshack.us/img301/284/zwischenablage023sj.png]

Hmm! Schwer zu sagen! Was meinst du dazu? Wäre es vllt. ein Versuch wert, den Himmelblauen Streifen zwischen Get Bikefox und Ride to web "wegzuzaubern"? Und zwar in beiden als direkten Vergleich?!

Gruß
loshombre

bird

Es wäre auf jedenfall besser!!! Ich war nicht sicher ob Du den Himmel behalten wolltest oder nicht...

Bin dabei...

Gruß

Bird

micylin

Hallo,

Funktioniert das auch -> Anstatt eines Bildes ein Button in die Toolbar einzubinden. Als erweiterung habe ich das hinbekommen. Aber nicht über den Profileordner

micylin

loshombre

Ich kram den so zu sagen abschließend noch mal raus, weil ich es entlich geschafft habe und es euch nicht vorenthalten möchte.
Und zwar hab ich die Gelegenheit zur Feier des 1.5 Fuchs genutzt, vieeeel geschraubt und entlich geschafft, die Erweiterung WellRounded mit Qute und Office 2003 Farb-Theme-Mod. so zu modifizieren, daß die drei problemlos im Fx 1.5 zusammen harmonieren können. Somit kann man den großen und problematischen "Runde Bars-Code" entlich aus der Chrome.css und die ganzen PNGs aus dem Chromeordner entfernen.
Problemlos heißt: Keine störenden Nebeneffekte der urlbar wie mit dem Chromecode. Die meisten und häßlichsten Probleme hatte der mit den verschlüsselten Seiten. Die urlbar wurde dabei ja förmlich zu allen Seiten zersprengt. Noch schlimmer wurde es beim 1.5 mit seinem RSS Feed in der urlbar.
Allerdings ist das alles Geschichte, denn jetzt funktioniert das wunderbar und die Chrome.css und der Chromeordner sind um einiges schlanker. Bei der Gelegenheit hab ich <em>Bazons </em> beiden Dropmarker, die <em>captain chaos</em> freundlicher Weise hochgeladen hat(vielen Dank euch beiden noch mal dafür) in die Erweiterung mit eingebaut. Somit haben sie jetzt auch einen festen Platz und geistern nicht mehr irgendwo in der Chrome.css herum. Hier noch ein kleiner Screenshot zum Schluss:

[Blockierte Grafik: http://img233.imageshack.us/img233/7755/zwischenablage012we.png]

micylin

Kannst du uns freundlicherweise deine Chrome.css zum download anbieten.

Ciao
micylin

loshombre

Nein, das kann ich nicht. Hab keine Möglichkeit dazu. Allerdings frag ich mich, wozu du meine Chrome.css brauchst