How to move custom username icon to right side of username on profile sidebar?

[edgeless]

I call various usergroup icons from the closing username html markup fields in the usergroup manager. The icons then appear on the right-hand side of the usernames within posts and elsewhere. There is however one exception. On the user profile sidebar, the icons appear on the left-hand side of the usernames. For alignment purposes, I want them to appear on the right-hand side of the usernames instead. Can someone please tell me from where the user profile sidebar elements are called so I can change their order? So just to be clear, I want the username icons on the user profile sidebar to appear between the username text and the online status indicator. Any help on how to achieve this will be appreciated.

Thanks

[MarkFL]

Can you post a link to a page on your site where this issue occurs? That way I can inspect the source using Firebug and see what needs to be done. :)

[edgeless]

Can you post a link to a page on your site where this issue occurs? That way I can inspect the source using Firebug and see what needs to be done. :)I'd love to, but if I did you wouldn't be able to see the user profiles because I have permissions set to only allow access to members. However, I can tell you that I've tested this on a clean test installation of vB 4 that's on a private server and it does the same thing.

[MarkFL]

Well, if you want, and only if you are so inclined, you could set up a temporary user account for me (doesn't need to be an admin account, just a regular user so I can view a profile) and send the login credentials to me by PM, and when I am done, I will let you know so you can delete the account.

[edgeless]

Well, if you want, and only if you are so inclined, you could set up a temporary user account for me (doesn't need to be an admin account, just a regular user so I can view a profile) and send the login credentials to me by PM, and when I am done, I will let you know so you can delete the account.How about this: I made some screenshots from the test server.

https://vborg.vbsupport.ru/external/2016/04/1.png
https://vborg.vbsupport.ru/external/2016/04/2.png

[MarkFL]

There's not much I can do with a screenshot...I need to be able to inspect the page source and fiddle with the CSS to find a possible solution.

What are the opening and closing HTML tags you have defined in the Usergroup Manager for your admin group?

[edgeless]

So I take it you can't duplicate the position of the icons on a server that you have access to. No problem. I'll create an account for you on the private test server's installation and PM you the login credentials. But I'll need the IP you will be using to connect to it so I can allow it through the server's firewall. Will that be okay? If so, we can deal with conveyance of the IP via PM. Let me know. Thanks

--------------- Added 1461990547 at 1461990547 ---------------

On second thought, I'll just disable the filters temporarily so I won't need your IP. Hang on and I'll get your info to you.

[MarkFL]

Sure, I could attempt to duplicate what you have done on my local dev site, without knowing the HTML tags you have defined for your usergroup markup (which is why I asked for that), but why would I do that, only to find out you have done something even slightly different that makes my efforts pointless?

I want to help, but I don't want to have to give out my IP address in order to do so. Sorry. :(

[edgeless]

You don't have to... please read my last line and standby for my PM :)

[MarkFL]

Okay, add the following selector to your "additional.css" template:

.member_username img {
float: none;
}

Images are floated left there (that's why the icons by the links below the username are all on the left), and this was affecting your icon, but the selector I posted should fix that. :)

[edgeless]

Okay, add the following selector to your "additional.css" template:

.member_username img {
float: none;
}

Images are floated left there (that's why the icons by the links below the username are all on the left), and this was affecting your icon, but the selector I posted should fix that. :)I've just done that and it seems to have made no difference :(

[MarkFL]

Okay, try changing to selector to:

.member_username img {
float: none !important;
}

edit: If that fails, then add inline CSS to the image tag itself in the username markup, such as:

<img style="float: none" ... />

[edgeless]

Okay, try changing to selector to:

.member_username img {
float: none !important;
}

Yay! That one did it... thank you kindly :D

[MarkFL]

Yay! That one did it... thank you kindly :D

Cool! I didn't think the !important declaration would be needed, since we are referencing a class within the element to which the float:left on images is being applied, but that's the way it goes. :)

[edgeless]

I appreciate it very much. Take care :)