WordPress.org

Ready to get started?Download WordPress

Forums

TPG Get Posts
[resolved] CCS Styling and overrides (7 posts)

  1. sandytri
    Member
    Posted 1 year ago #

    Hello,

    I am trying to style this page http://www.lauredrogoul.com/projects-2/ to display in a grid. To style this, I've copied the tpg-get-posts-style.css to the root of my theme (gridiculious) and renamed it user-tpg-get-posts-style.css.

    I have two problems,

    One, the css override is not working, only edits in the plugin css change the page (I tested this once the user version didn't work). How can I fix this?

    Second, the UL is there, but the LI is not appearing, all the posts are displaying in individual DIV's, if they were in an LI I would be able to style it in my user css file (if it worked). It looks like the LI should work as its accounted for in the plugin PHP, how can I get that to happen?

    thanks very much, this is a very helpful plug in.
    sandy

    http://wordpress.org/extend/plugins/tpg-get-posts/

  2. cswaim
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Sandy

    The css over-ride: the tpg-get-posts-style.css needs to be renamed to user-get-posts-style.css (no tpg in the name).

    for the second problem, you may have uncovered a bug in the code. I am not sure what the shortcode looks like that you are using, but I think you have the thumbnail only flag set to true. I looked at the plugin code, it seems displaying the thumbnails only in a list has never been tested, as the li tags are not generated, but each thumbnail is wrapped in a div. I will need to look at this to see how to add the li for each post when requesting a thumbnail only.

  3. sandytri
    Member
    Posted 1 year ago #

    Hi there,

    This is very helpful! Here is the short code I'm using:
    [tpg_get_posts category_name="Projects" numberposts="30" thumbnail_only="true" thumbnail_size="small" ul_class="true" orderby="title" ul_class="tpg-ul-class"]

    I can change thumbnail to false which seems to display the LI HR class, but I need to remove all the other stuff displaying like comments, meta etc. I need to play with that...

    I would love it if the thumbnail only display could be in a grid...
    thanks for catching my error on css file name!!! I figured it was me...

    more shortly
    sandy

  4. cswaim
    Member
    Plugin Author

    Posted 1 year ago #

    I just pushed out release 2.2.2 which wraps the thumbnails in li tags instead of div tags, which is what happens with the regular post display. In your shortcode, you have ul_class='true' which should be removed, as it should be overlaid by the last parm ul_class="tpg-ul-class".

    As far as a grid display, I think you should be able to use the css to float the li items and use margins to control the number across the page. I have not played with this. If you try it and are successful, then post your formatting in a new post so others can see how you did it.

    thanks
    criss

  5. sandytri
    Member
    Posted 1 year ago #

    That is fantastic! thanks so much, it instantly improved my situation.
    I have some styling to do, but will post some css back here soon.
    You rock
    thanks
    sandy

  6. sandytri
    Member
    Posted 1 year ago #

    Here is the css I'm using to create a liquid grid display of thumbnail only posts on a static page using the above shortcode.
    If you enlarge the page the posts will be one, two or more rows wide.

    #tpg-get-posts .tpg-ul-class {
    width:100%;
    list-style-type:none;
    padding:0;
    margin:0;
    }

    #tpg-get-posts .tpg-ul-class > li {
    display:-moz-inline-box;
    display:inline-block;
    zoom:1;
    vertical-align:top;
    width:288px;
    margin:0 21px 30px 0;
    padding:0;
    background:none;
    position:relative;
    background:#fff;
    }

    * + html #tpg-get-posts .tpg-ul-class li {
    display:inline;
    }

    #tpg-get-posts .tpg-ul-class li .inner {
    padding:15px 14px;
    }

    #tpg-get-posts .tpg-ul-class li.nomargin {
    margin-right:0 !important;
    }

  7. cswaim
    Member
    Plugin Author

    Posted 1 year ago #

    thanks for posting back your solution. I am sure it will help others trying to accomplish similar results.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic