Notifications
Clear all

wpForo 1.x.x [Solved] How to customize the recent topic widget in sidebar.

7 Posts
3 Users
1 Likes
838 Views
Posts: 9
 cmwd
Topic starter
(@cmwd)
Active Member
Joined: 3 years ago

New to the plugin and am loving it, mostly 🤣 

I have attached an image of my side bar, with the top section being the Recent Topic widget and the bottom section being a standard post category widget. The bottom widget looks fantastic, however the top widget (WP Foro Recent Topic widget) doesn't look the best. I have been trying to increase the padding through adding CSS however I can't seem to get it to work. 

Can someone please tell me what CSS to add and where to add it.

 

Many thanks, Caleb

6 Replies
1 Reply
Tutrix
(@tutrix)
Joined: 4 years ago

Noble Member
Posts: 1266
Posted by: @cmwd

Can someone please tell me what CSS to add and where to add it.

it looks like 20px around the list items of your categories
so you can try the following code,

#wpforo .wpforo-widget-wrap .wpforo-widget-content, .wpforo-widget-wrap .wpforo-widget-content {
padding: 20px !important;
}

add this to Dashboard > Forums > Settings > Style (custom css)

Posts: 9
 cmwd
Topic starter
(@cmwd)
Active Member
Joined: 3 years ago

Oh also is it possible to add a verified user badge to every user who registers, that displays next to the users name. At this stage I have changed the half star icon of the blue verified user icon however once they get to the first green start this will change. I would ideally like for example the verified user badge to always be there, next to the green stars etc. 

2 Replies
Tutrix
(@tutrix)
Joined: 4 years ago

Noble Member
Posts: 1266
Posted by: @cmwd

 I would ideally like for example the verified user badge to always be there, next to the green stars etc. 

just the icon

#wpforo #wpforo-wrap .author-rating-full::before {
content: "\f4fc";
font-size: 16px;
font-family: "Font Awesome 5 Free";
color:#88961F;
font-weight: 900;
display: block;
margin: 0 0 5px 0;
}

or more like a badge

#wpforo #wpforo-wrap .author-rating-full::before {
content: "\f4fc";
font-size: 16px;
font-family: "Font Awesome 5 Free";
color:#fff;
font-weight: 900;
display: block;
margin: 0 auto 5px auto;
background:#88961F;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 50%;
border:2px solid #657904;
}

https://www.screencast.com/t/iz7lOhit6zx2

 cmwd
(@cmwd)
Joined: 3 years ago

Active Member
Posts: 9

@tutrix thank you so much, you are amazing! Exactly what I was after 😀

Tutrix
Posts: 1266
(@tutrix)
Noble Member
Joined: 4 years ago

@cmwd

if you want remove the icon for admins, you can do this via user ID
Example user ID "1"

#wpforo #wpforo-wrap [data-userid="1"] .author-rating-full::before {
display: none;
}
Posts: 7
(@maddyssonn)
Active Member
Joined: 4 years ago

1.How to make identification for selected users? I have a sports forum and real athletes sometimes register on it. I would like to set such an icon only for them, manually.

2.How to make the icon appear on the main profile page?

(Sorry for my English)