The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS There has got to be an easier way

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #32462

    I can’t get my head around this problem, i’m sure there is an easy fix. I’m using WordPress as a CMS and my client is going to be using a lot of lists when he inputs content into a page. Being so, i’d like to style these lists with icons etc, here’s an example of my css:

    #content ul { margin: 18px 0 0 0; list-style: none; }
    #content ul li { margin: 0 0 5px 0; padding: 0 0 0 20px; background: url(../../images/tick.png); background-position: 0px 5px; background-repeat: no-repeat; }

    The problem lies when i want to add my another list into the content area, for example, a list displaying the most recent news posts. It obviously inherits the styles used above and i’m having to use the !important tag to overwrite them.

    #content { margin: 18px 0 0 0; list-style: none; }
    #content li { margin: 0 0 15px 0 !important; padding: 0 0 0 20px; background: url(../../images/date.png) !important; background-position: 0px 0px !important; background-repeat: no-repeat !important; }

    I’m going to be using a lot of lists so doing this repeatedly is just going to get plain annoying. Does anyone know of a solution? My brain isn’t functioning very well right now!

    I hope i explained that well enough.


    Give them different class names?


    Not sure i follow.

    The lists are generated by WordPress. Sure, i could asign a class in the html mode, but a client using the visual editor wouldn’t know how to.


    lol, not sure I follow you either…
    You have lists and then #content ul li that styles them.
    You then want the most recent list to be styled differently with #content li ?


    Yeah sorry, not explaining myself correctly.

    When a client logs in and posts some content with a list included, wordpress will punch it out as:

    • List Item #2

    • List Item #2

    • List Item #2

    • List Item #2

    I want to change the style of these lists but they don’t have a specific class to style. So i have to use something like #content ul li in order to do so.

    The problem is that i also want to place lists within my own template in the #content div with completely different styles. Unfortunately these styles inherit everything from the #content ul li style and i have to use !important tags to overwrite them all which is hell annoying.


    Sorry, I’ve been racking my brains for the last hour and i can;t think of it, I’m sure there is a way with php but i just can’t get it. Not that this forum isn’t amazing but for php specific queries i like to use they have some really great php minds over there (so does this forum before i start getting abuse, but no one seems to be around today, probably because its easter and everyone has better things to be doing).
    Anyway hope you find a solution and please post back here if you do.


    First of all, you don’t need all those !important rules. Check out this article:

    There’s an easy way to create custom lists within WP: by using shortcodes. Here is the code from my own theme:

    add_shortcode('news', 'theme_shortcode_list');
    add_shortcode('anotherlist', 'theme_shortcode_list');
    /* just like that. */

    function theme_shortcode_list( $atts, $content = null, $code ) {
    $content = str_replace('
      ', '
      ', do_shortcode($content));
      return $content;

    What it does is that it adds a classname to the ul so you can hook to that classname in you CSS. What you do is wrap your ul’s around [check] or [news] or whatever shortcode name you define. Now in your CSS define styles for this lists:

    ul.arrow li { whatever } li { yeah! }

    Nice shazdeh, thanks for that!


    Maybe I’m overthinking this, but couldn’t you do something like have the specified “news” list CSS come before the regular list CSS?

    ul#news { … }
    ul { }

    That way, the “news” list would still retain its CSS while every other list would inherit the standard list?


    Hey guys,

    I’m trying to expand on shazdeh’s method to add shortcodes to links instead of lists.

    When someone creates a link in wordpress it obviously outputs it as :

    How would i go about adding a class to this?

    I’ve tried everything but failed.


    This is the best i could do:

    add_shortcode('zip', 'theme_shortcode_list');

    function theme_shortcode_list( $atts, $content = null ) {
    extract( shortcode_atts( array(
    'class' => 'zip',
    ), $atts ) );

    return '' . $content . '';

    It outputted this:

    Breaking the Silence – Parliamentary Breakfast Resources

    I just selected it with CSS using a but i’d prefer if i could get the class within the a tags.

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.