WinFuture-Forum.de: Bilder Per Css Lokalisieren Und Ersetzen... - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Bilder Per Css Lokalisieren Und Ersetzen... Kategoriegrafiken auf WF-Hauptseite ersetzen...


#1 Mitglied ist offline   Taxidriver05 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.609
  • Beigetreten: 14. Mai 09
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Schkopau - OT Ermlitz
  • Interessen:- Ausgehen,
    - Sport (am liebsten an der frischen Luft),
    - Musik (machen und hören),
    - Grafik- und Webdesign,
    - gut Essen,
    - an PCs basteln (für den schnellen Euro ;-)),
    uvm.

  geschrieben 09. Mai 2010 - 11:42

Hallo liebe Leutz... :lol:

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
BORN STUPID? TRY AGAIN!

"Himmlische Ruhe und tödliche Stille haben dieselbe Phonzahl."
My Music
0

Anzeige



#2 Mitglied ist offline   Taxidriver05 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.609
  • Beigetreten: 14. Mai 09
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Schkopau - OT Ermlitz
  • Interessen:- Ausgehen,
    - Sport (am liebsten an der frischen Luft),
    - Musik (machen und hören),
    - Grafik- und Webdesign,
    - gut Essen,
    - an PCs basteln (für den schnellen Euro ;-)),
    uvm.

geschrieben 10. Mai 2010 - 20:40

Keiner Ideen...?
BORN STUPID? TRY AGAIN!

"Himmlische Ruhe und tödliche Stille haben dieselbe Phonzahl."
My Music
0

#3 Mitglied ist offline   zwutz 

  • Gruppe: aktive Mitglieder
  • Beiträge: 652
  • Beigetreten: 17. Juli 07
  • Reputation: 1
  • Geschlecht:Männlich

geschrieben 10. Mai 2010 - 23:04

mir würde sonst nur ne Javascript-Lösung einfallen. Pauschal hätte ich das selbe versucht, dass du bereits versucht hast
Raise your glass if you are wrong
0

#4 Mitglied ist offline   Taxidriver05 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.609
  • Beigetreten: 14. Mai 09
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Schkopau - OT Ermlitz
  • Interessen:- Ausgehen,
    - Sport (am liebsten an der frischen Luft),
    - Musik (machen und hören),
    - Grafik- und Webdesign,
    - gut Essen,
    - an PCs basteln (für den schnellen Euro ;-)),
    uvm.

geschrieben 11. Mai 2010 - 00:40

Was denn für eine Javascript-Lösung...?

Kannst Du eventuell mal ein Code-Snippet posten?
Vielleicht lässt sich da was rausholen...

Hat ja zuletzt auch mehrfach funktioniert...^^
BORN STUPID? TRY AGAIN!

"Himmlische Ruhe und tödliche Stille haben dieselbe Phonzahl."
My Music
0

#5 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.942
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 11. Mai 2010 - 07:41

Du könntest es über CSS3-Pseudoklasssen probieren, wie :nth-child(). Da die Tabellenstruktur sicherlich immer gleich bleibt, kannst du alles konkret ansprechen.
0

#6 Mitglied ist offline   Tienchen 

  • Gruppe: aktive Mitglieder
  • Beiträge: 423
  • Beigetreten: 09. März 08
  • Reputation: 0
  • Geschlecht:Männlich

geschrieben 11. Mai 2010 - 08:14

Das Problem ist nur, dass viele Browser CSS3 nicht "verstehen" unter anderem alle bislang erhältlichen InternetExplorer...
Alternativ wäre wirklich JavaScript zu empfehlen, und hier würde ich (der Einfachheit halber) auf jQuery setzen.
http://api.jquery.co...gory/selectors/
Das Schema ist folgendermaßen (wenn jQuery eben eingebunden ist auf der Seite im <head>):
$(".dieklasse").replaceWith('<img src="neuesbild.png" />');

Das Ganze geht natürlich auch auf andere Weise, je nachdem was man im Detail gerne möchte.
0

#7 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.942
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 11. Mai 2010 - 08:14

Es geht hier aber um ein Stylesheet für den Opera, und der kann es. :D
0

#8 Mitglied ist offline   Taxidriver05 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.609
  • Beigetreten: 14. Mai 09
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Schkopau - OT Ermlitz
  • Interessen:- Ausgehen,
    - Sport (am liebsten an der frischen Luft),
    - Musik (machen und hören),
    - Grafik- und Webdesign,
    - gut Essen,
    - an PCs basteln (für den schnellen Euro ;-)),
    uvm.

geschrieben 11. Mai 2010 - 09:12

Das klingt mir so, als wäre diese :nth-child()-Klasse bis jetzt die geeignetste Lösung zu sein...

Gibt es da keine Möglichkeit, die Grafiken anhand der Bild-URL azusprechen...?
BORN STUPID? TRY AGAIN!

"Himmlische Ruhe und tödliche Stille haben dieselbe Phonzahl."
My Music
0

#9 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.942
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 11. Mai 2010 - 09:29

Zitat

Gibt es da keine Möglichkeit, die Grafiken anhand der Bild-URL azusprechen...?

Hö? Machst du das nicht hiermit?
img[src="http://i.wfcdn.de/4/rechts_newsletter_header.png"]

0

#10 Mitglied ist offline   Taxidriver05 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.609
  • Beigetreten: 14. Mai 09
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Schkopau - OT Ermlitz
  • Interessen:- Ausgehen,
    - Sport (am liebsten an der frischen Luft),
    - Musik (machen und hören),
    - Grafik- und Webdesign,
    - gut Essen,
    - an PCs basteln (für den schnellen Euro ;-)),
    uvm.

geschrieben 11. Mai 2010 - 09:47

Diese Variante funktioniert nur bedingt...

Der Austausch erfolgt dann nur, wenn ich entsprechende Parameter angebe wie

td[height="16"][align="left"][valign="top"]


Diese müssen mit dem ursprünglichen Wert übereinstimmen. Nur dann funktioniert der Austausch...

wie Du aber Oben siehst, verwenden einige Grafiken dieselben Parameter, was zu einer ungewolltn Mehrfachauswahl führt...
BORN STUPID? TRY AGAIN!

"Himmlische Ruhe und tödliche Stille haben dieselbe Phonzahl."
My Music
0

#11 Mitglied ist offline   Witi 

  • Gruppe: aktive Mitglieder
  • Beiträge: 5.942
  • Beigetreten: 13. Dezember 04
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Kingsvillage
  • Interessen:Frickeln

geschrieben 11. Mai 2010 - 10:31

Du redest von den Tabellenzellen und nicht den Grafiken!

Es gibt in CSS keine Möglichkeit ein src-Attribut zu überschreiben, nur wenn es leer oder gar nicht vorhanden ist, kannst du bspw. mit
img:after {content: url('pic.jpg')}
arbeiten. Aber das hast du ja bereits selbst herausgefunden, daher ist die background-image Variante im Eltern-Tag inkl. gleichzeitigem Ausblenden des img-Tags schon korrekt.

Da CSS keine Möglichkeit bietet ein Elternelement auszuwählen, bleibt dir wohl nur nth-child(n) übrig, um die korrekte Zelle auszuwählen.
0

#12 Mitglied ist offline   Taxidriver05 

  • Gruppe: aktive Mitglieder
  • Beiträge: 2.609
  • Beigetreten: 14. Mai 09
  • Reputation: 43
  • Geschlecht:Männlich
  • Wohnort:Schkopau - OT Ermlitz
  • Interessen:- Ausgehen,
    - Sport (am liebsten an der frischen Luft),
    - Musik (machen und hören),
    - Grafik- und Webdesign,
    - gut Essen,
    - an PCs basteln (für den schnellen Euro ;-)),
    uvm.

geschrieben 11. Mai 2010 - 14:14

So...

Irgendwie hab ich mal wieder den Wald vor lauter Bäumen nicht gesehen...^^

Die Lösung hatte ich im Grunde bereits im Quelltext...

/* 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('file://C:/Users/Matthias Schleusener/Downloads/wf-pics/wf_magazin.png');
}

/*Geänderte Kategoriegrafiken*/



[src="http://img.winfuture.de/mitte_news_header.gif"]{display: none !important;}
td[height="35"]{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/wf-pics/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/wf-pics/wf_magazin.png') !important; background-repeat: no-repeat !important;}

img[src="http://i.wfcdn.de/4/rechts_newsletter_header.png"]{display: none !important;}
td[width="164"]>table[width="162"]+table{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/wf-pics/wf_newsletter.png') !important; background-repeat: no-repeat !important;}

img[src="http://i.wfcdn.de/4/mini_hosting.png"]{display: none !important;}
a[title="WinFuture Windows XP ISO Builder"]+table{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/wf-pics/wf_hosting.png') !important; background-repeat: no-repeat !important;}

img[src="http://i.wfcdn.de/4/rechts_forum_header.gif"]{display: none !important;}
a[title="WinFuture Windows XP ISO Builder"]+table+table{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/wf-pics/wf_forum.png') !important; background-repeat: no-repeat !important;} 

img[src="http://i.wfcdn.de/4/rechts_telerechner_header.gif"]{display: none !important;}
#telerechner_boxed{background-image:url('file://C:/Users/Matthias Schleusener/Downloads/wf-pics/rechts_telerechner_header.png') !important; background-repeat: no-repeat !important;}


Zumindest funktioniert dies weitestgehend auf der Hauptseite...

Zwar gibt es noch einige Unstimmigkeiten, sobald eine News geöffnet wird, doch sollte sich das auch lösen lassen...
BORN STUPID? TRY AGAIN!

"Himmlische Ruhe und tödliche Stille haben dieselbe Phonzahl."
My Music
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0