Before creating a new discussion, please make sure you:
  • 1. Check the Documentation that came with the theme.
  • 2. Use the forum Search. Your question might have already been answered.
If you would like to post a question click the "Start a New Discussion" button on the right.
Custom Bullet Point list style
  • Vote Up0Vote Down clevergirlclevergirl November 2011
    I created my own bullet point for a new list style. I added my own 16x16 png to styles/common-images. I added my own style code to styles/style1/css/style.css down where all your 11 list styles are. I made a 12th list style linking it to my image.

    The problem is I'm missing some code b/c my bullet points show up but are not aligned properly. They overlap the actual list text instead of positioning left of the list text like all of your bullet points do.

    Here is my own list-12 style that I added (in styles/style1/css/style.css).
    Where else should I have added or tweaked? What did I miss?
    /* Begin Typography: List Styles */
    ul.list-1, ul.list-2, ul.list-3, ul.list-4, ul.list-5, ul.list-6, ul.list-7, ul.list-8, ul.list-9, ul.list-10, ul.list-11, ul.list-12 {
        margin: 5px 0 5px 10px;
        position: relative; /* fix for IE6 (figures...) */
        overflow: hidden;
    }
    ul.list-1 ul, ul.list-2 ul, ul.list-3 ul, ul.list-4 ul, ul.list-5 ul, ul.list-6 ul, ul.list-7 ul, ul.list-8 ul, ul.list-9 ul, ul.list-10 ul, ul.list-11 ul, ul.list-12 ul { 
        margin-left:0; 
    }
    ul.list-1 li, ul.list-2 li, ul.list-3 li, ul.list-4 li, ul.list-5 li, ul.list-6 li, ul.list-7 li, ul.list-8 li, ul.list-9 li, ul.list-10 li, ul.list-11, li ul.list-12 li {
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        margin-bottom: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 25px !important;
        margin-left:0;
    }
    ul.list-1 li { background: transparent url(../../common-images/tick-green.png) no-repeat scroll 0 3px; }
    ul.list-2 li { background: transparent url(../../common-images/tick-grey.png) no-repeat scroll 0 3px; }
    ul.list-3 li { background: transparent url(../../common-images/exclamation.png) no-repeat scroll 0 3px; }
    ul.list-4 li { background: transparent url(../../common-images/thumb-up.png) no-repeat scroll 0 3px; }
    ul.list-5 li { background: transparent url(../../common-images/lifeboy.png) no-repeat scroll 0 3px; }
    ul.list-6 li { background: transparent url(../../common-images/calendar-task.png) no-repeat scroll 0 3px; }
    ul.list-7 li { background: transparent url(../../common-images/pin.png) no-repeat scroll 0 3px; }
    ul.list-8 li { background: transparent url(../../common-images/clock.png) no-repeat scroll 0 3px; }
    ul.list-9 li { background: transparent url(../images/double-arrow.png) no-repeat scroll 6px 7px; }
    ul.list-10 li { background: transparent url(../images/arrow-2.png) no-repeat scroll 6px 5px; }
    ul.list-11 li { background: transparent url(../images/arrow-3-dark.png) no-repeat scroll 6px 5px; }
    ul.list-12 li { background: transparent url(../../common-images/plum.png) no-repeat scroll 0 3px; }
     
    /* Cycle 2 & Cycle 3 slider list styles */
    ul#c2-slider li ul.list-1, ul#c2-slider li ul.list-2, ul#c2-slider li ul.list-3, ul#c2-slider li ul.list-4, ul#c2-slider li ul.list-5,
    ul#c2-slider li ul.list-6, ul#c2-slider li ul.list-7, ul#c2-slider li ul.list-8, ul#c2-slider li ul.list-9, ul#c2-slider li ul.list-10,
    ul#c3-slider li ul.list-1, ul#c3-slider li ul.list-2, ul#c3-slider li ul.list-3, ul#c3-slider li ul.list-4, ul#c3-slider li ul.list-5,
    ul#c3-slider li ul.list-6, ul#c3-slider li ul.list-7, ul#c3-slider li ul.list-8, ul#c3-slider li ul.list-9, ul#c3-slider li ul.list-10,
    ul#c3-slider li ul.list-11, ul#c3-slider li ul.list-12 {
        margin: 5px 0 5px 10px;
        position: relative; /* fix for IE6 (figures...) */
        overflow: hidden;
        font-size: 16px;
    }
    ul#c2-slider li ul.list-1 ul, ul#c2-slider li ul.list-2 ul, ul#c2-slider li ul.list-3 ul, ul#c2-slider li ul.list-4 ul, ul#c2-slider li ul.list-5 ul,
    ul#c2-slider li ul.list-6 ul, ul#c2-slider li ul.list-7 ul, ul#c2-slider li ul.list-8 ul, ul#c2-slider li ul.list-9 ul, ul#c2-slider li ul.list-10 ul,
    ul#c2-slider li ul.list-11 ul, ul#c2-slider li ul.list-12 ul,
    ul#c3-slider li ul.list-1 ul, ul#c3-slider li ul.list-2 ul, ul#c3-slider li ul.list-3 ul, ul#c3-slider li ul.list-4 ul, ul#c3-slider li ul.list-5 ul,
    ul#c3-slider li ul.list-6 ul, ul#c3-slider li ul.list-7 ul, ul#c3-slider li ul.list-8 ul, ul#c3-slider li ul.list-9 ul, ul#c3-slider li ul.list-10 ul,
    ul#c3-slider li ul.list-11 ul, ul#c3-slider li ul.list-12 ul { 
        margin-left:0; 
    }
    ul#c2-slider li ul.list-1 li, ul#c2-slider li ul.list-2 li, ul#c2-slider li ul.list-3 li, ul#c2-slider li ul.list-4 li, ul#c2-slider li ul.list-5 li,
    ul#c2-slider li ul.list-6 li, ul#c2-slider li ul.list-7 li, ul#c2-slider li ul.list-8 li, ul#c2-slider li ul.list-9 li, ul#c2-slider li ul.list-10 li,
    ul#c2-slider li ul.list-11 li, ul#c2-slider li ul.list-12 ul,
    ul#c3-slider li ul.list-1 li, ul#c3-slider li ul.list-2 li, ul#c3-slider li ul.list-3 li, ul#c3-slider li ul.list-4 li, ul#c3-slider li ul.list-5 li,
    ul#c3-slider li ul.list-6 li, ul#c3-slider li ul.list-7 li, ul#c3-slider li ul.list-8 li, ul#c3-slider li ul.list-9 li, ul#c3-slider li ul.list-10 li,
    ul#c3-slider li ul.list-11 li, ul#c3-slider li ul.list-12 ul {
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        margin-bottom: 2px !important;
        padding-bottom: 2px !important;
        padding-left: 25px !important;
        margin-left:0;
        width:auto;
    }
    ul#c2-slider li ul.list-1 li, ul#c3-slider li ul.list-1 li { background: transparent url(../../common-images/tick-green.png) no-repeat scroll 0 7px !important; }
    ul#c2-slider li ul.list-2 li, ul#c3-slider li ul.list-2 li { background: transparent url(../../common-images/tick-grey.png) no-repeat scroll 0 7px !important; }
    ul#c2-slider li ul.list-3 li, ul#c3-slider li ul.list-3 li { background: transparent url(../../common-images/exclamation.png) no-repeat scroll 0 7px !important; }
    ul#c2-slider li ul.list-4 li, ul#c3-slider li ul.list-4 li { background: transparent url(../../common-images/thumb-up.png) no-repeat scroll 0 7px !important; }
    ul#c2-slider li ul.list-5 li, ul#c3-slider li ul.list-5 li { background: transparent url(../../common-images/lifeboy.png) no-repeat scroll 0 7px !important; }
    ul#c2-slider li ul.list-6 li, ul#c3-slider li ul.list-6 li { background: transparent url(../../common-images/calendar-task.png) no-repeat scroll 0 7px !important; }
    ul#c2-slider li ul.list-7 li, ul#c3-slider li ul.list-7 li { background: transparent url(../../common-images/pin.png) no-repeat scroll 0 7px !important; }
    ul#c2-slider li ul.list-8 li, ul#c3-slider li ul.list-8 li { background: transparent url(../../common-images/clock.png) no-repeat scroll 0 7px !important; }
    ul#c2-slider li ul.list-9 li, ul#c3-slider li ul.list-9 li { background: transparent url(../images/double-arrow.png) no-repeat scroll 6px 12px !important; }
    ul#c2-slider li ul.list-10 li, ul#c3-slider li ul.list-10 li { background: transparent url(../images/arrow-2.png) no-repeat scroll 6px 10px !important; }
    ul#c2-slider li ul.list-11 li, ul#c3-slider li ul.list-11 li { background: transparent url(../images/arrow-3-dark.png) no-repeat scroll 6px 10px !important; }
    ul#c2-slider li ul.list-12 li, ul#c3-slider li ul.list-12 li { background: transparent url(../images/arrow-3-dark.png) no-repeat scroll 6px 10px !important; }


    Can you help me?
    Thanks,
    Lindy
  • 1 Comment sorted by
  • Vote Up0Vote Down andonandon November 2011
    Please Sign In to see answers.
This discussion has been closed.
← All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Categories

Tagged

Click here to visit WordPress 101