Docs

[Smarticle]

[find access details below]

PROBLEM 1 — See http://anaemia.wpengine.com/define-measure-success/

How can I change those red circle icons to numbers? That is the Icon List element.

Basically, I need this to be a stylised number list (different from the standard WP number list).

Another place where I need to find a similar solution is on the homepage (http://anaemia.wpengine.com/). See underneath the main title (Summary) there is the beginning of a numbered list (currently made using the Custom Headline element). First you’ll see the number 1. Then on the next line, the title, ‘Define overarching best practice principles.’ I really want the number and the title on the same line, but it’s compulsory that the titles are all indented an equal amount. Obviously I could just write “1. Title… 2. Title… etc.” but each number is a different width, which means the titles themselves will not be equally aligned to each other. Bullet lists combat that problem. I just don’t know how to create a bullet list to match the style you see there.

PROBLEM 2a and 2b — See http://anaemia.wpengine.com/references/

2a
This only needs to be a standard WP number list. But… How can I make the numbers in the right column continue on from the bottom number in the left column?

2b
Why are some of those links going all the way across the page, when others aren’t? Point 15 in the left column, for example, looks fine… But point 16 in the left column goes across the entire site. How can I fix that issue?

Cheers

[Smarticle]

This reply has been marked as private.

[Jade]

Hi there,

#1

.page-id-356 #x-section-2 .x-container:nth-child(2) .x-ul-icons .x-li-icon:nth-child(1) i:before {
    content: "1";
}

.page-id-356 #x-section-2 .x-container:nth-child(2) .x-ul-icons .x-li-icon:nth-child(2) i:before {
    content: "2";
}

.page-id-356 #x-section-2 .x-container:nth-child(2) .x-ul-icons .x-li-icon:nth-child(3) i:before {
    content: "3";
}

.page-id-356 #x-section-2 .x-container:nth-child(2) .x-ul-icons .x-li-icon:nth-child(4) i:before {
    content: "4";
}

.page-id-356 #x-section-2 .x-container:nth-child(2) .x-ul-icons .x-li-icon:nth-child(5) i:before {
    content: "5";
}

As for the custom headlines on the homepage, kindly add display: display: inline-block; to the style field of the custom headline elements that contain the number and the text.

#2a Add a start attribute to an ordered list element. Ex:

<ol start="15">

    <li>I'll be number 15</li>

</ol>

2b Add word-wrap: break-word; to the style field of the columns that contains the overflowing text.

Hope this helps.

[Author]

Posts