Schattenboxen mit Weblication

Navigation

08. Nov 2012

Über CSS-Varianten lässt sich die Darstellung von Weblics noch flexibler, schneller und einfacher anpassen.

In der aktuellen BASE Version 2.x können Weblics über CSS-Varianten gestaltet werden. Während bisher entweder Konfigurationseinstellungen, wie im Falle von Inhaltsboxen oder Zeilentemplates, wie im Falle von Banner-Slider und Bildergalerien, genutzt wurden, um unterschiedliche Darstellungen einzubinden, werden diese nun vollständig über CSS definiert.

Der Redakteur kann also bei den eingefügten Weblics die gewünschte und im CSS zur Verfügung gestellte Layout-Varianten auswählen. Dadurch werden für Banner-Slider und Bildergalerien z.B. nur nur ein einziges Zeilen-Template benötigt.

Die Darstellung von Boxen z.B. kann so rein über die CSS um beliebige Varianten erweitert werden. Varianten kann man entweder manuell im CSS erstellen oder mit Hilfe der neuen Layout-Verwaltung importieren.

Schattenboxen importieren

Angenommen Sie wollen die Darstellung aller bereits eingebundenen neutralen Boxen um einen Schatten erweitern. Sie können dazu, wie bisher üblich, die CSS-Definition direkt anpassen. Sie können nun in der Layout-Verwaltung aber auch über den Reiter "Styles einspielen" die dafür benötigten Styles direkt in die CSS-Datei einspielen.

Ursprüngliche Styles der Boxen

.elementBox_var0 {margin:0 0 20px 0;overflow:hidden;background-color:$backgroundColorBoxBlank;border:solid 1px #e0e0e0;padding:14px;padding-bottom:5px}

Eingespielte Styles, um die Boxen der Variante 0 um einen Schatten zu erweitern

.elementBox_var0 {*;box-shadow:4px 6px 10px rgba(0, 0, 0, 0.5)}

CSS nach dem Einspielen der Schatten für die Boxen

.elementBox_var0 {margin:0 0 20px 0;overflow:hidden;background-color:$backgroundColorBoxBlank;border:solid 1px #e0e0e0;padding:14px;padding-bottom:5px;box-shadow:4px 6px 10px rgba(0, 0, 0, 0.5)}

Neben speziellen Styles kann man auch ganze Varianten importieren. Will man also die bereits vorhandenen Boxen belassen und eine zusätzliche Variante anbieten, kann man diese komplett importieren.

Import einer neuen Varianten für Inhaltsboxen mit Schatten

/*@wCssFragment{class:elementBox;variant:2;caption:Box mit Schatten}*/
.elementBox_var2                {margin:0 0 20px 0;overflow:hidden;background-color:$backgroundColorBoxBlank;border:solid 1px #e0e0e0;padding:14px;padding-bottom:5px;box-shadow:4px 6px 10px rgba(0, 0, 0, 0.5)}
.elementBox_var2 p,
.elementBox_var2 a,
.elementBox_var2 h1,
.elementBox_var2 h2,
.elementBox_var2 h3,
.elementBox_var2 h4,
.elementBox_var2 li             {color:$fontColorBoxBlank}

Banner-Slider und Bildergalerien importieren

Nach dem gleichen Prinzip kann man auch Varianten für Banner-Slider oder Bildergalerien importieren. Wenn Sie eine der folgenden Varianten importieren, steht diese sofort im Projekt zur Verfügung.

/*@wCssFragment{class:listBannerSlider;variant:15;caption:Bild Hintergrund, Navigation unten rechts mit Position}*/
.listBannerSlider_var15                                                                      {position:relative}
.listBannerSlider_var15 .listMoverBack                                                       {display:none;cursor:pointer;position:absolute;left:0;top:50%;margin-top:-15px;width:30px;height:30px;z-index:2;background-color:#ffffff;background-image:url(/wGlobalProject/wGlobal/layout/images/links/back.gif);background-repeat:no-repeat;background-position:center}
.listBannerSlider_var15 .listMoverForward                                                    {display:none;cursor:pointer;position:absolute;right:0;top:50%;margin-top:-15px;width:30px;height:30px;z-index:2;background-color:#ffffff;background-image:url(/wGlobalProject/wGlobal/layout/images/links/next.gif);background-repeat:no-repeat;background-position:center}
.listBannerSlider_var15 .listMoverBack:hover,
.listBannerSlider_var15 .listMoverForward:hover                                              {background-color:#f0f0f0}
.listBannerSlider_var15 .listEntries                                                         {width:100%;position:relative;overflow:hidden;margin:0;}
.listBannerSlider_var15 .listEntries .listEntriesInner                                       {}
.listBannerSlider_var15 .listEntries .listEntry                                              {display:none;overflow:hidden;position:relative}
.listBannerSlider_var15 .listEntries .listEntryInner                                         {padding:6px;border:solid 1px #a0a0a0}
.listBannerSlider_var15 .listEntries .listEntrySelected                                      {display:block}
.listBannerSlider_var15 .listEntries .listEntryButtons                                       {position:absolute;top:2px;right:0}
.listBannerSlider_var15 .listEntries .listEntry a                                            {text-decoration:none}
.listBannerSlider_var15 .listEntries .listEntryImage                                         {display:block;width:100%}
.listBannerSlider_var15 .listEntries .listEntryInfoLayer                                     {width:100%}
.listBannerSlider_var15 .listEntries .listEntryTitle                                         {padding:10px 0 0 10px;font-size:19px;line-height:22px;}
.listBannerSlider_var15 .listEntries .listEntryDescription                                   {padding:10px 0 10px 10px}
.listBannerSlider_var15 .listEntriesPreview                                                  {position:absolute;bottom:6px;right:2px}
.listBannerSlider_var15 .listEntriesPreviewInner                                             {text-align:right}
.listBannerSlider_var15 .listEntriesPreview .listEntry                                       {display:inline-block;zoom:1;*display:inline;cursor:pointer;padding:4px 8px 4px 8px;margin-right:4px;border:solid 1px #ffffff;background-color:#b0b0b0;color:#ffffff}
.listBannerSlider_var15 .listEntriesPreview .listEntrySelected                               {background-color:#ffffff;color:#000000;border-color:#c0c0c0}
.listBannerSlider_var15 .listEntriesPreview .listEntryProgress                               {}
.listBannerSlider_var15 .listEntriesPreview .listEntry:hover                                 {background-color:#f0f0f0;color:#000000;border-color:#c0c0c0}
.listBannerSlider_var15 .listEntriesPreview .listEntryInner                                  {}
.listBannerSlider_var15 .listEntriesPreview .listEntry a                                     {}
.listBannerSlider_var15 .listEntriesPreview .listEntryImage                                  {width:48px;height:32px;display:none}
.listBannerSlider_var15 .listEntriesPreview .listEntryTitle                                  {display:none}
.listBannerSlider_var15 .listEntriesPreview .listEntryDescription                            {display:none}
.listBannerSlider_var15 .listEntriesPreview .listEntryPosition                               {display:inline}

Variante einer Bildergalerie

/*@wCssFragment{class:listPictureGallery;variant:8;caption:Großansicht mit minimaler Blätterfunktion oben rechts}*/
.listPictureGallery_var8                                                                      {}
.listPictureGallery_var8 .listInner                                                           {position:relative;overflow:hidden}
.listPictureGallery_var8 .listMoverBack                                                       {cursor:pointer;position:absolute;right:32px;top:0px;width:32px;height:32px;z-index:2;background-color:rgba(255, 255, 255, 0.5);background-image:url(/wGlobalProject/wGlobal/layout/images/links/back.gif);background-repeat:no-repeat;background-position:center}
.listPictureGallery_var8 .listMoverForward                                                    {cursor:pointer;position:absolute;right:0;top:0px;width:32px;height:32px;z-index:2;background-color:rgba(255, 255, 255, 0.5);background-image:url(/wGlobalProject/wGlobal/layout/images/links/next.gif);background-repeat:no-repeat;background-position:center}
.listPictureGallery_var8 .listMoverBack:hover,
.listPictureGallery_var8 .listMoverForward:hover                                              {background-color:#ffffff}
.listPictureGallery_var8 .listEntries                                                         {width:100%;position:relative;overflow:hidden;margin:0 0 10px 0;}
.listPictureGallery_var8 .listEntries .listEntriesInner                                       {}
.listPictureGallery_var8 .listEntries .listEntry                                              {display:none;position:relative;overflow:hidden;-w-animation:fadeIn}
.listPictureGallery_var8 .listEntries .listEntrySelected                                      {display:block}
.listPictureGallery_var8 .listEntries .listEntryButtons                                       {position:absolute;top:2px;right:0}
.listPictureGallery_var8 .listEntries .listEntry a                                            {text-decoration:none}
.listPictureGallery_var8 .listEntries .listEntryImage                                         {display:block;width:100%;-w-picture-mode:crop}
.listPictureGallery_var8 .listEntries .listEntryTitle                                         {display:none}
.listPictureGallery_var8 .listEntries .listEntryDescription                                   {display:none}
.listPictureGallery_var8 .listEntriesPreview                                                  {display:none}

Beliebige Styles importieren

Nicht nur Weblics-Varianten, sondern beliebige Styles können auf die beschriebene Weise importiert werden. So können Sie wiederkehrende Designs mit einem Klick in ein neu installiertes Projekt importieren.

Das Einspielen von Styles ist ein Grundprinzip der aktuellen Layout-Verwaltung. Wenn Sie oben rechts die Auswahl "Styles vor dem Einspielen anzeigen" aktivieren, werden Sie sehen, dass jede Layout-Auswahl genau dieses Prinzip nutzt. Die komplette CSS-Datei lässt sich über eingespielte Styles anpassen.