Help shape the future of CMS PaaS release notes! Take this quick survey and share your feedback. 

Eric
Apr 3, 2012
  5723
(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
Be careful with your (order) notes

This happened a quite ago but only now I have had time to write about it. Once upon a time, I was asked to look into a customer database (in a big...

Quan Mai | Feb 5, 2025 | Syndicated blog

Imagevault download picker

This open source extension enables you to download images as ImageData with ContentReference from the ImageVault picker. It serves as an alternativ...

Luc Gosso (MVP) | Feb 4, 2025 | Syndicated blog

Optimizely SaaS vs PaaS: A Comparison from Client and Developer Perspectives

Optimizely, one of the leading digital experience platform. Offering both Software-as-a-Service (SaaS) and Platform-as-a-Service (PaaS) solutions....

Praful Jangid | Feb 3, 2025

Returning to Optimizely After Many Years

Returning to Optimizely After Many Years: A Journey Through Its New Features After several years away from Optimizely’s Content Management … More

Jose Neto | Feb 2, 2025 | Syndicated blog

Aspiring Optimizely

Adding .NET Aspire application host to your Optimizely project (even if it’s just for local development) is really a time-saver when it comes to...

valdis | Feb 2, 2025 | Syndicated blog

My Journey to Optimizely Certification: Study Tips, AI Tools, and Exam Strategies

How I Prepared for My Optimizely Certification Exam Hello everyone, I recently took the Optimizely Certification Developer Exam and became certifie...

calimat | Jan 31, 2025