How to create own list style in CORONA? « Support Forum | Kriesi.at

Support Forum » Corona

How to create own list style in CORONA?

2 posts from 2 voices

Started 2 months ago by colorit2
Latest reply from Nick
This topic is not resolved

Tags:

colorit2
Member
Hi,

sorry for that simple, probably stupid question, but I don't get it my own list styles to work. I would like to create some list styles with different bullet types, without overwriting CORONA's own standard list style.

I have these CSS:
```
#squarelist ul li {
    background-image: url("http://xxx.de/wp-content/uploads/sites/2/2013/03/list1.png");
    background-position: 0 3px;
    background-repeat: no-repeat;
    padding-left: 20px;
	list-style-position: outside;
    list-style-type: none;
    margin-left: 0px;
}
```
and this in my post:
```
<ul id="squarelist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
```
This shows me still the standard bullets instead of my own image (the image path is right):

When I check this with Firebug, then it uses always the CORONA standard list styles for lists and ignores my own.

Could you please tell me, how to successful have list styles with own bullet images in CORONA?

Thanks a lot for any help.
Posted 2 months ago #
Nick
Moderator
Hi,

You are not using correct code to hit your classes, that's why you don't see it ... #squarelist ul { ... } Use Chrome Developer Tools, it is much better and easier to use then firebug and is more robust. Then open up custom.css file in the sources of chrom dev tools and just copy paste and move css around and you will see things change, this way you can try a whole bunch of different configurations.. much easier to hack out css that way.,
```
<HTML>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

<style type="text/css">
#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
</style>
</html>
```
Workflow in Dev Tools for this would be http://i.imgur.com/R1TAHBv.png

Thanks,

Nick
Posted 2 months ago #