Sending you credentials to see the page via PM now.

OK this is what I would start off with. You can adjust as per preference.

Add the following to either your WordPress theme styles.css file – OR – your SP theme but remember you ARE going to need to make this a custom child or normal theme or you will lose all of these changes on a future update.

#spMainContainer .spTopicPostSection .user_login_points { width: 120px; font-size: 10px; margin: 0 auto; }

And then in the template where you added the shortcode function – add immediately underneath it

sp_InsertBreak();

See how that goes….

Ok, that appears to have made the writing smaller but not the status bar…

Also, I don’t know how to create and reference a child theme so I’m currently making the edits in the SP theme itself.

Ah – I see there is contention for the styling. Try adding the following as well:

#spMainContainer .spTopicPostSection .user_login_points .pb_hold { width: 120px; }

And add this at the bottom the stylesheet.

We’re getting very close.  Some of the writing is still outside the box.

Also, it’s not re-scaling the sliding bar, it just abbreviated it.  This makes the bar appear full even when it shouldn’t be.

That is very heavy handed CSS the author has applied there. It’s a bit over the top.
You will probably need to change the entry for
.user_current_rank, .li_points
from width of 230px to 120px.

Where are you seeing that variable?  I don’t find it in either style.css or the forum template.

Ah – it’s probably in CSS provided by the achievements plugin and stomping over everythign else.

Try adding it with 

#spMainContainer .spTopicPostSection .user_login_points

in front of it. Like you did the last line

Sorry, I am really terrible at this.  Can you tell me exactly what the line should say that I am adding to the style.css file?

That seems to have re-sized the sliding bar graphic but I’m still noticing two issues:

1. The wording is still outside the container to the right.
2. All of the sliding bar graphics seem to display the same level for all of the users on the page being viewed rather than displaying the correct level for the user themselves.

I’m wondering if a simpler solution would be to get rid of that sliding bar altogether and instead just display the user’s rank title.

My guess is that the CSS for this is in a CSS file in the plugins folder. As I said above – it really does look very heavy handed and is insisting on everything being displayed to 230px which seems a very arbitrary sort of width to me and nothing to do with the available width where a user might choose to display it.

I have probably done about as much as I can to circumvent and override this so you may be better off editing that original CSS instead. Unless someone else would like to chime in and have a go…

As to the value in the bar – well I can’t really comment of course. If you feel it is incorrect then it might be worth talking to the plugin author. If you do want to hide it then just use a display: none; directive against the bar (class of ‘pb_back_user_login’); That will hide it if you can not hide it in the shortcode options.

I think it is best to hide the bar since it only seems to show a value equal to whatever logged in user is viewing it. 

That said, can you let me know in which file I should edit that class you mentioned?

I don’t know. it depends how the author of that plugin has styled it and which stylesheet is loaded first, second, last etc. You can try it anywhere – you can’t break anything as you can always just remove it again.

But – if this is correct that the bar graphic makes no use of the user ID being passed in the shortcode then you really should talk to the author as it is clearly a bug that should be fixed.

I just don’t think the bar is designed to do that because what I’m trying to do is custom.  To clarify, the bar is showing a correct level for my status but it’s not apparently smart enough to recognize and display multiple statuses for other users all on one page.