• Creator
    Topic
  • #8186

    Spiros Doikas
    Spectator
    Been thanked: 0 times

    They render only if one assigns them a custom style like

    Quote:
    <ul class=”list-icon circle-yes list-icon-arrow”>

    Perhaps it would be a good idea to have a default style assigned to them in css? How could I do that for plain UL, i.e. add the above style?

Viewing 14 replies - 1 through 14 (of 14 total)
Replies
  • Roman
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #8756 |

    have you try the simplest way?

    Code:
    <ul>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    </ul>

    or

    Code:
    <ol>
    <li>Item #1</li>
    <li>Item #2</li>
    <li>Item #3</li>
    </ol>
    Spiros Doikas
    Spectator
    Post count: 49
    Been thanked: 0 times
    #8767 |

    Yes, this is the default (i.e. via using the wordpress editor option), but does not render anything (i.e. no bullet or extra spacing) unless I add an extra style for plain ul. The question is, hot to apply to plain UL the style that is applied with the aforementioned shortcode.

    Quote:
    <ul class=”list-icon circle-yes list-icon-arrow”>
    Roman
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #8771 |

    insert in Custom CSS field:

    Code:
    .post-content ul {list-style-type:square;}
    Spiros Doikas
    Spectator
    Post count: 49
    Been thanked: 0 times
    #8776 |

    Tried it, no effect. What I added for a plain bullet that worked was:

    Code:
    ul {
    list-style: disc;
    }
    Roman
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #8781 |

    you found it yourself 🙂

    Spiros Doikas
    Spectator
    Post count: 49
    Been thanked: 0 times
    #8782 |

    Yep, but I want to add one of your custom (shortcode) styles by default, how can I do that?

    Code:
    <ul class=”list-icon circle-yes list-icon-arrow”>

    The css file was too complex.

    Roman
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #8787 |

    I am not sure, what you mean. You want to change the shortcode, or?

    Spiros Doikas
    Spectator
    Post count: 49
    Been thanked: 0 times
    #8793 |

    No. I want the plain UL class to have the same style as the style of that shortcode class.

    I.e. see here http://www.siderman.gr/links/

    Code:
    <ul class=”list-icon circle-yes list-icon-arrow”>
    <li><a href=”http://www.metaixmio.gr/author/2846-.aspx” target=”_blank” rel=”nofollow”>Μεταίχμιο</a></li>
    <li><a href=”http://www.kastaniotis.com/author/243″ target=”_blank” rel=”nofollow”>Καστανιώτης</a></li>
    <li><a href=”http://futura-books.blogspot.gr/2007/08/blog-post_24.html” target=”_blank” rel=”nofollow”>Futura</a></li>
    </ul>

    I have used the above class. I would want to have the same effect with plain ul, i.e.

    Code:
    <ul>
    <li><a href=”http://www.metaixmio.gr/author/2846-.aspx” target=”_blank” rel=”nofollow”>Μεταίχμιο</a></li>
    <li><a href=”http://www.kastaniotis.com/author/243″ target=”_blank” rel=”nofollow”>Καστανιώτης</a></li>
    <li><a href=”http://futura-books.blogspot.gr/2007/08/blog-post_24.html” target=”_blank” rel=”nofollow”>Futura</a></li>
    </ul>
    Roman
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #8795 |

    try insert this in Custom CSS:

    Code:
    .post-content ul li:before {
    content:’\f105′;
    font-family: FontAwesome;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
    border-radius: 75px;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
    font-size: 9px;
    text-align: center;
    }
    Spiros Doikas
    Spectator
    Post count: 49
    Been thanked: 0 times
    #8796 |

    The effect of that was just this (the > symbol):

    8a3u.png

    Roman
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #8798 |

    try this:

    Code:
    .post-content ul li:before {
    content:’\f105′;
    font-family: FontAwesome;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
    border-radius: 75px;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
    font-size: 9px;
    text-align: center;
    display: inline-block;
    float: left;
    font-style: normal;
    font-weight: normal;
    height: 18px;
    line-height: 18px;
    margin: 0 0 15px;
    padding: 0 0 0 25px;
    margin-right: 0;
    text-decoration: inherit;
    width: 18px;
    }
    Spiros Doikas
    Spectator
    Post count: 49
    Been thanked: 0 times
    #8805 |

    This was the result:

    gqsv.png

    Roman
    Keymaster
    Post count: 2538
    Been thanked: 29 times
    #8807 |

    this will work. I tested it:

    Code:
    .post-content ul li:before {
    content:’\f105′!important;
    font-family: FontAwesome;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.05);
    border-radius: 75px;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
    font-size: 9px;
    text-align: center;
    display: inline-block;
    float: left;
    font-style: normal;
    font-weight: normal;
    height: 18px;
    line-height: 18px;
    margin: 0 15px 0 0;
    padding: 0;
    text-decoration: inherit;
    }
    Spiros Doikas
    Spectator
    Post count: 49
    Been thanked: 0 times
    #8826 |

    This was the result (first list). Note in the second list below I use the

    Code:
    <ul class=”list-icon circle-yes list-icon-arrow”>

    style which renders fine.

    j93f.png

Viewing 14 replies - 1 through 14 (of 14 total)
You must be logged in to reply to this topic.