normal Stylizing lists in an article

More
11 years 6 months ago #2270 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.

More
11 years 6 months ago #2272 by Linh Robert
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 Notice: Undefined variable: target in /home/omegatheme/public_html/components/com_kunena/template/aurelia/layouts/bbcode/url/default.php on line 32
> www.omegatheme.com/member/

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

Time to create page: 0.254 seconds

About Growth

Innovative tech for eCommerce growth

Contact Info

Head: No. 3, 175/55 Lane, Lac Long Quan St., Nghia Do Ward, Cau Giay District, Hanoi City, Vietnam