WordPress.org

Ready to get started?Download WordPress

Forums

Posts By Tag
[resolved] Change Styling/Look (13 posts)

  1. pamkaur14
    Member
    Posted 3 months ago #

    Hi,

    I have just installed your plugin and it's exactly what I am looking for and so easy to use. I was wondering if it is possible to do the following though:

    1. Align the thumbnails in horizontal rows (5 thumbnails in a row) rather than as they appear down a list.

    2. Remove the bullet point attached to each thumbnail.

    3. Remove the border around each row of thumbnails.

    4. Place the title of the post under the thumbnail rather than on the right side of it.

    I am a novice at WordPress and any help or guidance you can provide will be hugely appreciated. If this works for me, I will definitely make a contribution towards your wonderful work.

    Thanks in advance. :)

    https://wordpress.org/plugins/posts-by-tag/

  2. pamkaur14
    Member
    Posted 3 months ago #

    I have managed to make some changes reading through the CSS file and trying to work it out myself and by trial & error by adding the following code to my child CSS theme file:

    ul.posts-by-tag-list li {list-style-type:none; font: 400 1.0em 'Lato'; text-transform: uppercase; display: inline-block; }

    This has fixed problems 1 and 2 above. However, I still need help with the following as I can't find this information anywhere:

    3. Remove the border around each row of thumbnails.

    4. Place the title of the post under the thumbnail rather than on the right side of it.

    Thanks again. :)

  3. Sudar
    Member
    Plugin Author

    Posted 3 months ago #

    Glad to know that you got the first two working.

    You can also try to use "Inspect Element" feature in chrome or firefox (through firebug addon) that will allow you to find out what are all the CSS that gets applied for an element and then can change them in realtime to see what effect they have.

  4. pamkaur14
    Member
    Posted 3 months ago #

    Can anyone else help? Has anyone had luck with this?

    I have spent the last 2 hours reading and trying different things in my CSS file but nothing seems to work. The border around the list looks awful when I'm trying to create a professional looking website.

    Any help would be appreciated. I am surprised you don't know how to set this Sudar. I am sure it is only something very simple.

    Cheers.

  5. pamkaur14
    Member
    Posted 3 months ago #

    Omg! I finally figured out number 3.

    I looked into the Text editor section on the Post page and found a " < code > " function wrapping the shortcode which was obviously copied from the forum thread. Because it was highlighted as " < code > " on the Post page it was showing up with a box around the listings.

    Duh! All I needed to do was remove the code function - I would not have managed to do anything with CSS styling! It might be best to direct users to shortcodes outside of the forum, ie. on the plugin page, to avoid this happening in the future.

    Still working on number 4.`

  6. pamkaur14
    Member
    Posted 3 months ago #

    Hi Sudar,

    I have tried absolutely everything from changing my CSS styling to adding things such as 'vertical-align: bottom' to the 'ul.posts-by-tag li' line but nothing seems to work.

    Do you have any ideas on how I can set the post title to be below the thumbnail? I can send you my details via message if you need access to my site.

    Thanks in advance.

  7. Sudar
    Member
    Plugin Author

    Posted 3 months ago #

    I would need to have a look at your site.

    So send me a link to the page where you are facing this issue and also an annotated screenshot of how you want the page to look.

  8. pamkaur14
    Member
    Posted 3 months ago #

    I have sent you an email with the details as requested.

    Thanks so much for your help.

  9. pamkaur14
    Member
    Posted 3 months ago #

    Hi Sudar,

    I have not heard back from you as above. I have discovered that it has something to do with the way the file 'class-posts-by-tag-util.php' is coded. See this thread: http://wordpress.org/support/topic/title-under-the-thumbnail-urgent?replies=27

    I looked at the code below on the file above in the posts-by-tag/include folder:

    if ($thumbnail) {
                            if (has_post_thumbnail($tag_post->ID)) {
                                if ( $thumbnail_size == 'custom' ) {
                                    $t_size = array( $thumbnail_size_width, $thumbnail_size_height );
                                } else {
                                    $t_size = $thumbnail_size;
                                }
                                $output .=  '<a class="thumb" href="' . $permalink . '" title="' . get_the_title($tag_post->ID) . '" ' . $onclick_attr . ' >' .
                                    get_the_post_thumbnail($tag_post->ID, $t_size) .
                                    '</a>';
                            } else {
                                if (get_post_meta($tag_post->ID, 'post_thumbnail', true) != '') {
                                    $output .=  '<a class="thumb" href="' . $permalink . '" title="' . get_the_title($tag_post->ID) . '" ' . $onclick_attr . '>' .
                                        '<img src="' . esc_url(get_post_meta($tag_post->ID, 'post_thumbnail', true)) . '" alt="' . get_the_title($tag_post->ID) . '" >' .
                                    '</a>';

    and when I added a
    in the code, it did something to the layout of the thumbnails - not what I wanted but at least I managed to pin down where to make alterations.

    Just wondering if you could figure out where to add the
    or if the code could be altered to make the title show below the thumbnail?

    Thanks!

  10. pamkaur14
    Member
    Posted 3 months ago #

    I don't think the code above does anything to the look of the listings. I have also tried the following things with no effect:

    The CSS for my theme doesn't have an img-wpp-thumbnail code. It only has the following codes for thumbnails:
    /* .article */
    .sticky {}
    .article {margin-bottom: 50px; overflow: hidden; clear: both;}
    .article .post-thumb {padding: 2px; border: 0px solid #ddd; block;}
    .article .post-thumbnail {border: 0; block;}

    I tried adding a margin calling it !important to both the .post-thumb and .post-thumbnail lines and nothing happened.

    2. I tried adding a specific posts-by-tag line to the CSS "ul.posts-by-tag-item {display: block; margin-right: 10px!important;}" and nothing changed either.

    Neither of the above moved the title or created a margin to the right of the thumbnail.

    3. I have tried adding a
    after the <img src> line to the related.php file for my theme and nothing happened.

    I am running out of ideas and have no idea why it is absolutely not changing anything. Any help would be greatly appreciated.

  11. pamkaur14
    Member
    Posted 3 months ago #

    Hi Sudar,

    Have you had a chance to look at this yet?

  12. Sudar
    Member
    Plugin Author

    Posted 3 months ago #

    I opened your url in office the other day and realized it is NFSW. Thought I should open it up again at home to see what needs to be fixed, but got busy with other things.

    Meanwhile, it mostly seems that you need a different HTML structure itself. If that is the case, then it may not be possible to change thing using CSS alone.

    I will have a closer look once I get back home today and will let you know.

  13. pamkaur14
    Member
    Posted 3 months ago #

    Hi Sudar,

    Don't worry about solving any of my queries. It was just getting too hard and taking too much time so I have decided to use other plugins and they are working great on my website.

    Cheers.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags