[Taxidriver05]

Hallo liebe Community,

der eine oder andere von euch wird bereits festgestellt haben, dass ich derzeit an der Umsetzung des "Winfuture.de Enhanced Userstyles" für Opera arbeite...

Dies hat bisher soweit auch ganz gut funktioniert...

Allerdings stehe ich vor einem Problem, wo ich nicht mehr weiter komme...

Und zwar möchte ich auf der Winfuture-Hauptseite einzelen Kategoriegrafiken austauschen...
Dies MUSS per CSS erfolgen... Somit kommt Java-Script nicht in Frage.

Das Problem:

Solange die Grafiken über unterschiedliche Eigenschafts-Attribute verfügen, lassen sich diese problemlos austauschen, da diese einmalig vorzufinden sind.

Besitzen zwei grafiken des ursprünglichen Layouts die gleichen Eigenschaften, so werden 2 verschiedene Grafiken mit ein und derselben Grafik ersetzt, was so nicht gewollt ist...

Folgender Code-Teil führt zu obigem Problem...

/*Geänderte Kategoriegrafiken*/

img[src="http://img.winfuture.de/mitte_news_header.gif"]{display: none !important;}
td[height="35"]{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/Kategorien/wf_news_header.png') !important; background-repeat: no-repeat !important;}

img[src="http://i.wfcdn.de/4/rechts_magazin_header.gif"]{display: none !important;}
td[height="19"]{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/Kategorien/wf_magazin.png') !important; background-repeat: no-repeat !important;}

img[src="http://i.wfcdn.de/4/rechts_newsletter_header.png"]{display: none !important;}
td[height="16"][align="left"][valign="top"]{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/Kategorien/wf_newsletter.png') !important; background-repeat: no-repeat !important;}

img[src="http://i.wfcdn.de/4/mini_hosting.png"]{display: none !important;}
td[height="16"][align="left][valign="top"]{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/Kategorien/wfi_hosting.png') !important; background-repeat: no-repeat !important;}

img[src="http://i.wfcdn.de/4/rechts_forum_header.gif"]{display: none !important;}
td[height="16"][align="left"][valign="top"]{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/Kategorien/wf_forum.png') !important; background-repeat: no-repeat !important;}

für Anregungen wäre ich dankbar...


Liebe Grüße,



taxidriver05

[Tienchen]

Zitat (Taxidriver05: 03.05.2010, 23:36)

Dies MUSS per CSS erfolgen... Somit kommt Java-Script nicht in Frage.

Nur zur Frage: Muss CSS die Datei sein, oder soll nur CSS rauskommen? Denn mit Javascript gibt es sehr viele elegante Lösungen, CSS auszuwählen und zu verändern.
Ansonsten werde ich aus dem Code unten nicht ganz schlau - was ist das? Gibt es zu dieser Geschichte irgendwo ein Tutorial / Hilfe?

[Taxidriver05]

Nun...

Die Sache ist die, dass das Layout rein per CSS erzeugt werden soll...

den vollständigen CSS-Code findest Du hier. Dort steht auch, wie man die CSS-Datei in Opera einbindet...

Manche Sachen in dem Quellcode habe ich auch nur durch Probieren hinbekommen...
Grundsätzlich baut der Code auf einer Vorlage von _skylight auf.

Da er aber weniger mit Opera arbeitet, habe ich mich um die Umsetzung unter diesem Browser bemüht...

Ich meine, gelesen zu haben, dass es wohl auch möglich sein soll, JavaScript in CSS auszuführen...

[Taxidriver05]

Na wunderbar...!^^

Naja...
Die aktuelle Version sollte erst einmal eine Weile Bestand haben, wenn sich der Quellcode nicht signifikant ändert.
Denn momentan ärgere ich mich mit dem Austausch der Kategoriegrafiken herum...

Für diesen Fall muss ich sogar mal das Forum um Rat fragen...

[klawitter]

@ Taxidriver05

hab mal deinen neuen Thread zum gleichen Thema hier eingefügt.

[_skylight]

Zitat (Taxidriver05: 04.05.2010, 00:20)

Denn momentan ärgere ich mich mit dem Austausch der Kategoriegrafiken herum...

Hallo Taxidriver

Suchst so was wie das hier?

CODE

/* Wähle existierendes Bild über Source-URL aus */
img[src="http://i.wfcdn.de/4/w7_special/boxen/rechts_box_header_windows7special_schmal.png"]
{
/* Setze Bild-Breite auf 0px */
width:0px!important;
/* Verschiebe Bild um eigene Breite nach links um Platz für Hintergrund zu schaffen */
padding-left:164px;
/* Binde neues Bild als Hintergrund ein */
background:url(http://t1.gstatic.co...:P5QxUnbPyLaxvM);
}

(Code für die Hauptseite)

Gruss und gute Nacht
skylight

[Taxidriver05]

Lustigerweise funktioniert der Code mit deiner Grafik...

Aber auch NUR bei der einen Grafik...

Die anderen funktionieren trotzdem nicht...

Dieser Beitrag wurde von Taxidriver05 bearbeitet: 04. Mai 2010 - 12:51

[_skylight]

Zitat (Taxidriver05: 04.05.2010, 01:21)

Lustigerweise funktioniert der Code mit deiner Grafik...

Aber auch NUR bei der einen Grafik...

Die anderen funktionieren trotzdem nicht...

Welche Graphiken möchtest du denn ersetzen?
Versuch mal, die obige URL z.B. mit "http://i.wfcdn.de/4/rechts_magazin_header.gif" auszutauschen...

skylight

[Taxidriver05]

Zitat (_skylight: 04.05.2010, 19:59)

Welche Graphiken möchtest du denn ersetzen?
Versuch mal, die obige URL z.B. mit "http://i.wfcdn.de/4/rechts_magazin_header.gif" auszutauschen...

skylight

Negativ...

Es wird lediglich eine Weiße Fläche angezeigt...

Stan hat hier dieses "nth-last-child" ins spiel gebracht...

Nur steig ich da nicht wirklich durch...

Dieser Beitrag wurde von Taxidriver05 bearbeitet: 04. Mai 2010 - 22:38

[Stan]

ich hab auch nur so halb gelesen was du wirklich willst. damit kannste halt child-elemente geziehlt auswählen, keine ahnung ob dir das was bringt.

[_skylight]

Zitat (Taxidriver05: 04.05.2010, 22:49)

Negativ...

Es wird lediglich eine Weiße Fläche angezeigt...

Verstehe ich jetzt nicht... Wenn ich (Firefox, Stylish) folgenden Code verwende, wird das "Titelbild" des Abschnittes Magazin in der rechten Spalte ersetzt:

CODE

/* Wähle existierendes Bild über Source-URL aus */
img[src="http://i.wfcdn.de/4/rechts_magazin_header.gif"]
{
/* Setze Bild-Breite auf 0px */
width:0px!important;
/* Verschiebe Bild um eigene Breite nach links, um Platz für Hintergrund zu schaffen */
padding-left:164px;
/* Binde neues Bild als Hintergrund ein */
background:url(http://t1.gstatic.co...:P5QxUnbPyLaxvM);
}

Gruss
skylight

[Taxidriver05]

Zitat

Wenn ich (Firefox, Stylish) folgenden Code verwende,..

Naja...
Stylish != Opera...

Du weißt, Opera tickt da etwas anders...

Naja...
Vielleicht hab ich da aber auch einfach nur gerade ne Denkblockade...

Dummerweise spinnt bei mir in letzter Zeit immer das Dragonfly im Opera, was die analyse der Seite schwierig macht...

Ich habe obigen Code mal getestet...
Das Skript lässt sich immer nur auf eine Grafik anwenden.
bei jeder weiteren zeigt es nur einen weißen Platzhalter an...

Ich glaub, ich muss mich da wohl doch nochmal näher mit Stan's vorschlag befassen...

@ Stan:

Schon okay...
War ja auch im falschen Thread... xD
Ich werd mich da mal belesen müssen. Denn mit der Deklaration habe ich noch nicht gearbeitet...
Und die Hauptseite ist ja dazu auch noch so [inronie]wunderbar[/ironie] strukturiert...

Dieser Beitrag wurde von Taxidriver05 bearbeitet: 05. Mai 2010 - 00:39

[Taxidriver05]

Ich hoffe nicht, dass das jetzt hier als Spam verstanden wird...

Aber, ich starte einfach nochmal den Aufruf...

Sollte jemand eine Lösung kennen, die Kategoriebilder auf der Haptseite separat (z.B. anhand ihrer URL) gezielt über eine CSS-Deklaration anzusteuern oder gar ein Code-Beispiel hat, würde es mich freuen, wenn sich derjenige hier melden könnte...

Leider steige ich bei Stan's Vorschlag nicht so wirklich durch...


Liebe Grüße,


T05

[klawitter]

Ich frag mich ehrlich gesagt schon ne ganze Weile, warum du dieses Forum noch nicht entdeckt hast. Dort dürften die Chancen auf eine Antwort vlt. doch nen Furz besser stehen, als im Offtopic, oder was meinst du dazu?