Postbit User Info. and Profile Centering

[Amaury]

Is it possible to center these?

http://i101.photobucket.com/albums/m62/AmauryGarcia/AmaurysProfile.png

http://i101.photobucket.com/albums/m62/AmauryGarcia/AmaurysPost.png

[mokujin]

Try this, edit your template postbit_legacy
Change <div class="username_container"> by <div class="username_container" style="text-align: center">

[Amaury]

Try this, edit your template postbit_legacy
Change <div class="username_container"> by <div class="username_container" style="text-align: center">

That only got the username. I also want the rank, reputation, and avatar centered.

Also, how about on profiles?

[WorldCraft]

To center the Username, title and rank, add this css to this h1 element:

<h1 style="text-align:center;" class="blocksubhead prof_blocksubhead">

The edit pencil may off-center the username so you may need to move that up or somewhere.

To center the profile pic.

You'll need to add a new div around {vb:raw blocks.profile_picture} and center it like so:

<div text-align:center;">{vb:raw blocks.profile_picture}</div>

[Amaury]

To center the Username, title and rank, add this css to this h1 element:

<h1 style="text-align:center;" class="blocksubhead prof_blocksubhead">The edit pencil may off-center the username so you may need to move that up or somewhere.

To center the profile pic.

You'll need to add a new div around {vb:raw blocks.profile_picture} and center it like so:

<div text-align:center;">{vb:raw blocks.profile_picture}</div>

I tried searching for the H1 element, but it didn't find it.

[WorldCraft]

Try searching prof_blocksubhead

[Amaury]

Try searching prof_blocksubhead

It's still not finding it.

postbit_legacy template, right?

[WorldCraft]

For profile page? It's in MEMBERINFO template.

[Amaury]

For profile page? It's in MEMBERINFO template.

I thought you were helping me with the postbit part where I also want it centered.

Also, I got it, but they seem to be off (http://www.kh-mediaflare.net/member.php?18-Amaury). The rank isn't centered under the username.

[WorldCraft]

It will be centered for normal users. The reason why it looks not centered is because of the edit pencil next to the username for mods and admins. You can move that somewhere else on the template if you wish.

For postbit_legacy find
<div class="username_container">
<vb:if condition="$post['userid']">
{vb:raw memberaction_dropdown}
{vb:raw post.onlinestatus}
<vb:else />
<span class="username guest">{vb:raw post.musername}</span>
</vb:if>
</div>
<span class="usertitle">
{vb:raw post.usertitle}
</span>
<vb:if condition="$post['rank']">
<span class="rank">{vb:raw post.rank}</span>
</vb:if>
{vb:raw template_hook.postbit_userinfo_left}
<vb:if condition="$show['reputation']">

<span class="postbit_reputation" id="repdisplay_{vb:raw post.postid}_{vb:raw post.userid}" title="{vb:raw post.username} {vb:raw post.level}">
<vb:each from="reputationdisplay" value="row">
<img class="{vb:raw row.class}" src="{vb:stylevar imgdir_reputation}/reputation_{vb:raw row.posneg}{vb:raw row.imgext}" alt="" />{vb:raw row.rowend}
</vb:each>
</span>

</vb:if>

Add <div style="text-align:center;"> </div> around the code above

Find
<a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">

Add style="float:none;text-align:center;" to this element

[Amaury]

It will be centered for normal users. The reason why it looks not centered is because of the edit pencil next to the username for mods and admins. You can move that somewhere else on the template if you wish.

For postbit_legacy find
<div class="username_container">
<vb:if condition="$post['userid']">
{vb:raw memberaction_dropdown}
{vb:raw post.onlinestatus}
<vb:else />
<span class="username guest">{vb:raw post.musername}</span>
</vb:if>
</div>
<span class="usertitle">
{vb:raw post.usertitle}
</span>
<vb:if condition="$post['rank']">
<span class="rank">{vb:raw post.rank}</span>
</vb:if>
{vb:raw template_hook.postbit_userinfo_left}
<vb:if condition="$show['reputation']">

<span class="postbit_reputation" id="repdisplay_{vb:raw post.postid}_{vb:raw post.userid}" title="{vb:raw post.username} {vb:raw post.level}">
<vb:each from="reputationdisplay" value="row">
<img class="{vb:raw row.class}" src="{vb:stylevar imgdir_reputation}/reputation_{vb:raw row.posneg}{vb:raw row.imgext}" alt="" />{vb:raw row.rowend}
</vb:each>
</span>

</vb:if>Add <div style="text-align:center;"> </div> around the code above

Find
<a class="postuseravatar" href="{vb:link member, {vb:raw post}}" title="{vb:rawphrase {vb:raw post['onlinestatusphrase']}, {vb:raw post.username}}">Add style="float:none;text-align:center;" to this element

Perfecto (http://www.kh-mediaflare.net/showthread.php?360-Forum-Guidelines&p=1226#post1226).

[WorldCraft]

You can nudge the username a bit to the right by finding
<div class="username_container">

and add style="position:relative;left:5px;"

[Amaury]

Last question for this thread: How do I also center the reputation on profiles?

[WorldCraft]

Find
<span class="member_reputation" title="{vb:raw prepared.username} {vb:raw prepared.level}">
Add
style="text-align:center;"

Also I notice you use Firefox. I highly recommend you download the Addon Firebug (https://getfirebug.com/). It helps when trying to find classes and ID's for elements you're trying to make edits to.

[Amaury]

Find
<span class="member_reputation" title="{vb:raw prepared.username} {vb:raw prepared.level}">Add
style="text-align:center;"Also I notice you use Firefox. I highly recommend you download the Addon Firebug (https://getfirebug.com/). It helps when trying to find classes and ID's for elements you're trying to make edits to.

Thank you! :)

Regarding Firebug, I actually do have it (currently disabled), but I'm not really an expert with it.

I rarely use it, but when I do, I can only do simple things, such as if I wanted to, say, make sub-forums red, but keep the forum listings on the index blue.

--------------- Added 12/9/2012 at 8:05 PM ---------------

The reputation bar remained on the left.

[WorldCraft]

Try this, find<img class="{vb:raw row.class}" src="{vb:stylevar imgdir_reputation}/reputation_{vb:raw row.posneg}{vb:raw row.imgext}" alt="" />

Addstyle="float:none;"

[Amaury]

Try this, find<img class="{vb:raw row.class}" src="{vb:stylevar imgdir_reputation}/reputation_{vb:raw row.posneg}{vb:raw row.imgext}" alt="" />Addstyle="float:none;"

That worked, thanks.

You've been such a great help! :)

[WorldCraft]

You're very welcome. Glad I could help. Let me know if there's anything else you have trouble with. :)

[Amaury]

You're very welcome. Glad I could help. Let me know if there's anything else you have trouble with. :)

I definitely will.

[Amaury]

New question, World Craft. :)

I just noticed a day or so ago that usernames were overlapping with the status circle a bit in the postbit user information area, too.

How would I apply the solution you provided me below this post (https://vborg.vbsupport.ru/showpost.php?p=2389648&postcount=23) in the other thread for the postbit user information area?

[WorldCraft]

It doesn't appear to be overlapping for me
https://vborg.vbsupport.ru/external/2013/01/54.png

But if you want to increase the distance between the username and the status icon you can just add &nbsp (a blank space) right before {vb:raw post.onlinestatus} in the template. Like this: &nbsp{vb:raw post.onlinestatus}.

Another way would be to wrap span tags <span>{vb:raw post.onlinestatus}</span> and apply style="padding-left: Xpx;" (or give the span a class and use additional.css). Your choice.

[Amaury]

It doesn't appear to be overlapping for me
https://vborg.vbsupport.ru/external/2013/01/54.png

But if you want to increase the distance between the username and the status icon you can just add &nbsp (a blank space) right before {vb:raw post.onlinestatus} in the template. Like this: &nbsp{vb:raw post.onlinestatus}.

Another way would be to wrap span tags <span>{vb:raw post.onlinestatus}</span> and apply style="padding-left: Xpx;" (or give the span a class and use additional.css). Your choice.

Not on profiles, the postbit user information area in posts.

[WorldCraft]

That is what I screencapped. http://gyazo.com/22cace5c0304d173d023d39685f44178.png?1357344959

Can you show me an example where it doesn't look right?

[Amaury]

That is what I screencapped. http://gyazo.com/22cace5c0304d173d023d39685f44178.png?1357344959

Can you show me an example where it doesn't look right?

With the glow of the green from the status circle because of the dark background, it makes it appear too close to the username.

[WorldCraft]

Have you tried the suggestion I gave above? It applies to the postbit template.

[Amaury]

Have you tried the suggestion I gave above? It applies to the postbit template.

Actually, now that I think about it, it's hardly noticeable. I only noticed it because I was really looking at it at the time because I thought I noticed something else. =/

However, I do have another question for future reference: in the event that I ever want to do this, is it possible to turn the status circle into text in both the postbit and profiles?

Currently, the status circle works like this:
Green = User is online
White = User is offline
Yellow-Orange = User is invisible
- Only for staff. White for non-staff.If what I'm asking is possible, I would probably have it be like this, but instead of to the right of the username, have it be below:
Status: Online
Status: Offline
Status: Invisible or Status: Online, Invisible

[WorldCraft]

You would edit the postbit_onlinestatus template. And instead of serving images, you would replace them with colored text like <span style="color:red">Offline</span>, <span style="color:green">Online</span>, etc

[Amaury]

You would edit the postbit_onlinestatus template. And instead of serving images, you would replace them with colored text like <span style="color:red">Offline</span>, <span style="color:green">Online</span>, etc

Okay, thank you. :)