Erweiterte Designeigenschaften im eigenen Design verwenden

[blue]

Einfaches Beispiel:

Eine Schalter anlegen für das Einblenden einer Uhr im Kopf der Seite...

in der Config.ccml den Schalter definieren...

<cc:property id="design.topic.uhr" caption="Uhr" folder="Design" targettype="topic" type="combo" default="aus" comboitems="aus|an">

Web to Date neu starten, damit das eingelesen wird...

in der Navigation.ccml vor dem </body> am Ende der Seite...

<cc:if cond="&topic.properties.design.topic.uhr='an'">
<div id="uhr">
<embed src="http://www.webtodateforum.de/uhr.swf" width="60" height="60" wmode="transparent" type="application/x-shockwave-flash">
</div>
</cc:if>


In der style_design.css den Container für die Uhr anlegen...

#uhr {
position: absolute;
left: 50%;
margin-left: 408px;
top: 3px;
z-index: 20;
text-align: right;
}

Jetzt findest Du unter Seiteneigenschaften | Erweitert einen Schalter Uhr an aus hier kann nach belieben auf jeder Seite die Uhr an- oder abgeschaltet werden..

Genau so kann man das mit allen möglichen Sachen anstellen... z.B. eine transparente Grafik über den Seitenkopf legen, eine Cumuluswolke oder ein Pagepeel einblenden...

Das ist genial und wird Web to Date Designs richtig gut konfigurierbar machen...

[Selar]

Das hört sich sehr gut an nur bin ich mir nicht sicher ob ich so was hinbekomme!

[blue]

Naja... das war ja noch einfach...

[Selar]

Für Dich bestimmt für mich nicht!
Habe gerade gesehen das es nicht alle Erweiterte Designeigenschaften in allen Designs gibt!
Bild für Eyecatcher geht z.B. gerade in Zeus nicht warum auch immer, doch das hätte ich gern dort auch!!

[Selar]

Ich habe gerade mal rumprobiert und meine Portalseite, die ich auch zum Testen benutze auf das Design Carbon mit Schwarzweißbanner sieht das recht gut aus.
Da kann ich aber machen was ich will, wenn ich benutzerdefinierte Erweiterte Design Eigenschaften erstelle und sie anwende geschieht nichts in der Vorschau sehe ich nichts! Was kann da falsch sein??

[Selar]

Habe es gerade noch mal versucht, aber nix passiert!! Nur die voreingestellten Sachen gehen die benutzerdefinierten nicht.

Hier seht selber http://m-gutsche.de/ hier funktioniert es mit dem anderen Eyecatcher (ist voreingestellt) aber die Farbe der Seite ändert sich nicht (benutzerdefiniert) http://www.m-gutsche.de/zachary-quinto/index.php

Hier wollte ich eine Text einfügen (benutzerdefiniert) auch nichts zu sehen http://www.m-gutsche.de/meine-ragdollwelt/index.php

[IMAC]

Hi blue,

wie immer, ein starker Tipp!

!!DANKE!!

[nebbia segreta]

Hallo zusammen,

ich befürchte hier herrscht ein Missverständnis: Die "benutzerdefinierten dynamischen Eigenschaften" haben nur indirekt etwas mit den "designspezifischen dynamischen Eigenschaften" zu tun.

Erste, also die "benutzerdefinierten dynamischen Eigenschaften" sind primär für die neuen Plugins "erweiterte Suche in Hauptseiten, Unterseiten und für Produkte" etc. interessant und werden im jeweiligen Projekt gespeichert. Sie sind also projektabhängig und haben nichts mit den Designs zu tun.

Letztere, also die "designspezifischen dynamischen Eigenschaften" sind vermutlich das, worum es hier primär geht: das Anpassen und "tunen" von Designs.

Diese Änderungen werden zwar auch im Projekt gespeichert - die Definition der Variablen erfolgt jedoch auf Designebene im jeweiligen Designverzeichnis - also normalerweise unter ..\databecker\web to date 7\designs\designname.

Die designspezifschen dynamischen Eigenschaften finden sich je nach Typus unterhalb der Website- und FTP-Eigenschaften, auf Hauptseitenebene, Absatzebene, Unterseitenebene und auf Produktebene. Und zwar jeweils im Reiter "Erweitert". Hier kann man Allerlei einstellen. Egal ob man möchte, dass das Design zentriert, das Marginalbild rechts oder der Absatz hervorgehoben ist. Ein Klick genügt und die Änderung ist ohne Modifikation am CCML/CSS für jeden Laien gemacht.

Möchte man nun als Semi-Pro darüber hinaus sein Design mit weiteren designspezifische dynamische Eigenschaften optimieren, so bedarf es Anpassungen an zweierlei Stellen:

Wie "blue" bereits schrieb einerseits an der config.ccml des jeweiligen Designs und am entsprechenden Pendant in den CCML/CSS-Dateien des Designs.

Beispiel:

Eine prädestinierte Datei für die Modifikation ist unter anderem die style_design.css. Diese Datei steuert die Darstellung diverser designspezifischen Elemente wie bspw. die der Sidebar, welche im folgenden Beispiel angepasst werden soll.
Der Originalinhalt der style-design.css hinsichtlich der Sidebar lautet wie folgt:


#sidebar {
width: 250px;
margin: 1;
float: right;
padding: 10px 20px;
background-color: <cc:print value="#F2F2F2">;
...
}

Die Breite der Sidebar (width: 250px;)ist in diesem Fall bei fix 250 Pixel. Über den Befehl <cc:print> kann nun statt der definierten Konstante eine Variable zur Laufzeit eingefügt werden.


#sidebar {
width: <cc:print value="&site.properties.design.sidebar.width">px;
margin: 1;
float: right;
padding: 10px 20px;
background-color: <cc:print value="#F2F2F2">;
...
}



Das Vorgehen ist dabei eigentlich denkbar einfach: zunächst wird eine Variable in der config.ccml definiert, welche anschließend in der betroffenen CCML/CSS-Datei Verwendung findet indem man die entsprechende Konstante gegen die Variable austauscht. Danach lässt sich diese Variable bequem aus dem Backend von web/shop to date modifizieren ohne jedes mal erneut in die CCML/CSS-Dateien gehen zu müssen.

Neben diesem Komfort-Plus werden auch weitere Dinge möglich, welche zuvor undenkbar waren. Bspw. das man jedem Absatz einer Hauptseite unterschiedliche Eigenschaften zuweisen kann. Dies war zuvor selbst für Semi-Pros nicht möglich, da es keine Möglichkeit gab den Renderprozess von web/shop to date zu unterbrechen eine Modifikation vorzunehmen und anschließend wieder fortzuführen. Doch dies ist nun Geschichte.

Kommen wir zur Technik:

Zunächst einmal für diejenigen, die es interessiert die Parameterliste der dynamischen Eigenschaften:

Parameter "type":
Typenbestimmung der Variable der Dynamischen Eigenschaft. Soll bspw. die Farbe eines Designelements veränderbar sein, dann empfiehlt sich der type color, welcher den Farbdialog von web/shop to date aufruft.
Beispiel: type=“string“

• string Einzeilige Textbox
• text Mehrzeilige Textbox
• long Ganzzahl
• double Fließkommazahl
• boolean ja/nein Checkbox
• color Farbwahldialog
• cobo Combobox
• link Linkdialog
• date Datepicker
• picture Bildwahldialog

Parameter "targettype":
Zielbestimmung der Dynamischen Eigenschaft. Bestimmt auf welchen Seitenbereich sich die Eigenschaft bezieht bzw. beschränkt.
Beispiel: targettype=“site“

• site gesamte Webseite
• topic Hauptseiten
• page Unterseiten
• paragraph Absätze
• sitebar Sitebar
• download Downloads
• picture Bilder

Parameter "targetsubtype"
Zielbestimmung der Dynamischen Eigenschaft. Bestimmt auf welchen Sub-Seitenbereich sich die Eigenschaft bezieht bzw. beschränkt.
Beispiel: targetsubtype=“text“

• N/A Alle Absatztypen (einfach frei lassen)
• text Textabsatz
• picture Grafikabsatz
• table Tabellenabsatz
• list Aufzählung
• teaser Aufmacher
• form Formular
• html HTML-Element
• movie Medienclip
• buy Kauf-Funktion
• plugin Plugin
• alias Schattenkopie
• tab Registerkarte
• product Produkt (Kauffunktion)

Parameter "id":
Die "id" ist der verwendete Variablenname, welcher in den CCML und CSS Dateien verwendet wird. Die Variablen sollten per Punktnotation aufgebaut sein.
Bspw.: id="design.sidebar.color.background" um die Hintergrundfarbe der Sidebar zu definieren und id="design.sidebar.color.text" um die Textfarbe zu bestimmen. Dank der Punktnotation behält man auch bei vielen Variablen noch den Überblick.

Parameter "folder":
Der Parameter "folder" strukturiert die Dynamischen Eigenschaften im Backend und erleichtert so die Übersicht. Soll bspw. die Sidebar mittels diverser Dynamischer Eigenschaften modifiziert werden. Also bspw. Form, Hintergrundfarbe, Textfarbe, Breite, Eckenrundung etc. dann sollte man den folder="Sitebar" nennen.


Parameter "caption":
Mittels des Parameters "caption" wird die Beschriftung der Dynamischen Eigenschaft festgelegt. Die Definition erfolgt in Hochkommata und sieht bspw. so aus caption="Beschreibung der Dynamischen Eigenschaft"

Parameter "default":
Der Parameter "default" definiert die Standardeinstellung; sofern der Anwender keine alternativen Eingaben vorgibt. Es empfiehlt sich immer einen Defaultwert anzugeben. Bspw.: default= „100“

Parameter „min“ & „max“
Begrenzt den Wertebereich bspw. bei „long“ auf eine Range. Bspw.: min=“10“; max=“100“ falls der Anwender lediglich Zahlen zwischen 10 und 100 eingeben darf.

Parameter „maxleng“
Begrenzt die Anzahl der möglichen Zeichen bei „string“ und „text“. Bspw.: maxleng=“20“ für maximale Wortlänge von 20 Zeichen.

Parameter „Comboitems“
Definiert bei „combo“ die vom Anwender wählbaren Einträge. Diese sind mittels „|“ untereinander zu trennten.
Bspw.: comboitems=“Canon|Nikon|Pentax|Olympus“

Parameter „fst“
Der Parameter definiert, ob der Inhalt der Dynamischen Eigenschaft für die Suche in den Volltext-Index übernommen werden soll oder nicht.
Optionen: fst=“1“ ja (Volltext-Index)
fst =“0“ nein (kein Volltext-Index)

Ich hoffe, ich konnte weiterhelfen.

Viele Grüße und viel Spaß beim Experimentieren,
nebbia segreta

[Selar]

Danke, das ist ja mal eine tolle umfangreiche Erklärung

[blue]

Ja.. Super... das hilft schon mal weiter ;-)