Volltextsuche
Farbauswahl in der Bearbeitung nutzen
der Bearbeitung nutzen Veröffentlichungsdatum: 14. Februar 2017 Änderungsdatum: 07. April 2017 weblication cms editor color colorpicker farbpicker Ein Colorpicker lässt sich an unterschiedlichen Stellen im Projekt verwenden.
So erstellen Sie eine weitere Primärfarbe
26. April 2023 colors.scss primärfarbe baseColorPrimary Farben Öffnen Sie über die CSS-Styles die Farben (colors.scss) und ergänzen Sie über die Quelltextanzeige eine weitere Primärfarbe. Quelltext Editor Quelltext Editor
Navigationspunkte unterschiedlich darstellen
Auszug aus der 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:
Tabelle: Zeilen, Spalten und Zellen individuell formatieren
yes; caption: Standard; caption-en: Default} */ .elementTable_var0 { /* ... */ tr.red, th.red, td.red { background-color: #FF0000; } /* ... */ } /* ... */ /*@wCssFragment { class: elementTableRowClass; variant: highlighted; preview-color: #
wCSS::getValue
, '#blockContent' , '(int)width' ); ?> Beispiel: Gibt den Farbwert aus der colors.scss Datei aus Quelltext <?php // ab CMS-Version xxx zu SCSS-Dateien möglich $cssPath =
Hintergrundfarbe und Schriftfarbe in Inhaltsbereichen (z.B. Fußbereich)
Die BASE (Mobile First) Projektgrundlage liefert Ihnen hierzu bereits eine dynamische Umsetzung im Standard. Maske colors.scss zu Farben im Fußbereich Über die CSS-Datei für Farben (colors.scss) kann im Feld " Hintergrundfarbe des
-w-picture-colorspace
1: Gibt das Vorschaubild der Liste in Graustufen aus .listDefault_var60 .listEntryThumbnail { /* ... */ ; -w-picture-colorspace: gray; /* ... */ } Weiterführende Links CSS-Only Eigenschaft: -w-picture-srchover Zu beachten: Diese CSS-Only Referenz
Unterschiedliche CSS-Definitionen, z.B. zu Farben, in Projekten nutzen
Farb-CSS-Dateien Wollen Sie allgemeiner in der Darstellung unterscheiden, ist die Umsetzung über unterschiedliche color-SCSS Dateien zu empfehlen. Fragen Sie hierzu in der pre.php des globalen Projektes den aktuellen Projektpfad ab und
Deaktivierung des Benutzerprofils
" text/css "> /*# 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
So lesen und schreiben Sie CSS-Variablen über jQuery
Dadurch entkoppeln Sie außerdem die Darstellung stärker vom Skript. Im folgenden Beispiel wird die CSS-Variable colorButtons auf den Wert colorButtonsChanged gesetzt, wenn die aktuelle Uhrzeit in Stunden über timeToChangeColor ist. Definition
Wie blendet man CSS-Variablen in der Maske aus?
zum Layout auszublenden, stehen showIf-Abfragen zur Verfügung. Über folgende Anweisung wird z.B. in der colors.scss (Farben) die CSS-Variable für die Hintergrundfarbe des Kopfbereiches nur angezeigt, wenn der Kopfbereich nicht
Pflege von textbasierten Daten
notwendig: nein Standardwert: input wysiwygFunctions definiert die zur
Responsive Toggler-Navigation anpassen
{ 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}
Benutzerdaten über ein Formular bearbeiten
'surname').', '.wUserData::getData($user, 'firstname').' ('.$user.') '; } print ' '; print ' '; } else{ print ' style= " color:#FF0000 "> Auf die Benutzerauswahl erhalten nur Administratoren Zugriff! '; } $userNameCur =
-w-picture-background-color
Bildergalerie-Variante 999 .listPictureGallery_var999 .listEntries .listEntryImage { /* ... */ ; -w-picture-background-color: #FFCC33; /* ... */ } Beispiel 2: Setzt die Hintergrundfarbe für das zu generierende Vorschaubild in Listenvariante 0
-w-color-data
1: Stellt Farbwerte für das Diagramm-Weblic und die Diagrammdarstellung zur Verfügung .elementChart_var0 { -w-color-data: ['#3333ff', '#ffcc33', '#33cc33', '#cccccc', '#a52a2a', '#fff000', '#ee82ee', '#999999'];
-w-color-data-selectable
die Auswahlbox für die Auswahl von Farbwerten im Diagramm-Weblic® angeboten wird .elementChart_var0 { /* ... */ ; -w-color-data-selectable: yes} Weiterführende Links weblics.de: Diagramm CSS-Only-Eigenschaft: -w-color-data Zu beachten: Diese
CSS-Only Referenz
(z.B. Bannerbild) -w-clickable Definiert, ob ein Element vom Anwender angeklickt werden kann (onclick) -w-color-data-selectable Definiert, ob die Auswahlbox für die Auswahl von Farbwerten angeboten wird -w-color-data Stellt
Formatierung der Druckansicht beeinflussen
Definieren Sie über die print.css für das body -Tag (evtl. auch andere CSS-Klassen) eine schwarze Schriftfarbe ( color:#000000 ). Die print.css wird im Drucktemplate (print.wDocument.php) nach der zentralen CSS-Dateieingelesen und
Cookies - Informationen zum Datenschutz
{ 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 { display:
Projektumsetzung mit dunklem Hintergrund und heller Schrift
Dieser Artikel zeigt auf, wie Sie allgemein die Farbgebung schnell und komfortabel beeinflussen können. Die colors.scss (Farben) liefert Ihnen in der Masken-Ansicht die Möglichkeit, für diverse Bereiche und Elemente der Seite die
So verwenden Sie eine separate CSS-Datei im Sprachvergleich
... */ html { 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} /*
Links / Querverweise über Lightbox
'lightbox_type', $wGlobalProjectPath) = 'wLightbox' "> [if lt IE 9] rel= " ]]> "color:#0000BB"> select= " $wGlobalProjectPath " /> [endif] [if lt IE 9] type= " text/javascript " src= " ]]>
Tabellen mit dem Tabelleneditor gestalten
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 {
Link-Icons (SVG) individualisieren
{ a. intern: before { background-image: url ("# {$wGlobalProjectPath} /wGlobal/layout/images/links/intern.svg?stroke=# {$colorLinkIcon} ") } a. extern: before { background-image: url ("# {$wGlobalProjectPath} /wGlobal/layout/images/links/extern.svg?stroke=#
Änderungen in Weblication® CMS Core/GRID
beim Einsatz von GD lässt sich nun über die Systemeinstellungen aktivieren. 011.002.204.000 09.01.2017 Über editor="color" lassen sich bei der Navigations- und der Kategorienbearbeitung auch Farbwerte auswählen. 011.002.203.000 09.01.2017
-w-picture-srchover
(wenn Vorschaubild in Graustufen definiert) .listDefault_var60 .listEntryThumbnail { /* ... */ ; -w-picture-srchover: color; /* ... */ } Weiterführende Links CSS-Only Eigenschaft: -w-picture-colorspace Zu beachten: Diese CSS-Only Referenz bezieht sich
wCaptcha::createCaptcha
des Bildes height => Integer Höhe des Bildes fontSize => Schriftgröße Größe der zu verwendenden Schrift colors => array(array(r, g, b)*) Eigene Farben embed [0|1] Definiert, ob das Bild direkt eingebettet werden soll Beispiel:
Cache aller verfügbaren Weblication Projekte leeren
Folgendes Script, in der DocumentRoot abgelegt, leert den Projektcache aller Weblication-Projekte (Contentverzeichnisse) der Installation
-w-add-objectdata
; -w-add-objectdata: text-disable-output-escaping,email; /* ... */ } /* ... */ .listDefault_var48 .listEntryData-text { color: #888888} .listDefault_var48 .listEntryData-email { color: #888888; -w-wsl: createMaskedMailLink (type=js,text=E-Mail) }
wUserContent::hasAlreadyRated
Prüft, ob der Benutzer bereits abgestimmt hat
wUserContent::addRating
Fügt eine Bewertung einer Seite hinzu
Eigene Strukturelemente umsetzen
'0' "> <!-- web:item:stop --> Auszug aus der design.css (Standard) /* ... */ hr { margin: 0 0 10px 0; border-color: $borderColorLines; border-style: solid none none none; height: 0px} /* ... */ layout.hr.custom.wItem.php (Individuell
Telefon- und Faxnummern ohne Verlinkung anzeigen
not ([href]) , a.mobile[href=''], a. mobile: not ([href]) { pointer-events: none; cursor: text; text-decoration: none; color: $fontColorDefault; } Faxnummer ohne Verlinkung (href) - Link im WYSIWYG-Feld Sollen auch Telefonnummern, Faxnummern bzw.
Zwischen Seiten blättern - Anzeige der vorherigen und nächsten Artikel
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: 40px;
Inhalt des Dateiexplorers beeinflussen
Bestimmen Sie, welche Inhalte der Dateiexplorer dem Benutzer zur Verfügung stellen soll.
Änderungen in Weblication® CMS Core/GRID
Kalenderdarstellung im IE korrigiert. 008.000.052.000 11.07.2013 Das Pflege-Tag web:text:start unterstützt den Editor color, um Farbwerte auswählbar zu machen. 008.000.029.000 03.07.2013 Die Zwischenablage im Editor unterstützt nun auch
thumbnail
Standardqualität reduziert werden soll (0-100) String attributeHD Z.B. srcset, falls kein JS unterstützt wird. [|gray] colorspace Falls das Bild in Graustufen ausgegeben werden soll [|color] srcHover Falls neben einem Graustufenbild noch ein
wDocument::getOwner
Ermittelt den Besitzer (verfügbar ab CMS-Version 017.002.068.000)
wCSS::optimizeCSS
werden sollen. Beispiel: Optimiert das CSS Quelltext <?php $cssStr = 'html {font-familiy:Verdana;font-size:17px;color:tomato;} a.extern {background-image:url("/devGlobal/wGlobal/layout/images/links/extern.svg?stroke=#FFFF00")} ' ;
So setzen Sie ein Element mit unterschiedlichen Darstellungsarten um
onchange="wEditor.saveDraftAndReload()" values=" " texts=" " styles="" inputStyle="float:right;width:auto;background-color:#EBEBEB"--> select= " wd:fragment[@id = 'display']/text() "/> <!--web:text:stop--> class= "
URL-Parameter über WSL oder XSL ermitteln
statusCSS "> test= " $statusEntry = 'frei' "> green test= " $statusEntry = 'belegt' "> red grey Status: style= " color:{$statusCSS} "> select= " $statusEntry " /> ... In der generierten Liste kann das z.B. wie folgt aussehen:
So definieren Sie die Hintergrundfarbe für WYSIWYG-Felder im Editor
*/ .webtagTextEditorWysiwyg div.wEditorWysiwyg, div#webtagTextEditorWysiwyg div.wEditorWysiwyg { background-color: transparent; color: inherit} .wEditorElementConfiguration div#webtagTextEditorWysiwyg div.wEditorWysiwyg {
So verwenden Sie eigene Pflegemasken für Verzeichnisse
" text/html; charset=UTF-8 "/> type= " text/css "> body {font-size:11px;font-family:arial, helvetica;background-color:#DDDDDD} id= " wBody "> class= " wEditorExtensionSheet "> class= " wEditorExtensionLabel "> select= "
So binden Sie Seiteninhalte in der Navigation direkt ein
{display:none;position:absolute;z-index:100;left:0;margin:-2px 0 0 0;border:solid 1px #f0f0f0;background-color:#ffffff;padding:20px} /* ... */ Schritt 4: Ergebnis Und so kann das Ergebnis dann z.B. aussehen, wenn Sie mit dem
CSS-Only Varianten in Objekten nutzen
für das Slide-Objekt /* ... */ .listBannerSlider_var99 .listEntryObject-slide_var1 .listEntryTitle { background-color: rgba (0, 0, 255, 0.5) } Und so sieht es dann in der Bearbeitung des Objektes (linker Screenshot) und in der Ausgabe des
Responsive Webdesign
blockMainOuter Angabe */ /* #blockMainOuter { margin: 10px auto; max-width: $widthBlockMainOuter; background-color: $backgroundColorContent; box-shadow: none} */ /* neue blockMainOuter Angabe mit fester Breite */ #blockMainOuter {
Weblication Newsletter mit PHP erweitern
Personalisieren Sie Ihren Newsletter, um z.B. eine geschlechtsabhängige Anrede zu ermöglichen.
Dateiliste nach aktuellsten Kommentaren sortieren
"/> class= " listEntryDescription "> select= " wd:extension/wd:meta/wd:description/text() "/> style= " color:#666666;font-size:10px;clear:left;margin:12px 0 0 0 "> $documentPath = ' select= " @path "/> '; $dateLastComment =
CSS-Rendering - Inhalte wie Bilder automatisch in passender Breite generieren
Bereiche / Blöcke /* ... */ #blockMainOuter { margin: 10px auto; max-width: $widthBlockMainOuter; background-color: $backgroundColorContent; box-shadow: none} /* ... */ #blockContentFull { float: left; width: $widthBlockContentFull} /*