Dateien im Theme-Ordner

In der Datei theme.config werden alle im Theme verwendeten Grafiken generiert. (In diesem Text werden Codes dargestellt, die @-Zeichen verwenden. Das Leerzeichen vor oder hinter den Zeichen muss entfernt werden.)

 

Möchte man die Größe des verwendeten Hintergrundbanners ändern, reicht es nicht, das Banner in einen der Ordner in C:\Programme\SmartStore\SmartStore.biz 5\Common\Banners einzufügen. Man muss außerdem die neue Größe einstellen.

 

   <image-class id="_logo"
   auto-size="no"
   export-type="jpg"
   export-jpg-config="quality:100"
   img-height="150"
   img-width="900"
   background-repeat="adjust"
   background-color="@ theme-param:header-color @" />

 

Die Grafiken für die Buttons werden folgendermaßen generiert: Zunächst wird die Image-Klasse für große und kleine Grafiken angegeben.

 

  <image-class id="_default"
   auto-size="to-text"
   font-face="AvantGarde Bk BT" Schriftart
   font-size="10" Schriftgröße
   font-bold="1"
   font-smoothing="1"
   font-color="#FFFFFF" Schriftfarbe
   text-padding-top="3" text-padding-bottom="5" text-padding-right="10" text-padding-left="30" Abstand zum Rand
   background-color="yellow"
   transparent-color="yellow">
   <drawing>
    <pens>
     <pen id="Outline" color="#FFFFFF" alignment="center" /> Rahmenfarbe
    </pens>
    <brushes>
     <gradient-brush id="Fill" point1="x:0;y:0" point2="x:0;y:[[height]]"
      color-blend="rgb(165,165,165):0; rgb(175,175,175):40; rgb(145,145,145):50; rgb(115,115,115):60; rgb(115,115,115):100"
     /> Verlaufsfarbe
     <solid-brush id="InnerFill" color="#FFFFFF33" /> Randfarbe
    </brushes>
    <draw>
     <set-output-mode smoothing-mode="none" />
     <draw-rounded-rect brush-ref="Fill" radius="5" rect="x:-1;y:-1;w:[[width]]+1;h:[[height]]+1" />
     <set-output-mode smoothing-mode="high-quality" compositin-quality="assume-linear" />
     <draw-rounded-rect brush-ref="InnerFill" pen-ref="Outline" radius="3" rect="x:1;y:1;w:[[width]]-3;h:[[height]]-3" />
    </draw>
   </drawing>
  </image-class>
  
  <image-class id="_default_small"
   auto-size="to-text"
   text="AB"
   font-face="AvantGarde Bk BT"
   font-size="10"
   font-bold="1"
   font-smoothing="1"
   font-color="#FFFFFF00"
   text-padding-top="3" text-padding-bottom="5" text-padding-right="7" text-padding-left="7"
   background-color="yellow"
   transparent-color="yellow">
   <drawing>
    <pens>
     <pen id="Outline" color="#FFFFFF" alignment="center" />
    </pens>
    <brushes>
     <gradient-brush id="Fill" point1="x:0;y:0" point2="x:0;y:[[height]]"
      color-blend="rgb(165,165,165):0; rgb(175,175,175):40; rgb(145,145,145):50; rgb(115,115,115):60; rgb(115,115,115):100"
     />      

    <solid-brush id="InnerFill" color="#FFFFFF33" /> 
    </brushes>
    <draw>
     <set-output-mode smoothing-mode="none" />
     <draw-rounded-rect brush-ref="Fill" radius="5" rect="x:-1;y:-1;w:[[width]]+1;h:[[height]]+1" />
     <set-output-mode smoothing-mode="high-quality" compositin-quality="assume-linear" />
     <draw-rounded-rect brush-ref="InnerFill" pen-ref="Outline" radius="3" rect="x:1;y:1;w:[[width]]-3;h:[[height]]-3" />
    </draw>
   </drawing>
  </image-class>

 

Hier wird das Aussehen der Buttons bestimmt. Nun werden aus den Klassen die Grafiken generiert:

 

   <image name="button_addtobasket_small" class-id="_default_small"
   >
   <drawing><draw class-inherit-mode="append">
    <draw-image src="images/cart.png" dst-rect="w:[[width]];h:[[height]]" position="center-center" />
   </draw></drawing>
  </image>

 

Hier werden auch die kleinen Bildchen eingefügt, die im Button erscheinen, z.B. ein Pfeil oder der kleine Warenkorb. Das Blaue ist der Name der Grafik. Das Orange ist die Beschriftung, die aus den Inhaltstexten abgerufen wird.

 

Fertig sieht das ganze so aus:

 

 

Man kann auch eigene Grafiken in die theme.config einfügen, oberhalb von </images>.

Soll es ein Button sein, muss der Code wie folgt aussehen:

 

    <image name="bildname" class-id="_default"
   text="Beschriftung">
   <drawing>
    <draw class-inherit-mode="append">
     <draw-image src="images/arrow.png" dst-rect="x:2;y:4;w:22;h:20" position="center-center"/>
    </draw>
   </drawing>
  </image>

 

Blau = Bildname, rot = Image-Klasse, grün = kleines Bildchen, welches im Theme-Ordner vorhanden sein muss, orange = Ausrichtung des Bildchens. Ergebnis:

 

 

Soll es ein einfaches Bild sein, fügt man zunächst eine Grafik in den Theme-Ordner ein. Diese wird wie folgt aufgerufen:

 

 <image name="bildname" src="images/bild.png" auto-size="to-image"/>

Man kann diese Grafiken in ein ssml- oder Absatzmodul einfügen:

 

<img src="@ image:bildname @" border="0">

 

Zwar kann man eine Grafik auch in den Medienmanager importieren, sich die ID merken und die Grafik mit <img src="@ media:ID @" border="0"> aufrufen. Möchte man die Grafik jedoch in mehreren Projekten verwenden, würde sich die ID ändern. Durch das Einfügen in der theme.config eines Themes bleibt der Bildname gleich.