Volltextsuche
Icons für Strukturelemente im Projekt hinterlegen
24. August 2009 editor struktureditor icons bilder strukturelemente Im Editor können Sie für Strukturelemente eigene Icons hinterlegen. Einem Strukturelement können Sie ein beliebiges Bild in der Göße 18 x 18 px hinterlegen. Dieses wird
Font Awesome für Navigationssymbole nutzen
Veröffentlichungsdatum: 21. Februar 2017 Änderungsdatum: 17. Oktober 2022 weblication cms base navigation symbole icons fonts awesome css Navigationspunkte können Sie über Symbole (z.B. Fonticons) ohne grossen Aufwand ansprechend
Das Projektmenü im Backend wurde umstrukturiert. Neue Icons werden noch folgen.
wurde umstrukturiert. Neue Icons werden noch folgen. 11. Nov,
Interaktive Erklärbilder (ImageMap): Scrollevent nach Klick auf Labels bzw. Icons aktivieren
nach Klick auf Labels bzw. Icons aktivieren Veröffentlichungsdatum: 22. Februar 2023 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE So können
Link-Icons (SVG) individualisieren
hervorzuheben und passend zum Link-Ziel zu gestalten, liegt der Einsatz von Grafiken nahe. Die BASE nutzt hierfür SVG-Icons, welche über SCSS eingebettet zudem mit Farbe befüllt werden können: Beispiel: Auszug aus der html.scss des globalen
Farbe von SVG Bilder beim Überfahren mit der Maus ändern
gibt es dafür die Variante "SVG-Grafik eingebettet, per CSS formatierbar". CSS-Only der SVG-Bildvariante, um SVG Icons mit fixer Größe per CSS formatierbar einzubetten -w-embedSVG: yes; /* SVG-Bild einbetten [yes (Ja) |no (Nein) ] */
SVG-Icons für Links
14. Dezember 2021 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Neben den vordefinierten Link-Icons können Sie auch eigene SVG-Icons zum Dekorieren von Links auswählen. Dazu muss die CSS-Only Einstellung
Navigation mit SVG-Icon pro Navigationspunkt
Navigationspunkt Nutzbar ab: Version 17.x 25. April 2023 navigation grafik bild svg icon Navigationen über Bilder bzw. Icons in der Darstellung optimieren Navigation mit SVG-Icon Die BASE erlaubt in aktueller Version, eigene SVG-Icons pro
SVG-Grafik im Bild-Element nutzen
2020 Änderungsdatum: 08. August 2023 Projektgrundlage: BASE Über das Bild-Element können Sie für SVG-Grafiken bzw. Icons spezielle CSS-Only-Varianten verwenden. Hierfür stehen bereits im Standard die Varianten 40 ("SVG-Grafik") und 41
Kategorienfilter Schaltflächen um Icon ergänzen
2023 Projektgrundlage: BASE Die Schaltflächen das Kategoriefilters können Sie sehr einfach visuell über Symbole oder Icons hervorheben. Sie wollen die Text-Schaltflächen des Kategoriefilters zusätzlich um ein Symbol bzw. eine Grafik /Bild
OpenStreetMap: Initialisieren der Map per Javascript beeinflussen
anpassen. wObserverOptions = { icon - src : '' , /*Pfad zu dem Icon*/ icon - anchor : [ 0.5 , 1 ] /*Platzierung des Icons*/ icon - scale : 2 /*Skalierung des Icons*/ } Beispiel: Skalierung des Icons abhängig von Bildschirmgröße if( document
Originalbilder ohne Größenanpassung in einer Bildergalerie anzeigen
werden Bilder ohne Größenanpassung direkt in einer Galerie angezeigt. Das kann z.B. bei der Auflistung von Logos, Icons oder Symbolen sinnvoll sein. Falls die Bilder in HD vorliegen, also doppelt so groß sind, kann
-w-editmaskExtended-entryicon
Beispiele / Anwendungsfälle Beispiel 1: Aktiviert das Dateiauswahlfeld zur Bearbeitung des Icons (Hintergrundbildes) zum Akkordeon-Container in Variante 10 .elementAccordion_var10 { /* ... */ ;
HD-Funktion in BASE-Projekten nachrüsten
Die Pfade passen Sie an Ihre Projektpfade an und spielen ggf. aus einer aktuellen BASE nicht vorhandene Bilder und Icons ein. /*@wCssFragment { class: mediaqueryPixelRatio; variant: min2; caption: Sobald das Endgerät ein Device-Pixel-Ratio
So setzen Sie einen Attributwert dynamisch
links ausgerichtetem Bild das Bildbearbeitungssymbol anders ausrichtet. Dies verhindert die Überlagerung des Element-Icons über das Bild-Icon. Dieses Beispiel dient natürlich auch als Anregung für andere Einsatzmöglichkeiten. Beispiel:
So nutzen Sie in der Dateiauswahl eigene Auswahlmasken
Souvent nécessaire "> path= " /deAssets/img " permission= " view "> icon= " /deGlobal/wGlobal/layout/images/dir-icons/dir-image.gif " caption= " Bilder " en:caption= " Pictures " fr:caption= " Images " path= " /deAssets/img "/> path=
Dateiliste nach durchschnittlicher Seitenbewertung (Ranking) sortieren
>= $i){ print ' alt= " " width= " 13 " height= " 12 " src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/icons/rating_star_full.gif " /> '; } else if($averageRating >= $i - 0.5){ print ' alt= " " width= " 13 " height= " 12 "
Elemente des Mastertemplates bedingt zur Auswahl anbieten
name= " Überschrift " en:name= " Headline " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_headline.gif " type= " headline.text "> id= " title " type= " char.text "/> id= " display " type= "
Änderungen in Weblication® CMS Core/GRID
lässt ich in einem Verzeichnis die Hintergrundfarbe bei Vorschaubildern einstellen, um so z.B. weiße Icons sehen zu können. 012.006.072.000 08.03.2018 Beim SEO-Reiter wird die maximale Länge der Beschreibung nun entsprechend
Bearbeitung von Auflistungen über den Internet Explorer
/* ... */ .elementText ul { margin: 0 0 10px 0; list-style-image: url ($wGlobalProjectPath/wGlobal/layout/images/icons/list-style-image.gif) } .elementText ol { margin: 0 0 10px 0} /* ... */ Funktioniert nicht mit IE: Definition für
templatesIncludeItems
content1 "> name= " Überschrift " en:name= " Headline " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_headline.gif " type= " headline.default "> id= " title " type= " char.text "/> id= " display " type= "
OpenStreetmap - Marker über Listeneinträge hervorheben
ol_uid ) { foundFeature = feature ; } }); } }); if( action == 'scaleMarker' ){ var locationPoint = foundFeature ; var iconStyle = locationPoint . getStyle (); var icon = iconStyle . getImage (); var scale = typeof options [ 'scale' ] !== 'undefined'
wCSS::optimizeCSS
=> '1' , 'pathCSS3Pie' => '' , 'generateDataURL' => 'extensions:gif,png,svg;dirs:images/links,images/icons,images/social-icons' ); print wCSS :: optimizeCSS ( $cssStr , $options ); ?> Hinweis Beim Einsatz von
Listen
XML-Code eines Listenelements name= " Liste " en:name= " List " icon= " /deGlobal/wGlobal/layout/images/element-icons/element_list.gif " type= " list.standard "> id= " listtemplate " type= " src.file ">
Listen
eines Listenelements name= " Liste " en:name= " List " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_list.gif " type= " list.standard "> id= " listtemplate " type= " src.file ">
Positionierung der Strukturelement-Icons beeinflussen
der Strukturelement-Icons beeinflussen Nutzbar ab: Version 22. Mai 2012 strukturelement icon position Passen Sie die Position der Anfasser für
Inhalt des Dateiexplorers beeinflussen
" Shop " en:caption= " Shop " fr:caption= " Shop "> icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_gallery.gif " caption= " Produktauswahl " en:caption= " Articles " fr:caption= " Articles " path= "
Änderungen in Weblication® CMS Core/GRID
um bis zu 80% zu reduzieren lässt. 014.001.034.000 11.07.2019 Die Tabs innerhalb der IDE werden nun mit den Icons der zu bearbeitenden CSS-Dateien (design.css, breakpoints.scss, colors.scss, fonts.scss, html.scss, header.scss,
Eigene Strukturelemente umsetzen
1382449764 "/> name= " admin " time= " 1252018717 "/> src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_hr.gif "/> from= " " status= " on " to= " "/> value= " "/> value= " 3 "/> match= " wd:item[@type =
Änderungen in Weblication® CMS Core/GRID
lassen sich weitere Zeiträume auswählen. 018.004.000.000 02.08.2023 Final Version 018.003.036.000 02.08.2023 Icons in projektspezifischen Kontextmenüs lassen sich auch über die ID (z.B. edit, delete, copy, etc.) definieren, um so
Pflege von Inhaltsgruppen
werden dürfen. notwendig: ja caption Definiert, welcher Text zum Element ausgegeben werden soll notwendig: nein iconStyle definiert CSS, um die Darstellung des Pflegesymbols zu beeinflussen notwendig: nein display legt fest, wem das aktuelle
Pflege von Bildern
konfigurierbare Maske pflegen. iconStyle definiert CSS, um die Darstellung des Pflegesymbols zu beeinflussen notwendig: nein title Titel des Pflegesymbols
Das wGlobal Verzeichnis - Anpassungen für Ihr Projekt
von Navigationen, Links, Bildern, Tabellen und den WYSIWYG-Editor Zentrale Layout-Bilddateien (Hintergrundbilder, Icons, etc) CSS-Stylesheets Script-Definitionen (Javascript-Libraries) XSL-Stylesheets für die Seitendarstellung,
Das wGlobal Verzeichnis - Anpassungen für Ihr Projekt
von Navigationen, Links, Bildern, Tabellen und den WYSIWYG-Editor Zentrale Layout-Bilddateien (Hintergrundbilder, Icons, etc) CSS-Stylesheets Script-Definitionen (Javascript-Libraries) XSL-Stylesheets für die Seitendarstellung,
Pflege von Links
konfigurierbare Maske pflegen. iconStyle definiert CSS, um die Darstellung des Pflegesymbols zu beeinflussen notwendig: nein title Titel des Pflegesymbols
XSL-Stylesheets für Strukturelemente
" time= " 1272383009 "/> name= " admin " time= " 1252018717 "/> src= " /deGlobal/wGlobal/layout/images/element-icons/element_text.gif "/> from= " " status= " on " to= " "/> value= " "/> value= " 16 "/> expires= "
XML Strukturelemente
Seite, die über den Struktureditor beliebig erweitert werden kann.
Globale Projekteinstellungen
von Navigationen, Links, Bildern, Tabellen und den WYSIWYG-Editor Zentrale Layout-Bilddateien (Hintergrundbilder, Icons, etc) CSS-Stylesheets Script-Definitionen (Javascript-Libraries) XSL-Stylesheets für die Seitendarstellung,
So setzen Sie Vorlagen mit Vorschaubild, Überschrift und Beschreibung um
ein Bildsymbol zugewiesen wurde. ... Meldung Aktuelle Meldung src= " "/> src= "
So definieren Sie die Darstellung von Verweisen
(z.B. index.php) für ein Linkelement ... id= " link " name= " Link " icon= " /de/wGlobal/layout/images/element-icons/element_link.gif " type= " spin.link " uid= " c1199a5c0213e8bbca0b3a17b8816e49 "> id= " title " type= " char.text
So setzen Sie die Elementauswahl über das Mastertemplate mehrsprachig um
" page.standard "> ... name= " Überschrift " en:name= " Headline " icon= " /deGlobal/wGlobal/layout/images/element-icons/element_headline.gif " type= " headline.text "> id= " title " type= " char.text "/> id= " display " type= "
So setzen Sie eine kategorisierte und nach Priorität sortierte Liste um
" Personenliste mit Kategorie/Prio " en:name= " List Person " icon= " /wGlobalProject/wGlobal/layout/images/element-icons/element_list.gif " type= " list.fachgebiete "> ... Schritt 5: Listenseite erstellen Innerhalb der gewünschten Seite
So lesen Sie konkrete Elemente ins Mastertemplate ein
1265646864 "/> name= " admin " time= " 1252018717 "/> src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_text.gif "/> value= " 500-200 "/> name= " content1 "/> name= " content2 "/> name= " content3 "/>
So ersetzen Sie Text-Platzhalter durch die gewünschten Texte
TEXT[item_fliesstext] " en:name= " TEXT[item_fliesstext] " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_text.gif " type= " text.wysiwyg "> id= " title " type= " char.text "/> id= " display " type= "
Mehrere Strukturelemente gleichzeitig einfügen
1284540010 "/> name= " admin " time= " 1252018717 "/> src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_list.gif "/> value= " 600-200 "/> name= " content1 "/> name= " content2 "/> name= " content3 "/>
So setzen Sie ein Element mit unterschiedlichen Darstellungsarten um
1292234420 "/> name= " admin " time= " 1252018717 "/> src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_box.gif "/> from= " " status= " on " to= " "/> value= " "/> value= " 17 "/> expires= "
So filtern Sie die aufrufende Listendatei aus einer Liste
mit allowSelf-Angabe ... id= " list " icon= " /demoCore/wGlobal/layout/images/element-icons/element_list.gif " name= " Liste " type= " core.list " refresh= " 1 " wPathTemplate= "
XSL-Stylesheets für Strukturelemente
1272383009 "/> name= " admin " time= " 1252018717 "/> src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_text.gif "/> from= " " status= " on " to= " "/> value= " "/> value= " 16 "/> expires= "
So setzen Sie eine intelligente Bildauswahl um
... name= " Bild " en:name= " Picture " icon= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_picture.gif " type= " picture.standard "> id= " title " type= " char.text "/> id= " display " type= "
Eigene Formularelemente nutzen
1315228888 "/> name= " admin " time= " 1252018717 "/> src= " /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_form.gif "/> from= " " status= " on " to= " "/> value= " "/> value= " 2 "/> match= " wd:item[@type