BBCode-Buttons durch kleine Bilder ersetzen

[Crizzo]

Hi,

im Editor von prosilver, wie auch hier auf phpBB.de, werden diese Buttons genutzt für den BBCode, da würde ich allerdings gerne Bilder für einsetzen, statt dem aktuellen Text.

Wie stelle ich das an? Input-Buttons kann man afaik keine bg-Image oder sowas geben. Also wäre es vielleicht nicht übel, wenn ich die "Input"-Elemente durch <a href=""><span></span></a> ersetzen könnte.

Gruß
Blackhawk

[7emper5i]

Hallo,

wenn du dich wirklich in die Materie vertiefen möchtest, les dich mal da ein..., dort wird der erste Ansatz gezeigt.

http://balajiramesh.wordpress.com/2008/ ... -with-css/

Background Image for Input Button with CSS (works in both Firefox and IE)
Posted on September 6, 2008 by Balaji Ramesh

I was having trouble with setting a background image for an input button in IE 6. The background-image property that worked in Firefox 2.0 just did not have any effect on IE6. After a bit of googling, I realized that the background-image property will not work on IE and that we need to use the background property. Here’s a snippet that works on both browsers:

Code: Alles auswählen

<input type=”button” class=”button” title=”Background Image” />

.button{
      background: white url(‘images/imagebutton.gif’) no-repeat top;
      width: 150px;
      height: 40px;
      color:white;
}

Allerdings, wie du siehst, ist der Beitrag aus 2008, entsprechend können sich neue Möglichkeiten eröffnet haben, und zweitens kann es sein, dass dies für das phpBB-Board nicht möglich ist, da die Funktion der eigenen BBCodes generell durch einen simplen Input-Button visualisiert wird, welcher aber meines Wissens nach nur in der Datenbank abgespeichert wird. Dort müsstest du dann die "class" nachträglich einbinden und schauen ob es klappt.

Oder aber, ich bin auf dem Holzweg. Kann auch sein

Gruß und viel Erfolg

[Crizzo]

Hi,

danke schon mal. Aber es scheint doch einfach mit display:block, Höhe, Breite und bg-image zu gehen. Hatte da wohl einen Fehler gemacht gehabt, dachte schon man kann den Input nicht richtig anpassen.

Da muss ich nochmal ran.

Grüße
Blackhawk

[Talk19zehn]

Hello ihr Zwei, wahrscheinlich bin ich auch auf dem Holzweg.

Standardmäßig wird das Hintergrundbild hierdurch gesteuert:

Code: Alles auswählen

a.button1, input.button1, input.button3, a.button2, input.button2 {
	background-color: #FAFAFA;
	background-image: url("./styles/prosilver/theme/images/deinegrafik.gif");
	color: #000000;
}

Um eine geänderte Darstellung zu verwirklichen, wäre mein Denkansatz, dem Button ein Hintergrundbild mittels selektiver Ansprache zu geben. Folglich dem Betrachter eine "Illusion" eines Bildes zu geben. Gerade rasch und nicht in allen Bereichen, nicht in allen Browsern getestet: von daher ohne Gewähr....
vgl. Inhalte posting_buttons.html

Code: Alles auswählen

	<input type="button" class="button2" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" />

ersetzt durch:

Code: Alles auswählen

	<input type="button" class="button2" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold;" onclick="bbstyle(0)" title="{L_BBCODE_B_HELP}" /> 

bzw. Breite nicht gelöscht ..., nicht angesprochen!

Code: Alles auswählen

		<input type="button" class="button2" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" title="{L_BBCODE_Q_HELP}" />

usw.

Lediglich Theme ergänzt: Test ---> Bilder direkt verlinkt

Code: Alles auswählen

input[value=" B "]{
border: 1px #010423 solid;
background: url(http://img.imageshack.us/img/buttonblanko.jpg) ;
height:30px;
}

input[value="Quote"]{
border: 1px #010423 solid;
background: url(http://img.imageshack.us/img/cavatar.jpg) ;
height:30px;
}

input[value="URL"]{
border: 1px #AA2346 solid;
background: url(http://img.imageshack.us/img/hintergruport.jpg) ;
height:30px;
}

Ergebnis:
[ externes Bild ]


Denkbar ist doch auch eine Linkklasse zu definieren, die einen Hintergrund ausgibt ( grübel ).

Spannendes Thema und beste Grüße


Uuups: RS

[Crizzo]

Dann muss ich doch immer noch den Input-Value per text-ident aus dem Bild schieben, damit es nicht stört und das funktioniert nicht zuverlässig bei inline-Elementen.

Welche Browser unterstützen diesen CSS3-Selektor?

[Talk19zehn]

Hello BlackHawk87 ,

vgl. bitte hier Kapitel 5: http://www.w3.org/TR/CSS21/selector.htm ... -selectors.

und
http://de.selfhtml.org/html/formulare/formatieren.htm

Getestet in neueren Browsern, wie IE8, IE9, FF und Opera. Konqueror sollte m.W. ebenso funktionieren ( *evtl. gar Safari, da dieser fast wie Konqueror rendert ??? ).
*Vielleicht mag jemand die Ausgabe testen?


LG

[Crizzo]

Der W3C-Link geht nicht und der andere zeigt irgendwie nicht wo dies hier:

Code: Alles auswählen

input[value=" B "]{

alles laufen würde.

Wie man mit CSS formatiert ist mir nämlich bekannt, nur bin ich mit CSS3 noch gar nicht vertraut und immer ein wenig vorsichtig, wenn jemand mit einem älteren Browser daher kommt, damit er nicht gleich auf vieles verzichten muss.

Edit: Jetzt geht der Link zu Selectors auch.

[Talk19zehn]

Hi,
mein Vorschlag basiert nicht auf CSS3....
Input.... Value " B " etc. treffen meines Erachtens nur auf die BBCodes zu ( ? ) . Alternativ könnte man doch bspw.

Code: Alles auswählen

name="addbbcode6"

mittels CSS ansprechen? Nicht ausprobiert.
Vgl. bitte posting_buttons.html

Es war auch nur ein "zweiter Gedanke" zum Thema. Ggf. verfolge bitte zunächst deine eigene Idee und wir können sie dann gerne umsetzen, weitere Ideen ausarbeiten, sofern der Code im Ansatz steht, wenn du magst.

Ich finde das Thema interessant!!

Allerbeste Grüße

[Crizzo]

Hi,
mein Vorschlag basiert nicht auf CSS3....

Jo, habs gemerkt. Den hatte ich in CSS2.1 nur quasi nie genutzt.