Throbber im Tab

MarketMaker

Hallo

Habe diesen Code gefunden und wollte diesen in der Farbe noch anpassen (FF 4.0).

Hab dazu das Bild extrahiert, dann mit „GIMP“ die Farbe geändert und wieder in den Code eingefügt.

Jetzt wird mir das Bild statisch angezeigt ohne diese Animation (Drehbewegung)

Muss ich das Bild noch anders bearbeiten oder kann ein Code dafür sorgen?

http://userstyles.org/styles/38669/f…ss-tab-throbber

loshombre

Das geht so weder mit dem Bild, noch dem Code.
Die Grafik ist in base64 codiert. Um es wieder genau so mit dem Code im Gang zu setzen, muss deine bearbeitete Grafik wieder in base64 umgewandelt werden. Vor allem aber muss man in Gimp diesen Throbber wieder als ne animierte *gif speichern, sonst wird es halt nur statisch.

MarketMaker

Hallo

Bin wie folgt vorgegangen:

base64 code aus der Formel kopiert und in die Adresszeile des FF eingegeben, rotierende Grafik wird im Fenster angezeigt.

Grafik speichern, ist dann aber ein .png Bild, wobei aber beim Zurückumwandeln in base64 und dann im FF anzeigen wieder eine rotierende Grafik angezeigt wird.

Öffnen mit Gimp und Versuch als .gif abzuspeichern zeigt mir zwar die Optionen für animierte GIfs , diese sind aber grau hinterlegt, daher wohl nicht anwendbar.

Beim Umwandeln dieser .gif in base64 wird dann wieder ein statisches Bild angezeigt.

littlegoaty

MoinMoin,

falls das mit der Bildbearbeitung nicht klappt erstelle Dir doch einfach selbst einen Throbber in der gewünschten Farbe:

Erstellen kannst Du Ihn z. B. hier:

http://ajaxload.info/

oder hier:

http://preloaders.net/en/3d

Danach speicherst Du den von Dir erstellten Throbber einfach im Chrome-Ordner Deines Profils als Throbber.gif

Der Code für Deine userchrome.css sieht dann so aus (mit dem Wert "margin-left" kannst Du rumspielen und den Abstand zum Rand des Tabs ändern):

CSS

.tab-throbber {
          -moz-appearance: none !important;
          list-style-image: url(Throbber.gif)!important;
          margin-left: 8px !important;
        }

        .tab-throbber[progress] {
          -moz-appearance: none !important;
          list-style-image: url(Throbber.gif)!important;
          margin-left: 8px !important;
        }

Alles anzeigen

Gruß

Littlegoaty

MarketMaker

Besten Dank, funktioniert.