Forecastfox- Schriftfarbe der aktivierten Anzeigen ändern?!

loshombre

So meine "Codefreaks"-Freunde und alle, die sich berufen fühlen! Da man ja mit dem Fuchs und seinen Extensions so allerhand anstellen kann, seh ich nicht ein, warum man vor Forecastfox halt machen sollte! Meine Frage deshalb: Wie stellen wir das an, den Forecastfox-Code so zu manipulieren, um den aktivierten Anzeigen(Text, Zahlen) ne andere Farbe zu verpassen?! Wenn das nicht möglich sein sollte(was ich mir in unserem schönen, fachkompetenten Forum eigentlich garnicht mehr vorstellen kann :wink: ), lass ich mich gerne des Besseren belehren! Falls aber doch, dann um so lieber! Hoffe auf eure Anregungen! Vllt. kriegen wir das gemeinsam hin! Wäre schön!

Gruß
loshombre

loshombre

Der Imperator nochmal :wink: !
Ich stell mal die Codes hier rein, mit der Hoffnung doch noch paar Anregungen zu kriegen! Falls das überhaupt jemanden interessiert!

<forecastfox.css>:

CSS

/* ::::: Global Styles ::::: */
.ff-header {
  border-bottom: 2px groove ThreeDFace;
  padding: 10px;
  background-color: Window;
  color: WindowText;
}


.ff-content {
  padding: 10px;
}


.ff-footer {
  border-top: 2px groove ThreeDFace;
  padding: 10px;
}


.ff-button {
  margin: 1px;
}


.ff-btnspacer {
  margin-left: 15px;
}


.ff-link {
  color: #0000FF;
  text-decoration: underline !important;
  cursor: pointer;
  margin-left: 1px;
  margin-right: 1px;
}


/* ::::: Main Window ::::: */


.ff-panel {
  -moz-box-direction: reverse;  
  -moz-binding: url('chrome://forecastfox/content/bindings.xml#ff-panel');
  -moz-box-align: center;
  -moz-box-pack: center;
  -moz-appearance: none;
  min-height: 20px;
  background-color: transparent !important;
  background: transparent !important;
  padding: 0px 2px 0px 2px !important;
  border-right: 1px solid ThreeDShadow;
  border-left: 1px solid ThreeDHighlight;
  border-bottom: none !important;
  border-top: none !important;
  cursor: pointer;
}


.ff-panel[ff-first="true"] {
  border-left: none !important;
}


.ff-panel[ff-last="true"] {
  border-right: none !important;
}


/* prevent margins of a value-less label from shifting the image */
.ff-panel > label:not([value]) {
  display: none;
}


#status-bar #ff-box {
  -moz-appearance: statusbarpanel;
} 


#status-bar #ff-box * {
  -moz-appearance: none;
}


#ff-box {
  padding: 0px;
  margin: 0px;
}


#ff-current-deck[selectedIndex="2"] {
  -moz-appearance: none;
}


#ff-forecast-deck[selectedIndex="2"] {
  -moz-appearance: none;
}


#ff-current-panel {
  border-left: none !important;
}


#ff-today-panel, #ff-forecast-panel {
  -moz-appearance: none;
  padding: 0px;
  margin: 0px;
  border: none !important;
}


#ff-progress {
  max-width: 40px !important;
  -moz-appearance: progressbar !important;
}


.ff-spacer {
  -moz-appearance: none;
  background-color: transparent !important;
  background: transparent !important;
  padding: 0;
  margin: 0;
  border-right: 1px solid ThreeDShadow;
  border-left: 1px solid ThreeDHighlight;
}


.ff-tipicon {
  height: 40px;
  max-height: 40px;
}
.ff-radaricon {
  height: 80px;
  max-height: 80px;
}


/* ::::: About Window ::::: */
#ff-about-header {
  background-color: -moz-Dialog;
  color: -moz-DialogText;
  cursor: pointer;
}


#ff-about-icon {
  height: 32px;
  width: 32px;
  max-height: 32px;
  max-width: 32px;
  border: 1px solid #909090;
  background-color: Window;
}


#ff-about-version {
  font-size: 180%;
  font-weight: bold;
  color: #909090; 
  margin-left: 10px;
  cursor: pointer;
}


#ff-about-content {
  padding: 0;
  margin: 0;
}


#ff-credits-iframe {
  border: 0;
  padding: 0;
  margin: 0;
  width: 220px;
  height: 170px;
}


#ff-creditsBox {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  font-family: Arial, sans-serif;
  font-size: small;
}


#ff-creditsBox h3 {
  font-weight: bold;
  font-size: small;
  margin: 0;
}


#ff-creditsBox ul {
  margin-top: 0px;
  margin-left: 0px;
  padding-left: 0px;
  margin-bottom: 15px;
}

#ff-creditsBox li {
  list-style-type: none;
}


.footnote {
  font-size: x-small;
  text-align: justify;
}


/* ::::: Search Window ::::: */
#ff-search {
  min-height: 20em;
}


/* ::::: Options Window ::::: */
#ff-options *[error="true"] {
  -moz-appearance: none;
  border: 1px solid ThreeDShadow;
  background-color: rgb(245, 246, 190);
  color: rgb(0, 0, 0);
}


.valid-label {
  visibility: hidden;
  color: red;
}


.valid-label[error="valid"] {
  visibility: visible;
}


#ff-list-pages {
  width: 14em;
  min-width: 14em;
}


#ff-text-position {
  margin-right: 0;
}


#ff-text-cc-slider, #ff-text-swa-slider {
  margin-left: 0;
  margin-right: 0;
}


#ff-btn-cc-slider {
  margin-right: 1px;
}


#ff-text-dayf-days {
  margin-right: 0;
}


#ff-btn-dayf-days {
  margin-right: 1px;
}


#ff-text-profs-rotate {
  margin-left: 1px;
  margin-right: 0;
}


#ff-btn-profs-rotate {
  margin-right: 1px;
}


/* ::::: Profiles Window ::::: */
#ff-desc-type {
  font-weight: bold;
}

Alles anzeigen

<bindings.xml> falls nötig:

Code

<!DOCTYPE bindings SYSTEM "chrome://forecastfox/locale/forecastfox.dtd" >


<bindings 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">


  <!-- XXX base binding with new stylesheet -->
  <!-- XXX header no content -->
  <!-- XXX header content -->
  <!-- XXX buttons -->
  <!-- XXX dialog -->


  <!-- XXX panel binding -->
  <binding id="ff-panel" display="xul:button" extends="chrome://global/content/bindings/general.xml#statusbarpanel">
    <content>
      <xul:image class="statusbarpanel-icon" xbl:inherits="src"/>
      <xul:label class="statusbarpanel-text" xbl:inherits="value=label,crop"/>
    </content>
  </binding>


  <!-- XXX forecast group -->
  <!-- XXX current group -->
  <!-- XXX full on toolbar -->
  <!-- XXX full on toolbar resized-->
  <!-- XXX full on statusbar -->
  <!-- XXX full on statusbar resized-->


</bindings>

Alles anzeigen

Gruß
loshombre

Bazon Bloch

Hi loshombre!

Also prinzipiell sind da ja schon einige Farbdefinitionen enthalten, z.B.

Code

.ff-link {
  color: #0000FF;
}

so sieht nämlich die Definition einer Schriftfarbe aus. (mögliche Farben und ihre Bezeichnung siehe hier).
Willst Du speziell diese Farbe ändern, so geht das in der userChrome.css mit dem üblichen !important tag:

CSS

.ff-link {
  color: #FF0000 !important;}

dann isses rot statt blau.

Aber ich weiß ja nicht, was genau du verändern willst. Du kannst das
(a) per Versuch und Irrtum rausfinden. (Kannst ja allen möglichen Sachen die im Code vorkommen einfach verschiedene color Zuordnungen verpassen, dann siehst Du was was beeinflußt. Auch solchen, die zuvor keine Farbzuordnung hatten, z.B. .ff-panel) oder
(b) den DOM-Inspector nutzen:
Dazu öffene zunächst mal das Subfenster, in dem Du was verändern willst (hier wohl also Forcastfox), dann den Dom-Inspektor (Extras > DOM- Inspektor). (Sollte er noch nicht installiert sein: Dessen Installation wird bei der benutzerdefinierten Firefox Installation angeboten.)
Im DOM-Inspektor wählst Du dann:
Datei > Ein Fenster inspizieren > Name des relevanten Fensters (ggf. auch das Hauptfenster, kenne mich mit Forcastfox nicht so aus...).

Dann klickst Du zuerts auf das Symbol oben links (mit dem Mauspfeil und der Lupe oder was das sein soll), und direkt danach auf das Element, was Du verändern möchtest.
Informationen über dieses Element werden dann im DOM-Inspektor angezeigt.
Für Deine Zwecke am praktischsten ist dann wohl der Modus "CSS Style Rules". Klicke dazu auf das Symbol links des Textes "Objekt - DOM Mode" und wähle "CSS Style Rules"
Dann wird Dir alles über das Element, was Du gerade angeklickt hast, aus CSS Sicht mitgeteilt.

Mußt natürlich schon ein bischen damit rumspielen, bis Du das gewünschte Ergebnis erzielst. Ich weiß auch nicht, ob Forcast Fox das geeignete Beispiel zum Üben ist. Vielleicht probierst Du den DOM-Inspektor zunächst mal mit dem Hauptfenster aus und dort wiederum an Dingen, über die Du schon genauer Bescheid weißt, wie z.B. Das Suchfeld mit abgerundeten Ecken :wink: , dann wirst Du so manches wiedererkennen...

Hoffe Dir, wenn auch indirekt, geholfen zu haben, genauer wußte ich es nämlich auch nicht

Bazon

loshombre

Danke Bazon Bloch! Damit ist mir auf jeden Fall geholfen! Musste erstmal den DOM-Inspektor nachinstallieren, weil er garnicht da war! Damit muss ich mich erstmal auseinander setzen! Natürlich habe ich schon vorher mit der forcastfox.css rumgespielt! Die verschiedenen Farbcodes verändert. Hier mal was ab, da mal was zugetan! Es hat sich auch ne Menge verändert, die Schriftfarbe der Anzeigen leider jedoch nicht! Noch nicht! Mit dem DOM-Inspektor an Forcastfox ranzugehen ist glaub ich doch erstmal nicht das richtige Beispiel! Dafür ist die Extension doch zu komplex! Ich versuchs erstmal mit irgend etwas einfacherem! Mal schauen, was bei rumkommt!

Gruß
loshombre

loshombre

So Kameraden! Darauf bin ich besonders stolz!(genau so wie auf meine abgerundeten Ecken :wink: ). Weil ich ja als fast Ahnungsloser auf diesem Gebiet, mit viel Geduld und Mühe, doch noch mein Vorhaben realisieren konnte! Was für mich zumindest ziemlich schwer war! Neben der Hauptaufgabe, die Textfarbe der aktivierten Anzeigen zu verändern, hab ich es noch geschafft, den Text "fett" und "kursiv" zu stellen!
So(oder so ähnlich, je nach gewählten Optionen) sieht Forcastfox 0.8(de) im Ausliferungszustand in der Menübar aus:

[Blockierte Grafik: http://img210.imageshack.us/img210/2990/zwischenablage069ub.png]

Und so sieht er jetzt bei mir aus:

[Blockierte Grafik: http://img210.imageshack.us/img210/3744/zwischenablage070bf.png]

Schöne Grüße
loshombre

michael815

Zitat von loshombre

So Kameraden! Darauf bin ich besonders stolz!(genau so wie auf meine abgerundeten Ecken :wink: ). Weil ich ja als fast Ahnungsloser auf diesem Gebiet ...

Das mit dem Ahnungslosen stimmt ja jetzt definitiv nicht mehr. Hast das sehr gut gemacht.

Bazon Bloch

Prima!
So wie ich das in Deinem Screenshot sehe, muß man übrigens im DOM-Inspektor das Hauptfenster inspizieren um Informationen über die ForcastFox Deklarationen zu erhalten (wußte ich ja oben noch nicht).
Aber womöglich hast du das ja schon selber rausgefunden...