• I have a post with lots of lists in it and I want to change it up a bit, so I want one of the lists to be indented. The whole list. I just want it to start a bit further in then the others to set it off.

    Is there any way to do with with Gutenberg or is this yet another thing the powers-that-be have decided we should not want to do?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Walton

    (@walton)

    Out of curiosity, is there also any way to vary the bullets? Or make lists individualized in any way shape or form at all? Or is it all bland vanilla stylizations from now until eternity?

    You’ll have to write a tiny bit of CSS for this in the Customizer.
    Define a class for the indents and assign that class to the list block.
    In the Advanced tab at the bottom of the right side bar, add the name of the class you designate, with no preceeding ‘.’

    In the customizer add the rules for the class.

    Part 1: the indent
    For example: I assigned the list the class of .indent40 to indent that block an additional 40px.
    Looks like this in the css
    .indent40{padding-left: 40px;}

    Part 2: the bullet shape
    To change the style of the bullets, add this: list-style-type:example where example is one of the choices shown here:
    https://www.w3schools.com/cssref/pr_list-style-type.asp

    Total example:

    .indent40{
    	padding-left: 40px; /*indents the whole list an additional 40px from default */
    	list-style-type:circle;  /* changes the default bullet to a circle */
    }
    Thread Starter Walton

    (@walton)

    Thanks.

    I was hoping there was a way to do it more on the fly, but you’re right, this is probably the only way.

    Thanks, @walton for the question and @kerchmcc for the very helpful answer.

    Notes:

    • Class rule order in Customizer Additional CSS may matter. Had to add rule before custom Kadence button style for the class to have effect on style.
    • Might need to use !important like this:
    .indent40 {
    	list-style-type: circle !important; 
    	padding-left: 40px !important;
    }
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Indent an Entire List’ is closed to new replies.