Hilfe:Stylesheets/Generator: Unterschied zwischen den Versionen

Aus Stupidedia, der sinnfreien Enzyklopädie!
Wechseln zu: Navigation, Suche
K (auch nicht vergessen!)
K (Änderte die Versiegelung von „Hilfe:Stylesheets/Generator“: Diktatorische Willkür ([Bearbeiten=Nur Diktatoren] (unbeschränkt) [Verschieben=Nur Diktatoren] (unbeschränkt)))
 
(3 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{{Inuse|1=Martinnitus}}
+
<html>
−
 
+
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.
−
 
 
−
Mit diesem Generator kannst du [[Hilfe:Stylesheets|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 [[Hilfe:Stylesheets/Gebräuchliche Syntaxen|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.
+
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.
  
−
<html><noscript><p class="error">Du musst JavaScript in deinem Browser aktivieren bzw. für diese Domain freigeben, damit der Generator funktioniert.</p></noscript></html>
+
<noscript><p class="error">Du musst JavaScript in deinem Browser aktivieren bzw. für diese Domain freigeben, damit der Generator funktioniert.</p></noscript>
  
−
== Formular ==
+
<h3>Formular</h3>
 
<html>
 
<html>
−
  <span id="dummy" style="display: none;"></span>
 
 
   <form action="rein_damit();" id="pStyleGenerator-form">
 
   <form action="rein_damit();" id="pStyleGenerator-form">
 
     <table class="valign-top" id="pStyleGenerator-table">
 
     <table class="valign-top" id="pStyleGenerator-table">
Zeile 24: Zeile 21:
 
           <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 </html>[[Stupidedia:Farbtabelle|Farbtabelle]]<html>.</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>
Zeile 83: Zeile 80:
 
       -->
 
       -->
 
       <tr>
 
       <tr>
−
         <th colspan="3">Hintergrund und Kastenschatten</th>
+
         <th colspan="3">Hintergrund<!-- und Kastenschatten--></th>
 
       </tr>
 
       </tr>
 
       <tr>
 
       <tr>
Zeile 115: Zeile 112:
 
           <td>Datei:</td>
 
           <td>Datei:</td>
 
           <td><input type="text" class="backpic" /></td>
 
           <td><input type="text" class="backpic" /></td>
 +
          </tr><tr>
 +
          <td>Dateigröße:</td>
 +
          <td><input type="text" class="backpicsize" /></td>
 
           </tr><tr>
 
           </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>
 
           <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>
Zeile 122: Zeile 122:
 
         <td></td>
 
         <td></td>
 
       </tr>
 
       </tr>
 +
      <!--
 
       <tr>
 
       <tr>
 
         <td>Kastenschatten:</td>
 
         <td>Kastenschatten:</td>
Zeile 138: Zeile 139:
 
         <td></td>
 
         <td></td>
 
       </tr>
 
       </tr>
 +
      -->
 
       <!--
 
       <!--
 
       -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
 
       -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
Zeile 568: Zeile 570:
 
     </table>
 
     </table>
 
   </form>
 
   </form>
−
</html>
+
<h3>Vorschau</h3>
−
 
 
−
== Vorschau ==
 
−
<html>
 
 
   <div id="pStyleGenerator-blockPreview">
 
   <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>
 
     <p>Mahlzeit! Dieser Text hier befindet sich über dem Kasten. Genau genommen in einem p-Element (das entspricht einem Absatz).</p>
Zeile 658: Zeile 657:
 
         return false;
 
         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-form input, #pStyleGenerator-form select, #pStyleGenerator-form option, #pStyleGenerator-form label').on('click change keyup keydown mouseover mouseout blur active', pStyleGenerator.refresh);
−
       var inter = setInterval(function () {
+
    }
−
       pStyleGenerator.refresh();
+
   
−
       },100);
+
    /*pStyleGenerator.filecheck = function( source, size ) {
−
      pStyleGenerator.refresh();
+
       var bild = new Image();
 +
      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') ) ) );
 
     }
 
     }
  
Zeile 671: Zeile 680:
 
       else if($('#bground2').is(':checked')===true){$('#bg2s').show();bgset = 2;}
 
       else if($('#bground2').is(':checked')===true){$('#bg2s').show();bgset = 2;}
 
       else{$('#bg3s').show();bgset = 3;}
 
       else{$('#bg3s').show();bgset = 3;}
−
      $.get('http://www.stupidedia.org/stupi?title=Datei:' + $("input[class='backpic']").val(), function (dateiseite) {
 
−
      var picpath = dateiseite.split('<div class="fullImageLink" id="file"><a href="')[1].split('"><img alt="Datei:')[0];
 
−
      $('#dummy').html(picpath);
 
−
      })
 
−
      .fail(function() {
 
−
      $('#dummy').html('');
 
−
      });
 
 
       var inputProps = api.mergeParams($('#pStyleGenerator-form').serializeArray());
 
       var inputProps = api.mergeParams($('#pStyleGenerator-form').serializeArray());
 
       var setProps = {}; // Alle nicht leeren Eigenschaften
 
       var setProps = {}; // Alle nicht leeren Eigenschaften
Zeile 771: Zeile 773:
  
 
       // Quelltext vorbereiten
 
       // Quelltext vorbereiten
−
       var gradset = {
+
       var gradset = [
−
       "1":$("input[class='gradient-1']").val(),
+
       $("input[class='gradient-1']").val(),
−
       "2":"-moz-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%, " + $("input[class='gradient-2']").val() + " 100%)",
+
       "-moz-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%, " + $("input[class='gradient-2']").val() + " 100%)",
−
       "3":"-webkit-gradient(linear, left top, left bottom, color-stop(0%," + $("input[class='gradient-1']").val() + "), color-stop(100%," + $("input[class='gradient-2']").val() + "))",
+
       "-webkit-gradient(linear, left top, left bottom, color-stop(0%," + $("input[class='gradient-1']").val() + "), color-stop(100%," + $("input[class='gradient-2']").val() + "))",
−
       "4":"-webkit-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)",
+
       "-webkit-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)",
−
       "5":"-o-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%)",
−
       "6":"-ms-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%)",
−
       "7":"linear-gradient(to bottom, " + $("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%)"
−
       //"8":"progid:DXImageTransform.Microsoft.gradient( startColorstr='" + $("input[class='gradient-1']").val() + "', endColorstr='" + $("input[class='gradient-2']").val() + "', GradientType=0 );"
+
       ];
−
      };
+
       var gradsetmid = [
−
       var gradsetmid = {
+
       $("input[class='gradient-1']").val(),
−
       "1":$("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%)",
−
       "2":"-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() + "))",
−
       "3":"-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%)",
−
       "4":"-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%)",
−
       "5":"-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%)",
−
       "6":"-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%)"
−
       "7":"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%)",
+
       ];
−
       //"8":"progid:DXImageTransform.Microsoft.gradient( startColorstr='" + $("input[class='gradient-1']").val() + "', endColorstr='" + $("input[class='gradient-2']").val() + "', GradientType=0 );"
 
−
      };
 
 
       var gain = "";
 
       var gain = "";
 
       var gainmid = "";
 
       var gainmid = "";
−
       $.each(gradset, function(key, value) {
+
       $.each(gradset, function() {
−
       //if(key==="8") gain = gain + "\n    filter: " + value;
+
       gain = gain + "\n    background: " + this + ";";
−
      /*else*/ gain = gain + "\n    background: " + value + ";";
 
 
       });
 
       });
−
       $.each(gradsetmid, function(key, value) {
+
       $.each(gradsetmid, function() {
−
       //if(key==="8") gainmid = gainmid + "\n    filter: " + value;
+
       gainmid = gainmid + "\n    background: " + this + ";";
−
      /*else*/ gainmid = gainmid + "\n    background: " + value + ";";
 
 
       });
 
       });
 
       switch(bgset){
 
       switch(bgset){
 
       case 1:
 
       case 1:
−
       $("input[class='gradient-1'],input[class='gradient-2'],input[class='gradient-1a'],input[class='backpic']").val(""); var attri = attr;
+
       $("input[class='gradient-1'],input[class='gradient-2'],input[class='gradient-1a'],input[class='backpic']").val("");
 +
      var attri = attr;
 
       break;
 
       break;
 
       case 2:
 
       case 2:
Zeile 815: Zeile 814:
 
       var attri = attr;
 
       var attri = attr;
 
       break;
 
       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']) {
 
       switch (inputProps['generator-output']) {
 
         case 'div':
 
         case 'div':
 
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){
−
           if($('#dummy').html() !== "") var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("http://www.stupidedia.org' + $('#dummy').html() + '");}}\n<div';
+
           var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=' + backpic + backpicsize + '}}\n<div';
−
          else var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("Fehler: Angegebene Dateiseite existiert nicht.");}}\n<div';
 
 
           }
 
           }
 
           else{var output = '<div';}
 
           else{var output = '<div';}
−
           if (attr !== '' || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) {
+
           if ( pStyleGenerator.check( attr ) ) {
 
             output += ' style="' + attri + '"';
 
             output += ' style="' + attri + '"';
 
           }
 
           }
−
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){output += ' id="num{{#var:num}}"';}
+
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 +
            output += ' id="num{{#var:num}}"';
 +
          }
 
           output += '>\nHier kommt der Inhalt des Kastens rein!\n</div>';
 
           output += '>\nHier kommt der Inhalt des Kastens rein!\n</div>';
 
           break;
 
           break;
 
         case 'span':
 
         case 'span':
 
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){
−
           if($('#dummy').html() !== "") var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("http://www.stupidedia.org' + $('#dummy').html() + '");}}\n<span';
+
           var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=' + backpic + backpicsize + '}}\n<span';
−
          else var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("Fehler: Angegebene Dateiseite existiert nicht.");}}\n<span';
 
 
           }
 
           }
−
           else{var output = '<span';}
+
           else{
−
           if (attr !== '' || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) || $("input[class='backpic']").val()!=="" ) {
+
            var output = '<span';
 +
          }
 +
           if ( pStyleGenerator.check( attr ) ) {
 
           output += ' style="' + attri + '"';
 
           output += ' style="' + attri + '"';
 
           }
 
           }
−
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){output += ' id="num{{#var:num}}"';}
+
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 +
            output += ' id="num{{#var:num}}"';
 +
          }
 
           output += '>Hier kommt der formatierte Text rein!</span>';
 
           output += '>Hier kommt der formatierte Text rein!</span>';
 
           break;
 
           break;
 
         case 'attribute':
 
         case 'attribute':
 
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){
 
           if(bgset===3 && $("input[class='backpic']").val()!=="" ){
−
           if($('#dummy').html() !== "") var output = attri + " " + "background-image: url('http://www.stupidedia.org'" + $('#dummy').html() + "');";
+
           var output = attri + ' ' + backpic + backpicsize;
−
          else var output = attri + ' ' + 'background-image: url("Fehler: Angegebene Dateiseite existiert nicht.");';
 
 
           }else{
 
           }else{
 
           var output = attri;
 
           var output = attri;
Zeile 852: Zeile 863:
 
           var output = '';
 
           var output = '';
 
           if(bgset===3 && $("input[class='backpic']").val()!==""){
 
           if(bgset===3 && $("input[class='backpic']").val()!==""){
−
           if($('#dummy').html() !== "") output += '    ' + 'background-image: url("http://www.stupidedia.org' + $('#dummy').html() + '");\n';
+
           output += '    ' + backpic + backpicsize.replace(new RegExp(' '),'\n   ') + '\n';
−
          else output += '\n   ' + 'background-image: url("Fehler: Angegebene Dateiseite existiert nicht.");';
 
 
           }
 
           }
 
           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 (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()!=="" ) {
Zeile 868: Zeile 878:
 
         if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n    ').join(' ');}
 
         if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n    ').join(' ');}
 
         else{var prevatt = attr + " " + gain.split('\n    ').join(' ');}
 
         else{var prevatt = attr + " " + gain.split('\n    ').join(' ');}
−
         if(bgset===3 && $("input[class='backpic']").val()!=="" && $('#dummy').html() !== ""){prevatt = prevatt + ' ' + 'background-image: url("http://www.stupidedia.org' + $('#dummy').html() + '");';}
+
         if(bgset===3 && $("input[class='backpic']").val()!==""){prevatt = prevatt + ' ' + backpic + backpicsize;}
 
         $('#pStyleGenerator-blockPreview div').attr('style', prevatt);
 
         $('#pStyleGenerator-blockPreview div').attr('style', prevatt);
 
       }
 
       }
Zeile 874: Zeile 884:
 
         if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n    ').join(' ');}
 
         if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n    ').join(' ');}
 
         else{var prevatt = attr + " " + gain.split('\n    ').join(' ');}
 
         else{var prevatt = attr + " " + gain.split('\n    ').join(' ');}
−
         if(bgset===3 && $("input[class='backpic']").val()!=="" && $('#dummy').html() !== ""){prevatt = prevatt + ' ' + 'background-image: url("http://www.stupidedia.org' + $('#dummy').html() + '");';}
+
         if(bgset===3 && $("input[class='backpic']").val()!==""){prevatt = prevatt + ' ' + backpic + backpicsize;}
 
         $('#pStyleGenerator-inlinePreview span').attr('style', prevatt);
 
         $('#pStyleGenerator-inlinePreview span').attr('style', prevatt);
 
       }
 
       }

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