1. REGISTRATION REQUIREMENTS:

    Register with your xenforo.com Username then start a conversation at xenforo.com w/Bob and provide the following:
    1. Your XenForo License Validation Token
    2. The Domain Name associated with the License
    NOTE: Your account will be validated once ALL requirements are verified/met. Thank you for your patience.

Nice style for lists

Discussion in 'Showcase Support' started by Dadparvar, Dec 4, 2015.

  1. Dadparvar

    Dadparvar Member AMS Premium RMS Premium SC Premium UBS Premium

    Hi,

    If you like and use this: https://xenforo.com/community/resources/jazz-up-your-bullet-lists.1925/
    You know that it will not change lists style in your content of Showcase tabs's.
    If you want to do it with lists in your Showcase Tabs's content, easily add codes below to your "EXTRA.css":
    Code:
    .primaryContent 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);
    }
    
    .primaryContent ol ol{
        margin: 0 0 0 2em; /* Add some left margin for inner lists */
    }
    .primaryContent .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;
    }
    .primaryContent .baseHtml ol li hover{
        background: #eee;
    }
    .primaryContent .baseHtml ol li:hover:before{
        transform: rotate(360deg);
    }
    .primaryContent .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;
    }
    .primaryContent .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;
    }
    .primaryContent .baseHtml ul li hover{
        background: #eee;
    }
    .primaryContent .baseHtml ul li:hover:before{
        transform: rotate(360deg);
    }
    .primaryContent .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;
    }
    I don't know how much logical or standard is my work, but the result this:
    2015-12-04_20-13-05.png
    Hope you like this.
     
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.