SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2006
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post unordered list replace bullet by image according to level, if last level text as link

    Good day to you all,
    I was wondering if there is a way to change the the look of wach level of a list.

    Ex:

    Last level, text = link
    1st level, has 1 image instead of bullet and text in bold
    2nd level as another image as bullet and text in bold
    3rd level, if not last level, as another image as bullet and text in bold\

    Here is where I'm now :

    PHP Code:

    <html>
    <head>
    <style type="text/css">
    ul {
          list-style-image: url(Icons/open_book_icon.jpg);
    }

    li {
          list-style-image: url(Icons/box_icon.png);
    }


    </style>
    </head>
    <body>



    <?PHP
    function globDir($dir)
    {
       
    $files glob("$dir/*"GLOB_ONLYDIR);
       
         if(!empty(
    $files))
       {
          echo 
    "<ul>\n";

          foreach(
    $files as $file)
          {
             echo 
    "<li><b>"basename($file)."</b>\n";
             
    globDir($file);
             echo 
    "</li>\n";
          }
          echo 
    "</ul>\n";
       }
    }
    globDir('Photos');
    ?>

    </body>
    </html>
    Thanks !

  2. #2
    ********* Staff mattevans's Avatar
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good Question Peuplarchie.

    You will need to take advantage of CSS classes.
    See my example below, hopefully it gets you started!

    Code HTML4Strict:
    <ul class="one">
                <li>Test One</li>
                <li>Test Two</li>
                <li>Test Three
                    <ul class="two">
                        <li>Test Four</li>
                        <li>Test Five</li>
                    </ul>
                </li>
    </ul>

    Code CSS:
        ul.one{
            font-weight:bold;
        }
     
        ul.two li{
            color:#FF0000;
            font-weight:normal;
        }

    The first unordered list is 'bold', whereas the second will be 'red' in colour.
    To change the actual bullet point try experimenting with the list-style-image CSS property.

    All the best!
    Matt Evans
    Sitepoint Developer
    tweet 2 me


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •