How do I set the global style for bullets in presono? – presono's knowledgebase

Headlines

Set style for bullet lists in a template set

Individual bullet lists for individual areas

In presono, the style of unsorted lists (bullet lists, enumerations) can be defined globally using CSS. This is possible in the settings for the entire platform, as well as for individual template sets and individual layers in layout templates.

In terms of hierarchy, the styles in the template sets always override the global settings.

So if, for example, round black bullets have been defined in the global styles, this can be overwritten in individual template sets and, for example, white squares can be used. In addition, individual styles can still be assigned with classes, which are then applied to individual areas in layouts using a class.

Set global style for bullets

To set the style for all bullets in presono, open the settings and switch to the configurations. You will find a tab with styles. Create a new style here.

Give your style a title and copy the following lines into the area on the right:

(in the example: round red bullets)

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: '•'; /* symbol that should be used for lists */
color: #9E1B34; /* change the color here, using hex or rgb values (rgb allows alpha value/transparency as well */
font-size: 1em; /* set the size of the symbol here */
position: absolute; 
left: -1em; /* set the spacing between the symbol and the text */
top: 0em; /* set the spacing to the top */
}
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
margin-left: 1em; 
}

Now the following values can be adjusted as desired:

1. the bullet symbol (line 14 in the screenshot)
  When doing this, you can simply copy the character you want here. Here are some examples:
  1. "\25AA" inserts square bullets
  2. "-" inserts round bullets
  3. "-" inserts a hyphen as bullet character
the color of the bullet (line 15 in the screenshot).
Either the HEX code can be used or the corresponding RGB values, which allows an adjustment of the alpha value (transparency).
the size of the symbol (line 16 in the screenshot).
This may be necessary depending on the desired symbol.
the position of the character (lines 18 and 19 in the screenshot).
Depending on the inserted character, a slight adjustment may be necessary here.

The remaining lines should be left as they are in the example.

Then click on "Save". From now on, all bullet lists in your presono platform will follow this formatting, unless they have been customized by other CSS styles.

Set style for bullet lists in a template set

To set the style for all bullet lists in a single template set, open the template set and click on "custom styles".

Create a new style here.

Give your style a title and copy the following lines into the area on the right:

(in the example: turquoise square bullets).

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'; /* symbol that should be used for lists */
color: #34BFC9; /* change the color here, using hex or rgb values (rgb allows alpha value/transparency as well) */
font-size: 1em; /* set the size of the symbol here */
position: absolute;
left: -1em; /* set the spacing between the symbol and the text */
top: 0em; /* set the spacing to the top */
}

.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
margin-left: 1em; 
}

Now the following values can be adjusted as desired:

the bullet symbol (line 15 in the screenshot)
When doing this, you can simply copy the character you want here. Here are some examples:
1. 1. "\25AA" inserts square bullets
  2. "-" inserts round bullets
  3. "-" inserts a hyphen as bullet character
the color of the bullet (line 16 in the screenshot).
Either the HEX code can be used or the corresponding RGB values, which allows an adjustment of the alpha value (transparency).
the size of the symbol (line 17 in the screenshot).
This may be necessary depending on the desired symbol.
the position of the character (lines 19 and 20 in the screenshot).
Depending on the inserted character, a slight adjustment may be necessary here.

The remaining lines should be left as they are in the example.

Then click on "Save". From now on, all bullet lists in this template set will follow this formatting and no longer the global formatting. Unless of course they have been customized by other CSS styles.

Individual bullet lists for individual areas

On the last level there is the possibility to individualize single areas in layout templates with CSS classes.

Create a new style either under the global or the template set styles and copy the following text into it.

(in the example: gray hyphens as bullets)

.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: '-'; /* symbol that should be used for lists */
color: #95B0BE; /* change the color here, using hex or rgb values (rgb allows alpha value/transparency as well) */
font-size: 1em; /* set the size of the symbol here */
position: absolute;
left: -1em; /* set the spacing between the symbol and the text */
top: 0em; /* set the spacing to the top */
}

.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
margin-left: 1em; 
}

However, to apply the style only to certain areas in specific templates, a CSS class must be assigned. In the example this is ".bullets".

Any term can be used here. Some examples: specialBullets or greybullets. The term must be written without spaces.

Now the following values can be adjusted as desired:

the bullet symbol (line 15 in the screenshot)
When doing this, you can simply copy the character you want here. Here are some examples:
1. 1. "\25AA" inserts square bullets
  2. "-" inserts round bullets
  3. "-" inserts a hyphen as bullet character
the color of the bullet (line 16 in the screenshot).
Either the HEX code can be used or the corresponding RGB values, which allows an adjustment of the alpha value (transparency).
the size of the symbol (line 17 in the screenshot).
This may be necessary depending on the desired symbol.
the position of the character (lines 19 and 20 in the screenshot).
Depending on the inserted character, a slight adjustment may be necessary here.

The remaining lines should be left as they are in the example.

Click on "Save" and then open a layout template.

Select the desired layer in the template. Now open the Custom Code area at the bottom and insert the exact class name at the top left.