Volltextsuche
wThumbnail::createThumbnail
verkryptet werden soll useTransparency [|no] Falls keine Transparenz benutzt werden darf, muss der Wert auf no stehen backgroundColor Falls die Hintergrundfarbe definiert werden soll (z.B. #fcfcfc) hd [|1] Falls ein HD-Bild generiert werden soll quality
HD-Funktion in BASE-Projekten nachrüsten
von mindestens 2 hat} */ @media ( -webkit-min-device-pixel-ratio: 2) { #blockTop #searchBox #searchSubmit { background-image: url (/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/backgrounds/button-search@2x.png) ; background-size: 22px
Bedeutung der Mode-Einstellungen für die Generierung von Vorschaubildern
Dieser Artikel beschreibt, was die einzelnen Modus-Einstellungen zur Erstellung von Vorschaubildern (Thumbnails) bedeuten und bewirken.
Bildergalerie: Hintergrundfarbe eingebetteter Bilder festlegen
variant: 0; caption: Standard; caption-en: Default} */ .listPictureGallery_var0 { /* ... */ -w-option-picture-backgroundColor: ''; /* Hintergrundfarbe bei transparenten Bildern */ /* ... */ -w-option-preview-picture-backgroundColor: ''; /*
Navigationspunkte unterschiedlich darstellen
design.css zur Formatierung der entsprechenden Klassen ... #navigationMain li.navLevel1.blue > a { color: #FFFCCC; background-color: #6060FF} #navigationMain li.navLevel1Default.blue > a { color: #FFFCCC; background-color: #6060FF}
So schreiben Sie Hintergrundbilder sprachabhängig über CSS
über CSS Veröffentlichungsdatum: 16. März 2011 Änderungsdatum: 26. Juli 2012 hintergrundbild hintergrundgrafik background-image css Dieser Artikel beschreibt, wie Sie ein Hintergrundbild sprachabhängig über CSS im Kopf der Datei
So schreiben Sie Hintergrundbilder der Navigation in eine CSS-Datei
19. April 2010 Änderungsdatum: 11. Januar 2012 navigation css hintergrundbild hintergrundgrafik background-image Dieser Artikel beschreibt, wie Sie es einem Redakteur ermöglichen, Hintergrundbilder über die Pflege eines
So definieren Sie die Hintergrundfarbe für WYSIWYG-Felder im Editor
12. Mai 2010 Änderungsdatum: 24. September 2013 editor wysiwyg hintergrundfarbe hintergrundbild background formatierung Dieser Artikel beschreibt, wie Sie die Hintergrundfarbe und andere Formatierungen für WYSIWYG-Felder in
-w-background-target
Variante 31 des BannerSlider das Bannerbild als Hintergrund für den HTML-Body .listBannerSlider_var31 { /* ... */ ; -w-background-target: body} Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und Weblics® !
-w-use-orig-backgroundimage
Individual; caption: Individuell; caption: Individuell; livepreview: yes} */ .elementBox_var111 { -w-use-orig-backgroundimage: yes; /* ... */ ;} Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und Weblics®
Hintergrundbild dynamisch pro Navigationspunkt definieren
"> B ... name= " imgBackgroundLink " editor= " file " value= " " context= " /IhrAssetsProjekt/img/background-images " caption= " Hintergrundgrafik " editable= " 1 "/> ... Ein Navigationspunkt wird über die o.g.
Hintergrundfarbe und Schriftfarbe in Inhaltsbereichen (z.B. Fußbereich)
class: elementSectionBackgroundColor; variant: 610; caption: Hintergrund Fußbereich; caption-en: Footer; preview-color: # {$backgroundColorFooter} ; livepreview: yes; isdarkbackground: yes; contentgroups: content5} */ .elementSectionBackgroundColor_var610 { $
CSS3 - gewusst wie
Version Veröffentlichungsdatum: 13. März 2012 Änderungsdatum: 24. Januar 2014 css css3 gradient shadow box border background CSS3 für unterschiedliche Browser schnell und einfach einsetzen. Mit CSS3 können Sie Effekte, wie z.B. Schatten,
-w-picture-background-color
in Bildergalerie-Variante 999 .listPictureGallery_var999 .listEntries .listEntryImage { /* ... */ ; -w-picture-background-color: #FFCC33; /* ... */ } Beispiel 2: Setzt die Hintergrundfarbe für das zu generierende Vorschaubild in
Hintergrundbilder dynamisch anzeigen
= wRepository :: grepDocumentsDir ( '/default-wAssets/img/demo' , '(jpg|png)' , array( 'caseInsensitive' => true )); $backgroundImage = $imagesDir [ rand ( 1 , count ( $imagesDir ) - 1 )]; wEnv :: setGlobalValue ( 'pathBackground' , $backgroundImage ); //
Hintergrundbilder global, pro Navigationspunkt oder pro Seite definieren
Hintergrundbilder können entweder global für alle Seiten, navigationsabhängig pro Navigationspunkt oder auch individuell für jede Seite definiert werden. Auch Kombinationen sind möglich. Dabei überspielt dann der navigationsabhängige Hintergrund den globalen Hintergrund und der seitenspezifische Hintergrund wiederum den navigationsabhängigen.
iOS 14 - Anpassung zu Hintergrundbildern
caption: Hintergrund ist fixiert; caption-en: Fix position} */ .elementSectionParallaxBackground_var100 { -w-option-backgroundimageAsPicture: 0; > .backgroundContainer > div, > .backgroundContainer > picture { background-attachment: fixed; @at-root
Formatierung der Druckansicht beeinflussen
"/> Beispiel: Inhalt der CSS-Datei /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/print.css /* Druckansicht */ body { background: transparent; color: #000000; } #blockHeaderPrint { background: #ffffff; padding: 1rem; } .logoImgFull { display: none
Link-Icons (SVG) individualisieren
.isLightBackground, .isDarkBackground .isLightBackground, .isDarkBackground .isInverseBackground { a. intern: before { background-image: url ("# {$wGlobalProjectPath} /wGlobal/layout/images/links/intern.svg?stroke=# {$colorLinkIcon} ") } a. extern:
Deaktivierung des Benutzerprofils
"> /*# Tabellen */ body {margin:20px;padding:0;font-family:Arial, Sans-serif, Helvetica;font-size:12px;color:#000000;background-repeat:repeat;background-attachment:fixed;background-color:#bcbcbc} h1
wPageCur::registerCss
eingebettete Style-Angaben im Head-Bereich select= " php:functionString('wPageCur::registerCss', '#blockContent {background-color:red}') "/> select= " php:functionString('wPageCur::registerCss', concat('body {background-image:url(',
Beliebige Elemente dynamisch mit PHP einbinden
Text und Hintergrundbild werden abhängig von der Tageszeit ausgegeben if( date ( 'H' ) < 12 ){ $elementdata [ 'backgroundImage' ] = '/devAssets/img/devblog/daytime/morning.jpg' ; $elementdata [ 'text' ] = 'Guten Morgen' ; } else if( date ( 'H' ) < 18
Tabellen mit dem Tabelleneditor gestalten
der Mobile First /* Tabelle für Preisliste 3-spaltig - pricelist (Preisliste) */ table.pricelist { width: 100%; background-color: $backgroundColorTable; border: none; margin-bottom: 12px; border-collapse: separate; border-spacing: 0; th {
Sprachabhängige Inhalte über CSS definieren
after { content: 'mehr lesen ...'; float: right; text-decoration: none; margin-top: 10px; padding: 4px 12px; background-color: #f0f0f0} @at-root html: lang (en) # {&} . listEntryDescription: after { content: 'read more ...'; float:
Cookies - Informationen zum Datenschutz
*/ #cookieNotice { display: none; position: fixed; overflow: hidden; z-index: 1000; bottom: -80px; left: 0; width: 100%; background-color: #d0d0d0; border-top: solid 1px #a0a0a0; padding: 10px; text-align: center;} .pagestatus-loaded #cookieNotice {
Einsatz von Isotope Darstellungen für Bildergalerien
visible; box-sizing: border-box; border: none; padding: 1px; margin: 0 2px} .listDefault_var3601 . listEntry: hover { background: none} .listDefault_var3601 .listEntryInner { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0;
Datenschutzkonforme Cookies in Weblication
jQuery('#cookieNotice').prependTo('body'); jQuery('#cookieNoticeCloser').show(); } #cookieNotice {position:relative;background-color:#c0c0c0;border-bottom:solid 1px #a0a0a0;padding:10px;text-align:center} #cookieNoticeCloser
Abarbeitung der Skriptausführung bei der XSLT-Transformation
Variablen über php:functionString setzen und in einem Attribut auslesen select= " php:function('wEnv::setGlobalValue', 'backgroundColor', 'black') "/> test= " position() = 1 "> select= " php:function('wEnv::setGlobalValue', 'backgroundColor', 'red')
-w-editmaskExtended-backgroundvideo
Hintergrundvideos zum Inhaltsbereich-Container (Seitenelemente) .elementSection_var30 { /* ... */ ; -w-editmaskExtended-backgroundvideo: yes; /* ... */ } Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und Weblics® !
-w-editmaskExtended-backgroundpositionclasses
Werte für die Position des Hintergrundbildes als Auswahlbox aus .elementBox_var33 { /* ... */ ; -w-editmaskExtended-backgroundpositionclasses: |backgroundPositionLeftTop|backgroundPositionRightTop; /* ... */ } Zu beachten: Diese CSS-Only Referenz bezieht sich
-w-editmaskExtended-backgroundimage
des Hintergrundbildes zum Singlepage-Container (Seitenelemente) .elementSection_var20 { /* ... */ ; -w-editmaskExtended-backgroundimage: yes; /* ... */ } Zu beachten: Diese CSS-Only Referenz bezieht sich vorwiegend auf BASE Classic Projekte und Weblics® !
-w-editmaskExtended-backgroundgradient
für die Verlaufseffekte im Social-Button, Variante 0 .elementSocialButton_var0 { /* ... */ ; -w-editmaskExtended-backgroundgradient: yes; /* ... */ } Social-Button Element Variante 0 mit Auswahl für Verlaufseffekte Zu beachten: Diese CSS-Only Referenz
-w-editmaskExtended-backgroundcolorpicker
für die Farbwerte der Hintergrundfarbe in Inhaltsbox Variante 111 .elementBox_var111 { /* ... */ ; -w-editmaskExtended-backgroundcolorpicker: no; /* ... */ } Inhaltsbox Variante 111 mit Auswahl der Farbwerte für die Hintergrundfarbe Zu beachten: Diese CSS-Only
-w-editmaskExtended-backgroundcolor
für die Farbwerte der Hintergrundfarbe in Inhaltsbox Variante 71 .elementBox_var71 { /* ... */ ; -w-editmaskExtended-backgroundcolor: yes; /* ... */ } Inhaltsbox Variante 71 mit Auswahl der Farbwerte für die Hintergrundfarbe Zu beachten: Diese CSS-Only
CSS-Only Referenz
Animation beim Wechsel eines Listeneintrages -w-aspectratio Definiert das Seitenverhältnis von generierten Bildern -w-background-target Definiert das Ziel eines Hintergrund-Elementes (z.B. Bannerbild) -w-clickable Definiert, ob ein Element vom
So verwenden Sie eine separate CSS-Datei im Sprachvergleich
height: 101%;} body { margin: 0; padding: 0; font-family: Arial, Sans-serif, Helvetica; font-size: 12px; color: #000000; background-color: #dddddd;} #blockMainOuter { margin: 10px auto; width: 980px; background-color: #ffffcc} /* ... */
wImage::rotate
Dreht ein Bild. (ab CMS-Version 011.002.222.000)
wImage::resize
Ändert die Bildgröße
Pflege von textbasierten Daten
anzupassen (nicht vom IE unterstützt!). Die Werte werden mit Pipe getrennt (z.B. bei zwei Radiobuttons: styles="background-color:red|background-color:blue"). notwendig: nein nutzbar bei: editor = 'select' , editor = 'checkbox' , editor =
Responsive Webdesign
... /* ursprüngliche blockMainOuter Angabe */ /* #blockMainOuter { margin: 10px auto; max-width: $widthBlockMainOuter; background-color: $backgroundColorContent; box-shadow: none} */ /* neue blockMainOuter Angabe mit fester Breite */ #blockMainOuter
Responsive Toggler-Navigation anpassen
*/ #navigationResponsiveAll { display: none; clear: both; position: relative; overflow: hidden; margin: 0; padding: 0; background-color: $backgroundColorNavigationMain;} #navigationResponsiveAll ul { list-style-type: none; margin: 0; padding: 0}
Umfangreiches Bestellformular
Anwendungsbeispiel: Formular mit allen verfügbaren Elementen
So setzen Sie eigene Formatierungen für Textfelder
" Text " value= " p "/> de:name= " Hervorgehoben " name= " Highlighted " value= " highlighted " styleInSelectbox= " background-color:yellow; "/> de:name= " Abgesoftet " name= " Light " value= " soft " styleInSelectbox= " color:#c0c0c0; "/>
So beeinflussen Sie die Fancybox-Einstellungen beim Bildelement
erforderlich. Im nachfolgenden Beispiel wurde in der design.css zum Selektor .wLightboxBackground die Definition zur background-color verändert, um einen rötlich abgedunkelten Hintergrund zu erhalten. Was bei Fancybox-Umsetzungen über den Wert
So erstellen Sie eine weitere Primärfarbe
(Ohne Unschärfeeffekt) |8 (Unschärfeeffekt) ",caption="Unschärfe",livepreviewdefault=yes'; --backgroundColorOrigin: $baseColorPrimary2; --backgroundColorRgb: rgbSplit ($baseColorPrimary2) ; --backgroundColor: $baseColorPrimary2;
Tabelle: Zeilen, Spalten und Zellen individuell formatieren
0; livepreview: yes; caption: Standard; caption-en: Default} */ .elementTable_var0 { /* ... */ tr.red, th.red, td.red { background-color: #FF0000; } /* ... */ } /* ... */ /*@wCssFragment { class: elementTableRowClass; variant: highlighted;
Unterschiedliche Varianten in Listenerweiterungen auswählbar machen
"/> test= " $objectListVariant = 'special' "> style= " position: absolute;top: 0;left: -4px;height:20px;width:4px;background-color: orange;border: 1px solid tomato; "/> test= " $objectListVariant = 'important' "> style= " position:
Unterschiedliche CSS-Definitionen, z.B. zu Farben, in Projekten nutzen
der page.scss /* ... */ /* Gestaltung der Kopfbereichs */ #blockHeader { @extend .clearAfter; width: 100%; padding: 0; background: $backgroundColorHeader; html.project-wissen & { background: $baseColorPrimary3; } /* ... */ } Variante 2: Umsetzung
Objekte über Banner Slider anzeigen
kann hier fest definiert werden*/ - w - displayElements : editbuttons = yes , editbuttonsPreview = no , lightbox = yes , background = no , prevnext = yes , entryofentries = no , entriesPreview = no , imagePreview = no , image = no , title = no !
Zwischen Seiten blättern - Anzeige der vorherigen und nächsten Artikel
Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/styles/design.css /* ... */ .pageNaviList .pageNaviBackLink { background-color: transparent; color: #999999; border: none 1px #e0e0e0; margin: 0 4px 0 4px; padding: 1px 8px 1px 8px; font-size: