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]

http://forum.websitebaker2.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:

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ü.

[Hans>NULL]

@Rayne

Öffne
 /fckeditor/fckeditor/fckconfig.js
 

Code:

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

[Hans>NULL]

@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

[Hans>NULL]

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

[Hans>NULL]

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