Elemente für benutzerdefinierte Design-Varianten
Wenn Sie ein Design entwerfen, ordnen Sie sinnvollerweise Farbpaletten und Logografiken verschiedenen Substyles zu. Wählen Sie ein Substyle aus, werden automatisch die zugeordneten Komponenten in die Website generiert.
Unabhängig davon können Sie aber auch entscheiden, ein beliebiges Bild als Eyecatcher auszugeben. Dafür wählen Sie in der Designvorschau als Designvariante "benutzerdefiniert" aus.
Das dürfte bekannt sein. Damit dieses Verfahren auch mit Ihrem selbst kreierten Design funktioniert, sollten folgende Paramenter überprüft werden:
- substyle_user.ccml angelegt?
- preview_user.gif möglichst designgetreu erstellt?
- stimmen in der config.ccml die Grafikformate für das Benutzerlogo mit den CSS- Designvorgaben überein?
- Eyecatcher korrekt im Stylesheet eingebunden?
substyle_user.ccml
preview_user.gif
Wichtig ist, alle Formate, die in den speziellen Substyles definiert wurden, auch in die benutzerdefinierte Variante einzupflegen. Beim Design MyDesign beispielsweise wurden die Navigationsbuttons je nach eingesetzer Farbpalette mit unterschiedlichen Farbklassen eingefärbt. Das muss also auch im substyle_user.ccml eingetragen werden.
<cc:*>
--------------------------------------------------
Web2Date
Layout: MyDesign
Datei: substyle_user.ccml
Funktion: SubStyle Benutzerdefiniert
--------------------------------------------------
</cc:*>
<cc:userpicture obj="pic.eyecatcher" type="logo">
<cc:set obj="usercolor.design" value="&usercolor.bright">
<cc:set obj="mycompany" value="IhrFirmenname">
<cc:set obj="mywebdesigner" value="www.IhrWebdesinger.de">
/*Hintergrund für footer und you are here (genauso eingefärbt wie der eyecatcher*/
<cc:picture obj="pic.footergradient" src="pic_footergradient.gif" dst="footergradient.gif" mapwhiteto="usercolor.bright" mapblackto="&usercolor.medium">
<cc:picture obj="pic.youareheregradient" src="pic_youareheregradient.gif" dst="youareheregradient.gif" mapwhiteto="usercolor.bright" mapblackto="&usercolor.medium">
/*Flyoutmenue Hauptnavigation */
<cc:picture obj="pic.main_navi_bg" dst="main_navi_bg.gif" src="pic_main_navi_bg.gif">
<cc:picture obj="pic.main_navi_left_both" dst="main_navi_left_both.gif" src="pic_main_navi_left_both.gif" mapwhiteto="&usercolor.alt.bright">
<cc:picture obj="pic.main_navi_right_both" dst="main_navi_right_both.gif" src="pic_main_navi_right_both.gif" mapwhiteto="&usercolor.alt.bright">
/*Flyoutmenue Commonnavigation */
<cc:picture obj="pic.common_left_both" dst="common_left_both.gif" src="pic_common_left_both.gif" mapwhiteto="&usercolor.bright">
<cc:picture obj="pic.common_right_both" dst="common_right_both.gif" src="pic_common_right_both.gif" mapwhiteto="&usercolor.bright">
/*SubHauptnavigation */
<cc:picture obj="pic.on" dst="pon.gif" src="pic_on.gif" mapwhiteto="&usercolor.medium">
<cc:picture obj="pic.off" dst="poff.gif" src="pic_off.gif" mapwhiteto="&usercolor.dark">
CSS
.eyecatcher {
width: 975px;
height: 110px;
background: #AC6B1B url(../images/<cc:print value="&pic.eyecatcher.filename">) no-repeat;
margin: 0px auto;
padding-top: 0px;
text-align: center;
}
