Tagged: , ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #20781

    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.

    #109044

    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

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘How to create own list style in CORONA?’ is closed to new replies.