Hilfe:Stylesheets/Generator: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K (Änderte die Versiegelung von „Hilfe:Stylesheets/Generator“: Diktatorische Willkür ([Bearbeiten=Nur Diktatoren] (unbeschränkt) [Verschieben=Nur Diktatoren] (unbeschränkt)))
 
(22 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
 
<html>
 
<html>
−
  <h2>Formular</h2>
+
Mit diesem Generator kannst du <a href="/stupi/Hilfe:Stylesheets" title="Hilfe:Stylesheets">Stylesheets</a> erstellen. Das Ergebnis wird als Quelltext oder Attributinhalt ausgegeben und kann fast überall in der Stupi genutzt werden.
 +
 
 +
In der rechten Spalte werden die Eingabefelder erklärt. Detailliertere Informationen zu den einzelnen Eigenschaften findest du <a href="/stupi/Hilfe:Stylesheets/Gebräuchliche Syntaxen" title="Hilfe:Stylesheets/Gebräuchliche Syntaxen">hier</a>. Die Links mit der Aufschrift <b>Erweitert</b> lassen zusätzliche Felder erscheinen, mit denen du die jeweilige Angabe für einzelne Seiten (links, rechts, oben, unten) abweichend festlegen kannst.
 +
 
 +
<noscript><p class="error">Du musst JavaScript in deinem Browser aktivieren bzw. für diese Domain freigeben, damit der Generator funktioniert.</p></noscript>
 +
 
 +
<h3>Formular</h3>
 +
<html>
 
   <form action="rein_damit();" id="pStyleGenerator-form">
 
   <form action="rein_damit();" id="pStyleGenerator-form">
−
     <table id="pStyleGenerator-table">
+
     <table class="valign-top" id="pStyleGenerator-table">
 
       <!--
 
       <!--
−
         Text
+
         Inhalt
 
       -->
 
       -->
 
       <tr>
 
       <tr>
−
         <td class="pStyleGenerator-h3" colspan="2">Text</td>
+
         <th colspan="3">Inhalt</th>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
−
         <td>Farbe:</td>
+
         <td>Schriftfarbe:</td>
 
         <td>
 
         <td>
 
           <input type="text" name="color" />
 
           <input type="text" name="color" />
 
         </td>
 
         </td>
 +
        <td>Kann eine beliebige Farbangabe sein, z. B. <code style="color: red;">red</code> oder <code style="color: #008000;">#008000</code>. Eine Auswahl von Farben gibt es in der <a href="/stupi/Stupidedia:Farbtabelle" title="Stupidedia:Farbtabelle">Farbtabelle</a>.</td>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
 
         <td>Schriftart:</td>
 
         <td>Schriftart:</td>
 
         <td>
 
         <td>
−
           <input type="text" name="fontFamily" />
+
           <input type="text" name="font-family" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Schriftgröße:</td>
 +
        <td>
 +
          <input type="text" name="font-size" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Ausrichtung:</td>
 +
        <td>
 +
          <select name="text-align">
 +
            <option value="">(Automatisch)</option>
 +
            <option value="left">Links</option>
 +
            <option value="right">Rechts</option>
 +
            <option value="center">Zentriert</option>
 +
            <option value="justify">Blocksatz</option>
 +
          </select>
 
         </td>
 
         </td>
 +
        <td></td>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
 
         <td>Diverses:</td>
 
         <td>Diverses:</td>
 
         <td>
 
         <td>
−
           <input type="checkbox" name="fontWeight" value="bold" id="pStyleGenerator-fontWeight" />
+
           <input type="checkbox" name="font-weight" value="bold" id="pStyleGenerator-font-weight" />
−
           <label for="pStyleGenerator-fontWeight" style="font-weight: bold;">Fett</label>
+
           <label for="pStyleGenerator-font-weight" style="font-weight: bold;">Fett</label>
 
           <br />
 
           <br />
−
           <input type="checkbox" name="fontStyle" value="italic" id="pStyleGenerator-fontStyle" />
+
           <input type="checkbox" name="font-style" value="italic" id="pStyleGenerator-font-style" />
−
           <label for="pStyleGenerator-fontStyle" style="font-style: italic;">Kursiv</label>
+
           <label for="pStyleGenerator-font-style" style="font-style: italic;">Kursiv</label>
 
           <br />
 
           <br />
−
           <input type="checkbox" name="textDecoration" value="underline" id="pStyleGenerator-textDecoration-underline" />
+
           <input type="checkbox" name="text-decoration" value="underline" id="pStyleGenerator-text-decoration-underline" />
−
           <label for="pStyleGenerator-textDecoration" style="text-decoration: underline;">Unterstrichen</label>
+
           <label for="pStyleGenerator-text-decoration-underline" style="text-decoration: underline;">Unterstrichen</label>
 
           <br />
 
           <br />
−
           <input type="checkbox" name="textDecoration" value="overline" id="pStyleGenerator-textDecoration-overline" />
+
           <input type="checkbox" name="text-decoration" value="overline" id="pStyleGenerator-text-decoration-overline" />
−
           <label for="pStyleGenerator-textDecoration" style="text-decoration: overline;">Überstrichen</label>
+
           <label for="pStyleGenerator-text-decoration-overline" style="text-decoration: overline;">Überstrichen</label>
 +
          <br />
 +
          <input type="checkbox" name="text-decoration" value="line-through" id="pStyleGenerator-text-decoration-lineThrough" />
 +
          <label for="pStyleGenerator-text-decoration-lineThrough" style="text-decoration: line-through;">Durchgestrichen</label>
 +
          <br />
 +
          <input type="checkbox" name="font-variant" value="small-caps" id="pStyleGenerator-font-variant" />
 +
          <label for="pStyleGenerator-font-variant" style="font-variant: small-caps;">Kapitälchen</label>
 +
          <br />
 +
          <input type="checkbox" name="text-shadow" value="3px 3px 5px rgba(68, 68, 68, 1)" id="pStyleGenerator-text-shadow" />
 +
          <label for="pStyleGenerator-text-shadow" style="text-shadow: 3px 3px 5px rgba(68, 68, 68, 1);">Textschatten</label>
 
         </td>
 
         </td>
 +
        <td></td>
 
       </tr>
 
       </tr>
 
       <!--
 
       <!--
 +
        Hintergrund
 +
      -->
 +
      <tr>
 +
        <th colspan="3">Hintergrund<!-- und Kastenschatten--></th>
 +
      </tr>
 +
      <tr>
 +
        <td>Hintergrund:</td>
 +
        <td>
 +
          <input type="radio" name="bg" id="bground1" checked=true /><label for="bground1">Farbe</label>
 +
          <input type="radio" name="bg" id="bground2" /><label for="bground2">Farbverlauf</label>
 +
          <input type="radio" name="bg" id="bground3" /><label for="bground3">Hintergrundbild</label>
 +
          <div id="bg1s">
 +
          <table><tr>
 +
          <td>Farbe:</td>
 +
          <td><input type="text" name="background-color" /></td>
 +
          </tr></table>
 +
          </div>
 +
          <div id="bg2s" style="display: none;">
 +
          <table>
 +
          <tr>
 +
          <td>Startfarbe:</td>
 +
          <td><input type="text" class="gradient-1" /></td>
 +
          </tr><tr>
 +
          <td><input id="betgr" type="checkbox"><label for="betgr">&nbsp;Zwischenfarbe:</label></td>
 +
          <td><input type="text" class="gradient-1a" style="width: 60%;" />&nbsp;<input type="text" class="graper" maxlength=2 style="width: 20%;" value="50" />&nbsp;%</td>
 +
          </tr><tr>
 +
          <td>Endfarbe:</td>
 +
          <td><input type="text" class="gradient-2" /></td>
 +
          </tr></table>
 +
          </div>
 +
          <div id="bg3s" style="display: none;">
 +
          <table>
 +
          <tr>
 +
          <td>Datei:</td>
 +
          <td><input type="text" class="backpic" /></td>
 +
          </tr><tr>
 +
          <td>Dateigröße:</td>
 +
          <td><input type="text" class="backpicsize" /></td>
 +
          </tr><tr>
 +
          <td></td><td><input type="button" value="Nach Dateien suchen" class="picsearch" onclick="var dname = prompt('Wie soll die Datei heißen?');if(dname!=='')window.open('http://www.stupidedia.org/stupi?title=Spezial:Dateien&ilsearch=' + encodeURIComponent(dname) );" /></td>
 +
          </tr><tr></table>
 +
          </div>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <!--
 +
      <tr>
 +
        <td>Kastenschatten:</td>
 +
        <td>
 +
        <table><tr>
 +
        <td>X-Ausrichtung:</td>
 +
        <td><input type="text" class="rish"  /></td>
 +
        </tr><tr>
 +
        <td>Y-Ausrichtung:</td>
 +
        <td><input type="text" class="dosh"  /></td>
 +
        </tr><tr>
 +
        <td>Unschärfe:</td>
 +
        <td><input type="text" class="blush"  /></td>
 +
        </tr></table>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      -->
 +
      <!--
 +
      -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
 +
      -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
 +
      box-shadow:        7px 7px 5px 0px rgba(50, 50, 50, 0.75);
 
         Rahmen
 
         Rahmen
 
       -->
 
       -->
 
       <tr>
 
       <tr>
−
         <td class="pStyleGenerator-h3" colspan="2">Rahmen</td>
+
         <th colspan="3">Rahmen</th>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
 
         <td>Breite:</td>
 
         <td>Breite:</td>
 
         <td>
 
         <td>
−
           <input type="text" name="borderWidth" />
+
           <input type="text" name="border-width" />
 +
          <a href="#" class="pStyleGenerator-advanceLink">Erweitert</a>
 +
          <div class="pStyleGenerator-advanced">
 +
            <table>
 +
              <tr>
 +
                <td>Links:</td>
 +
                <td>
 +
                  <input type="text" name="border-left-width" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Rechts:</td>
 +
                <td>
 +
                  <input type="text" name="border-right-width" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Oben:</td>
 +
                <td>
 +
                  <input type="text" name="border-top-width" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Unten:</td>
 +
                <td>
 +
                  <input type="text" name="border-bottom-width" />
 +
                </td>
 +
              </tr>
 +
            </table>
 +
          </div>
 
         </td>
 
         </td>
 +
        <td></td>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
 
         <td>Art:</td>
 
         <td>Art:</td>
 
         <td>
 
         <td>
−
           <select name="borderStyle">
+
           <select name="border-style">
 +
            <option value="">(Automatisch)</option>
 
             <option value="solid">Durchgehend</option>
 
             <option value="solid">Durchgehend</option>
 
             <option value="dotted">Gepunktet</option>
 
             <option value="dotted">Gepunktet</option>
Zeile 62: Zeile 199:
 
             <option value="ridge">Nach außen gebogen</option>
 
             <option value="ridge">Nach außen gebogen</option>
 
           </select>
 
           </select>
 +
          <a href="#" class="pStyleGenerator-advanceLink">Erweitert</a>
 +
          <div class="pStyleGenerator-advanced">
 +
            <table>
 +
              <tr>
 +
                <td>Links:</td>
 +
                <td>
 +
                  <select name="border-left-style">
 +
                    <option value="">(Automatisch)</option>
 +
                    <option value="solid">Durchgehend</option>
 +
                    <option value="dotted">Gepunktet</option>
 +
                    <option value="dashed">Gestrichelt</option>
 +
                    <option value="double">Doppelt</option>
 +
                    <option value="inset">Nach innen abfallend</option>
 +
                    <option value="outset">Nach außen abfallend</option>
 +
                    <option value="groove">Nach innen gebogen</option>
 +
                    <option value="ridge">Nach außen gebogen</option>
 +
                  </select>
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Rechts:</td>
 +
                <td>
 +
                  <select name="border-right-style">
 +
                    <option value="">(Automatisch)</option>
 +
                    <option value="solid">Durchgehend</option>
 +
                    <option value="dotted">Gepunktet</option>
 +
                    <option value="dashed">Gestrichelt</option>
 +
                    <option value="double">Doppelt</option>
 +
                    <option value="inset">Nach innen abfallend</option>
 +
                    <option value="outset">Nach außen abfallend</option>
 +
                    <option value="groove">Nach innen gebogen</option>
 +
                    <option value="ridge">Nach außen gebogen</option>
 +
                  </select>
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Oben:</td>
 +
                <td>
 +
                  <select name="border-top-style">
 +
                    <option value="">(Automatisch)</option>
 +
                    <option value="solid">Durchgehend</option>
 +
                    <option value="dotted">Gepunktet</option>
 +
                    <option value="dashed">Gestrichelt</option>
 +
                    <option value="double">Doppelt</option>
 +
                    <option value="inset">Nach innen abfallend</option>
 +
                    <option value="outset">Nach außen abfallend</option>
 +
                    <option value="groove">Nach innen gebogen</option>
 +
                    <option value="ridge">Nach außen gebogen</option>
 +
                  </select>
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Unten:</td>
 +
                <td>
 +
                  <select name="border-bottom-style">
 +
                    <option value="">(Automatisch)</option>
 +
                    <option value="solid">Durchgehend</option>
 +
                    <option value="dotted">Gepunktet</option>
 +
                    <option value="dashed">Gestrichelt</option>
 +
                    <option value="double">Doppelt</option>
 +
                    <option value="inset">Nach innen abfallend</option>
 +
                    <option value="outset">Nach außen abfallend</option>
 +
                    <option value="groove">Nach innen gebogen</option>
 +
                    <option value="ridge">Nach außen gebogen</option>
 +
                  </select>
 +
                </td>
 +
              </tr>
 +
            </table>
 +
          </div>
 
         </td>
 
         </td>
 +
        <td></td>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
 
         <td>Farbe:</td>
 
         <td>Farbe:</td>
 
         <td>
 
         <td>
−
           <input type="text" name="borderColor" />
+
           <input type="text" name="border-color" />
 +
          <a href="#" class="pStyleGenerator-advanceLink">Erweitert</a>
 +
          <div class="pStyleGenerator-advanced">
 +
            <table>
 +
              <tr>
 +
                <td>Links:</td>
 +
                <td>
 +
                  <input type="text" name="border-left-color" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Rechts:</td>
 +
                <td>
 +
                  <input type="text" name="border-right-color" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Oben:</td>
 +
                <td>
 +
                  <input type="text" name="border-top-color" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Unten:</td>
 +
                <td>
 +
                  <input type="text" name="border-bottom-color" />
 +
                </td>
 +
              </tr>
 +
            </table>
 +
          </div>
 
         </td>
 
         </td>
 +
        <td></td>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
 
         <td>Krümmung:</td>
 
         <td>Krümmung:</td>
 
         <td>
 
         <td>
−
           <input type="text" name="borderRadius" />
+
           <input type="text" name="border-radius" />
 +
          <a href="#" class="pStyleGenerator-advanceLink">Erweitert</a>
 +
          <div class="pStyleGenerator-advanced">
 +
            <table>
 +
              <tr>
 +
                <td>Oben links:</td>
 +
                <td>
 +
                  <input type="text" name="border-top-left-radius" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Oben rechts:</td>
 +
                <td>
 +
                  <input type="text" name="border-top-right-radius" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Unten rechts:</td>
 +
                <td>
 +
                  <input type="text" name="border-bottom-right-radius" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Unten links:</td>
 +
                <td>
 +
                  <input type="text" name="border-bottom-left-radius" />
 +
                </td>
 +
              </tr>
 +
            </table>
 +
          </div>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <!--
 +
        Größe und Abstände
 +
      -->
 +
      <tr>
 +
        <th colspan="3">Größe und Abstände</th>
 +
      </tr>
 +
      <tr>
 +
        <td>Breite:</td>
 +
        <td>
 +
          <input type="text" name="width" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Höhe:</td>
 +
        <td>
 +
          <input type="text" name="height" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Verhalten bei Übergröße:</td>
 +
        <td>
 +
          <select name="overflow">
 +
            <option value="">(Automatisch)</option>
 +
            <option value="visible">Anzeigen</option>
 +
            <option value="hidden">Verstecken</option>
 +
            <option value="scroll">Scrollbalken anzeigen</option>
 +
          </select>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Innenabstand:</td>
 +
        <td>
 +
          <input type="text" name="padding" />
 +
          <a href="#" class="pStyleGenerator-advanceLink">Erweitert</a>
 +
          <div class="pStyleGenerator-advanced">
 +
            <table>
 +
              <tr>
 +
                <td>Links:</td>
 +
                <td>
 +
                  <input type="text" name="padding-left" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Rechts:</td>
 +
                <td>
 +
                  <input type="text" name="padding-right" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Oben:</td>
 +
                <td>
 +
                  <input type="text" name="padding-top" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Unten:</td>
 +
                <td>
 +
                  <input type="text" name="padding-bottom" />
 +
                </td>
 +
              </tr>
 +
            </table>
 +
          </div>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Außenabstand:</td>
 +
        <td>
 +
          <input type="text" name="margin" />
 +
          <a href="#" class="pStyleGenerator-advanceLink">Erweitert</a>
 +
          <div class="pStyleGenerator-advanced">
 +
            <table>
 +
              <tr>
 +
                <td>Links:</td>
 +
                <td>
 +
                  <input type="text" name="margin-left" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Rechts:</td>
 +
                <td>
 +
                  <input type="text" name="margin-right" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Oben:</td>
 +
                <td>
 +
                  <input type="text" name="margin-top" />
 +
                </td>
 +
              </tr>
 +
              <tr>
 +
                <td>Unten:</td>
 +
                <td>
 +
                  <input type="text" name="margin-bottom" />
 +
                </td>
 +
              </tr>
 +
            </table>
 +
          </div>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <!--
 +
        Position und Elementausrichtung
 +
      -->
 +
      <tr>
 +
        <th colspan="3">Position und Elementausrichtung</th>
 +
      </tr>
 +
      <tr>
 +
        <td>Textumfluss:</td>
 +
        <td>
 +
          <select name="float">
 +
            <option value="">(Keiner)</option>
 +
            <option value="left">Links</option>
 +
            <option value="right">Rechts</option>
 +
          </select>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Absatz:</td>
 +
        <td>
 +
          <select name="clear">
 +
            <option value="">(Keiner)</option>
 +
            <option value="left">Links</option>
 +
            <option value="right">Rechts</option>
 +
            <option value="both">Beides</option>
 +
          </select>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Positionierung:</td>
 +
        <td>
 +
          <select name="position">
 +
            <option value="">(Keine)</option>
 +
            <option value="relative">Relativ</option>
 +
            <option value="absolute">Absolut</option>
 +
            <option value="fixed">Fixiert</option>
 +
          </select>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Links:</td>
 +
        <td>
 +
          <input type="text" name="left" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Rechts:</td>
 +
        <td>
 +
          <input type="text" name="right" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Oben:</td>
 +
        <td>
 +
          <input type="text" name="top" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Unten:</td>
 +
        <td>
 +
          <input type="text" name="bottom" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Ebenenposition:</td>
 +
        <td>
 +
          <input type="text" name="z-index" />
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <!--
 +
        Generatorspezifisches
 +
      -->
 +
      <tr>
 +
        <th colspan="3">Generatorspezifisches</th>
 +
      </tr>
 +
      <tr>
 +
        <td>Ausgabe:</td>
 +
        <td>
 +
          <input type="radio" name="generator-output" value="div" checked="checked" id="pStyleGenerator-generator-output-div" />
 +
          <label for="pStyleGenerator-generator-output-div">Kastenquelltext (div)</label>
 +
          <br />
 +
          <input type="radio" name="generator-output" value="span" id="pStyleGenerator-generator-output-span" />
 +
          <label for="pStyleGenerator-generator-output-span">Zeilenquelltext (span)</label>
 +
          <br />
 +
          <input type="radio" name="generator-output" value="attribute" id="pStyleGenerator-generator-output-attribute" />
 +
          <label for="pStyleGenerator-generator-output-attribute">Attributwert</label>
 +
          <br />
 +
          <input type="radio" name="generator-output" value="file" id="pStyleGenerator-generator-output-file" />
 +
          <label for="pStyleGenerator-generator-output-file">CSS-Seite</label>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <tr>
 +
        <td>Vorschau:</td>
 +
        <td>
 +
          <input type="radio" name="generator-display" value="block" checked="checked" id="pStyleGenerator-generator-display-block" />
 +
          <label for="pStyleGenerator-generator-display-block">Kasten</label>
 +
          <br />
 +
          <input type="radio" name="generator-display" value="inline" id="pStyleGenerator-generator-display-inline" />
 +
          <label for="pStyleGenerator-generator-display-inline">Text innerhalb einer Zeile</label>
 +
        </td>
 +
        <td></td>
 +
      </tr>
 +
      <!--
 +
        Generierter Quelltext
 +
      -->
 +
      <tr>
 +
        <th colspan="3">Generierter Quelltext</th>
 +
      </tr>
 +
      <tr>
 +
        <td colspan="3">
 +
          <textarea rows="5" id="pStyleGenerator-output"></textarea>
 
         </td>
 
         </td>
 
       </tr>
 
       </tr>
 
     </table>
 
     </table>
 
   </form>
 
   </form>
−
   <h2>Vorschau</h2>
+
<h3>Vorschau</h3>
−
   <div id="pStyleGenerator-preview">
+
   <div id="pStyleGenerator-blockPreview">
−
      
+
    <p>Mahlzeit! Dieser Text hier befindet sich über dem Kasten. Genau genommen in einem p-Element (das entspricht einem Absatz).</p>
 +
    <div>Dieser Text steht in dem Kasten, den du zu formatieren versuchst. Der kann beliebig lang sein.</div>
 +
    <p>Und dieser Text steht unterhalb des Kastens, wird also unter Umständen von der Textumflussangabe beeinflusst.</p>
 +
  </div>
 +
   <div id="pStyleGenerator-inlinePreview">
 +
     <p>Mahlzeit! Dieser Text hier befindet sich vor dem formatierten Text. <span>Dies ist der Teil der Zeile, den du zu formatieren versuchst. Der kann beliebig lang sein.</span> Und dieser Text steht hinter dem formatierten Teil.</p>
 
   </div>
 
   </div>
 
   <style type="text/css">
 
   <style type="text/css">
−
     #pStyleGenerator-table {
+
     #pStyleGenerator-form table {
 
       width: 100%;
 
       width: 100%;
 +
      border-spacing: 0;
 +
      border: 1px solid #AAAAFF;
 +
      padding: 2px;
 +
      background-color: #DDEEFF;
 +
    }
 +
 +
    #pStyleGenerator-form td,
 +
    #pStyleGenerator-form th {
 +
      padding: 2px;
 +
    }
 +
 +
    #pStyleGenerator-form td:first-child {
 +
      font-weight: bold;
 +
      text-align: right;
 +
      width: 170px;
 +
    }
 +
 +
    #pStyleGenerator-form td:first-child + td {
 +
      width: 300px;
 
     }
 
     }
−
      
+
 
−
     .pStyleGenerator-h3 {
+
     #pStyleGenerator-form td:first-child + td + td {
 +
      font-size: 80%;
 +
      line-height: 95%;
 +
    }
 +
 
 +
     #pStyleGenerator-form .pStyleGenerator-advanced table {
 +
      border: 0;
 +
      padding-right: 0px;
 +
    }
 +
 
 +
    #pStyleGenerator-form .pStyleGenerator-advanced td:first-child {
 +
      width: 100px;
 +
    }
 +
 
 +
    #pStyleGenerator-form .pStyleGenerator-advanced td:first-child + td {
 +
      width: auto;
 +
      padding-right: 0px;
 +
    }
 +
 
 +
    #pStyleGenerator-form th {
 
       font-size: 132%;
 
       font-size: 132%;
 +
      text-align: left;
 +
      background-color: #CCDDEE;
 +
    }
 +
 +
    #pStyleGenerator-form input[type="text"],
 +
    #pStyleGenerator-form select,
 +
    #pStyleGenerator-form textarea {
 +
      width: 100%;
 +
      border: 1px solid #AAAAFF;
 +
      background-color: #FFFFDD;
 +
    }
 +
 +
    .pStyleGenerator-advanceLink {
 
       font-weight: bold;
 
       font-weight: bold;
 +
    }
 +
 +
    .pStyleGenerator-advanced {
 +
      display: none;
 +
    }
 +
 +
    #pStyleGenerator-blockPreview,
 +
    #pStyleGenerator-blockPreview {
 +
      display: none;
 +
    }
 +
  </style>
 +
  <script type="text/javascript">
 +
    var pStyleGenerator = new Object();
 +
 +
    pStyleGenerator.init = function() {
 +
      $('.pStyleGenerator-advanceLink').click(function() {
 +
        $(this).next().slideToggle();
 +
        return false;
 +
      });
 +
      $('#pStyleGenerator-form input, #pStyleGenerator-form select, #pStyleGenerator-form option, #pStyleGenerator-form label').on('click change keyup keydown mouseover mouseout blur active', pStyleGenerator.refresh);
 
     }
 
     }
 
      
 
      
−
     .pStyleGenerator-h4 {
+
     /*pStyleGenerator.filecheck = function( source, size ) {
−
       font-size: 116%;
+
       var bild = new Image();
−
       font-weight: bold;
+
      bild.src = getFileSource( source, size );
 +
      $( bild ).one('load', function() {
 +
        return getFileSource( source, size );
 +
      }).one('error abort', function() {
 +
        return 'Das Bild kann nicht gefunden werden.';
 +
       });
 +
    }*/
 +
 
 +
    pStyleGenerator.check = function( a ) {
 +
      return ( a !== '' || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) );
 
     }
 
     }
−
      
+
 
−
    #pStyleGenerator-table input[type="text"],
+
     pStyleGenerator.refresh = function() {
−
    #pStyleGenerator-table select {
+
      var bgset;
−
       width: 100%;
+
      $('#bg1s,#bg2s,#bg3s').hide();
 +
      if($('#bground1').is(':checked')===true){$('#bg1s').show();bgset = 1;}
 +
      else if($('#bground2').is(':checked')===true){$('#bg2s').show();bgset = 2;}
 +
      else{$('#bg3s').show();bgset = 3;}
 +
      var inputProps = api.mergeParams($('#pStyleGenerator-form').serializeArray());
 +
      var setProps = {}; // Alle nicht leeren Eigenschaften
 +
      var formattedProps = []; // Alle formatierten Eigenschaften
 +
      // Diese Eigenschaften können unverarbeitet übernommen werden
 +
      var plainProps = [
 +
        'color',
 +
        'background-color',
 +
        'font-size',
 +
        'font-family',
 +
        'font-weight',
 +
        'font-style',
 +
        'font-variant',
 +
        'text-decoration',
 +
        'text-align',
 +
        'text-shadow',
 +
        'width',
 +
        'height',
 +
        'overflow',
 +
        'padding',
 +
        'padding-left',
 +
        'padding-right',
 +
        'padding-top',
 +
        'padding-bottom',
 +
        'margin',
 +
        'margin-left',
 +
        'margin-right',
 +
        'margin-top',
 +
        'margin-bottom',
 +
        'float',
 +
        'clear'
 +
      ];
 +
 
 +
      // Leere Eigenschaften rausfiltern
 +
      $.each(inputProps, function(i) {
 +
        // Generatorspezifische Eigenschaft, ignorieren
 +
        if (i.indexOf('generator') === 0) {
 +
          return;
 +
        }
 +
        var value = $.trim(this.toString().replace(/\|/g, ' '));
 +
        if (value !== '') {
 +
          setProps[i] = value;
 +
        }
 +
      });
 +
 
 +
      $.each(plainProps, function() {
 +
        var i = this.toString();
 +
        if (setProps[i] !== undefined) {
 +
          formattedProps.push(i + ': ' + setProps[i] + ';');
 +
        }
 +
      });
 +
 
 +
      // border: Erst grasen wir alle fünf möglichen Seiten ab
 +
      $.each(['', '-left', '-right', '-top', '-bottom'], function() {
 +
        var i = this.toString();
 +
        // Sind alle Werte einer Seite gesetzt, wird die border-Eigenschaft genutzt
 +
        if (setProps['border' + i + '-width'] !== undefined && setProps['border' + i + '-style'] !== undefined && setProps['border' + i + '-color'] !== undefined) {
 +
          formattedProps.push('border' + i + ': ' + setProps['border' + i + '-width'] + ' ' + setProps['border' + i + '-style'] + ' ' + setProps['border' + i + '-color'] + ';');
 +
        }
 +
        // Andernfalls border-width, border-style und border-color
 +
        else {
 +
          $.each(['-width', '-style', '-color'], function() {
 +
            var j = this.toString();
 +
            if (setProps['border' + i + j] !== undefined) {
 +
              formattedProps.push('border' + i + j + ': ' + setProps['border' + i + j] + ';');
 +
            }
 +
          });
 +
        }
 +
      });
 +
 
 +
      // border-radius
 +
      $.each(['', '-top-left', '-top-right', '-bottom-right', '-bottom-left'], function() {
 +
        var i = this.toString();
 +
        if (setProps['border' + i + '-radius'] !== undefined) {
 +
          formattedProps.push('-webkit-border' + i + '-radius: ' + setProps['border' + i + '-radius'] + ';');
 +
          formattedProps.push('-moz-border-radius-' + i.replace(/\-/g, '') + ': ' + setProps['border' + i + '-radius'] + ';');
 +
          formattedProps.push('border' + i + '-radius: ' + setProps['border' + i + '-radius'] + ';');
 +
        }
 +
      });
 +
 
 +
      // position
 +
      if (setProps['position'] !== undefined) {
 +
        $.each(['position', 'left', 'right', 'top', 'bottom', 'z-index'], function() {
 +
          var i = this.toString();
 +
          if (setProps[i] !== undefined) {
 +
            formattedProps.push(i + ': ' + setProps[i] + ';');
 +
          }
 +
        });
 +
      }
 +
 
 +
      // Attribut-String erstellen
 +
      var attr = formattedProps.join(' ');
 +
 
 +
      // Quelltext vorbereiten
 +
      var gradset = [
 +
      $("input[class='gradient-1']").val(),
 +
      "-moz-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%, " + $("input[class='gradient-2']").val() + " 100%)",
 +
      "-webkit-gradient(linear, left top, left bottom, color-stop(0%," + $("input[class='gradient-1']").val() + "), color-stop(100%," + $("input[class='gradient-2']").val() + "))",
 +
      "-webkit-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)",
 +
      "-o-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)",
 +
      "-ms-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)",
 +
      "linear-gradient(to bottom, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)"
 +
      ];
 +
      var gradsetmid = [
 +
      $("input[class='gradient-1']").val(),
 +
      "-moz-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)",
 +
      "-webkit-gradient(linear, left top, left bottom, color-stop(0%," + $("input[class='gradient-1']").val() + "), color-stop("+$("input[class='graper']").val()+"%," + $("input[class='gradient-1a']").val() + "), color-stop(100%," + $("input[class='gradient-2']").val() + "))",
 +
      "-webkit-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)",
 +
      "-o-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)",
 +
      "-ms-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)",
 +
      "linear-gradient(to bottom, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)"
 +
      ];
 +
      var gain = "";
 +
      var gainmid = "";
 +
      $.each(gradset, function() {
 +
      gain = gain + "\n    background: " + this + ";";
 +
      });
 +
      $.each(gradsetmid, function() {
 +
      gainmid = gainmid + "\n    background: " + this + ";";
 +
      });
 +
      switch(bgset){
 +
      case 1:
 +
      $("input[class='gradient-1'],input[class='gradient-2'],input[class='gradient-1a'],input[class='backpic']").val("");
 +
      var attri = attr;
 +
      break;
 +
      case 2:
 +
      $("input[name='background-color'],input[class='backpic']").val("");
 +
      if( $("#betgr").is(':checked') &&  ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) )  ) var attri = attr + gainmid.split('\n    ').join(' ');
 +
      else if(  ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) )  ) var attri = attr + gain.split('\n    ').join(' ');
 +
      else var attri = attr;
 +
      break;
 +
      case 3:
 +
      $("input[name='background-color'],input[class='gradient-1'],input[class='gradient-2'],input[class='gradient-1a']").val("");
 +
      var attri = attr;
 +
      break;
 +
      }
 +
      if( $("input[class='backpic']").val().replace(new RegExp('Datei:','g'), '').match( /[a-zA-z0-9]+\.[a-zA-z0-9]+/ ) === null ){
 +
          var backpic = 'background-image: Ungültiger Dateiname;';
 +
      }else{
 +
          var backpic = 'background-image: url("' + getFileSource( $("input[class='backpic']").val().replace(new RegExp('Datei:','g'), '') ) + '");';
 +
      }
 +
      var backpicsize = '';
 +
      if( $.trim( $("input[class='backpicsize']").val() ) !== '' ){
 +
        backpicsize = ' background-size: ' + $("input[class='backpicsize']").val().replace(new RegExp('px','g'), '') + 'px;';
 +
      }
 +
      switch (inputProps['generator-output']) {
 +
        case 'div':
 +
          if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 +
          var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=' + backpic + backpicsize + '}}\n<div';
 +
          }
 +
          else{var output = '<div';}
 +
          if ( pStyleGenerator.check( attr ) ) {
 +
            output += ' style="' + attri + '"';
 +
          }
 +
          if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 +
            output += ' id="num{{#var:num}}"';
 +
          }
 +
          output += '>\nHier kommt der Inhalt des Kastens rein!\n</div>';
 +
          break;
 +
        case 'span':
 +
          if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 +
          var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=' + backpic + backpicsize + '}}\n<span';
 +
          }
 +
          else{
 +
            var output = '<span';
 +
          }
 +
          if (  pStyleGenerator.check( attr ) ) {
 +
          output += ' style="' + attri + '"';
 +
          }
 +
          if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 +
            output += ' id="num{{#var:num}}"';
 +
          }
 +
          output += '>Hier kommt der formatierte Text rein!</span>';
 +
          break;
 +
        case 'attribute':
 +
          if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 +
          var output = attri + ' ' + backpic + backpicsize;
 +
          }else{
 +
          var output = attri;
 +
          }
 +
          break;
 +
        case 'file':
 +
          var output = '';
 +
          if(bgset===3 && $("input[class='backpic']").val()!==""){
 +
          output += '    ' + backpic + backpicsize.replace(new RegExp(' '),'\n    ') + '\n';
 +
          }
 +
          if (formattedProps.length > 0 || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) || $("input[class='backpic']").val()!=="" ) {
 +
            if( $("#betgr").is(':checked') &&  ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) )  ) output += '    ' + formattedProps.join('\n    ') + gainmid;
 +
            else if(  ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) )  ) output += '    ' + formattedProps.join('\n    ') + gain;
 +
            else output += '    ' + formattedProps.join('\n    ');
 +
          }
 +
          break;
 +
      }
 +
      $('#pStyleGenerator-output').val(output);
 +
 
 +
      // Vorschau aktualisieren
 +
      if (inputProps['generator-display'] === 'block') {
 +
        if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n    ').join(' ');}
 +
        else{var prevatt = attr + " " + gain.split('\n    ').join(' ');}
 +
        if(bgset===3 && $("input[class='backpic']").val()!==""){prevatt = prevatt + ' ' + backpic + backpicsize;}
 +
        $('#pStyleGenerator-blockPreview div').attr('style', prevatt);
 +
       }
 +
    else {
 +
        if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n    ').join(' ');}
 +
        else{var prevatt = attr + " " + gain.split('\n    ').join(' ');}
 +
        if(bgset===3 && $("input[class='backpic']").val()!==""){prevatt = prevatt + ' ' + backpic + backpicsize;}
 +
        $('#pStyleGenerator-inlinePreview span').attr('style', prevatt);
 +
      }
 +
      $('#pStyleGenerator-blockPreview').show();
 +
      $('#pStyleGenerator-inlinePreview').hide();
 
     }
 
     }
−
   </style>
+
 
 +
    $(pStyleGenerator.init);
 +
   </script>
 
</html>
 
</html>

Aktuelle Version vom 15. November 2014, 17:19 Uhr

Mit diesem Generator kannst du Stylesheets erstellen. Das Ergebnis wird als Quelltext oder Attributinhalt ausgegeben und kann fast überall in der Stupi genutzt werden. In der rechten Spalte werden die Eingabefelder erklärt. Detailliertere Informationen zu den einzelnen Eigenschaften findest du hier. Die Links mit der Aufschrift Erweitert lassen zusätzliche Felder erscheinen, mit denen du die jeweilige Angabe für einzelne Seiten (links, rechts, oben, unten) abweichend festlegen kannst.

Du musst JavaScript in deinem Browser aktivieren bzw. für diese Domain freigeben, damit der Generator funktioniert.

Formular

Inhalt
Schriftfarbe: Kann eine beliebige Farbangabe sein, z. B. red oder #008000. Eine Auswahl von Farben gibt es in der Farbtabelle.
Schriftart:
Schriftgröße:
Ausrichtung:
Diverses:





Hintergrund
Hintergrund:
Farbe:
Rahmen
Breite: Erweitert
Links:
Rechts:
Oben:
Unten:
Art: Erweitert
Links:
Rechts:
Oben:
Unten:
Farbe: Erweitert
Links:
Rechts:
Oben:
Unten:
Krümmung: Erweitert
Oben links:
Oben rechts:
Unten rechts:
Unten links:
Größe und Abstände
Breite:
Höhe:
Verhalten bei Übergröße:
Innenabstand: Erweitert
Links:
Rechts:
Oben:
Unten:
Außenabstand: Erweitert
Links:
Rechts:
Oben:
Unten:
Position und Elementausrichtung
Textumfluss:
Absatz:
Positionierung:
Links:
Rechts:
Oben:
Unten:
Ebenenposition:
Generatorspezifisches
Ausgabe:


Vorschau:
Generierter Quelltext

Vorschau

Mahlzeit! Dieser Text hier befindet sich über dem Kasten. Genau genommen in einem p-Element (das entspricht einem Absatz).

Dieser Text steht in dem Kasten, den du zu formatieren versuchst. Der kann beliebig lang sein.

Und dieser Text steht unterhalb des Kastens, wird also unter Umständen von der Textumflussangabe beeinflusst.

Mahlzeit! Dieser Text hier befindet sich vor dem formatierten Text. Dies ist der Teil der Zeile, den du zu formatieren versuchst. Der kann beliebig lang sein. Und dieser Text steht hinter dem formatierten Teil.

Abgerufen von „https://www.stupidedia.org/stupi?title=Hilfe:Stylesheets/Generator&oldid=2147431“

Linktipps: Faditiva und 3DPresso