WordPress.org

Ready to get started?Download WordPress

Forums

List category posts
Styling Output (9 posts)

  1. sdtheatreworld
    Member
    Posted 2 years ago #

    I noticed quite a few posts asking about how to style the output from this plugin, and the documentation was a little confusing, so after spending some time with it I thought I would share my findings.

    First, I highly recommend creating a child theme so that you do not mess up any of your core files, and so that your work will not be erased with your next theme update. See here for how to set this up: http://codex.wordpress.org/Child_Themes

    If you want the formatting to work for both widget areas and on pages, there is a simple solution to allow shortcode in widgets.

    Add the following to functions.php

    /* This allows shortcodes in widget text areas */
    add_filter('widget_text', 'do_shortcode');

    Now you will be able to use shortcode in the standard Text widget.

    See here for a more detailed explanation of this step:
    http://wordpress.org/support/topic/how-to-make-shortcodes-work-in-a-widget
    Or here:
    http://digwp.com/2010/03/shortcodes-in-widgets/

    1. Put the shortcode where you want your category list to show up

    2. Add a tag and a class to each component
    For example, I have used the span tag with all of my components. You can use p, br, or other html tags instead. You can name the classes whatever you want, as long as they are the same as the classes that you are about to build in step 3.
    [catlist id=1 date=yes author=yes excerpt=yes title_tag=span title_class=titleclass date_tag=span date_class=dateclass author_tag=span author_class=authorclass excerpt_tag=span excerpt_class=excerptclass]

    3. Add a class to style.css for each component (the html tag, then a period, then your class name)

    For example:

    span.titleclass{
    }
    span.dateclass {
    }
    span.authorclass {
    }
    span.exerptclass {
    }

    4. Optionally, you can choose not to display the bullet points with the following added to your style.css

    ul.lcp_catlist li {
    	list-style-type:none;
    }

    Here is a complete example of what I added to my style.css:

    /* BEGIN CSS FOR CUSTOM DISPLAY OF LIST CATEGORY POSTS */
    /* Decreases the left-hand margin of the entire list */
    ul.lcp_catlist {
    	margin:0 0 0 -3px;
    }
    
    /* Removes the bullet points from lists */
    ul.lcp_catlist li {
    	list-style-type:none;
    }
    
    /* The following are all classes that modify how each component of the list looks.
    These classes must be specificed in the shortcode by first adding a tag around the component
    i.e. author_tag=span
    and then adding the class
    i.e. author_class=authorclass */
    span.titleclass {
    font-size: 1.2em;
    font-weight:bold;
    display:block;
    }
    
    span.dateclass {
    font-size: .8em;
    font-weight:bold;
    display:block;
    }
    
    span.authorclass {
    font-size: 1.1em;
    display:block;
    }
    
    span.excerptclass {
    font-size: 1em;
    display:block;
    margin:0 0 20px 0;
    }
    /* END CSS FOR CUSTOM DISPLAY OF LIST CATEGORY POSTS */

    Additional note: You can have as many classes as you want for each component and reference different classes (via the shortcode) on different pages. See the HTML & CSS Customization section of the Other Notes section of the plugin page for details about which components can be customized this way.

  2. pauly24
    Member
    Posted 2 years ago #

    I'm having a problem with this, I've added
    [catlist name="News" numberposts=1 date=yes author=yes excerpt=yes title_tag=span title_class=titleclass date_tag=span date_class=dateclass author_tag=span author_class=authorclass excerpt_tag=span excerpt_class=excerptclass]
    (Just same as above)
    to my home page, then in my style CSS I've copied and pasted again from whats above, and I've tried changing all the values but my site doesn't change. I've tried clearing all cache, restart, different browser etc but it just doesn't pick up the styling change.

  3. Creatrix
    Member
    Posted 1 year ago #

    to get this to work you need to put quotes around all of the attributes -
    [catlist name="News" numberposts="1" date="yes" author="yes" excerpt="yes" etc etc....

  4. pgray@symposium-events.co.uk
    Member
    Posted 1 year ago #

    Hi

    This is really helpful but I have hit the limit of my hacking abilities when it comes to putting in the thumbnail and formatting it.

    I added:

    thumbnail_tag=span thumbnail_class=thumbnailclass

    to the shortcode and

    span.thumbnailclass {
    align:alignright
    }

    to the style.css but no matter what I put where the "align:alignright" now shows, I can't change the alignment of the image.

    I'm probably missing something simple, but can anyone tell me what that is?

    Thanks in advance for any help!

    Paul

  5. pgray@symposium-events.co.uk
    Member
    Posted 1 year ago #

    Solved it..

    Don't need this in style.css at all:

    span.thumbnailclass {
    img.alignright
    }

    Just put

    thumbnail_class="alignright"

    in the shortcode

  6. andriansah
    Member
    Posted 1 year ago #

    Thank you sdtheatreworld
    you save my time :D

  7. hunter44
    Member
    Posted 1 year ago #

    Thank you SO MUCH!! You saved me so much time. I was just about ready to give up on this plugin -- I gave up on it last summer and installed 2 others instead, but this plugin has all the features I wanted... I just couldn't get it formatted right!!

    Now it's done -- in about an hour -- thanks to you, sdtheatreworld!!

  8. thefairmagazine
    Member
    Posted 1 year ago #

    I just wanted to thank you so much for this - you literally saved me hours!

  9. dcell59
    Member
    Posted 1 year ago #

    Yes. Thanks for this article. It helped me get the plugin set up and styled exactly as I needed very quickly.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.