Problem:
Found this a couple days ago after editing my forum profile fields for testing purposes. After adding information to all the fields except the IM ones, a display bug appears on the profile summary page, where the "Show Posts" link is aligned to the right. I believe this to be caused by the icon list above not having a height due to the floated list elements contained in it.
Fields Edited:
- Avatar
- Personal Text
- Birthday
- Location
- Gender
- Custom Title
- Signature
- Website Title
- Website URL
Browser:
Chromium Version 23.0.1271.95 Fuduntu (169798)
Proposed Fix:
First, I'd suggest changing the order of elements so that the online status is above the other icons UL, and also to add a clearing break to it.
Profile.template.php : Find
// Display the basic information about the user
echo '
<div class="cat_bar">
<h3 class="catbg">
<img src="', $settings['images_url'], '/icons/profile_hd.png" alt="" class="icon" />', $txt['summary'], '
</h3>
</div>
<div id="profileview" class="flow_auto">
<div id="basicinfo">
<div class="windowbg">
<div class="content flow_auto">
<div class="username"><h4>', $context['member']['name'], ' <span class="position">', (!empty($context['member']['group']) ? $context['member']['group'] : $context['member']['post_group']), '</span></h4></div>
', $context['member']['avatar']['image'], '
<ul class="reset">';
// @TODO fix the <ul> when no fields are visible
// What about if we allow email only via the forum??
if ($context['member']['show_email'] === 'yes' || $context['member']['show_email'] === 'no_through_forum' || $context['member']['show_email'] === 'yes_permission_override' && $context['can_send_email'])
echo '
<li><a href="', $scripturl, '?action=emailuser;sa=email;uid=', $context['member']['id'], '" title="', $context['member']['show_email'] == 'yes' || $context['member']['show_email'] == 'yes_permission_override' ? $context['member']['email'] : '', '" rel="nofollow"><img src="', $settings['images_url'], '/email_sm.png" alt="', $txt['email'], '" class="centericon" /></a></li>';
// Don't show an icon if they haven't specified a website.
if ($context['member']['website']['url'] !== '' && !isset($context['disabled_fields']['website']))
echo '
<li><a href="', $context['member']['website']['url'], '" title="' . $context['member']['website']['title'] . '" target="_blank" class="new_win">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/www_sm.png" alt="' . $context['member']['website']['title'] . '" class="centericon" />' : $txt['www']), '</a></li>';
// Are there any custom profile fields for the summary?
if (!empty($context['custom_fields']))
{
foreach ($context['custom_fields'] as $field)
if (($field['placement'] == 1 || empty($field['output_html'])) && !empty($field['value']))
echo '
<li class="custom_field">', $field['output_html'], '</li>';
}
echo '
', !isset($context['disabled_fields']['icq']) && !empty($context['member']['icq']['link']) ? '<li>' . $context['member']['icq']['link'] . '</li>' : '', '
', !isset($context['disabled_fields']['msn']) && !empty($context['member']['msn']['link']) ? '<li>' . $context['member']['msn']['link'] . '</li>' : '', '
', !isset($context['disabled_fields']['aim']) && !empty($context['member']['aim']['link']) ? '<li>' . $context['member']['aim']['link'] . '</li>' : '', '
', !isset($context['disabled_fields']['yim']) && !empty($context['member']['yim']['link']) ? '<li>' . $context['member']['yim']['link'] . '</li>' : '', '
</ul>
<span id="userstatus">', $context['can_send_pm'] ? '<a href="' . $context['member']['online']['href'] . '" title="' . $context['member']['online']['text'] . '" rel="nofollow">' : '', $settings['use_image_buttons'] ? '<img src="' . $context['member']['online']['image_href'] . '" alt="' . $context['member']['online']['text'] . '" class="centericon" />' : $context['member']['online']['label'], $context['can_send_pm'] ? '</a>' : '', $settings['use_image_buttons'] ? '<span class="smalltext"> ' . $context['member']['online']['label'] . '</span>' : '';Replace:
echo '
<div class="cat_bar">
<h3 class="catbg">
<img src="', $settings['images_url'], '/icons/profile_hd.png" alt="" class="icon" />', $txt['summary'], '
</h3>
</div>
<div id="profileview" class="flow_auto">
<div id="basicinfo">
<div class="windowbg">
<div class="content flow_auto">
<div class="username"><h4>', $context['member']['name'], ' <span class="position">', (!empty($context['member']['group']) ? $context['member']['group'] : $context['member']['post_group']), '</span></h4></div>
', $context['member']['avatar']['image'], '
<span id="userstatus">', $context['can_send_pm'] ? '<a href="' . $context['member']['online']['href'] . '" title="' . $context['member']['online']['text'] . '" rel="nofollow">' : '', $settings['use_image_buttons'] ? '<img src="' . $context['member']['online']['image_href'] . '" alt="' . $context['member']['online']['text'] . '" class="centericon" />' : $context['member']['online']['label'], $context['can_send_pm'] ? '</a>' : '', $settings['use_image_buttons'] ? '<span class="smalltext"> ' . $context['member']['online']['label'] . '</span>' : '', '
<ul class="reset">';
// @TODO fix the <ul> when no fields are visible
// What about if we allow email only via the forum??
if ($context['member']['show_email'] === 'yes' || $context['member']['show_email'] === 'no_through_forum' || $context['member']['show_email'] === 'yes_permission_override' && $context['can_send_email'])
echo '
<li><a href="', $scripturl, '?action=emailuser;sa=email;uid=', $context['member']['id'], '" title="', $context['member']['show_email'] == 'yes' || $context['member']['show_email'] == 'yes_permission_override' ? $context['member']['email'] : '', '" rel="nofollow"><img src="', $settings['images_url'], '/email_sm.png" alt="', $txt['email'], '" class="centericon" /></a></li>';
// Don't show an icon if they haven't specified a website.
if ($context['member']['website']['url'] !== '' && !isset($context['disabled_fields']['website']))
echo '
<li><a href="', $context['member']['website']['url'], '" title="' . $context['member']['website']['title'] . '" target="_blank" class="new_win">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/www_sm.png" alt="' . $context['member']['website']['title'] . '" class="centericon" />' : $txt['www']), '</a></li>';
// Are there any custom profile fields for the summary?
if (!empty($context['custom_fields']))
{
foreach ($context['custom_fields'] as $field)
if (($field['placement'] == 1 || empty($field['output_html'])) && !empty($field['value']))
echo '
<li class="custom_field">', $field['output_html'], '</li>';
}
echo '
', !isset($context['disabled_fields']['icq']) && !empty($context['member']['icq']['link']) ? '<li>' . $context['member']['icq']['link'] . '</li>' : '', '
', !isset($context['disabled_fields']['msn']) && !empty($context['member']['msn']['link']) ? '<li>' . $context['member']['msn']['link'] . '</li>' : '', '
', !isset($context['disabled_fields']['aim']) && !empty($context['member']['aim']['link']) ? '<li>' . $context['member']['aim']['link'] . '</li>' : '', '
', !isset($context['disabled_fields']['yim']) && !empty($context['member']['yim']['link']) ? '<li>' . $context['member']['yim']['link'] . '</li>' : '', '
<br class="clear" />
</ul>';That will get things in the right order, but there still needs to be a slight CSS adjustment to get the margins right.
index.css : Find
#basicinfo ul {
list-style-type: none;
margin: 10px 0 0 0;
}
#basicinfo ul li {
display: block;
float: left;
margin-right: 5px;
height: 20px;
}
#basicinfo#userstatus {
display: block;
clear: both;
}Replace
#basicinfo ul {
list-style-type: none;
margin: 5px 0 0 0;
}
#basicinfo ul li {
display: block;
float: left;
margin-right: 5px;
height: 20px;
}
#basicinfo #userstatus {
display: block;
clear: both;
margin-top: 5px;
}Result:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
