Frage zum Editor (Aussehen)

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

Wow, danke schön! Und gleich die richtige Farbe!

Liebe Grüße

Ja, so bin ich... Ich hatte mir das bei dir im Forum angesehen und dann auch gleich die richtige Farbe genommen, damit du das ohne Änderungen übernehmen kannst.

Hallo Günther,

Günther schrieb: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.

Hab nochmal rumprobiert und das Problem hat sich gelöst  

Ich hab im Code bei background "Color" hinzugefügt und jetzt passt alles, musste auch kein Grafiklink angeben.. also Grafik wird angezeigt und die Schriftfarbe, alles ist wie gewünscht.

Code:


$(window).load(function () {
          $(".sceditor-container iframe").contents().find("head").append("<style>body,html,code:before,p,table{
backgroundColor:#000000 !important;
color:#CCCCCC !important;
font-size:11px !important;

}</style>")
        });

Günther schrieb: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:

Super, vielen Dank!


LG