vb.org Archive - Postbit User Info. and Profile Centering

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)

- - Postbit User Info. and Profile Centering (https://vborg.vbsupport.ru/showthread.php?t=292820)

Amaury

12-09-2012 10:01 PM

Postbit User Info. and Profile Centering

Is it possible to center these?

http://i101.photobucket.com/albums/m...rysProfile.png

http://i101.photobucket.com/albums/m...maurysPost.png

mokujin

12-09-2012 10:08 PM

Try this, edit your template postbit_legacy
Change

HTML Code:

<div class="username_container">

HTML Code:

<div class="username_container" style="text-align: center">

Amaury

12-09-2012 10:24 PM

Quote:

Originally Posted by mokujin (Post 2389590)

Try this, edit your template postbit_legacy
Change

HTML Code:

<div class="username_container">

HTML Code:

<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

12-09-2012 10:46 PM

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

HTML Code:

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

HTML Code:

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

Amaury

12-09-2012 11:27 PM

Quote:

Originally Posted by WorldCraft (Post 2389601)

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

HTML Code:

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

HTML Code:

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

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

WorldCraft

12-09-2012 11:29 PM

Try searching prof_blocksubhead

Amaury

12-09-2012 11:38 PM

Quote:

Originally Posted by WorldCraft (Post 2389610)

Try searching prof_blocksubhead

It's still not finding it.

postbit_legacy template, right?

WorldCraft

12-09-2012 11:38 PM

For profile page? It's in MEMBERINFO template.

Amaury

12-09-2012 11:50 PM

Quote:

Originally Posted by WorldCraft (Post 2389614)

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. The rank isn't centered under the username.

WorldCraft

12-10-2012 12:12 AM

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

HTML Code:

                        <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

HTML Code:

<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

12-10-2012 12:19 AM

Quote:

Originally Posted by WorldCraft (Post 2389624)

HTML Code:

            <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

HTML Code:

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

WorldCraft

12-10-2012 01:05 AM

You can nudge the username a bit to the right by finding

HTML Code:

<div class="username_container">

and add

HTML Code:

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

Amaury

12-10-2012 02:17 AM

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

WorldCraft

12-10-2012 02:19 AM

Find

HTML Code:

<span class="member_reputation" title="{vb:raw prepared.username} {vb:raw prepared.level}">

Add

HTML Code:

style="text-align:center;"

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

Amaury

12-10-2012 02:29 AM

Quote:

Originally Posted by WorldCraft (Post 2389656)

Find

HTML Code:

<span class="member_reputation" title="{vb:raw prepared.username} {vb:raw prepared.level}">

Add

HTML Code:

style="text-align:center;"

Also I notice you use Firefox. I highly recommend you download the Addon Firebug. 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

12-10-2012 03:58 AM

Try this, find

HTML Code:

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

Add

HTML Code:

style="float:none;"

Amaury

12-10-2012 04:06 AM

Quote:

Originally Posted by WorldCraft (Post 2389676)

Try this, find

HTML Code:

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

Add

HTML Code:

style="float:none;"

That worked, thanks.

You've been such a great help! :)

WorldCraft

12-10-2012 04:08 AM

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

Amaury

12-10-2012 04:11 AM

Quote:

Originally Posted by WorldCraft (Post 2389679)

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

I definitely will.

Amaury

01-04-2013 06:49 PM

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 in the other thread for the postbit user information area?

WorldCraft

01-04-2013 10:35 PM

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

01-04-2013 10:43 PM

Quote:

Originally Posted by WorldCraft (Post 2394784)

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

WorldCraft

01-04-2013 11:16 PM

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

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

Amaury

01-05-2013 04:21 AM

Quote:

Originally Posted by WorldCraft (Post 2394790)

That is what I screencapped. http://gyazo.com/22cace5c0304d173d02...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

01-05-2013 07:53 AM

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

Amaury

01-05-2013 06:57 PM

Quote:

Originally Posted by WorldCraft (Post 2394847)

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

01-06-2013 10:54 PM

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

01-06-2013 11:09 PM

Quote:

Originally Posted by WorldCraft (Post 2395158)

Okay, thank you. :)

All times are GMT. The time now is 03:13 PM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01327 seconds Memory Usage 1,832KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (22)bbcode_html_printable (12)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (28)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: