Support Forum

Advanced Search
Forum Scope


Match



Forum Options



Minimum search word length is 3 characters - maximum search word length is 84 characters
coding-topic
Recent Forum Post Widget
Avatar
Raven
Member
sp_UserOfflineSmall Offline
Aug 15, 2015 - 3:34 pm

Hey guys I was wondering how to align the avatar with the text in the recent forum post widget that is used with the template and tags widget.

here is the current look:

rpnow.jpgImage Enlarger

This is what i am trying to make it look like:

rpexample.jpgImage Enlarger

 

Or even how you guys have it here in the footer of the simplepress website:

rpsp.jpgImage Enlarger

 

Thanks for any help in advanced!

logo.png

|DEVELOPER|GAME DESIGNER|GRAPHIC ARTIST|HOMEBREW|MUGEN|XMUGEN|UNITY 3D|

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Aug 15, 2015 - 3:42 pm

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...

Avatar
Wendell
Member
sp_UserOfflineSmall Offline
Jan 11, 2016 - 1:05 am

hi @mr-papa 

i followed this and this was the result -->

Image Enlarger

 

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!

Avatar
Ike
Sawtry, UK
Member
Free Members
sp_UserOfflineSmall Offline
Jan 11, 2016 - 9:59 am

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.

Avatar
Wendell
Member
sp_UserOfflineSmall Offline
Jan 11, 2016 - 10:37 am

hi @ike 

i got it to look like this --> 

Image Enlarger

 

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

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

Avatar
Ike
Sawtry, UK
Member
Free Members
sp_UserOfflineSmall Offline
Jan 11, 2016 - 11:29 am

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!

Avatar
Wendell
Member
sp_UserOfflineSmall Offline
Jan 11, 2016 - 11:40 am

hi @ike 

 

this is the result -->

Image Enlarger

 

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

Avatar
Ike
Sawtry, UK
Member
Free Members
sp_UserOfflineSmall Offline
Jan 11, 2016 - 11:56 am

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?

Avatar
Wendell
Member
sp_UserOfflineSmall Offline
Jan 11, 2016 - 6:48 pm

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

Image Enlarger

 

thank you so much! 🙂 

keep up the good work of helping others!

Avatar
Mr Papa
Simi Valley, CA
SP Master
Free Members
sp_UserOfflineSmall Offline
Jan 11, 2016 - 9:11 pm

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

Forum Timezone: Europe/Stockholm
Most Users Ever Online: 1170
Currently Online:
Guest(s) 1
Currently Browsing this Page:
1 Guest(s)
Top Posters:
Mr Papa: 19448
Ike: 2086
Brandon: 864
kvr28: 804
jim: 649
FidoSysop: 577
Conrad_Farlow: 531
fiddlerman: 358
Stefano Prete: 325
Member Stats:
Guest Posters: 618
Members: 17348
Moderators: 0
Admins: 4
Forum Stats:
Groups: 7
Forums: 17
Topics: 10120
Posts: 79607