Text im Content-Bereich verschiedenen CSS-Klassen zuweisen

[Rayne]

Hallo.

Ich habe meine bestehende statische Internetseite nun nach einiger Fummelei in WB integriert. Nun geht es im Prinzip nur noch darum, den Inhalt einzufügen

Erstelle ich also eine neue Seite (WYSIWYG), öffnet sich der Editor und ich kann Text schreiben. Wie kann ich aber Teile dieses Textes bestimmten CSS-Klassen zuweisen? Beispielsweise habe ich eine Klasse für die Überschrift, eine für den Untertitel und eine für das Datum.

Es besteht zwar die Möglichkeit, den Quellcode in diesem Editor anzeigen zu lassen, aber Redakteure ohne HTML- und CSS-Kenntnisse können damit auch nichts anfangen.

Gibt es eine Lösung für dieses Problem?

Danke

[Stefek]

Hallo Rayne.

Wenn Du den FCK Editor verwendest, gibt es dort drop-down Leisten, mit denen Du die Headlines (dt. Überschriften) von 1 bis 6 auswählen kannst. Darüberhinaus gibt es ein weiteres Drop-Down mit dem Du einige Klassen auswählen kannst.
Schau es Dir an.

Mit ein wenig Know-How ist es auch möglich, weitere Klassen, die man individuell einstellt dort hinzuzufügen. Aber dazu später. Mach Dich erstmal mit den Grundlagen vertraut.

MfG,
Stefek

[Rayne]

Ich benutze bereits den FCKEditor, der bringt mich aber leider nicht weiter. Wenn ich beispielsweise eine Überschrift machen möchte, die von einem blauen Kasten umgeben ist, wird es mit den vorgegebenen DropDow-Menüs schwer.

Die nötigen Klassen gibt es ja bereits, ich suche nur nach einer Möglichkeit, wie man diese nutzerfreundlich beim Eintragen eines neuen Berichtes auswählen kann.

[kweitzel]

Bringe die Klassen in eine extra Datei, nenne die Datei editor.css und dann kannst Du im FCK darauf zurückgreifen. Die Datei muss im Templateordner liegen.

Gruß

Klaus

[mr-fan]

https://forum.WebsiteBaker.org/index.php/topic,10864.0.html

Hier steht alles zur editor.css

....martin

[Rayne]

Ich habe jetzt eine editor.css erstellt und ins Templateverzeichnis abgelegt. In dieser editor.css befinden sich nur relevante Klassen, die ich auch in dem Editor haben möchte.

Allerdings habe ich nun nur weiße Felder in den DropDown-Menüs im FCKEditor. Erst wenn ich in ein weißes Feld klicke, sehe ich, was drin steht. Und warum dieses "Red Title" noch erscheint, weiß ich auch nicht.

So siehts aus: http://s6.directupload.net/file/d/1576/2wu9lfsh_jpg.htm

Code: [Select]

h1 {
        font-family:  Arial, sans-serif;
        font-size:    15px; 
    font-weight:  bold;     
    color:        #8CC7FF;    
        text-transform: uppercase;
       
        }

h2 {
              font-family:  Verdana;
              font-size:    13px;
          font-weight:  bold;           
          color:        #FFFFFF;        
              }        

.Datum {
          font-size: 10px;    
       }    

.Text {
      margin-left:  20px;
      margin-right: 10px;
      border-top: solid 1px #8CC7FF;            
      }        
     
.Bilder {       
        margin-right:  10px;
        margin-bottom: 10px;    
        border-style:  solid;
        border-width:  4px;
        border-color:  #FFFFFF;        
        }    
         
.Bilder:hover { 
              border-style: solid;
              border-width: 4px;
              border-color: #8CC7FF;   
              }
       


[Stefek]

Und warum dieses "Red Title" noch erscheint, weiß ich auch nicht.

Diese sind von der editor.css unabhängig.
Sie sind in einer XML Datei des FCK Ordners zu finden.

Gruß,
Stefek

[ruebenwurzel]

Hallo,

1.) body, h1-h6, a ... bitte in der screen.css definieren
2.) die editor.css nimmt nur classes (#) und keine id's (.)

Matthias

[Rayne]

Also wenn ich nur Klassen (#) in die editor.css schreibe, dann passiert im Editor gar nichts. Erst, wenn ich eine Klasse nach der anderen in eine ID (.) wandle, erscheint der Eintrag im Menü.

Dass manche Einträge nicht angezeigt werden, liegt darin, dass der Text als weiß deklariert ist und dieser weiße Text vor weißem Hintergrund steht. Gibt es dafür eine Lösung?

[Stefek]

Diese Fragen können Dir in diesem Forum nur bedingt beantwortet werden.
FCK versteht sich als ein selbstständiges "Programm" und die Cracks dafür findest Du beim offiziellen FCK Forum.

Ich mag es nicht wirklich, diese Antwort zu geben, aber es ist die richtige Anwort.


MfG,
Stefek

[egnal]

Also wenn ich nur Klassen (#) in die editor.css schreibe, dann passiert im Editor gar nichts. Erst, wenn ich eine Klasse nach der anderen in eine ID (.) wandle, erscheint der Eintrag im Menü.

Dass manche Einträge nicht angezeigt werden, liegt darin, dass der Text als weiß deklariert ist und dieser weiße Text vor weißem Hintergrund steht. Gibt es dafür eine Lösung?

Ich glaube so ist es richtig:
. class
#div ID

[Stefek]

Du hast Recht, Egnal.
Ist mir vorhin nicht aufgefallen.

Es ist ein kleines Missverständnis:

# _{Die Raute bedeutet ID}
. _{der Punkt bedeutet Klasse}

So müsste es dann auch gehen.

Stefek

Also wenn ich nur Klassen (#) in die editor.css schreibe, dann passiert im Editor gar nichts. Erst, wenn ich eine Klasse nach der anderen in eine ID (.) wandle, erscheint der Eintrag im Menü.

[StudioVerlag]

@Rayne

Öffne
 /fckeditor/fckeditor/fckconfig.js
 

Code: [Select]

FCKConfig.CustomStyles =
{
   'Red Title'   : { Element : 'h3', Styles : { 'color' : 'Red' } }
};
Löschen. (oder deaktivieren, da Option für eigene Styles !)

In der editor.css können dann neue Klassen eingetragen werden.

Gruß, Hans>NUL

[Stefek]

In der editor.css können dann neue Klassen eingetragen werden.

Du meinst, vorher werden die editor.css Klassen nicht eingelesen?
Und wenn man das rausnimmt, werden sie dann schön seitlich gelistet werden?

Gruß,
Stefek

[StudioVerlag]

@stefek
Mache gerade zig Sachen auf einmal. Hoffe, dass ich Dich richtig verstanden habe.
Mit den Klassen ist ja vom Template abhängig, und wer xhtml/css macht sollte nach Möglichkeit seinen Code da (editor.css) reinpacken. Im JS bfindet sich im angegeben Abschnitt ja INLINE Code, also zusätzlicher (zu den Template Styles). Für eine Redaktion z.B. sind die Vor-Definitionen im JS u.U. praktischer und schneller zu erreichen als die Styles im editor.css und auf jedes Template anwendbar. Da kann also jeder schauen wie er die Formatierung sinnvoll verteilt.
Falls ich was falsch verstanden habe oder einem Irrtum aufsitze, her damit. Man lernt jeden Tag dazu. Seit gestern eben auch mal so nebenbei von "Stefek" wg. Hinweis auf FCK-Eingemachtes.
Gruß, Hans>NUL

[Stefek]

  ganz verstanden habe ich nicht, was Du meinst, dass Du von mir "wg. FCK-Eingemachtes" gelernt hast, aber gut.

Zurück zum Sachverhalt:
Ich habe noch nie eine editor.css benutzt, daher weiß ich nicht, wie es sich verhält bzw. was der Unterschied ist, wenn man die von Dir vorgestellten Änderungen macht (in der benannten JS).

Ich habe aber des öfteren die Datei ../fckeditor/fckeditor/fckstyles.xml /fckeditor/wb_config/wb_fckstyles.xml

Die hat das folgende (Auszug) zum Inhalt:


<Style name="Marker: Green" element="span">
    <Style name="background-color" value="Lime" /></Style>

    <Style name="Big" element="big" />
    <Style name="Small" element="small" />
    <Style name="Typewriter" element="tt" />

    <Style name="Computer Code" element="code" />
    <Style name="Keyboard Phrase" element="kbd" />
    <Style name="Sample Text" element="samp" />
    <Style name="Variable" element="var" />

    <Style name="Deleted Text" element="del" />
    <Style name="Inserted Text" element="ins" />


Wenn man diese bearbeitet, sieht man neue Items in der Drop-Down Liste.
(Browser-Cache löschen.)

Ich wunderte mich über Deinen Beitrag, aber werde ihn bei Gelegenheit auschecken.

Griß,
Stefek

[StudioVerlag]

Alles richtig (XML)
Ich bezog mich aber allein auf "Rayne" Anmerkung zum RED TITLE -hätt' ich wohl anmerken sollen- und dieser EIntrag findet sich eben nicht im XML sondern im JS. Wobei ich dann den netten Zusammenhang entdeckte. Bin ja auch faul, soll heißen, wenn ich nicht unbedingt muß, kaue ich ein Thema nicht zum Selbstzweck durch.
Gruß, Hans>NUL
Edit: Kannst ja den Abschnit mal um eine Definition erweitern, und wenn's nur 'ne andere Farbe ist. Klappt 

[Stefek]

Alles richtig (XML)
Ich bezog mich aber allein auf "Rayne" Anmerkung zum RED TITLE -hätt' ich wohl anmerken sollen- und dieser EIntrag findet sich eben nicht im XML sondern im JS. Wobei ich dann den netten Zusammenhang entdeckte.

Und dieser "nette Zusammenhang" ist, dass die editor.css Klassen dann in die Liste aufnimmt?
Kann ich mir kaum vorstellen, ehrlich gesagt.

Edit: Kannst ja den Abschnit mal um eine Definition erweitern, und wenn's nur 'ne andere Farbe ist. Klappt 

Ich kann Dir nicht immer ganz folgen.
Dies hier ist so ein Fall 

Gruß,
Stefek

[StudioVerlag]

Nein, die XML hat NIX mit editor.css zu tun, nur mit der Liste im Editor.

Befinden sich in der editor.css aber die FALSCHEN Definitionen, kann schon mal die ein oder andere Klasse flöten gehen.

Werde selbst noch ein wenig damit spielen  -hab' selbst noch nicht wirklich damit gearbeitet, nur Leute im Team, und dann posten, ob das geklappt hat.
Gruß, Hans>NUL

Edit:
Die Vorgehensweise steht hier:
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options/CustomStyles
Edit: Mein zweiter Versuch hat auch geklappt. Funktionierte wg Syntax-Fehler zuerst nicht, aber jetzt wieder. Also nur nach der "Anleitung" vorgehen und gut ist's.

[Stefek]

OK, danke für den Link.

Wie ich jetzt sehe^*:
In der Java-Script Datei kann man bestimmte Angaben machen, die dann mit einem Style Attribut im HTML erscheinen. Also z.B.: <h2 stlye="background-color:white;"> (also inline-css).

In der XML Datei kann man bestimmte Klassen zuweisen, die dann im HTML die Klasse ausgeben. Also z.B.
<h2 class="dieClass">

_{*Angaben ohne Gewähr}
Ich werde mich mit der Zeit damit etwas beschäftigen und ein kleines Tutorial speziell für WB CMS User schreiben. Aber nicht heute, der Abend ist verplant.

Grüße,
Stefek

[StudioVerlag]

Yep,
und weil das ein Dauerbrenner im Forum ist, dachte ich mal an ein Beispiel-Template, das all die Optionen sichtbar macht, damit die FCK-Möglichkeiten auch ausgeschöpft werden können. Auch anderes, wie Objekte, Canvas usw. sollten dann drin sein. Hab' aber noch keinen freien Zeitabschnitt im Terminkalender.
Gesammelt wurde aber schon 
Gruß, Hans>NUL

Edit (nun kommen einige Vereinfachungen):
p.s. mit der XML habe ich mich noch nicht beschäftigt. M.W. ist das auch nur INLINE aber mit Erweiterungsmöglich keiten (z.B. inkl. <span> usw.) Es gibt die von Dir angegeben Erweiterungen von Klassen inkl Objekten und mehr (http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Styles), wie ich mittlerweile nachgelesen habe. Die editor.css nimmt nach meinem jetzigen Kenntnisstand die layoutnahen Klassen (keine ID) aufbauend auf screen.css auf, die im Editor verfügbar sein sollen. In die screen.css solten dann in der Hauptsache die "Gestaltungs-"ID's und ein paar rudimentäre Klassen, die für das Template bzw. den Aufbau desselben nötig sind.
CSS-Aufbau sollte demnach 
1. screen.css (+Abarten für unterschiedliche Medien) für das Aussehen
2. editor.css für Klassen wie z.B. Fließtext, Blocksatz etc.
3. FCK XML+JS = Inline für Auszeichnungen, wie z.B. Teaser
sein.
Ob das alle Möglichkeiten sind, weiß ich zum jetzigen Zeitpunkt nicht. Weiter Infos, wenn vorhanden, sind also willkommen. Die o.a. Infos stehen unter Vorbehalt. Nötige Korrekturen sind also erwünscht.

Nachtrag: Wenn XHTML-valide Seiten gewünscht sind, ist die Gefahr groß, daß durch den Einsatz aller Möglichkeiten natürlich auch die Gefahr der Inkompatibilitäten steigt. Gutes Wissen um XHTML ist bei der Erstellung solcher Templates unerläßlich.

[Rayne]

So, habe nun diese *.js-Datei wie beschrieben abgeändert und dieser rote Eintrag ist weg.

Da die Schriftfarbe global schon weiß definiert ist, habe ich die extra weiße Farbe aus den Klassen rausgenommen, so werden sie auch vernünftig im Editor angezeigt

ABER es gibt ein neues Problem. Ich habe eine Klasse „Text“, die den Text etwas einrücken soll. Bei einem längeren Text wird aber nur die erste Zeile eingerückt, der Rest verhält sich so, als wäre er ohne Klasse. Und das, obwohl der Text hintereinanderweg geschrieben ist, also ohne Umbruch.

So sieht das aus: http://s1b.directupload.net/file/d/1577/m2tlapw5_jpg.htm

Hier die Klasse:

Code: [Select]

.text {
      margin-left:  20px;
      margin-right: 10px;                           
      }    
Und so sieht der Quelltext für den Text aus:

Code: [Select]

<p><span class="text">Leider funktionieren einige Extensions auch nur mit einigen Anpassungen mit PostgreSQL, unter anderem auch RealURL. Importiert wird die Extension wie gewohnt. Danach in der &quot; ext_tables.sql&quot; im Extensionverzeichnis wieder alle &quot;ENGINE=InnoDB&quot; entfernen. Beim Update der Datenbank werdenerstmal einige Warnungen angezeigt, diese k&ouml;nnen ignoriert werden. Jedoch darf die Tabelle &quot;tx_realurl_uniqalias&quot; nicht vom Extensionmanager heraus angelegt werden, da dies zu einem Fehler f&uuml;hrt. Also das H&auml;ckchen entfernen und dann Installation fertig ausf&uuml;hren. Anschlie&szlig;end die noch fehlende Tabelle mit folgendem SQL-Anweisungen manuell anlegen:</span></p>


[StudioVerlag]

Sieht so aus als wenn irgendwo was überschrieben wird. Hilft nur suchen.

Mach mal 'nen Test mit INLINE:

Code: [Select]

<p style="margin-left:10px;">10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug  10px einzug</p>
Der sollte klappen

Gruß, Hans>NUL

[BerndJM]

Hi,

vielleicht nochmal zur Verdeutlichung:
die Angaben in der  /fckeditor/fckeditor/fckconfig.js bewirken, daß die entsprechenden Style-Elemente wirklich als inline Elemente verwendet werden. z.B. unabdingbar, wenn man Blockelemente vernünftig formatieren möchte, während die Angaben in der editor.css lediglich dazu führen, daß die entsprechenden Stile mittels "span" in den Text reinformatiert werden.

Aus einer Klasse "ganztollformatiert" wird im Quelltext im ersten Fall (wenn ich sie z.B.dem "div" zuweise ein

Code: [Select]

<div class="ganztollformatiert">...</div>während im zweiten Fall daraus ein

Code: [Select]

<p><span class="ganztollformatiert">...</span></p>wird.
Ein nicht ganz unerheblicher Unterschied, da "span" nunmal kein Blockelement ist.

Grüßle Bernd

[StudioVerlag]

Die wenigsten sind wohl  gezwungen tiefer in den Editor einzusteigen. Für eine Redaktion, wenn diese auch z.B. etwas textgestalterisch einwirken möchte, kommt man als Ersteller dann doch nicht herum das CMS  entsprechend einstellen zu müssen. Schön, wenn jetzt durch das Zusammentragen der Infos diverse Unklarheiten beseitigt werden könnten.
Gruß, Hans>NUL