Ich hänge momentan etwas an meinem aktuellen Projekt, dem "Winfuture Enhamced Userstyle für Opera" fest...
Das Problem:
Per Deklaration in CSS sollen die Kategorie-Bilder genau lokalisiert werden und durch eine neue Grafik ersetzt werden...
Da die Grafiken jedoch keine eindeutige ID besitzen, sondern je nach Kategorie über die entsprechende Bild-URL in die Tabellen-Struktur der Hauptseite eingebunden werden, lassen sich die Grafiken nicht gezielt ersetzen.
Nach bisherigen Versuchen erscheint es mir möglich, die Grafiken über ihre Attribut-Eigenschaften anzusprechen...
Besitzen allerdings mehrere Ellemente dieselben Eigenschaften, so werden mehrere Kategoriegrafiken durch ein und dieselbe ersetzt.
Der vollständige CSS-Code:
CODE
@namespace url(http://www.w3.org/1999/xhtml);
/*
WinFuture.de enhanced - 2009 by skylight
Opera Version - Style für Hauptseite
Letztes Update: 17. 05. 2009
Für optimale Übersicht Zeilen nicht umbrechen lassen.
Einzelne Codeteile deaktivierbar: den * / Teil ans Ende der jeweiligen Zeile verschieben.
Sollte der letzte Eintrag eines Blocks wieder eingeblendet werden, zusätzlich das Komma am Ende der darüberliegenden Zeile löschen.
Weitere Informationen: http://xrl.us/enhanced
Der WinFuture.de enhanced Userstyle wird unter einer Creative Commons "Namensnennung-Keine kommerzielle Nutzung-Weitergabe unter gleichen Bedingungen 2.5 Schweiz" Lizenz bereitgestellt. Mehr Informationen: http://creativecommo...y-nc-sa/2.5/ch/
*/
/* Zentrieren */
/* WinFuture */ body{width:800px !important; margin:0 auto !important;}
/* Verstecken */
/* Homepage Mittelteil */
/* Teaser */ .newsteaser,
/* Top-News der letzen Tage */ .newscharts,
/* Neueste Downloads*/ table[width="420"][cellspacing="1"][cellpadding="2"][border="0"][id="nointelliTXT"],
/* Linke Sidebar */
/* Anzahl User online */ .useronline,
/* Partnerlinks */ .partner,
/* Rechte Sidebar */
/* Ganze rechte Sidebar*/ td[width="164"],
/* Windows 7 */ td[width="164"]>style+table,
/* Magazin */ td[width="164"]>table[width="162"],
/* TopNews */ td[width="164"]>script+script+script+table[width="164"],
/* Newsletter */ td[width="164"]>table[width="162"]+table, a[title="WinFuture bei Twitter"]+table,
/* Update Pack */ a[title="Hier gehts zum WinFuture Update Pack für Windows XP und Windows Vista"],
/* XP ISO Builder */ a[title="WinFuture Windows XP ISO Builder"],
/* Hosting */ a[title="WinFuture Windows XP ISO Builder"]+table,
/* Twitter */ a[title="WinFuture bei Twitter"],
/* Forum */ a[title="WinFuture Windows XP ISO Builder"]+table+table,
/* Tarifrechner */ #telerechner_boxed,
/* Mittelteil alle Seiten */
/* Live-Ticker */ .footerFeedMiddle, .footerFeedTopBorder, .footerFeedBottomBorder,
/* Standort-Menü */ #breadcrumb
/* Code zum Verstecken {display:none !important;}*/
/* Abstand Logo <-> Inhalt */ td[height="86"] {height:112px !important; vertical-align:top;}
/* RSS-Icon und Text */ td[background="http://img.winfuture.de/mitte_news_header.gif"]{display:none !important;} td[valign="top"][height="25"]{background:url(http://img.winfuture...news_header.gif); height:35px !important; width:434px; line-height:0.9; background-repeat:no-repeat; vertical-align:bottom !important;} td[valign="top"][height="25"]>table{margin-bottom:0px !important;}
/* Lesbare Kommentare */
.komsys_n1,.komsys_n2,.komsys_n3,.komsys_n4{o
pacity:1 !important;}
.komsys_n1 .komsys_head{background-color:#E8F2FF !important;}
.komsys_n2 .komsys_head{background-color:#EBF4FF !important;}
.komsys_n3 .komsys_head{background-color:#EEF5FF !important;}
.komsys_n4 .komsys_head{background-color:#F0F7FF !important;}
img[src="http://i.wfcdn.de/4/oben_logo_neu_4.jpg"]{display: none !important;}
td[width="264"]{background-image:url('--PFAD--/wf_header/wf_head1.jpg') !important; background-repeat: no-repeat !important; height:119px !important}
img[src="http://img.winfuture.de/oben_bg_neu_4.jpg"]{display: none !important;}
td[width="516"]{background-image:url('--PFAD--/wf_header/wf_head2.gif') !important; background-repeat: no-repeat !important;}
td.menu[width="195"]{color:#ffffff !important}
a[href^="http://winfuture.de/mywinfuture,--PROFILLINK--.html"],
a[href^="http://www.winfuture.de/mywinfuture,--PROFILLINK--.html"]
{color:#FF8A00 !important;}
/* Linie um Kommentare */
div.newstext{border: 1px #E8F2FF solid !important; border-top: 0px !important; padding:1px 2px !important;}
div.newstext[style="color: rgb(153, 153, 153); font-size: 9px;"]{border:0px !important;}
div.komsys_icon{border-left: 1px #E8F2FF solid !important; border-top: 1px #E8F2FF solid !important;}
/*++++++++++++++++++++++++++++++++++++++++++++*/
/* FÜR DIE HINTERGRUND-WAHL NICHTZUTREFFENDE BEREICH ZUM DEAKTIVIEREN AUSKOMMENTIEREN!!! */
/*++++++++++++++++++++++++++++++++++++++++++++*/
/* Windows-Hintergrund und weisser Rand INKLUSIVE border-radius UND box-shadow */
body {background: url('--PFAD ZUR HINTERGRUNDGRAFIK--') no-repeat top right !important;}
div#maindiv {background-color:white !important; width:800px !important; margin-top:15px !important; margin-bottom:15px !important; padding-bottom: 10px !important; border-radius: 10px !important; box-shadow: 10px 10px 20px #CCC !important;}
table[width="800"]>tbody>tr:first-child>td {background-color: transparent !important;}
#sidebar-a{height:auto !important; border-bottom: 1px #064089 solid !important;}
iframe[height="60"][frameborder="no"][scrolling="no"][framespacing="0"]{margin-left: -150px !important; position:relative !important;}
/* Windows-Hintergrund auf Blau und weisser Rand INKLUSIVE border-radius UND box-shadow */
body {background:#253F60 url('--PFAD ZUR HINTERGRUNDGRAFIK--') no-repeat top right !important;}
div#maindiv {background-color:white !important; width:800px !important; margin-top:15px !important; margin-bottom:15px !important; padding-bottom: 10px !important; border-radius: 10px !important; box-shadow: 10px 10px 20px #CCC !important;}
table[width="800"]>tbody>tr:first-child>td {background-color: transparent !important;}
#sidebar-a{height:auto !important; border-bottom: 1px #064089 solid !important;}
iframe[height="60"][frameborder="no"][scrolling="no"][framespacing="0"]{margin-left: -150px !important; position:relative !important;}
/* Blauer Hintergrund und weisser Rand */
body {background-color:#253F60 !important;}
div#maindiv {background-color:white !important; width:800px !important; margin-top:15px !important; margin-bottom:15px !important; padding-bottom: 10px !important; border-radius: 10px !important; box-shadow: 10px 10px 20px #FFF !important;}
table[width="800"]>tbody>tr:first-child>td {background-color: transparent !important;}
#sidebar-a{height:auto !important; border-bottom: 1px #064089 solid !important;}
iframe[height="60"][frameborder="no"][scrolling="no"][framespacing="0"]{margin-left: -150px !important; position:relative !important;}
/* Ausnahmen */
/* Screenshots */
center{background-colour:white !important; position:center !important; left:0px !important; margin-left:auto !important; margin-right:auto !important; border: 15px transparent ; min-width:100%;}
/* Style credits */
.navigation:after{content:"WinFuture.de enhanced by skylight"; display: block; color:#00438E; font-size: 11px; font-family: verdana; padding:2px; padding-left:13px; border-bottom: white solid 1px; border-radius: 3px}
Da dieses Stylesheet lediglich auf dem vorhandenen Layout aufsetzt, beinhaltet dieser Code auch nur die zu bearbeitenden Elemente...
Ich habe bisher 2 Varianten durchgetestet, die allerdings kein zufriedenstellendes Ergebnis realisieren konnten...
Die folgenden Code-Schnipsel sind in obigem Code nicht enthalten, da diese momentan nur experimentel verwendet werden...
Variante 1:
/*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/[...]/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/[...]/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/[...]/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/[...]/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/[...]/Downloads/Kategorien/wf_forum.png') !important; background-repeat: no-repeat !important;} */
Ergebnis:
Diese Code-Segmente tauschen zwar die Grafiken aus, jedoch nicht gezielt, sondern pauschal anhand ihrer Eigenschaften.
Variante 2:
/* 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.com/images?q=tbn:P5QxUnbPyLaxvM);
Ergebnis:
Mit diesem Code-Snippet kann ich zwar eine Grafik gezielt ansprechen, jedoch lässt sich dieses Snippet nur einmal anwenden...
Übrige Grafiken werden trotz korrekter eingaben nicht ersetzt...
Sorry für den langen Post...
Für hilfreiche Anregungen und Code-Schnipsel wäre ich sehr dankbar...
Liebe Grüße,
Taxidriver05