[Tutorial] Das Aussehen des neuen Editors anpassen.

Code:

.sceditor-container {
    background: none repeat scroll 0 0 padding-box #000000 !important;
}

Code:

   .sceditor-container {
      border: 1px solid #000000 !important;
    }

Code:

   div.sceditor-toolbar {
        border-bottom: 1px solid #000000 !important;
    }

Code:

.sceditor-container iframe, .sceditor-container textarea {
  background: none repeat scroll 0 0 #010021 !important;
  color: #CCCCC0 !important;
}

Code:

.sceditor-container iframe, .sceditor-container textarea {
  background: none repeat scroll 0 0 #010021 !important;
  color: #CCCCC0 !important;
  font-size: 15px;
}

Code:

   $(window).load(function () {
          $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{background-color:#DCDCDC!important;color:#000!important;font-size:15px!important;}</style>")
        });


Code:

   img.smiley {
        background-repeat: no-repeat;
        height: auto !important;
        width: auto !important;
    }

Code:

   .sceditor-dropdown.sceditor-emoticons {
        background-color: #FF6600 !important;
    }

Code:

   .sceditor-container iframe, .sceditor-container textarea {
        background: none repeat scroll 0 0 #000000 !important;
    }

Code:

    .sceditor-container iframe, .sceditor-container textarea {
        background: url("BILDURL") !important;
    }

Code:

   .qreply {
      background-color: transparent;
    }

Code:

#sceditor_smilies body, #sceditor_smilies body * {
  background-color: #FF0000;
}

Code:

#sceditor_smilies body, #sceditor_smilies body * {
  background-image: none !important;
}

inde schrieb:
Abgesehen davon das sich nun etwas getan hat am Editor, möchte ich euch noch die Möglichkeit vorstellen, dass man den Schalter "Modus der Beitragseingabe ändern" auch noch optisch mit einem anderen Hintergrund oder Grafik hervorheben kann. Somit wird der Schalter bei eingeschaltetem Codemodus zusätzlich hervorgehoben.

So sieht es dann aus.


Ich stelle hier einmal den entsprechenden Code zur Verfügung wie ich ihn in meinem Forum verwendet habe.
Da die erstellte Grafik keinerlei künstlerischen Wert besitzt darf diese auch verwendet werden.

Code:

/*Schalter Eingabemodus im Editor*/
.hover {
background: url("http://i79.servimg.com/u/f79/16/90/45/33/moduss10.png") repeat scroll 0 0 transparent !important;
border: 1px solid #3E78A8 !important;
border-radius: 3px 3px 3px 3px !important;
box-shadow: 0 1px 2px #000000 inset !important;
-webkit-box-shadow: 0 1px 2px #000000 inset !important;
}

LG inde

Günther schrieb:Hintergrundfarbe der Button-Blöcke:

Code:

div.sceditor-group {
  background-color: #FF0000 !important;
}

Hintergrundfarbe eines ausgewählten/aktiven/gehoverten Buttons:

Code:

.sceditor-button.active, .sceditor-button:active, .sceditor-button:hover {
  background-color: #00FF00 !important;
}

Code:

$(window).load(function () {
  $(".sceditor-container iframe").contents().find("head").append("<style>blockquote{background-color:#FF0000!important;color:#00FF00!important;}</style>")
});

Code:

/*Zugecke für Editor-Texteingabefenster für dunkles Design*/
.sceditor-button div, div.sceditor-grip {
background-image: url("http://i39.servimg.com/u/f39/16/90/45/33/editor10.png") !important;
}

Code:

/*Smilie auf Editorschalter in der Expressantwort ändern*/
.sceditor-button-emoticon div {
background: url("BILDURL") no-repeat scroll 0 0 transparent !important;
}

Code:

/*Hintergrund der Schalter im Editor ändern*/
.sceditor-button {
background: url("http://www.imgbox.de/users/independent2/Formieren/FRPV_27.png") repeat-x scroll 0 50% #FFFFFF !important;
border: 2px outset #41533B !important;
margin:1px !important;
}

Code:

/*Aussehen der Schalter beim Hovern und Eingeschaltet*/
.sceditor-button.active, .sceditor-button:active, .sceditor-button:hover {
background: url("http://www.imgbox.de/users/independent2/Formieren/FRPV_30.png") repeat-x scroll 0 50% #FFFFFF !important;
border: 2px ridge #FD0972 !important;
}