Eric
Apr 3, 2012
  4904
(3 votes)

Styling ordered lists in the xhtml-editor using only CSS

This is a really nice approach of styling lists and you should use it Ler

In most of our project we tend to forget to style the ordinary content, the content that should be most important to style. A couple of weeks ago i read this blogpost by Maria Sogneforst, http://7minds.se/blogg/2012/2/texter-som-man-sa-ofta-glommer-att-ge-design/ (Swedish), where she discuss the topic of styling the content that the editors produce.

So this blogpost is about how you can use CSS to style your list. Now you probably think you know that already but how would you style a list looking like this:

image

The problem is that I have a list with numbers larger, other color and other font, then the rest of the list.

One approach of solving this problem is that you can prevent the browser from rendering the numbers using: list-style: none. Then you add the numbers with code in the ordinary content of your list using a span-tag or something like that. This will work if you have complete access to the code rendering the list.

But that is not a solution that we can use, when we have no control of the list, and that is the case when we are working with content from the editor.

Also if you are working with lists like the above example it will work visually but it is not semanticlly correct, and we do not like that do we!?

To solve this we need to work with something called CSS Generated Content. When using this technique we create and insert the counter-number after removing the defualt numbers or dots.

We will use something that is called the content-property and the before and after psuedo-elements. A quick example.

Insert text before all your P-elements using this:

p:before {content: "Hello World";}

 

So how did i style the list above? Well this is the code that I used:

The things that you should focus on is that I have disabled the default numbering and also use the counter-reset property and the counter-increment property, http://www.w3.org/TR/CSS21/generate.html#counters

div#mainbody ol
{
    counter-reset: li;
    margin-left: 10px;
    padding-left: 0;
}
div#mainbody ol > li
{
    position: relative;
    margin: 0 0 6px 2em;
    padding: 4px 8px;
    list-style: none;
}
div#mainbody ol > li:before
{
    content: counter(li) ".";
    counter-increment: li;
    position: absolute;
    top: -13px;
    left: -50px;
    color: #179549;
    box-sizing: border-box;
    width: 2em;
    margin-right: 8px;
    padding: 4px;
    font-size: 32px;
    text-align: center;
    font-family: 'AustinWebBoldItalic';
}
li ol
{
    margin-top: 6px;
}

As you can see I use a custom font but that is up to you Ler

Conclusion:

Making lists look nice in the editor is really simply, use CSS!! The only problem is that if you are tarketing older browsers(IE6) that have not implemented CSS 2.1 you might have a problem.

So start styling your lists and the content produced by editors! Don’t forget that we visits sites for the content.

Byt the way.. I hate when people reset styles using * {margin:0; padding:0;} Blinkar

/Eric

Apr 03, 2012

Comments

Please login to comment.
Latest blogs
Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog

New Optimizely certifications - register for beta testing before November 1st

In January 2023, Optimizely is making updates to the current versions of our certification exams to make sure that each exam covers the necessary...

Jamilia Buzurukova | Sep 28, 2022

Optimizely community meetup - Sept 29 (virtual + Melbourne)

Super excited to be presenting this Thursday the 29th of September at the Optimizely community meetup. For the full details and RSVP's see the...

Ynze | Sep 27, 2022 | Syndicated blog