Überschriften
Globalen Stil für Bullet Listen festlegen
Stil für Bullet Listen in einem Template Set festlegen
Individuelle Bullet Listen für einzelne Bereiche
In presono kann der Stil von unsortierten Listen (Bullet Listen, Aufzählungen) global über CSS definiert werden. Das ist sowohl in den Einstellungen für die gesamte Plattform möglich, als auch für einzelne Template Sets und einzelne Ebenen in Layout Templates.
Von der Hierarchie her überschreiben die Stile in den Template Sets immer die globalen Einstellungen.
Wenn also z.B. in den globalen Stilen runde schwarze Aufzählungszeichen festgelegt wurden, kann das in einzelnen Template Sets überschrieben werden und es können z.B. weiße Vierecke verwendet werden. Darüber hinaus können noch individuelle Stile mit Klassen vergeben werden, die dann mittels Klasse auf einzelne Bereiche in Layouts angewandt werden.
Globalen Stil für Aufzählungen festlegen
Um den Stil für alle Aufzählungen in presono festzulegen, öffne die Einstellungen und wechsle zu den Konfigurationen. Dort findest du einen Reiter mit Stilen. Lege hier einen neuen Stil an.
Vergib einen Titel und kopiere die folgenden Zeilen in den Bereich rechts:
(im Beispiel: runde rote Aufzählungszeichen)
ul{
list-style-type: none;
margin-left: 0 !important;
margin-top: -0.3em !important;
}
ul>li {
position: relative;
margin-top:0.5em;
list-style-type: none;
}
ul>li:before{
content: '•'; /* Zeichen das als Bullet verwendet wird - gewünschtes Zeichen eintragen */
color: #9E1B34; /* hier kann die Farbe geändert werden als hex oder rgb (ermöglicht alpha wert anpassung) */
font-size: 1em; /* Hier kann die Schriftgröße des Zeichens definiert werden */
position: absolute;
left: -1em; /* Abstand zum Textbeginn (bei 0 ist er genau beim start vom text, daher "-" */
top: 0em; /* Abstand von oben zum Symbol */
}
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
margin-left: 1em;
}
Jetzt können folgende Werte beliebig angepasst werden:
- das Aufzählungszeichen (Zeile 14 im Screenshot)
Dabei kannst du das gewünschte Zeichen einfach hier hin kopieren. Hier einige Beispiele:- "\25AA" fügt quadratische Aufzählungszeichen ein
- "•" fügt runde Aufzählungszeichen ein
- "-" fügt einen Bindestrich als Aufzählungszeichen ein
- die Farbe des Aufzählungszeichens (Zeile 15 im Screenshot)
Dabei kann entweder der HEX Code genutzt werden oder die entsprechenden RGB Werte, womit eine Anpassung des Alpha-Wertes (Transparenz) ermöglicht wird. - die Größe des Zeichens (Zeile 16 im Screenshot)
Dies kann nötig sein, je nach gewünschtem Symbol. - die Position des Zeichens (Zeilen 18 und 19 im Screenshot)
Je nach eingefügtem Zeichen kann hier eine leichte Anpassung nötig sein.
Die restlichen Zeilen sollten so belassen werden, wie sie im Beispiel angeführt sind.
Klicke anschließend auf "Speichern". Ab jetzt folgen alle Bullet-Listen in deiner presono Plattform dieser Formatierung, außer sie wurden durch andere CSS Stile individualisiert.
Stil für Bullet Listen in einem Template Set festlegen
Um den Stil für alle Bullet Listen in einem einzelnen Template Set festzulegen, öffne das Template Set und klicke auf "benutzerdefinierte Stile".
Lege hier einen neuen Stil an.
Vergib einen Titel und kopiere die folgenden Zeilen in den Bereich rechts:
(im Beispiel: türkise quadratische Aufzählungszeichen)
ul{
list-style-type: none;
margin-left: 0 !important;
margin-top: -0.3em !important;
}
ul>li {
position: relative;
margin-top:0.5em;
list-style-type: none;
}
ul>li:before{
content: '\25AA'; /* Zeichen das als Bullet verwendet wird - gewünschtes Zeichen eintragen */
color: #34BFC9; /* hier kann die Farbe geändert werden als hex oder rgb (ermöglicht alpha wert anpassung) */
font-size: 1em; /* Hier kann die Schriftgröße des Zeichens definiert werden */
position: absolute;
left: -1em; /* Abstand zum Textbeginn (bei 0 ist er genau beim start vom text, daher "-" */
top: 0em; /* Abstand von oben zum Symbol */
}
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
margin-left: 1em;
}
Jetzt können folgende Werte beliebig angepasst werden:
- das Aufzählungszeichen (Zeile 14 im Screenshot)
Dabei kannst du das gewünschte Zeichen einfach hier hin kopieren. Hier einige Beispiele:- "\25AA" fügt quadratische Aufzählungszeichen ein
- "•" fügt runde Aufzählungszeichen ein
- "-" fügt einen Bindestrich als Aufzählungszeichen ein
- die Farbe des Aufzählungszeichens (Zeile 15 im Screenshot)
Dabei kann entweder der HEX Code genutzt werden oder die entsprechenden RGB Werte, womit eine Anpassung des Alpha-Wertes (Transparenz) ermöglicht wird. - die Größe des Zeichens (Zeile 16 im Screenshot)
Dies kann nötig sein, je nach gewünschtem Symbol. - die Position des Zeichens (Zeilen 18 und 19 im Screenshot)
Je nach eingefügtem Zeichen kann hier eine leichte Anpassung nötig sein.
Die restlichen Zeilen sollten so belassen werden, wie sie im Beispiel angeführt sind.
Klicke anschließend auf "Speichern". Ab jetzt folgen alle Bullet-Listen in diesem Template Set dieser Formatierung und nicht länger der globalen Formatierung. Außer natürlich sie wurden durch andere CSS Stile individualisiert.
Individuelle Bullet Listen für einzelne Bereiche
Auf der letzten Ebene gibt es noch die Möglichkeit mit CSS Klassen einzelne Bereiche in Layout Templates zu individualisieren.
Lege dazu entweder unter den globalen oder den Template Set Stilen wieder einen neuen Stil an und kopiere folgenden Text hinein. (im Beispiel: graue Bindestriche als Aufzählungszeichen)
.bullets ul{
list-style-type: none;
margin-left: 0 !important;
margin-top: -0.3em !important;
}
.bullets ul>li {
position: relative;
margin-top:0.5em;
list-style-type: none;
}
.bullets ul>li:before{
content: '-'; /* Zeichen das als Bullet verwendet wird - gewünschtes Zeichen eintragen */
color: #95B0BE; /* hier kann die Farbe geändert werden als hex oder rgb (ermöglicht alpha wert anpassung) */
font-size: 1em; /* Hier kann die Schriftgröße des Zeichens definiert werden */
position: absolute;
left: -1em; /* Abstand zum Textbeginn (bei 0 ist er genau beim start vom text, daher "-" */
top: 0em; /* Abstand von oben zum Symbol */
}
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
margin-left: 1em;
}
Um den Stil aber nur auf gewisse Bereiche in spezifischen Templates anzuwenden, muss eine CSS Klasse vergeben werden. Im Beispiel ist dies ".bullets".
Hierbei kann jeder beliebige Begriff verwendet werden. Einige Beispiele: specialBullets oder greybullets. Der Begriff muss ohne Leerzeichen geschrieben werden.
Auch hier können folgende Werte beliebig angepasst werden:
- das Aufzählungszeichen (Zeile 14 im Screenshot)
Dabei kannst du das gewünschte Zeichen einfach hier hin kopieren. Hier einige Beispiele:- "\25AA" fügt quadratische Aufzählungszeichen ein
- "•" fügt runde Aufzählungszeichen ein
- "-" fügt einen Bindestrich als Aufzählungszeichen ein
- die Farbe des Aufzählungszeichens (Zeile 15 im Screenshot)
Dabei kann entweder der HEX Code genutzt werden oder die entsprechenden RGB Werte, womit eine Anpassung des Alpha-Wertes (Transparenz) ermöglicht wird. - die Größe des Zeichens (Zeile 16 im Screenshot)
Dies kann nötig sein, je nach gewünschtem Symbol. - die Position des Zeichens (Zeilen 18 und 19 im Screenshot)
Je nach eingefügtem Zeichen kann hier eine leichte Anpassung nötig sein.
Die restlichen Zeilen sollten so belassen werden, wie sie im Beispiel angeführt sind.
Klicke auf "Speichern" und öffne anschließend ein Layout Template.
Wähle den gewünschten Bereich im Template an. Öffne jetzt unten den Bereich für Custom Code und füge links oben den exakten Klassennamen ein.
Speichere das Template im Anschluss. Jetzt wird der von dir erstellte Bullet-Stil auf alle Slides mit diesem Layout angewandt.
Das könnte dich auch noch interessieren:
Verschiedene Inhalte in Slides