Simple Machines Community Forum

Hi!
Please help me if you can:
I aligned (center) the .poster in my index.css but it doesnt look good because the userstatus+username isnt centered with the membergroup's name.

Example:


I am using Dhari theme. Below is my index.css

Actually, that all is centered. The thing that is throwing you off is the white square in front of the name counts as part of the name. If you count that white square (online/offline icon) with its surrounding whitespace as characters that are a part of the username, you will see that it is all centered.  For the username area you might get better results if you changed it to justified instead of centered.

Quote from: mythus on March 12, 2017, 09:06:14 AM
Actually, that all is centered. The thing that is throwing you off is the white square in front of the name counts as part of the name. If you count that white square (online/offline icon) with its surrounding whitespace as characters that are a part of the username, you will see that it is all centered.  For the username area you might get better results if you changed it to justified instead of centered.

Yea, but what code from that index needs that?
The profile is centered here:
.poster
{
   float: left;
   width: 15em;
   
  text-align: center;
   
}
Is doesnt work with justify too and if I change center to justify I get it left aligned.
I tried adding it here but didnt worked:
#basicinfo span#userstatus
{
   display: block;
   clear: both;
}
#basicinfo span#userstatus img
{
   vertical-align: middle;
}

Profile section styles:

dl
{
   overflow: auto;
   margin: 0;
   padding: 0;
}

/* The basic user info on the left */
#basicinfo
{
   width: 20%;
   float: left;
}
#basicinfo .windowbg .content
{
   padding-left: 20px;
   background:#E0E0E0;
   margin-right:5px;
   -moz-border-radius: 8px;
   border-radius: 8px;
}
#detailedinfo
{
   width: 79.5%;
   float: right;
}
#basicinfo h4
{
   font-size: 135%;
   font-weight: 100;
   line-height: 105%;
   white-space: pre-wrap;
   overflow: hidden;
}
#basicinfo h4 span.position
{
   font-size: 80%;
   font-weight: 100;
   display: block;
}
#basicinfo img.avatar
{
   display: block;
   margin: 10px 0 0 0;
}
#basicinfo ul
{
   list-style-type: none;
   margin: 10px 0 0 0;
}
#basicinfo ul li
{
   display: block;
   float: left;
   margin-right: 5px;
   height: 20px;
}
#basicinfo span#userstatus
{
   display: block;
   clear: both;

}
#basicinfo span#userstatus img
{
   vertical-align: middle;

}
#detailedinfo div.content dl, #tracking div.content dl
{
   clear: right;
   overflow: auto;
   margin: 0 0 18px 0;
   padding: 0 0 15px 0;
   border-bottom: 1px #ccc solid;
}
#detailedinfo div.content dt, #tracking div.content dt
{
   width: 35%;
   float: left;
   margin: 0 0 3px 0;
   padding: 0;
   font-weight: bold;
   clear: both;
}
#detailedinfo div.content dd, #tracking div.content dd
{
   width: 65%;
   float: left;
   margin: 0 0 3px 0;
   padding: 0;
}
#detailedinfo div.content dl.noborder
{
   border-bottom: 0;
}
#detailedinfo div.content dt.clear
{
   width: 100%;
}
.signature, .custom_fields_above_signature
{
   border-top: 1px #ccc solid;
}
.signature h5
{
   font-size: 0.85em;
   margin-bottom: 10px;
}
#personal_picture
{
   display: block;
   margin-bottom: 0.3em;
}
#avatar_server_stored div
{
   float: left;
}
#avatar_upload
{
   overflow: auto;
}

The problem isn't that the username is not centered, because it is centered. It is the online/offline indicator throwing you off. Take a look at the Display.Template.php

Specifically, look here:


// Show information about the poster of this message.
echo '
<div class="poster">
<h4>';

// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';

// Show a link to the member's profile.
echo '
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

// Show the member's custom title, if they have one.
if (!empty($message['member']['title']))
echo '
<li class="title">', $message['member']['title'], '</li>';

// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '</li>';


You can either move or apply a break <br /> after the online/offline bit, which is ....


// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';


Maybe do something like this?


// Show a link to the member's profile.
echo '
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

// Show the member's custom title, if they have one.
if (!empty($message['member']['title']))
echo '
<li class="title">', $message['member']['title'], '</li>';

// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '</li>';

// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';


And see how that works for you. And remember, always backup your templates before messing with them.

Did it, tnx, but it seems that the problem isnt with the online/offline square... I moved that square in 2 places and the username is displayed the same way. The sqaure is centered, the membergroup's name is centered, custom title and avatar centered, only the username is a bit more to the right.

Take out the , space before the message bit in the following part of that...


// Show a link to the member's profile.
echo '
', $message['member']['link'], '


That , followed by a space is giving space between the username and the online/offline icon. Removing that space should fix the rest of your problem.

Nope. Still the same.
F**k it! I will let it be. Tnx anyway!

Search for .poster h4 and change:

margin: 0 1em 0 1.5em;

to
margin: 0.2em 0 0.4em 0;

Or whatever you prefer in heights.
0.2em is the space it will leave above the username while 0.4em is the space it will leave below the username.
You can also try to just use:
margin: 0;

Fixed! Tnx @Xarkurai and tnx @mythus!
Topic marked as solved.