just add some css… easiest way is to inspect the css with your browser… in our case, its:

#spRecentPostsTag .spAvatar {
    float: left;
    margin-top: 5px;
    padding-bottom: 20px;
}

you would add that to your wp theme since the forum css may not be available…

hi @mr-papa 

i followed this and this was the result –>

need help on how to:

1. Put space between the avatar and the first word of the post title

2. Decrease line-spacing between the first and second line of the post title

3. Username and time posted on the 3rd (or 2nd) line, depending on the length of the post title

thanks!

Well the avatar spacing is an easy one, we roughly use:

#spRecentPostsTag .spAvatar {
     float: left;
     padding-bottom: 20px;
     margin: 5px 10px 0 0;
 }

Although you can change those values to be more appropriate to your needs, you might not need 20px padding at the bottom for example so you’ll have to experiment.

As for the line spacing we’d really need to take a look. I don’t think we put anything in as standard other than line height so more than likely your WP theme is imposing some styling. It would be almost impossible to tell what without taking a look – Can you post a link?

As for making sure username drops down a line, you should be able to add a
to the widget in the ‘After Topic Text’ box. This will insert a line break meaning the next div created will appear underneath the previous one.

hi @ike 

i got it to look like this –> 

just need to reduce line-spacing and align the 3rd line to the 1st and 2nd.

here is my site –> http://hoops.ph

Good start!

It looks like your WP theme is using:

.widget li {
    line-height: 30px;
    list-style: outside none none;
}

So, first thing to try is:

#spRecentPostsTag .spListItemTag {
    line-height: 1.3em;
}

This might not work, but first thing to try. I tried changing your themes 30px line height and it looked like it caused a few problems, doesn’t bode well!

hi @ike 

this is the result –>

so the line spacing is solved and the 3rd line is now aligned. only the space and alignment between the posts… 

That’s what I was afraid of – The WP theme is doing something odd. Can you try adding a display rule to the .spListItemTag rule I posted above? Change it to:

#spRecentPostsTag .spListItemTag {
    line-height: 1.3em;
    display: inline-block
}

However, there is still no break between the title and the author. Have you added that yet?

you nailed it @ike! this is exactly the way i wanted it to be –>

thank you so much! 🙂 

keep up the good work of helping others!

glad we could help…  on to the next one… 😉

Hello forum.

Is there a way for an excerpt of the comments to be shown as well?

I have been looking over the forum and only find related to postTip on mouseover.  I would like to see this instead displayed with the first 75 characters or so showing.

Thank you in advance for any guidance.

not in any particular way…  by its nature, the post content is not exposed there except for the tooltip…

if you want to force the display, you would be best off to copy the widget code over to your own and modify yourself.. wouldnt be hard to output the tooltip fixed below the title…  but afraid, we dont really expose enough hooks to do it easily now..  afraid this is the first time someone has asked for anything like that…

if you want to go that route, we can provide some additional guidance…

Yes, I would be interested in some guidance.

sp_ListViewBodyStart();

sp_ColumnStart(‘tagClass=spColumnSection spLeft&width=60%&height=0’);
sp_ListTopicName(”, __sp(‘Go to %NAME%’));
sp_ColumnEnd();

I wasn’t certain if there was a way to add the code that should show a certain number of characters of the topic.  For example, the title will stay hyperlinked, however the additional content would be plain text following the hyperlink.

Example:  

Topic Title – This text would be the first 100 characters in a post….

think you have lost me… we were talking about the recent post widget/tag…but the code you posted has nothing to do with that… so not sure where you were going there…  my suggestion was to edit an existing piece of code… you get all the inherited code with… you fragment is missing many things it would have to have…

I was suggesting modifying

                case 'T':
                    # Topic
                    $out.= $beforeTopic;
                    if ($tLink) $out.= "<a class='$linkClass' $title href='$spThisListTopic->post_permalink'>";
                    $out.= sp_truncate($spThisListTopic->topic_name, $truncate);
                      if ($tLink) $out.= '</a>';
                    $out.= $afterTopic;
                    break;

to something like

                case 'T':
                    # Topic
                    $out.= $beforeTopic;
                    if ($tLink) $out.= "<a class='$linkClass' href='$spThisListTopic->post_permalink'>";
                    $out.= sp_truncate($spThisListTopic->topic_name, $truncate);
                      if ($tLink) $out.= '</a>';
                      $out.= '<br/>'.$spThisListTopic->post_tip;
                    $out.= $afterTopic;
                    break;

this would output the excerpt under the topic title.. just change the <br/> tag to a dash to get closer to what you want..

and as mentioned, you really cant display html in an excerpt because odds are that you would break some html…