Designerdokumentation

CushyCMS funktioniert, indem es per FTP auf Ihre Webseite zugreift und nach speziellen CSS-Klassen sucht die Seitenelementen zugewiesen wurden. Basierend auf dem was Cushy vorfindet, präsentiert Cushy die Inhalte auf die vernünftigste Art und Weise, um diese zu bearbeiten.

Diese Seite dokumentiert alle verfügbaren Cushy Templateoptionen.

Free Account

Pro Account


Free Account

Grundlegender Überblick

Cushy editiert jedes Element, dem Sie die CSS-Klasse cushycms zuweisen, auf intelligenteste Art und Weise.

<h1 class="cushycms" title="My Heading">Dies wird editierbar sein</h1>
<div class="cushycms" title="Main Content">
  <p>Mehr editierbarer Kram hier...</p>
</div>
<p>Ich bin nicht editierbar.</p>
<img class="cushycms" src="foo.jpg" alt="Ich bin ein editierbares Bild!" />

Tip: Pro users can specify a class of "clienteditor" as an alternative to "cushycms".

Wenn Ihr Element bereits einen Klassennamen besitzt kÖnnen sie trotzdem cushycms darauf anwenden.:

<div class="whatever cushycms">

Der folgende Video-Clip zeigt in wenigen Minuten, wie man CushyCMS verwendet.

» VIDEO: Wie Sie Ihre Website in Cushy in 5 Minuten einbinden und bearbeiten

Felder kennzeichnen

Helfen Sie Ihren Redakteuren dabei, die Stellen zu finden, die sie bearbeiten sollen indem Sie Ihre Felder kennzeichnen. Benutzen Sie einfach das Attribut title ihres editierbaren Elements.

<h1 class="cushycms" title="Hauptüberschrift">Dies wird editierbar</h1>

Cushy holt sich, sofern vorhanden, automatisch die Titel die den Attributen folgen:
title, alt, id

Bilder bearbeiten

Cushy kann ihren Redakteuren erlauben Bilder auf einer Seite zu ändern. Es analysiert die HÖhe un Breite Ihrer Bildertags um die Datei auf intelligente Weise in ihrer GrÖsse anzupassen, damit diese sich in die vorhandene Bearbeitungsfläche einfügen.

<img src="1.jpg" class="cushycms" width="250" height="100" alt="Photo" />

Das heraufgeladene Bild wird in seiner GrÖsse auf eine Breite von 250px und eine HÖhe von 100px verändert. Das Bild wird wenn nÖtig auch zugeschnitten.

<img src="1.jpg" class="cushycms" width="250" alt="Photo" />

Das heraufgeladene Bild wird in seiner Breite auf 250px geändert. Die HÖhe wird beibehalten.

<img src="1.jpg" class="cushycms" alt="Photo" />

Das heraufgeladene Bild wird nicht verändert.

Dateien heraufladen

Der Cushy WYSIWYG Editor erlaubt es Benutzern lokale Dateien über die Link und Image Toolbar Buttons heraufzuladen (Beachten Sie den Reiter Upload im Pop-Up-Fenster).

Zunächst werden diese Dateien nur temporär auf dem Cushy-Server gespeichert um dann für die VerÖffentlichung auf Ihren FTP-Server geladen zu werden.

Standardmässig werden diese Dateien im selben Verzeichnis verÖffentlicht wie der Rest der Seite. Dies kann jedoch in der Projektkonfiguration angepasst werden.

Inhaltstypen überschreiben

Cushy nutzt mehrere verschiedene Editier-Methoden, abhängig von Inhaltstyp. Cushy sucht sich, basierend auf dem Container-Element auf intelligente Weise die passende Methode aus. Wir haben jedoch verstanden, dass es vorkommen kann, dass Sie sich die den Inhaltstyp selber auswählen mÖchten. Sollte dies der Fall sein, benutzen Sie bitte eine der folgenden Alternativen:

class="cushycms-text"

Editiert den Inhalt als reinen Text. Beispiel: Editieren von serverseitigem Kode oder wenn sie ihren HTML-Kode von Hand erstellen mÖchten.

class="cushycms-html"

Jedwedes Spezialzeichen, dass eingegeben wird, wird in HTML konvertiert. Eg: © becomes &copy;

class="cushycms-wysiwyg"

Dasselbe wie zuvor, mit dem Unterschied, dass der Redakteur Buttons angeboten bekommt, mit denen er einfache Arbeitsschritte durchführen kann, wie etwa das erstellen von Listen, Links, usw.

class="cushycms-xml"

Alle eingegebenen Sonderzeichen werden in XML-Objekte umgewandelt. Eg: < becomes &lt;

XML-Elemente

Cushy unterstützt XML-Elemente. Inhalt, welcher in die Bearbeitungs-Box eingegeben wird, wird korrekt in XML ausgegeben, so dass Ihr XML-Quelltext nicht ungültig sein wird. Jedes Element, das von Cushy nicht als XHTML (hier die vollständige Liste der Elemente) klassifiziert wurde, wird als XML behandelt.

<product>
  <name>Banana</name>
  <price class='cushycms'>$12.99/kg</price>
</product>

Falls Sie Probleme mit XML-Elementen haben, die als XHTML erkennt wurden (weil sie den selben Namen tragen), schauen Sie sich die Funktion an, um den Inhaltstyp gewisser Bereiche zu überschreiben. Grundsätzlich können Sie einen cushy-xml Class-Type verwenden, um den XML-Modus für ein Element zu erzwingen.

Tips & Tricks

Beachten Sie, dass es kaumetwas gibt, dass Cushy nicht editieren kann. Nachfolgend finden Sie einige kreative Beispiele:

<script type="text/javascript" class="cushycms">
  alert('Sehen Sie, Sie kÖnnen auch Javascript editieren!');
</script>

Javascript editieren. Ein Beispiel kÖnnte Ihr Kode für Google AdSense sein.

<p>Our charity has raised $<span class="cushycms">2140</span> so far</p>

Erlaube das Editieren von nur einem einzelnen Wort oder Bild.

Cushy mit dynamischen Sprachen (PHP, ASP, usw.) nutzen

Cushy hat es manchmal schwer damit Dokumente zu entziffern die einen Mix aus HTML- und serverseiteigem Kode enthalten, wie etwa bei PHP.

Deshalb empfehlen wir wärmstens durch Cushy veränderliche Inhalte in seperate, statische Dateien zu schreiben und diese in die Skripte einzufügen.

Zum Beispiel:

<html>
  <head><title>Contact Us</title></head>
  <body>
    <? include("contact_static.html"); ?>
  </body>
</html>

Oben: Inhalt von contact.php.

<h1 class="cushycms">Contact Us</h1>
<div class"cushycms">
  <p>Editierbarer Inhalt hier...</p>
</div>

Oben: Inhalt von contact_static.html.

In diesem Szenario würden Sie Cushy auf die Datei contact_static.html verweisen.

Zeichenkodierung

Cushy stellt spezielle Zeichen (wie nicht-westliche Alphabete) im vielseitigen UTF-8-Format dar. Damit dieses Format unterstützt wird, stellen Sie bitte sicher, dass das Folgende im head-Bereich Ihrer HTML-Dateien auftaucht:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Erfahren Sie mehr über Vorteile von UTF-8.

 

Pro Account

Wiederholbare Elemente

Die Verwendung von sich wiederholenden Elementen in CushyCMS kann sehr mächtig sein. In einem ersten Schritt fügen Sie Klasse (die erlaubt, ein Elemtent zu bearbeiten) in Ihr Element ein. Die verfügbaren Tags sind <ul>, <ol> <table> und <dl>. Von nun an wird CushCMS in solche Elemente hineinschauen und entdecken, welche Elemente wiederholbar sind (wie z.B. <li>, <tr> or <dt> - Tags). Sobald ein solches Element gefunden wurde, werden alle editierbaren Tags innerhalb dieses Elements zusammen gruppiert, so dass alles sich Wiederholende dieses äusseren Elements auch die editierbaren Elemente innerhalb beinhaltet.

Betrachten Sie das folgende Beispiel:

<ul class="cushycms">
  <li>
    <p class="cushycms">Dies wird editierbar sein</p>
    <p>Ich bin nicht editierbar.</p>
  </li>
</ul>

Hier enthält das Tag <li> einen editierbaren <p> - Tag und einen nicht bearbeitbaren <p> - Tag. Wenn der Editor beschliesst, diesen <li> - Tag zu wiederholen, wird CushyCMS ein Dublikat des gesamten Tags, inklusive des <p> - Tags, machen, obwohl der Redakteur nur Zugriff auf einen der beiden Tags hat. Sie können so viele editierbaren Tags innerhalb eines wiederholbaren Elementes einfügen, wie Sie wollen, oder Sie können einfach das wiederholbare Element als Ganzes editierbar machen.:

Hier sehen Sie einen Video-Clip, der zeigt, wie man einen wiederholenden Bereich implementiert.

Wiederkehrende Bereiche

Bilder / Uploads überschreiben

Verwenden Sie das Auswahlfeld auf der Einstellungs-Seite, um diese Funktion zu aktivieren, bzw. deaktivieren. Sobald Sie aktiviert ist, behalten alle neuen Bilder, die über CushyCMS hochgeladen werden ihren ursprünglichen Dateinamen. Dies kann hilfreich sein für Dinge wie preisliste.pdf oder ähnlich, aber es bedeutet auch, dass der Editor vollständig kontrolliert, wie die Datei auf dem Server heissen wird. Seien Sie jedoch vorsichtig, falls Sie Dateien mit einem Namen wie style.css, logo.gif oder ähnlich hochladen, denn werden existierende Dateien überschrieben, was bedeuten könnte, dass dadurch ihre Seite ruiniert wird. Aus diesem Grund empfehlen wir diese Einstellung nur, wenn Sie auch einen benutzerdefinierten Pfad für den Upload verwenden.

Benutzerdefinierte, editierbare Klasse

Als Pro-Benutzer können Sie ihre eigenen editierbaren Klassen definieren, anstatt die standardmässigen Klassen wie cushycms oder clienteditor zu verwenden. Dies erlaubt Ihnen, einzelnen Benutzern Zugriff auf bestimmte Bereiche einer Seite zu geben, während andere User auf wiederum andere Bereiche Zugriff haben. Verwenden Sie dazu folgendes Code-Beispiel:

<span class="cushycms-ferris">Only Ferris can edit this.</span>
<span class="cushycms-cameron">Only Cameron can edit this.</span>

Hier sehen Sie, dass cushycms-klaus und cushycms-petra benutzerdefinierte Klassen sind. Diese könnten auch ihrefirma-klaus heissen, falls Sie dies wünschen. Sie können auch alle Benutzer auf die Klasse "IhreFirma" setzen, falls Sie den Leuten nicht auf verschiedene Seiten Zugriff geben müssen. Es sollte noch angemerkt werden, dass diese Klassen auch mit den Inhaltsüberschreibungen funktionieren, ihrefirma-klaus-html funktioniert also wie erwartet.

Branding und Styling

Hier sehen Sie einen Video-Clip, der zeigt, wie man CushyCMS anpassen kann, damit es sich an Ihre Marke oder die Marke Ihres Kunden anpasst.

» VIDEO: Individualisieren, Formate anpassen und Seiten klonen

Seite duplizieren

Als Pro-Benutzer haben Sie die Möglichkeit, einzelnen oder allen Editoren das Recht zu geben, neue Seiten basierend auf dem Inhalt bereits existierender Seiten zu erstellen. Sie können dies beim Erstellen eines neuen Redakteurs oder beim Ändern der Zugrifsrechte aktivieren. Diese Option aktiviert einen Duplizieren-Symbol bei jeder Seite im Benutzerbereich (das Symbol ist bereits sichtbar, wenn man als Designer eingeloggt ist). Der Editor fragt Sie nach einem Namen für die neue Seite. Dieser Name wird für den Dateinamen verwendet. Die neue Seite wird ein exaktes Duplikat der alten Seite sein, welche der Editor bearbeiten kann.

Benutzerdefiniertes Willkommens-E-Mail

Als Pro-Benutzer können Sie benutzerdefinierte Vorlagen für das Willkommens-E-Mail festlegen. Dies können Sie in den Benutzereinstellungen, gleich unter dem Feld für eine benutzerdefinierte Domain oder den Pro-Funktionen (wie bspw. Branding), einstellen. Es gibt eine Reihe von Variablen, wie bspw. den Login-Link, den Namen, die Emailadresse oder das vom System generierte Passwort, die man in das Mail einbinden kann. Wir empfehlen Ihnen, zumindest die Passwort-Variable zu verwenden.

RSS Feeds für Seitenänderungen

Pro Benutzer verschaffen Sie sich Zugriff zu speziellen RSS Feeds, um über Änderungen Ihrer Webseite informiert zu bleiben.

  • Alle Änderungen: dieser Feed ist in Ihrer Standard-Kontrollkonsole verfügbar.
  • Änderung einer Webseite: dieser Feed ist in Ihrer Projektkonfiguration verfügbar
  • Änderungen einer Einzelseite: dieser Feed ist auf der Revisionverlaufsseite verfügbar.

Welchen Feed-Reader auch immer Sie benutzen, er muss Benutzerauthorisierung unterstützen weil Ihr Cushy-Login benÖtigt wird um sich die Feeds ansehen zu kÖnnen. Wenn Ihr Reader dies nicht unterstützt (z.B. Google Reader) gibt es einen Workaround durch die Dienstleistung von freemyfeed .