Stylizing lists in an article

Patricia Vollherbst
Topic Author
Offline
Fresh Boarder

12 years 7 months ago #2270 by Patricia Vollherbst

Stylizing lists in an article was created by Patricia Vollherbst

Hi,
I want to put unordered and ordered lists in articles. I tried to put one of each type in an article that I put in topbox1 position.

But there was no bullet or other list marker, for either the ul list or the ol list.

I used Firebug and found that the relevant css code is in template.css (see below).

I have 2 questions:
1. There is no dot.jpg file in my template images folder - can it be sent to me?
2. Assuming I had a dot.jpg file, the css code makes sense to me for ul, but why is it there for ol? I want decimal, not an image for ol lists. (I tried replacing "dot.jpg" with "bullet1.jpg", and a gray square showed up as a list marker for ul and ol - I don't think anyone wants an image for an ol list).

Thanks in advance for your help!

Here is the snippet of template.css that Firebug highlighted:

.mega-wrap-page ul li,
.mega-wrap-page ol li{
width: 98%;
float: left;
background: url(../images/dot.jpg) no-repeat 0 10px;
list-style: none;
padding: 5px 0 5px 10px;
}
ul.actions,
dl.article-info{
width: 100%;
float: left;
padding-bottom: 5px;
}
ul.actions li{
float: left;
margin-right: 5px;
list-style: none;
}

Please Log in or Create an account to join the conversation.

Linh Robert
Offline
Banned

12 years 7 months ago #2272 by Linh Robert

Replied by Linh Robert on topic Re: Stylizing lists in an article

Hi,

Here is some examples:
HTML:

Code:

<ul class="arrow">
<li>This is a sample <strong>Arrow list</strong>.</li>
<li>Dolor Curabitur Nam Nulla augue id iaculis.</li>
<li>Lorem et nunc congue pede auctor</li>
<li>Nunc cursus sem et pretium.</li>
</ul>

<ul class="checklist">
<li>This is a sample <strong>Checklist</strong>.</li>
<li>Dolor Curabitur Nam Nulla augue id.</li>
<li>Lorem et nunc congue pede auctor</li>
<li>Nunc cursus sem et pretium.</li>
</ul>

<ul class="star">
<li>This is a sample <strong>Star list</strong></li>
<li>Dolor Curabitur Nam Nulla augue id iaculis.</li>
<li>Lorem et nunc congue pede auctor</li>
<li>Nunc cursus sem et pretium.</li>
</ul>

<ol>
<li>This is a sample <strong>Order list</strong></li>
<li>Dolor Curabitur Nam Nulla augue id iaculis.</li>
<li>Lorem et nunc congue pede auctor</li>
<li>Nunc cursus sem et pretium.</li>
</ol>

CSS:

Code:

ul.checklist li {
    background: url("../images/typography/checklist.png") no-repeat scroll 4px 2px transparent !important;
    margin-bottom: 5px;
    padding: 0 0 0 1.4em !important;
}
ul.arrow li {
    background: url("../images/typography/arrow_bold.png") no-repeat scroll 5px 5px transparent;
    margin-bottom: 5px;
    padding: 1px 0 1px 1.4em !important;
}
ul.star li {
    background: url("../images/typography/star.png") no-repeat scroll 2px 0 transparent !important;
    margin-bottom: 5px;
    padding: 0 0 0 1.4em !important;
}

ol {
    list-style-type: decimal;
}
ol li {
    margin-left: 1.4em !important;
}

IMAGE:

Code:

http://demo.omegatheme.com/joomla25/ot_perfume/templates/ot_perfume/images/typography/arrow_bold.png
http://demo.omegatheme.com/joomla25/ot_perfume/templates/ot_perfume/images/typography/checklist.png
http://demo.omegatheme.com/joomla25/ot_perfume/templates/ot_perfume/images/typography/star.png

You can try above examples, then modify the css to meet your look.

Thanks

If you need to send us FTP access / host access, administrator access or any private information:
services(at)omegatheme(dot)com or drop a ticket www.omegatheme.com/member/

Please Log in or Create an account to join the conversation.

Time to create page: 0.190 seconds

Stylizing lists in an article

About Growth

Information

Contact Info

Mobile Menu