Verschiedene Schriftenarten? +Colorpalette im auswahlmenü?

[susi24]

Hallo schon wieder.

Ich wollte mal fragen ob es realisierbar ist, ein Auswahlmenü (wie bei Schriftgröße) für SchriftARTEN zu schaffen? (zb. Comic Sans MS, Tahoma, usw.)
Ja über bbcode wäre eine Möglichkeit aber wenn ich 5 verschiedene haben möchte, muss ich 5 bbcodes erstellen. (nicht so der hit) Deshalb die Überlegung ob das evt. über die editor.js + posting_buttons.html machbar wäre?


Und die Colorpalette: kann man die auch irgendwie in ein Auswahlmenü oder dropdown menü oder so packen?

[hackepeter13]

Du könntest aus der BBCodeBox3 den entsprechenden Teil für Schriftart und Schriftfarbe rauskopieren:

Code: Alles auswählen

<select class="fontbox" name="addbbcode77" onchange="bbfontstyle('[font=' + this.form.addbbcode77.options[this.form.addbbcode77.selectedIndex].value + ']', '[/font]');this.form.addbbcode77.selectedIndex = 0;" onmouseover="helpline('ft');" onmouseout="helpline('tip');">
	<option selected="selected" value="">Schriftart</option>
	<option style="font-family: Arial" value="Arial">Arial</option>
	<option style="font-family: Arial Black" value="Arial Black">Arial Black</option>
	<option style="font-family: Century Gothic" value="Century Gothic">Century Gothic</option>
	<option style="font-family: Comic Sans MS" value="Comic Sans MS">Comic Sans MS</option>
	<option style="font-family: Georgia" value="Georgia">Georgia</option>
	<option style="font-family: Verdana" value="Verdana">Verdana</option>
	<option style="font-family: Courier New" value="Courier New">Courier New</option>
	<option style="font-family: Times New Roman" value="Times New Roman">Times New Roman</option>
	<option style="font-family: Trebuchet MS" value="Trebuchet MS">Trebuchet MS</option>
	<option style="font-family: Impact" value="Impact">Impact</option>
</select>
			
<select class="fontbox" name="addbbcode79" onchange="bbfontstyle('[color=' + this.form.addbbcode79.options[this.form.addbbcode79.selectedIndex].value + ']', '[/color]');this.form.addbbcode79.selectedIndex = 0;" onmouseover="helpline('fc');" onmouseout="helpline('tip');">
	<option selected="selected" value="">{L_FONT_COLOR}</option>
	<option style="background-color:chocolate" value="chocolate">chocolate</option>
	<option style="background-color:sandybrown" value="sandybrown">sandybrown</option>
	<option style="background-color:darkorange" value="darkorange">darkorange</option>
	<option style="background-color:orange" value="orange">orange</option>
	<option style="background-color:darkgoldenrod" value="darkgoldenrod">darkgoldenrod</option>
	<option style="background-color:goldenrod" value="goldenrod">goldenrod</option>
	<option style="background-color:gold" value="gold">gold</option>
	<option style="background-color:olive" value="olive">olive</option>
	<option style="background-color:yellow" value="yellow">yellow</option>
	<option style="background-color:yellowgreen" value="yellowgreen">yellowgreen</option>
	<option style="background-color:greenyellow" value="greenyellow">greenyellow</option>
	<option style="background-color:chartreuse" value="chartreuse">chartreuse</option>
	<option style="background-color:green" value="green">green</option>
	<option style="background-color:lime" value="lime">lime</option>
	<option style="background-color:limegreen" value="limegreen">limegreen</option>
	<option style="background-color:springgreen" value="springgreen">springgreen</option>
	<option style="background-color:turquoise" value="turquoise">turquoise</option>
	<option style="background-color:lightseagreen" value="lightseagreen">lightseagreen</option>
	<option style="background-color:mediumturquoise" value="mediumturquoise">mediumturquoise</option>
	<option style="background-color:teal" value="teal">teal</option>
	<option style="background-color:darkcyan" value="darkcyan">darkcyan</option>
	<option style="background-color:cyan" value="cyan">cyan</option>
	<option style="background-color:darkturquoise" value="darkturquoise">darkturquoise</option>
	<option style="background-color:deepskyblue" value="deepskyblue">deepskyblue</option>
	<option style="background-color:dodgerblue" value="dodgerblue">dodgerblue</option>
	<option style="background-color:royalblue" value="royalblue">royalblue</option>
	<option style="background-color:navy" value="navy">navy</option>
	<option style="background-color:darkblue" value="darkblue">darkblue</option>
	<option style="background-color:mediumblue" value="mediumblue">mediumblue</option>
	<option style="background-color:blue" value="blue">blue</option>
	<option style="background-color:blueviolet" value="blueviolet">blueviolet</option>
	<option style="background-color:purple" value="purple">purple</option>
	<option style="background-color:darkmagenta" value="darkmagenta">darkmagenta</option>
	<option style="background-color:magenta" value="magenta">magenta</option>
	<option style="background-color:mediumvioletred" value="mediumvioletred">mediumvioletred</option>
	<option style="background-color:deeppink" value="deeppink">deeppink</option>
	<option style="background-color:hotpink" value="hotpink">hotpink</option>
	<option style="background-color:crimson" value="crimson">crimson</option>
	<option style="background-color:brown" value="brown">brown</option>
	<option style="background-color:indianred" value="indianred">indianred</option>
	<option style="background-color:rosybrown" value="rosybrown">rosybrown</option>
	<option style="background-color:lightcoral" value="lightcoral">lightcoral</option>
	<option style="background-color:lightsalmon" value="lightsalmon">lightsalmon</option>
	<option style="background-color:sienna" value="sienna">sienna</option>
	<option style="background-color:saddlebrown" value="saddlebrown">saddlebrown</option>
	<option style="background-color:peachpuff" value="peachpuff">peachpuff</option>
	<option style="background-color:peru" value="peru">peru</option>
	<option style="background-color:burlywood" value="burlywood">burlywood</option>
	<option style="background-color:tan" value="tan">tan</option>
	<option style="background-color:khaki" value="khaki">khaki</option>
	<option style="background-color:darkkhaki" value="darkkhaki">darkkhaki</option>
	<option style="background-color:olivedrab" value="olivedrab">olivedrab</option>
	<option style="background-color:darkolivegreen" value="darkolivegreen">darkolivegreen</option>
	<option style="background-color:darkseagreen" value="darkseagreen">darkseagreen</option>
	<option style="background-color:darkgreen" value="darkgreen">darkgreen</option>
	<option style="background-color:forestgreen" value="forestgreen">forestgreen</option>
	<option style="background-color:lightgreen" value="lightgreen">lightgreen</option>
	<option style="background-color:seagreen" value="seagreen">seagreen</option>
	<option style="background-color:mediumseagreen" value="mediumseagreen">mediumseagreen</option>
	<option style="background-color:mediumaquamarine" value="mediumaquamarine">mediumaquamarine</option>
	<option style="background-color:aquamarine" value="aquamarine">aquamarine</option>
	<option style="background-color:darkslategray" value="darkslategray">darkslategray</option>
	<option style="background-color:paleturquoise" value="paleturquoise">paleturquoise</option>
	<option style="background-color:cadetblue" value="cadetblue">cadetblue</option>
	<option style="background-color:lightblue" value="lightblue">lightblue</option>
	<option style="background-color:lightskyblue" value="lightskyblue">lightskyblue</option>
	<option style="background-color:steelblue" value="steelblue">steelblue</option>
	<option style="background-color:cornflowerblue" value="cornflowerblue">cornflowerblue</option>
	<option style="background-color:midnightblue" value="midnightblue">midnightblue</option>
	<option style="background-color:slateblue" value="slateblue">slateblue</option>
	<option style="background-color:darkslateblue" value="darkslateblue">darkslateblue</option>
	<option style="background-color:mediumslateblue" value="mediumslateblue">mediumslateblue</option>
	<option style="background-color:mediumpurple" value="mediumpurple">mediumpurple</option>
	<option style="background-color:indigo" value="indigo">indigo</option>
	<option style="background-color:mediumorchid" value="mediumorchid">mediumorchid</option>
	<option style="background-color:plum" value="plum">plum</option>
	<option style="background-color:violet" value="violet">violet</option>
	<option style="background-color:orchid" value="orchid">orchid</option>
	<option style="background-color:palevioletred" value="palevioletred">palevioletred</option>
	<option style="background-color:pink" value="pink">pink</option>
	<option style="background-color:black" value="black">black</option>
	<option style="background-color:dimgray" value="dimgray">dimgray</option>
	<option style="background-color:gray" value="gray">gray</option>
	<option style="background-color:darkgray" value="darkgray">darkgray</option>
	<option style="background-color:silver" value="silver">silver</option>
	<option style="background-color:lightgray" value="lightgray">lightgray</option>
	<option style="background-color:white" value="white">white</option>
</select>

...und in der "posting_buttons.html" einfügen - z.B. nach:

Code: Alles auswählen

<select name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" title="{L_BBCODE_F_HELP}">
		<option value="50">{L_FONT_TINY}</option>
		<option value="85">{L_FONT_SMALL}</option>
		<option value="100" selected="selected">{L_FONT_NORMAL}</option>
		<option value="150">{L_FONT_LARGE}</option>
		<option value="200">{L_FONT_HUGE}</option>
	</select>

Dann noch die alte Farbpalette auskommentieren:
Suche:

Code: Alles auswählen

<input type="button" class="button2" id="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" onclick="change_palette();" title="{L_BBCODE_S_HELP}" />

Ersetze:

Code: Alles auswählen

<!--
<input type="button" class="button2" id="bbpalette" id="bbpalette" value="{L_FONT_COLOR}" onclick="change_palette();" title="{L_BBCODE_S_HELP}" />
-->

Zu guter Letzt, muss im ACP dann noch ein BBCode für die Schriftart erstellt werden:

BBCode-Benutzung:

Code: Alles auswählen

[font={TEXT1}]{TEXT2}[/font]

HTML-Ersetzung:

Code: Alles auswählen

<span style="font-family: {TEXT1}">{TEXT2}</span>

Beim Verfassen eines Beitrags anzeigen: NEIN (nicht aktivieren)

[susi24]

aaah schön schön schön genau das hab ich gesucht. diese ...box hab ich sogar noch hier irgendwo. kam leider nich mehr auf den namen, so blieb die suche natürlich auch erfolglos aber das options dingens wars was ich gesucht hatte.

vielen vielen dank hackepeter!!!


Edit: also nochmal danke klappt alles suuuuuuupi bist auf:

Code: Alles auswählen

<script type="text/javascript">
				// <![CDATA[
					colorPalette('v', 7, 6)
				// ]]>
				</script>

das steht bei mir anstelle der farbpalette. (in der posting_body.html) in der anderen steht gar nix dergleichen wie du oben beschrieben hattest zum auskommentieren der farbpalette.

(wie genau kann ich das eigentlich nochmal machen in html seiten? hab das schon so lange nich mehr angewandt) ok hat sich erledigt.... <!--...

wow ist das ungewohnt. so 'naggisch'

[hackepeter13]

Ah OK, dann hast du subsilver2.

Meine Anleitung war jetzt auf prosilver basierende Styles.

[4seven]

ist das ungewohnt

ist halt alles gut durchdacht. es sich leichter und schöner zu machen war der sinn.

[susi24]

Ist auch sehr gelungen seven. ich finds toll, auch wenns ungewohnt ist. Öfter mal was neues schickes und praktisches ist ja nicht zu verachten. Da gewöhne ich mich doch gerne dran. 1.Reihe alle standard bbcodes und 2. Reihe alle Auswahlmenüs. (und ganz hinten am ende die 2 teambbcodes)
Für mich perfekt. Schön übersichtlich, 'sauber' und einfach anzuwenden/erweiterbar.
dir auch nochmal danke, hackepeter. Hat trotzdem gut geklappt.