[Snippet] schönere TextInput

Alles zu Styles, Templates, Icons und Smilies für phpBB 2.0, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
phpBB 2.0 hat das Ende seiner Lebenszeit überschritten
phpBB 2.0 wird nicht mehr aktiv unterstützt. Insbesondere werden - auch bei Sicherheitslücken - keine Patches mehr bereitgestellt. Der Einsatz von phpBB 2.0 erfolgt daher auf eigene Gefahr. Wir empfehlen einen Umstieg auf phpBB 3.0, welches aktiv weiterentwickelt wird und für welches regelmäßig Updates zur Verfügung gestellt werden.
Antworten
phillip
Mitglied
Beiträge: 933
Registriert: 20.03.2005 12:00

[Snippet] schönere TextInput

Beitrag von phillip »

Sooo, ich denke das passt hier rein, da es im weitesten Sinne ja etwas mit "Styling" zu tun hat ;-)

Ihr kennt ja wohl alle diese normalen, langweiligen, eckigen Inputfelder, in die man was reinschreiben kann ;-)

So habe ich mir gedacht, die ein bisschen zu umformatieren, --->siehe hier<---

Eigentlich ist das Prinzip recht simple, ich habe den Feldern lediglich einen background, padding, und das sonstige kleinzeugs (font-size, height, width etc.) gegeben.

@Mac User: Leider sind die Inputs so nicht Safari kompatibel, sie bleiben eckig.

Hier der lang ersehnte Quelltext:

Code: Alles auswählen

<style type="text/css">

p {color: white;}

body { background-color:black;}

#headerNicknameText, #headerPasswordText {  
	width: 143px;
	height: 25px;
	font-size: 11px;
	background-image: url(login_input_bg.png);
	background-repeat: no-repeat;
	border: none;
	background-color: transparent;
	overflow: hidden;
	margin: 0;
	padding: 5px 10px;
	color: #888;
}
#headerNicknameText:focus,
#headerPasswordText:focus,
#headerNicknameText.focus,
#headerPasswordText.focus {  
	background-image: url(login_input_focus_bg.png);
	color: #333;
}
</style>

<body>

<table>
<tr>
<td>
<p>Textfeld</p><input name="nickname" type="text" id="headerNicknameText" size="20" maxlength="60" />
</td>

<td>

<p>Passwort</p><input name="nickname" type="password" id="headerPasswordText" size="20" maxlength="60" />

</td>
</tr>
</table>

</body>
Bitte fügt aber das

Code: Alles auswählen

p {color: white;}

body { background-color:black;}
nicht in euer beständiges CSS File! es wäre ein grosser Fehler ;-)

Wenn ihr die Änderungen im CSS File vorgenommen habt, verseht alle Input felder, die ihr rund wollt mit

Code: Alles auswählen

id="headerNicknameText"
oder

Code: Alles auswählen

id="headerPasswordText"


Hier noch die beiden Images, die ihr in den images/ Ordner lädt:

[ externes Bild ]

[ externes Bild ]

Falls Fragen oder Kritiken auftauchen sollten, einfach posten ;-)

Viel Spass :lol:
Antworten

Zurück zu „phpBB 2.0: Styles, Templates und Grafiken“