So you want to have different line spacing between primary bullets and secondary bullets. Normally in a text block you would simply apply Project Styles to the portion of the text you want to change. Project Styles can specify all sorts of items, including line spacing. 

However, in this case, the bulleted text block is treated as a single block, and any style applied will apply to all the connected bulleted text in the text object.

NOTE: If you have multiple sets of bullets that are separated by other text elements, you can apply unique Project Styles to each bullet set.

Theme CSS

This is where Theme level CSS can assist. Chances are, if you want different spacing for the subbullets vs the main bullets, you want this done consistently throughout the course. Fortunately, when making Theme-level CSS changes, this is exactly what happens.

To make a theme level change:

  1. Select Home -> Change theme
  2. If your Theme is not selected, navigate and select it
  3. Select Edit
  4. Select Add CSS
  5. Paste the CSS code into the Add CSS to your Theme dialogue box
  6. Select Ok -> Save -> Done
  7. Select Ok on the Theme Selector

When you view bulleted text within the editor, preview or publish you will now see the spacing difference.

 

Custom CSS for Changing Bullet and Sub Bullet Spacing

This CSS code creates approximately a line spacing of 4 for main bullets and 1 for sub bullets. When you use this code, you will likely want to modify the line-height and margin-bottom values to achieve your desired design.

/* MAIN bullets: li in a top-level UL/OL (a list NOT inside an LI) */
.dki-element-text :where(ul, ol):not(:where(li) :where(ul, ol)) > li {
  line-height: 1.3 !important;
  margin-bottom: 2.0em !important;  /* main bullet spacing */
}

/* SUB bullets (any depth): li in a UL/OL that lives inside an LI */
.dki-element-text li :where(ul, ol) > li {
  line-height: 1.3 !important;
  margin-bottom: 0.3em !important;  /* sub-bullet spacing */
}

/* Optional: spacing around nested list blocks */
.dki-element-text li :where(ul, ol) {
  margin-top: 0.3em !important;
  margin-bottom: 0.3em !important;
  padding-left: 20px !important;
}

/* Optional: avoid extra gap after last item in any list */
.dki-element-text :where(ul, ol) > li:last-child {
  margin-bottom: 0 !important;
}

DISCLAIMER: The dominKnow support team does NOT provide programming/coding support for the creation of CSS and JavaScript elements when creating your dominKnow | ONE content.

  0     0

Similar Projects

Questions  ( 0 )