Frage zum Editor (Aussehen)

Hallo zusammen,

nachdem ich vorhin eine schnelle Lösung für mein Editorproblem bekommen habe (ich hatte gar keinen mehr hihi - es lag an / in den Smiliecodes), wollte ich euch mal an dieser Stelle ein Lob aussprechen !

Ich, die noch nie im CSS rumgefummelt und nen tierischen Respekt vor Codern hat, habe es dank der tollen Anleitungen in diesem Threat geschafft, den Editor farblich so an mein Forum anzupassen, das er 1A aussieht. (Trotz dass ich mir vorher vor Angst was kaputt zu machen fast in die Buxe gemacht hätte
)

Da ich selber viel in vBulletin Foren arbeite, weiss ich welche Geduld es erfordert, stets die gleichen Fragen zu beantworten.

Vielen Lieben DANK an euer ganzes Team, ihr leistet hier einen absolut tollen Job !!!!

Lg ena


PS: Wenn ich jetzt noch einen Code bekommen könnte, womit man das Smiliefenster (Originalgrösse) farblich anpassen kann, bin ich der glücklichste Zwerg auf Erden !

@ enano:

Ich würde hier noch nicht so viel Energie rein stecken, da es abzusehen ist, das es hier in den nächsten Tagen noch mal eine Änderung geben wird.
Alles was du jetz hier einstellst kann am Mittwoch schon wieder hinfällig sein, weil daran gearbeitet wird, den Editor über die Farbverwaltung im Adminbereich anzupassen.
Aber wenn du das jetzt unbedingt möchtest, dann kannst du diesen CSS Code dafür verwenden:

Code:

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

Die Farbe ist natürlich selber anzupassen.

Hey Danke schön !

Na dann warten wir mal ab, was sich an der Editorfront noch so tut....

Nur mal ne kleine Frage...
mir ist grad aufgefallen, dass beim "Editieren" im neuen Editor keine Smilies verfügbar sind. Der Button dafür fehlt, also kann man auch keine nachträglich einfügen... es sei denn man kennt den Code dafür aus dem FF.

Ich hab grad noch mal die Themen zum Editor durchblättert, konnte aber nichts dazu finden, ob das noch jemanden aufgefallen ist und ob es dafür schon ne Lösung gibt oder ob überhaupt noch an den Smilieoptimierungen gearbeitet wird. Muss dazu auch sagen, dass mich diese Gewitterluft mal wieder tierisch umhaut und ich "leicht" neben mir stehe... kann also auch einfach nur was übersehen haben. 

Wäre für eine Antwort sehr dankbar!
LG euer verlorenes Engelchen

Edit:
Hab noch was entdeckt... In meinem Forgotten Poems fehlt der Smilie-Button komplett auch wenn ich auf "neues Thema" oder "neuer Beitrag" gehe. Da kann ich den nur nutzen, wenn ich in der Expressantwort bin.
Sorry, falls ich auch dazu ne Lösung übersehen habe. Aber wie kann ich das beheben, dass ich die Smilies nicht nur in der Expressantwort nutzen kann, sondern auch im "neues Thema" und "neuer Beitrag" und "Edit"?

Lost_Angel:

Ich denke du hast verpasst die letzten Templateändrungen durchzuführen.
Bitte schaue in diesem Beitrag:
https://hilfe.forumieren.com/t36533-update-11062013-neuer-editor#239703
unten nach. Dort findest du wichtige Änderungen, die für das Smielie Update vom 21.06. Notwendig sind.
Alternativ kannst du auch das Template löschen und so in den Orginal Zustand zurücksetzen, wenn du dort keine Wichtigen Änderungen dran vorgenommen hast.
Ich würde dir das Löschen und eventuelle neue Anpassen empfehlen. Das ist die sicherste Methode.
Sollte's du keine Wichtigen Veränderungen an dem Template vorgenommen haben, solltest du es sowieso in den Ursprungszustand zurück versetzen.
So bleibst du immer auf dem laufenden.

Gut, dann probier ich das mal in den kommenden Tagen. Erstmal muss sich mein Schädel wieder beruhigen. Aber danke schon mal für die schnelle Antwort.

Hallihallöchen (:
Da mir das wie der offiziele 'Fragen-zum-neuen-Editor'- Thread aussieht, poste ich direkt einmal hier hinein. Falls ich falsch liege, 'tu ich natürlich gern den Forenregeln entsprechend 'n eigenen Thread mit der Frage auftun xD

.. Nun .. find ich es super, wie man den Editor übers CSS undso anpassen kann (: Ich wollte nur wissen, ob man das Buttonfeld gleichgross machen könngte wie den Eingabebereich xD Bei mir sieht das nämlich momentan irgendwie komisch aus xD

http://s3.imgimg.de/uploads/EDITOR2b43b524PNG.png
(das dunkle grau & das helle grau da wo der pfeil hinführt :.'D

LG,
Twinker <3

Ja, du bist im richtigen Thread.

Du meinst aber wohl nicht "gleich groß", sondern "gleich breit", oder?
Dann muss ich dich leider enttäuschen: Das Editor-Script passt dieses Breitenverhältnis bei jedem User entsprechend seiner Bildschirmauflösung an. Dabei wird auch darauf geachtet, dass alle Buttons, die in einem "Block" vereint sind, im Block nebeneinander bleiben und nicht umgebrochen werden. Deshalb kann es, je nach Auflösung, dazu kommen, dass der Buttonbereich nicht 100% der Breite des Editors einnimmt.
Das ist aber bei jedem User unterschiedlich und auf diesen Prozess kannst du nicht zugreifen, tut mir leid.

Lieber Günther,
Merci für die schnelle Antwort. Und ja klar meinte ich 'breit' *kicher* war nur bissle müde haha, sorry für's nicht richtig ausdrücken (:
ach ._. das ista ber schade ._. muss ich mir wohl irgendwas überlegen oO weil ja ._. ich find das schon nicht grade schön so ._.

aber danke trotzdem (: !!!
Ganz liebe Grüsse,
Twinker

@ Frank: Ich hab immer noch das Problem mit dem fehlenden Smiliebutton. Ich hab nachgeschaut, das posting-body Template hab ich so bearbeiten können, wie es sollte. Aber das profile-add-body Template ging nicht. Ich habe den folgenden Code gar nicht, wie also soll ich ihn da entfernen?
Zitat aus Info-Thread zum neuen Editor:

Wichtig: Admins mit Foren der Version phpBB2, die das Template profile_add_body bearbeitet haben, müssen die folgende Änderung durchführen, damit der neue Editor angezeigt wird.
2. Templates > Profil > profile_add_body:

Entferne folgende Stelle:
Code:diesen Code markieren

Code:

<!-- BEGIN switch_cke_editor -->
<tr>
  <td
 class="row1"><span class="gen">{L_DISPLAY_WYSIWYG}
:</span><br /><span
class="gensmall">{L_DISPLAY_WYSIWYG_EXPLAIN}</span></td>
  <td class="row2">
  
  <label class="gen"><input type="radio" name="user_wysiwyg"
value="1" {USER_WYSIWYG_YES} />{L_YES}</label>  
    <label class="gen"><input type="radio" name="user_wysiwyg" value="0" {USER_WYSIWYG_NO} />{L_NO}</label>
  </td>
</tr>
<!-- END switch_cke_editor -->

die sich nach diesem Bereich befindet:
Code:diesen Code markieren

Code:

<!-- BEGIN switch_report -->
<tr>
  <td
 class="row1"><span
class="gen">{switch_preferences_menu.switch_report.L_NO_REPORT_POPUP}
 :</span></td>
  <td class="row2">
    <label
 class="gen"><input type="radio" name="no_report_popup" value="0"
{switch_preferences_menu.switch_report.NO_REPORT_POPUP_YES}
/>{L_YES}</label>  
    <label class="gen"><input
type="radio" name="no_report_popup" value="1"
{switch_preferences_menu.switch_report.NO_REPORT_POPUP_NO}
/>{L_NO}</label>
  </td>
</tr>
<tr>
  <td
 class="row1"><span
class="gen">{switch_preferences_menu.switch_report.L_NO_REPORT_MAIL}
:</span></td>
  <td class="row2">
    <label
class="gen"><input type="radio" name="no_report_mail" value="0"
{switch_preferences_menu.switch_report.NO_REPORT_MAIL_YES}
/>{L_YES}</label>  
    <label class="gen"><input
type="radio" name="no_report_mail" value="1"
{switch_preferences_menu.switch_report.NO_REPORT_MAIL_NO}
/>{L_NO}</label>
  </td>
</tr>
<!-- END switch_report -->


Was mach ich denn jetzt?

@ lost_angel:

Du hast dieses Template offensichtlich nicht bearbeitet, also musst du es auch nicht aktualisieren bzw. kannst die zu entfernende Stelle auch gar nicht mehr finden.
Du musst solche Templateaktualisierungen nach Updates nur manuell vornehmen, wenn du die entsprechenden Templates auch zuvor schon bearbeitet hast, wie beschrieben.

Mittlerweile hat sich der Editor ja verändert, sodass es gar keinen Smileybutton mehr gibt (ausgenommen Expressantwort), sondern die Smileybox wie früher neben dem Eingabefeld angezeigt wird. Ist das bei dir nicht der Fall?

Hast du denn auch die Aktualisierungen vorgenommen, die im Beitrag ganz unten nach folgendem Hinweis angezeigt werden?

Lakmé schrieb:

Die folgenden Templateänderungen sind für das Editor-Update vom 21.06.2013 nötig!

Wenn ja, ist das Problem vorübergehend behoben, wenn du die folgende Einstellung durchführst?
AB -> Anzeige -> Templates -> Allgemeines
Standard-Templates aktivieren: Ja

So genau kann ich das jetzt nicht bestätigen, dass ich auch den letzten Rest der Änderungen wirklich vorgenommen habe. Kann aber nochmal genau schauen.
Momentan sieht es bei mir so aus:
und das gleiche ist auch bei "neues Thema eroffnen" aus.

Edit: Ok, hat sich erledigt. Hatte da wohl das letzte Stück übersehen und vergessen zu ergänzen. Jetzt hat's geklappt und die Smilies sind da wo sie hingehören.
Danke, für eure Geduld und Hilfe!  

Hallihallo
Da es hier um das Aussehen des Editors geht wollte ich auch mal was nachfragen. Ich habe es durch die bisherigen Codes geschafft die Schreibbox und die Schrift zu verändert das der Hintergrund schwarz ist und die Schrift grün ist ..

jetzt ist meine Frage.. könnte ich die Weißen Stellen, also diese Spalte wo die ganzen Funktionen zu sehen sind umfärben?

hier ein Bild welche stelle ich meine:



ich würde das gerne grün machen damit es zum restlichen Style des Forums passt das Weiß passt da nämlich überhaupt nicht rein..

Code:

 

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



Das ist mein Code der bisher in meinem CSS steht und es geht um das Forum:

http://www.vocalworldgermany.com/

Hoffe ich hab nichts überlesen und das wurde nicht schonmal gefragt, wenn ja tut es mir leid >.<

LG

NewFuture:
Bitte Schau doch hier:
https://hilfe.forumieren.com/t36617-tutorial-das-aussehen-des-neuen-editors-anpassen#240709
Mal nach. Dort findest du alle CSS Codes die du benötigst.

Hey Frank

danke für die Hilfe ich habs nun soweit geschafft das es grün ist aber kann ich auch diese grauen unterlegung die unter den Symbolen von Fett Kursiv Unterstrichen usw ist farbig ändern.. der Code ist da nicht dabei..

Falls nicht verständlich ist was ich meine kann ich noch nen Screenshot machen

LG

Nein, soweit ich weis geht das noch nicht. Ich bin auch gerade nicht am Computer um das zu testen.
Diese Buttons sind Standard Buttons.
Aber eventuell findet sich hier noch jemand, der das schon mal gemacht hat.

Hey Frank

nein ich meine nicht die Buttons sondern den grauen hintergrund davon xD



aber okey wenn das nicht geht dann warte ich noch etwas bis das vllt auch noch bald möglich ist

Ich habe es nun mal getestet, da ich am PC bin.

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;
}

Die Farbcodes musst du natürlich noch anpassen, das sind nur Beispielwerte.

und Tadaaa



es hat geklappt
Vielen dank euch beiden :*

Bei meinem Forum funktioniert die Änderung mit der Schriftfarbe leider nicht. Die Schriftfarbe bleibt grau dabei ist der WYSIWYG-Modus aktiviert.

@ Swit:

Du findest dort ein Script, mit dem du die Standardschriftfarbe auch im WYSIWYG-Modus ändern kannst:
[Tutorial] Das Aussehen des neuen Editors anpassen.

Hallo,

ich habe grade den Editor nach dem Tutorial angepasst, nur hab ich ein Problem mit der Hintergrundgrafik im WYSIWYG Modus, wenn ich die einfüge, dann verschwindet die Schriftfarbe - irgendwie klappt das nicht miteinander, was kann ich tun?


Die andere Sache, ich biete im Forum verschiedene Styles an, die kann ich über's CSS ja noch anpassen, aber nicht den WYSIWYG-Modus, der ja über Javascript angepasst wird, kann man das aber irgendwie auch für die anderen Styles?


Hoffe ihr habt dafür auch eine Lösung?


Lg

Mystical schrieb:irgendwie klappt das nicht miteinander, was kann ich tun?

Wo in deinem Forum kann man als Gast einen Beitrag schreiben, sodass wir uns das ansehen können? Ggf. bitte vorübergehend in einem Forum Gästen auch entsprechende Befugnisse erteilen.

Zu deiner anderen Frage: Ja, du kannst im Wechselstyle-Script bei den if-Abfragen auch verschiedene Scripte für den WYSIWYG-Editor einsetzen. Somit kannst du erreichen, dass bei unterschiedlichen Wechselstyles auch jeweils eine andere Gestaltung des WYSIWYG-Editors zum Tragen kommt.
Ich zeige dir anhand des Beispielscriptes, wie das funktioniert und an welcher Stelle du die Scripte ergänzen musst:

Code:

var type = getCookie('Vorlage1');
var sugar = document.getElementById('sugar');
sugar.innerHTML ='<select onchange="changeskin(this.options[this.selectedIndex].value);window.location.reload();"><option> Wechsel den Style </option><option value="wert1"> Style1 </option><option value="wert2"> Style2 </option><option value="wert3"> Style3 </option></select>';




if (type == 'wert1')
{
 document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
  $(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>")
        });
}
else if (type == 'wert2')
{
 document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
  $(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>")
        });
}
else if (type == 'wert3')
{
 document.write('<link rel="stylesheet" type="text/css" href="ADRESSE DES CSS">');
 $(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>")
        });
}


function changeskin(change) {
 var scheme = change;
 var name = 'Vorlage1';
 var pathname = location.pathname;
 //var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
 var ExpDate = new Date ();
 ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
 setCookie(name,scheme,ExpDate,'/');
}
function getCookie(name){
 var cname = name + "=";
 var dc = document.cookie;
 if (dc.length > 0) {
 begin = dc.indexOf(cname);
 if (begin != -1) {
 begin += cname.length;
 end = dc.indexOf(";", begin);
 if (end == -1) end = dc.length;
 return unescape(dc.substring(begin, end));
 }
 }
 return null;
}
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
 ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
 ((path == null) ? "" : "; path=" + path) +
 ((domain == null) ? "" : "; domain=" + domain) +
 ((secure == null) ? "" : "; secure");
}

Edit: Ich sende jetzt doch noch ab, da ich seit einigen Minuten an dieser Scriptumsetzung arbeite und sie auch schon getestet hatte. Da wäre es schade, sie zu verwerfen.

Danke für die Codes!
So konnte ich einfach und schnell den neuen Editor anpassen, allerdings hätte ich da noch ein kleines Problem. In meinem Forum ist um die Smiley-Box eine weitere Box, die das gleiche grau hat, wie die Buttons es hatten. Jedenfalls würde ich die Farbe davon gerne ändern.

Vielen Dank für eure Hilfe!

Liebe Grüße

@ LinnDaisy:
Bitte diesen Code noch zu deinem CSS hinzufügen:

Code:

#sceditor_smilies {
    background-color: #EDDCBE !important;
}