1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 Make your bullet lists awesome

Discussion in 'Styling and Customization Questions' started by RamzanHD, Mar 19, 2016.

  1. RamzanHD

    RamzanHD Active Member

    [​IMG]
    [​IMG]



    you can see the difference between the two pics right ;D
    here's what you need to make it possible:

    open your EXTRA.css template and add this




    Code:
    .message ol{
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    }
    
    .message ol ol{
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
    }
    .message .baseHtml ol li {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
    }
    .message .baseHtml ol li hover{
    background: #eee;
    }
    .message .baseHtml ol li:hover:before{
    transform: rotate(360deg);
    }
    .message .baseHtml ol li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    }
    .message .baseHtml ul li {
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
    }
    .message .baseHtml ul li hover{
    background: #eee;
    }
    .message .baseHtml ul li:hover:before{
    transform: rotate(360deg);
    }
    .message .baseHtml ul li:before {
    content: '*';
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    }
     
    Behnzz123 and gaminglife like this.

Share This Page