CSS override of Ordered List Block not reading starting values

  • Resolved Mr. Texas

    (@requnix)


    3 years, 12 months ago

    I’m using the below code on my website to display the List Items the way I want; it works and looks great. The problem is it ignores the Starting Value defined in a list block, so if I want to start a list at a value of 13, the editor shows it as 13, but the published page shows it as 1 (e.g. it resets every block no matter what starting value I define).

    My guess is this is due to a missing set-counter (or something similar) — the problem is I don’t know what the element is called from the WordPress block the list is from, or how to adjust the global CSS to inherit that “starting value” element when it’s defined (and just start at 1 when it’s not).

    Any help would be appreciated. Thanks!

    /* === Custom List Settings === */
ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #272727;
    border-left:2px solid #272727;  
    background:#0e1014;
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #272727;
      border-right:2px solid #272727;
    color:#fff;
    background:#0e1014;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
Viewing 7 replies - 1 through 7 (of 7 total)

  • I reviewed a lot of themes, and whenever the theme would try to use counters for ordered lists, I would recommend that they remove that because it never accounted for the start attribute or the reversed attribute. Both were in my test data.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Counter_Styles
    https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset
    It looks like the counter-reset is expecting an integer. You can try to use attr(start), but the attr() function is not well supported.
    https://developer.mozilla.org/en-US/docs/Web/CSS/attr()

    Thread Starter Mr. Texas

    (@requnix)

    @joyously my theme does use the internal wordpress counter because when I remove the custom list code, it works just fine. So the question remains; how do I adjust the above code to adopt the counter values from a WordPress block ordered list start value?

    There is no “internal wordpress counter”. The WordPress block is just a normal <ol start="13">, as documented at the links I gave you. It’s standard HTML.

    Thread Starter Mr. Texas

    (@requnix)

    So why is my custom global CSS Overriding the counter and failing to read the defined Start value from the WordPress block?

    As I said, it never accounted for the start attribute or the reversed attribute.
    Your CSS is not overriding the counter. Your CSS is the counter, which overrides the standard numbering. It has nothing to do with WordPress. The block simply provides a way to set the start attribute.

    Thread Starter Mr. Texas

    (@requnix)

    So how do I get my CSS to use the standard internal counter?

    Thread Starter Mr. Texas

    (@requnix)

    Fixed by stripping out all counter-related code:

    
/* === Custom List Settings === */
ol {
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    border-top:2px solid #272727;
    border-left:2px solid #272727;
    background:#0e1014;
}
ol > li:before {
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #272727;
      border-right:2px solid #272727;
    color:#fff;
    background:#0e1014;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
    • This reply was modified 3 years, 12 months ago by Mr. Texas.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS override of Ordered List Block not reading starting values’ is closed to new replies.