WordPress.org

Ready to get started?Download WordPress

Forums

Top 10 - Popular posts plugin for WordPress
[resolved] Custom styles (12 posts)

  1. mariomb
    Member
    Posted 8 months ago #

    Hi

    Custom styles went kaboom with the new version - the fact that the image and text are being considered as different blocks leads to not being able to implement any kind of custom styles.

    Anybody as the same issue?

    http://wordpress.org/plugins/top-10/

  2. Ajay
    Member
    Plugin Author

    Posted 8 months ago #

    mariomb,

    Custom styles on my sites haven't been impacted too much. I've changed the way the HTML elements are generated so as to give even more classes that help users style.

    If the style broke, a small tweak in the CSS should ideally fix the result.

    Ideally, you should be styling these elements as a base:
    img.tptn_thumb and .tptn_posts_daily .tptn_title, .tptn_posts .tptn_title

    You also have new class for all content after the image: tptn_after_thumb

  3. mariomb
    Member
    Posted 8 months ago #

    I had custom styles to fix positioning of the thumbnail inline with text, and now after I updated the script, the text and thumbnail are with the link separately and not together as I used to have.

  4. Ajay
    Member
    Plugin Author

    Posted 8 months ago #

    Can you post the CSS code. Maybe I can help modify it to get the result

  5. mariomb
    Member
    Posted 8 months ago #

    .tptn_thumb { float:left; margin-right:px; }
    .tptn_link { clear:both; min-height:px; margin:px 0px 5px 0px; display:inline-block; }

  6. Ajay
    Member
    Plugin Author

    Posted 8 months ago #

    Can you try if this works?

    .tptn_thumb { float:left; margin-right:px; }
    .tptn_posts ul li, .tptn_posts_daily ul li { clear:both; min-height:px; margin:px 0px 5px 0px; display:inline-block; }

    I've just replaced tptn_link which used to earlier wrap the img and a tags with the li which wraps the same

  7. mariomb
    Member
    Posted 8 months ago #

    Sorry about my delay - there was a problem in your code, on the top10.php

    there are at least two lines (as much as I've noticed) that are repeated and that are therefore not allowing the custom CSS styles to work

    Do check it out when you can.

  8. Ajay
    Member
    Plugin Author

    Posted 8 months ago #

    Which lines are you are referring to specifically?

  9. mariomb
    Member
    Posted 8 months ago #

    }
    				if ($post_thumb_op=='inline' || $post_thumb_op=='after' || $post_thumb_op=='thumbs_only') {
    					$output .= '<a>ID).'" rel="bookmark'.$rel_attribute.'" '.$target_attribute.'class="tptn_link">'; // Add beginning of link
    					$output .= tptn_get_the_post_thumbnail('postid='.$result->ID.'&thumb_height='.$thumb_height.'&thumb_width='.$thumb_width.'&thumb_meta='.$thumb_meta.'&thumb_html='.$thumb_html.'&thumb_default='.$thumb_default.'&thumb_default_show='.$thumb_default_show.'&thumb_timthumb='.$thumb_timthumb.'&scan_images='.$scan_images.'&class=tptn_thumb&filter=tptn_postimage');
    					$output .= '</a>'; // Close the link
    				}
    				if ($post_thumb_op=='inline' || $post_thumb_op=='text_only') {
    					$output .= '<span class="tptn_after_thumb">';
    					$output .= '<a>ID).'" rel="bookmark'.$rel_attribute.'" '.$target_attribute.'class="tptn_link">'; // Add beginning of link
    					$output .= '<span class="tptn_title">' . $title . '</span>'; // Add title when required by settings
    					$output .= '</a>'; // Close the link

    [Moderator Note: Please post code & markup between backticks or use the code button. Your posted code may now have been permanently damaged by the forum's parser.]

    Placing the $post_thumb_op=='inline' on the first line leads to custom styles CSS not being able to place it inline as it should.

  10. Ajay
    Member
    Plugin Author

    Posted 8 months ago #

    mariomb,

    I don't see duplicate code there, the way that is built is that if the case is inline i.e. the thumbnail is before the post title option, then it creates a structure like this:

    <ul class="crp_related" id="crp_related">
    <li>
    <a class="tptn_link"><img src="POST THUMB URL" class="tptn_thumb" /></a>
    <span class="tptn_after_thumb">
    <a class="tptn_link"><span class="tptn_title">[POST TITLE]</span></a>
    [OTHER OPTIONAL CONTENT e.g. AUTHOR, EXCERPT etc.]
    </span>
    </li>
    </ul>

    As you can see the post thumb sits in its own a tag and the rest of the content sits within its own span tag.

  11. mariomb
    Member
    Posted 8 months ago #

    The problem is that the <a class="tptn_link"> causes the image and the title to appear in diferent lines.
    I even tried to make a css hack, but wasn't able to. That is why i came up with that 'hack' and now it works like a charm.

  12. Ajay
    Member
    Plugin Author

    Posted 8 months ago #

    I think the forum parser code messed up the code. Could you please repost this here or alternatively at http://snipt.org/ for me to take a look.

    Also, could you please post your CSS.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.