Text durch Bild ersetzen

Hier wird über Freewar-Styles und -Designs geredet. Man kann eigene Styles vorstellen oder Fragen zu den CSS-Styles stellen.
Antworten
Benutzeravatar
Andi90
großer Laubbär
Beiträge: 3872
Registriert: 27. Aug 2006, 20:59

Re: Text durch Bild ersetzen

Beitrag von Andi90 » 24. Jul 2010, 22:39

kaot hat geschrieben:

Code: Alles auswählen

/*Vergiftung*/
span[title*="Vergiftung"] {font-size: 0px;}
span[title*="Vergiftung"]:after { content: url(vergiftung_1.png);}
/*3 Min Sonderbehandlung*/
span[title="Vergiftung (3 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (3 Minuten)"]:after { content: url(vergiftung_2.png);}
span[title="Vergiftung (2 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (2 Minuten)"]:after { content: url(vergiftung_2.png);}
span[title="Vergiftung (1 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (1 Minuten)"]:after { content: url(vergiftung_2.png);}
span[title="Vergiftung (0 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (0 Minuten)"]:after { content: url(vergiftung_2.png);}
Du müsstest jetzt natürlich statt Vergiftung_2 dein blinke-gif einbauen, oder was auch immer du da haben willst. Wenn das Bild blinken sollst, bleibt dir meiner Meinung nach nur für jeden Status ein eigenes, animiertes Gif.
Wenn du alles zusammenfassen möchtest, könntest du auf title*="(3 Minuten)" zurückgreifen - allerdings nur mit Text, und 3 Minuten blinketext nervt wie die Hölle ;)
Das Funktioniert teilweise.
Wie mach ich das bei LP- und Stärke-Push wegen den variablen Zahlen?
Wie mach ich das bei KU, Verräter, Feueröl und Stärke-Push wegen den Umlauten? Ich kann zwar "Kampfunfähig" bzw. "Verräter" auch mit "hig" und "ter" ansprechen, aber wenn ich dann noch die Zeiten reinnehme ("hig (2 Minuten)"), funktionierts nicht.
Hat wer ne andere Lösung?
Nach oben
bwoebi
Administrator
Beiträge: 3290
Registriert: 28. Apr 2008, 19:13

Re: Text durch Bild ersetzen

Beitrag von bwoebi » 24. Jul 2010, 23:00

so:

Code: Alles auswählen

span[title*="Lebenserh"][title*="(3 Minuten)"] {}
Bogs sind meine Spezialität - Signaturen sind eigentlich doch überflüssig...
Nach oben
Benutzeravatar
Andi90
großer Laubbär
Beiträge: 3872
Registriert: 27. Aug 2006, 20:59

Re: Text durch Bild ersetzen

Beitrag von Andi90 » 25. Jul 2010, 10:30

Super danke :)

So, der Vollständigkeit halber und falls das wer übernehmen möchte:
SpoilerShow

Code: Alles auswählen

span[title*="Beutezauber"] { font-size: 0px; }
span[title*="Beutezauber"]:after { content:url(beute.gif); display:inline; }
span[title="Beutezauber (2 Minuten)"] {font-size: 0px;}
span[title="Beutezauber (2 Minuten)"]:after { content: url(abeute.gif);}
span[title="Beutezauber (1 Minuten)"] {font-size: 0px;}
span[title="Beutezauber (1 Minuten)"]:after { content: url(abeute.gif);}
span[title="Beutezauber (0 Minuten)"] {font-size: 0px;}
span[title="Beutezauber (0 Minuten)"]:after { content: url(abeute.gif);}

span[title*="Lebenspunkte +"] { font-size: 0px; }
span[title*="Lebenspunkte +"]:after { content:url(lppush.gif); display:inline; }
span[title*="Lebenspunkte +"][title*="(2 Minuten)"] {font-size: 0px;}
span[title*="Lebenspunkte +"][title*="(2 Minuten)"]:after { content: url(alppush.gif);}
span[title*="Lebenspunkte +"][title*="(1 Minuten)"] {font-size: 0px;}
span[title*="Lebenspunkte +"][title*="(1 Minuten)"]:after { content: url(alppush.gif);}
span[title*="Lebenspunkte +"][title*="(0 Minuten)"] {font-size: 0px;}
span[title*="Lebenspunkte +"][title*="(0 Minuten)"]:after { content: url(alppush.gif);}

span[title*="schnelle Bewegung"] { font-size: 0px; }
span[title*="schnelle Bewegung"]:after { content:url(sbeweg.gif); display:inline; }
span[title="schnelle Bewegung (2 Minuten)"] {font-size: 0px;}
span[title="schnelle Bewegung (2 Minuten)"]:after { content: url(asbeweg.gif);}
span[title="schnelle Bewegung (1 Minuten)"] {font-size: 0px;}
span[title="schnelle Bewegung (1 Minuten)"]:after { content: url(asbeweg.gif);}
span[title="schnelle Bewegung (0 Minuten)"] {font-size: 0px;}
span[title="schnelle Bewegung (0 Minuten)"]:after { content: url(asbeweg.gif);}

span[title*="Schutz"] { font-size: 0px; }
span[title*="Schutz"]:after { content:url(schutz.gif); display:inline; }
span[title="Schutz (2 Minuten)"] {font-size: 0px;}
span[title="Schutz (2 Minuten)"]:after { content: url(aschutz.gif);}
span[title="Schutz (1 Minuten)"] {font-size: 0px;}
span[title="Schutz (1 Minuten)"]:after { content: url(aschutz.gif);}
span[title="Schutz (0 Minuten)"] {font-size: 0px;}
span[title="Schutz (0 Minuten)"]:after { content: url(aschutz.gif);}

span[title*="rke +"] { font-size: 0px; }
span[title*="rke +"]:after { content:url(apush.gif); display:inline; }
span[title*="rke +"][title*="(2 Minuten)"] {font-size: 0px;}
span[title*="rke +"][title*="(2 Minuten)"]:after { content: url(aapush.gif);}
span[title*="rke +"][title*="(1 Minuten)"] {font-size: 0px;}
span[title*="rke +"][title*="(1 Minuten)"]:after { content: url(apush.gif);}
span[title*="rke +"][title*="(0 Minuten)"] {font-size: 0px;}
span[title*="rke +"][title*="(0 Minuten)"]:after { content: url(aapush.gif);}

span[title*="Tarnung"] { font-size: 0px; }
span[title*="Tarnung"]:after { content:url(tarn.gif); display:inline; }
span[title="Tarnung (2 Minuten)"] {font-size: 0px;}
span[title="Tarnung (2 Minuten)"]:after { content: url(atarn.gif);}
span[title="Tarnung (1 Minuten)"] {font-size: 0px;}
span[title="Tarnung (1 Minuten)"]:after { content: url(atarn.gif);}
span[title="Tarnung (0 Minuten)"] {font-size: 0px;}
span[title="Tarnung (0 Minuten)"]:after { content: url(atarn.gif);}



span[title*="Feuer"] { font-size: 0px; }
span[title*="Feuer"]:after { content:url(feuer.gif); display:inline; }
span[title*="Feuer"][title*="(2 Minuten)"] {font-size: 0px;}
span[title*="Feuer"][title*="(2 Minuten)"]:after { content: url(afeuer.gif);}
span[title*="Feuer"][title*="(1 Minuten)"] {font-size: 0px;}
span[title*="Feuer"][title*="(1 Minuten)"]:after { content: url(afeuer.gif);}
span[title*="Feuer"][title*="(0 Minuten)"] {font-size: 0px;}
span[title*="Feuer"][title*="(0 Minuten)"]:after { content: url(afeuer.gif);}



span[title*="Kampfunf"] { font-size: 0px; }
span[title*="Kampfunf"]:after { content:url(kaunf.gif); display:inline; }
span[title*="Kampfunf"][title*="(2 Minuten)"] {font-size: 0px;}
span[title*="Kampfunf"][title*="(2 Minuten)"]:after { content: url(akaunf.gif);}
span[title*="Kampfunf"][title*="(1 Minuten)"] {font-size: 0px;}
span[title*="Kampfunf"][title*="(1 Minuten)"]:after { content: url(akaunf.gif);}
span[title*="Kampfunf"][title*="(0 Minuten)"] {font-size: 0px;}
span[title*="Kampfunf"][title*="(0 Minuten)"]:after { content: url(akaunf.gif);}

span[title*="Vergiftung"] { font-size: 0px; }
span[title*="Vergiftung"]:after { content:url(vergiftung.gif); display:inline; }
span[title="Vergiftung (2 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (2 Minuten)"]:after { content: url(avergiftung.gif);}
span[title="Vergiftung (1 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (1 Minuten)"]:after { content: url(avergiftung.gif);}
span[title="Vergiftung (0 Minuten)"] {font-size: 0px;}
span[title="Vergiftung (0 Minuten)"]:after { content: url(avergiftung.gif);}

span[title*="Verr"] { font-size: 0px; }
span[title*="Verr"]:after { content:url(verr.gif); display:inline; }
span[title*="Verr"][title*="(2 Minuten)"] {font-size: 0px;}
span[title*="Verr"][title*="(2 Minuten)"]:after { content: url(averr.gif);}
span[title*="Verr"][title*="(1 Minuten)"] {font-size: 0px;}
span[title*="Verr"][title*="(1 Minuten)"]:after { content: url(averr.gif);}
span[title*="Verr"][title*="(0 Minuten)"] {font-size: 0px;}
span[title*="Verr"][title*="(0 Minuten)"]:after { content: url(averr.gif);}

span[title*="Lebenspunkte -"] { font-size: 0px; }
span[title*="Lebenspunkte -"]:after { content:url(lpmal.gif); display:inline; }
span[title*="Lebenspunkte -"][title*="(2 Minuten)"] {font-size: 0px;}
span[title*="Lebenspunkte -"][title*="(2 Minuten)"]:after { content: url(alpmal.gif);}
span[title*="Lebenspunkte -"][title*="(1 Minuten)"] {font-size: 0px;}
span[title*="Lebenspunkte -"][title*="(1 Minuten)"]:after { content: url(alpmal.gif);}
span[title*="Lebenspunkte -"][title*="(0 Minuten)"] {font-size: 0px;}
span[title*="Lebenspunkte -"][title*="(0 Minuten)"]:after { content: url(alpmal.gif);}
Icon-Archiv Download
Nach oben
bwoebi
Administrator
Beiträge: 3290
Registriert: 28. Apr 2008, 19:13

Re: Text durch Bild ersetzen

Beitrag von bwoebi » 25. Jul 2010, 11:42

Freut mich dass es nun geht :D
Bogs sind meine Spezialität - Signaturen sind eigentlich doch überflüssig...
Nach oben
Benutzeravatar
Crazy_Ace
Klauenbartrein
Beiträge: 1422
Registriert: 5. Jul 2007, 13:31

Re: Text durch Bild ersetzen

Beitrag von Crazy_Ace » 25. Jul 2010, 13:32

was nach wie vor jedoch rein technisch nicht funktionieren kann ist das ersetzen von clankrieg sowie rückangriffsmöglichkeit mit bildchen, was extrem bescheiden aussieht.
SpoilerShow
Bild
das problem hatten auch andere stylebastler, mit denen ich gesprochen habe.

daher möchte ich vorschlagen, dass sich ein paar zusammentun, dass sotrax ein mouseover einbaut - sei es nur ein kopieren des jeweiligen statustextes. als nichtprogrammierer habe ich davon zwar keine ahnung, ich denke jedoch, dass es rein technisch gesehen in 1-2 minuten machbar ist.
Inaktiv in w7, aktiv in w8.

Relinquished hat geschrieben: Der Sinn des Spiels ist es, den User Raum und Zeit vergessen zu lassen und abhängig zu machen.
Alles, was dagegen wirkt, schadet dem Spiel nur.
Nach oben
Benutzeravatar
Andi90
großer Laubbär
Beiträge: 3872
Registriert: 27. Aug 2006, 20:59

Re: Text durch Bild ersetzen

Beitrag von Andi90 » 25. Jul 2010, 13:37

Sotrax hat geschrieben:Verstehe, werde da mal schauen, was sich machen lässt :)
Hab ihn bereits darauf angesprochen. Wenn ich ihn jetzt noch ab und zu anstupse und daran erinnere, wird das vielleicht was ;)
Nach oben
bwoebi
Administrator
Beiträge: 3290
Registriert: 28. Apr 2008, 19:13

Re: Text durch Bild ersetzen

Beitrag von bwoebi » 25. Jul 2010, 13:44

soweit ich weiß sind es nur 3 Stück und zwar von drei verschiedenenen Klassen

Daher, wer CSS3 nutzen will:

CK

Code: Alles auswählen

p.listrow span.small .healthmed:not([title]) {}
RA

Code: Alles auswählen

p.listrow span.small .healthok:not([title]) {}
Überladen

Code: Alles auswählen

p.listrow span.small .healthcritical:not([title]) {}

Da es hier einen so schönen Workaround gibt, bin ich dagegen so etwas einzubauen à la mouseover
Bogs sind meine Spezialität - Signaturen sind eigentlich doch überflüssig...
Nach oben
Benutzeravatar
Crazy_Ace
Klauenbartrein
Beiträge: 1422
Registriert: 5. Jul 2007, 13:31

Re: Text durch Bild ersetzen

Beitrag von Crazy_Ace » 25. Jul 2010, 13:52

ist es dann bei den dreien nicht so, dass man die bildchen auch bei den lp oben angezeigt bekommt?
Inaktiv in w7, aktiv in w8.

Relinquished hat geschrieben: Der Sinn des Spiels ist es, den User Raum und Zeit vergessen zu lassen und abhängig zu machen.
Alles, was dagegen wirkt, schadet dem Spiel nur.
Nach oben
bwoebi
Administrator
Beiträge: 3290
Registriert: 28. Apr 2008, 19:13

Re: Text durch Bild ersetzen

Beitrag von bwoebi » 25. Jul 2010, 13:58

Nein; die LP sind nicht in einer span.small (siehe Selektor) bzw. hier der Quellcode

Code: Alles auswählen

<p class="listrow"><b>Lebenspunkte: </b>(<span class="healthok"><b>89</b></span>/89)</p>
Bogs sind meine Spezialität - Signaturen sind eigentlich doch überflüssig...
Nach oben
Benutzeravatar
Crazy_Ace
Klauenbartrein
Beiträge: 1422
Registriert: 5. Jul 2007, 13:31

Re: Text durch Bild ersetzen

Beitrag von Crazy_Ace » 25. Jul 2010, 14:14

also:

statt

Code: Alles auswählen

span[title*="Rückangriffsmöglichkeit"] {font-size: 0px;}
span[title*="Rückangriffsmöglichkeit"]:after { content: url(ra.gif);}
span[title*="Clan-Krieg"] {font-size: 0px;}
span[title*="Clan-Krieg"]:after { content: url(ck.jpg);}
span[title*="Überladen"] {font-size: 0px;}
span[title*="Überladen"]:after { content: url(berladen.jpg);}
dann

Code: Alles auswählen

CK
p.listrow span.small .healthmed:not([title]) {font-size: 0px}
p.listrow span.small .healthmed:not([title]):after { content: url(ck.jpg);}

RA
p.listrow span.small .healthmed:not([title]) {font-size: 0px}
p.listrow span.small .healthmed:not([title]):after { content: url(ra.jpg);}

Überladen
p.listrow span.small .healthmed:not([title]) {font-size: 0px}
p.listrow span.small .healthmed:not([title]):after { content: url(berladen.jpg);}
?
Inaktiv in w7, aktiv in w8.

Relinquished hat geschrieben: Der Sinn des Spiels ist es, den User Raum und Zeit vergessen zu lassen und abhängig zu machen.
Alles, was dagegen wirkt, schadet dem Spiel nur.
Nach oben
bwoebi
Administrator
Beiträge: 3290
Registriert: 28. Apr 2008, 19:13

Re: Text durch Bild ersetzen

Beitrag von bwoebi » 25. Jul 2010, 14:39

Nein;

Code: Alles auswählen

CK
p.listrow span.small .healthmed:not([title]) {font-size: 0px}
p.listrow span.small .healthmed:not([title]):after { content: url(ck.jpg);}

RA
p.listrow span.small .healthok:not([title]) {font-size: 0px}
p.listrow span.small .healthok:not([title]):after { content: url(ra.jpg);}

Überladen
p.listrow span.small .healthcritical:not([title]) {font-size: 0px}
p.listrow span.small .healthcritical:not([title]):after { content: url(berladen.jpg);}
Kannst es ja mal testen ;)
Bogs sind meine Spezialität - Signaturen sind eigentlich doch überflüssig...
Nach oben
Benutzeravatar
Crazy_Ace
Klauenbartrein
Beiträge: 1422
Registriert: 5. Jul 2007, 13:31

Re: Text durch Bild ersetzen

Beitrag von Crazy_Ace » 25. Jul 2010, 14:49

<<< sucht verzweifelt den unterschied zwischen deinem und meinem code
<< hat ihn gefunden
< ist manchmal etwas doof.

danke :)
Inaktiv in w7, aktiv in w8.

Relinquished hat geschrieben: Der Sinn des Spiels ist es, den User Raum und Zeit vergessen zu lassen und abhängig zu machen.
Alles, was dagegen wirkt, schadet dem Spiel nur.
Nach oben
bwoebi
Administrator
Beiträge: 3290
Registriert: 28. Apr 2008, 19:13

Re: Text durch Bild ersetzen

Beitrag von bwoebi » 25. Jul 2010, 15:30

und funkts?
Bogs sind meine Spezialität - Signaturen sind eigentlich doch überflüssig...
Nach oben
Benutzeravatar
Crazy_Ace
Klauenbartrein
Beiträge: 1422
Registriert: 5. Jul 2007, 13:31

Re: Text durch Bild ersetzen

Beitrag von Crazy_Ace » 25. Jul 2010, 15:41

überladen ja, ck und ra hatte ich bis jetzt keinen

falls du wen siehst/findest, ders testen will:

http://dachbalken.da.funpic.de/Kas_mod/DarkStyle.css (Thread)
Inaktiv in w7, aktiv in w8.

Relinquished hat geschrieben: Der Sinn des Spiels ist es, den User Raum und Zeit vergessen zu lassen und abhängig zu machen.
Alles, was dagegen wirkt, schadet dem Spiel nur.
Nach oben
Benutzeravatar
Andi90
großer Laubbär
Beiträge: 3872
Registriert: 27. Aug 2006, 20:59

Re: Text durch Bild ersetzen

Beitrag von Andi90 » 10. Jan 2012, 15:59

Ich habe endlich meinen Style angepasst und die zusätzlichen Symbole für "Überladen" und "Rückangriff" erstellt. Funktioniert alles wunderbar, allerdings seh ich nun nur noch DASS ich einen RA habe, aber nicht, gegen wen, da im Title nur "Rückangriff" steht.

Gibt es eine Möglichkeit, per Style den Namen in den Title zu nehmen oder müsste das Sotrax machen?


EDIT: Noch eine kleine Frage: Ich hab Icons in den Frametiteln. Das sieht so aus:

Bild

Wie krieg ich das doppelte Bild raus? [erledigt] Und wie krieg ich den Trennbalken weg? [nicht erledigt] Der Code für das Icon:

Code: Alles auswählen

#fastspell td { 
  background-color: #46433E;
  background-image: url(forest_horn.png);
  background-repeat: no-repeat;
  border: 1px solid #222222;
  color: #222222;
  font-weight: bold; 
  padding: 2px; 
  padding-left: 5px; 
  text-align: right; }
Ansatz von bwoebi für Trennbalken-Problem:

Code: Alles auswählen

#fastspell td:last-child { 
  background-image: none; }
Bewirkt leider nichts.[/color]
Nach oben
Antworten

Zurück zu „Freewar Styles“

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 9 Gäste