Hola comunidad de WTX, En esta oportunidad me gustaría compartir con vosotros este pequeño tutorial en donde podremos darle un toque diferente a nuestro centro de información para la plataforma de SMF.

Lo primero que tendremos que haces es abrir nuestro gestor de archivo, seguido de ello nos dirigiremos a nuestra ruta donde tengamos alojado nuestro foro, seguido de ello abriremos el apartado de themes y abriremos la carpeta del tema que modificaremos, luego de haber seguido esos pasos, procederemos a abrir nuestro boardindex.template.php para editarlo.

Reemplazaremos todo el código que mostrare a continuación

// Here's where the "Info Center" starts...
echo '
<span class="clear upperframe"><span></span></span>
<div class="roundframe"><div class="innerframe">
<div class="cat_bar">
<h3 class="catbg">
<img class="icon" id="upshrink_ic" src="', $settings['images_url'], '/collapse.gif" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />
', sprintf($txt['info_center_title'], $context['forum_name_html_safe']), '
</h3>
</div>
<div id="upshrinkHeaderIC"', empty($options['collapse_header_ic']) ? '' : ' style="display: none;"', '>';

// This is the "Recent Posts" bar.
if (!empty($settings['number_recent_posts']) && (!empty($context['latest_posts']) || !empty($context['latest_post'])))
{
echo '
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=recent"><img class="icon" src="', $settings['images_url'], '/post/xx.gif" alt="', $txt['recent_posts'], '" /></a>
', $txt['recent_posts'], '
</span>
</h4>
</div>
<div class="hslice" id="recent_posts_content">
<div class="entry-title" style="display: none;">', $context['forum_name_html_safe'], ' - ', $txt['recent_posts'], '</div>
<div class="entry-content" style="display: none;">
<a rel="feedurl" href="', $scripturl, '?action=.xml;type=webslice">', $txt['subscribe_webslice'], '</a>
</div>';

// Only show one post.
if ($settings['number_recent_posts'] == 1)
{
// latest_post has link, href, time, subject, short_subject (shortened with...), and topic. (its id.)
echo '
<strong><a href="', $scripturl, '?action=recent">', $txt['recent_posts'], '</a></strong>
<p id="infocenter_onepost" class="middletext">
', $txt['recent_view'], ' &quot;', $context['latest_post']['link'], '&quot; ', $txt['recent_updated'], ' (', $context['latest_post']['time'], ')<br />
</p>';
}
// Show lots of posts.
elseif (!empty($context['latest_posts']))
{
echo '
<dl id="ic_recentposts" class="middletext">';

/* Each post in latest_posts has:
board (with an id, name, and link.), topic (the topic's id.), poster (with id, name, and link.),
subject, short_subject (shortened with...), time, link, and href. */
foreach ($context['latest_posts'] as $post)
echo '
<dt><strong>', $post['link'], '</strong> ', $txt['by'], ' ', $post['poster']['link'], ' (', $post['board']['link'], ')</dt>
<dd>', $post['time'], '</dd>';
echo '
</dl>';
}
echo '
</div>';
}

// Show information about events, birthdays, and holidays on the calendar.
if ($context['show_calendar'])
{
echo '
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=calendar' . '"><img class="icon" src="', $settings['images_url'], '/icons/calendar.gif', '" alt="', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '" /></a>
', $context['calendar_only_today'] ? $txt['calendar_today'] : $txt['calendar_upcoming'], '
</span>
</h4>
</div>
<p class="smalltext">';

// Holidays like "Christmas", "Chanukah", and "We Love [Unknown] Day" :P.
if (!empty($context['calendar_holidays']))
echo '
<span class="holiday">', $txt['calendar_prompt'], ' ', implode(', ', $context['calendar_holidays']), '</span><br />';

// People's birthdays. Like mine. And yours, I guess. Kidding.
if (!empty($context['calendar_birthdays']))
{
echo '
<span class="birthday">', $context['calendar_only_today'] ? $txt['birthdays'] : $txt['birthdays_upcoming'], '</span> ';
/* Each member in calendar_birthdays has:
id, name (person), age (if they have one set?), is_last. (last in list?), and is_today (birthday is today?) */
foreach ($context['calendar_birthdays'] as $member)
echo '
<a href="', $scripturl, '?action=profile;u=', $member['id'], '">', $member['is_today'] ? '<strong>' : '', $member['name'], $member['is_today'] ? '</strong>' : '', isset($member['age']) ? ' (' . $member['age'] . ')' : '', '</a>', $member['is_last'] ? '<br />' : ', ';
}
// Events like community get-togethers.
if (!empty($context['calendar_events']))
{
echo '
<span class="event">', $context['calendar_only_today'] ? $txt['events'] : $txt['events_upcoming'], '</span> ';
/* Each event in calendar_events should have:
title, href, is_last, can_edit (are they allowed?), modify_href, and is_today. */
foreach ($context['calendar_events'] as $event)
echo '
', $event['can_edit'] ? '<a href="' . $event['modify_href'] . '" title="' . $txt['calendar_edit'] . '"><img src="' . $settings['images_url'] . '/icons/modify_small.gif" alt="*" /></a> ' : '', $event['href'] == '' ? '' : '<a href="' . $event['href'] . '">', $event['is_today'] ? '<strong>' . $event['title'] . '</strong>' : $event['title'], $event['href'] == '' ? '' : '</a>', $event['is_last'] ? '<br />' : ', ';
}
echo '
</p>';
}

// Show statistical style information...
if ($settings['show_stats_index'])
{
echo '
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
<a href="', $scripturl, '?action=stats"><img class="icon" src="', $settings['images_url'], '/icons/info.gif" alt="', $txt['forum_stats'], '" /></a>
', $txt['forum_stats'], '
</span>
</h4>
</div>
<p>
', $context['common_stats']['total_posts'], ' ', $txt['posts_made'], ' ', $txt['in'], ' ', $context['common_stats']['total_topics'], ' ', $txt['topics'], ' ', $txt['by'], ' ', $context['common_stats']['total_members'], ' ', $txt['members'], '. ', !empty($settings['show_latest_member']) ? $txt['latest_member'] . ': <strong> ' . $context['common_stats']['latest_member']['link'] . '</strong>' : '', '<br />
', (!empty($context['latest_post']) ? $txt['latest_post'] . ': <strong>&quot;' . $context['latest_post']['link'] . '&quot;</strong>  ( ' . $context['latest_post']['time'] . ' )<br />' : ''), '
<a href="', $scripturl, '?action=recent">', $txt['recent_view'], '</a>', $context['show_stats'] ? '<br />
<a href="' . $scripturl . '?action=stats">' . $txt['more_stats'] . '</a>' : '', '
</p>';
}

// "Users online" - in order of activity.
echo '
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
', $context['show_who'] ? '<a href="' . $scripturl . '?action=who' . '">' : '', '<img class="icon" src="', $settings['images_url'], '/icons/online.gif', '" alt="', $txt['online_users'], '" />', $context['show_who'] ? '</a>' : '', '
', $txt['online_users'], '
</span>
</h4>
</div>
<p class="inline stats">
', $context['show_who'] ? '<a href="' . $scripturl . '?action=who">' : '', comma_format($context['num_guests']), ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ' . comma_format($context['num_users_online']), ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'];

// Handle hidden users and buddies.
$bracketList = array();
if ($context['show_buddies'])
$bracketList[] = comma_format($context['num_buddies']) . ' ' . ($context['num_buddies'] == 1 ? $txt['buddy'] : $txt['buddies']);
if (!empty($context['num_spiders']))
$bracketList[] = comma_format($context['num_spiders']) . ' ' . ($context['num_spiders'] == 1 ? $txt['spider'] : $txt['spiders']);
if (!empty($context['num_users_hidden']))
$bracketList[] = comma_format($context['num_users_hidden']) . ' ' . $txt['hidden'];

if (!empty($bracketList))
echo ' (' . implode(', ', $bracketList) . ')';

echo $context['show_who'] ? '</a>' : '', '
</p>
<p class="inline smalltext">';

// Assuming there ARE users online... each user in users_online has an id, username, name, group, href, and link.
if (!empty($context['users_online']))
{
echo '
', sprintf($txt['users_active'], $modSettings['lastActive']), ':<br />', implode(', ', $context['list_users_online']);

// Showing membergroups?
if (!empty($settings['show_group_key']) && !empty($context['membergroups']))
echo '
<br />[' . implode(']&nbsp;&nbsp;[', $context['membergroups']) . ']';
}

echo '
</p>
<p class="last smalltext">
', $txt['most_online_today'], ': <strong>', comma_format($modSettings['mostOnlineToday']), '</strong>.
', $txt['most_online_ever'], ': ', comma_format($modSettings['mostOnline']), ' (', timeformat($modSettings['mostDate']), ')
</p>';

// If they are logged in, but statistical information is off... show a personal message bar.
if ($context['user']['is_logged'] && !$settings['show_stats_index'])
{
echo '
<div class="title_barIC">
<h4 class="titlebg">
<span class="ie6_header floatleft">
', $context['allow_pm'] ? '<a href="' . $scripturl . '?action=pm">' : '', '<img class="icon" src="', $settings['images_url'], '/message_sm.gif" alt="', $txt['personal_message'], '" />', $context['allow_pm'] ? '</a>' : '', '
<span>', $txt['personal_message'], '</span>
</span>
</h4>
</div>
<p class="pminfo">
<strong><a href="', $scripturl, '?action=pm">', $txt['personal_message'], '</a></strong>
<span class="smalltext">
', $txt['you_have'], ' ', comma_format($context['user']['messages']), ' ', $context['user']['messages'] == 1 ? $txt['message_lowercase'] : $txt['msg_alert_messages'], '.... ', $txt['click'], ' <a href="', $scripturl, '?action=pm">', $txt['here'], '</a> ', $txt['to_view'], '
</span>
</p>';
}

echo '
</div>
</div></div>
<span class="lowerframe"><span></span></span>';

// Info center collapse object.
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oInfoCenterToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: ', empty($options['collapse_header_ic']) ? 'false' : 'true', ',
aSwappableContainers: [
\'upshrinkHeaderIC\'
],
aSwapImages: [
{
sId: \'upshrink_ic\',
srcExpanded: smf_images_url + \'/collapse.gif\',
altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
srcCollapsed: smf_images_url + \'/expand.gif\',
altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
}
],
oThemeOptions: {
bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
sOptionName: \'collapse_header_ic\',
sSessionVar: ', JavaScriptEscape($context['session_var']), ',
sSessionId: ', JavaScriptEscape($context['session_id']), '
},
oCookieOptions: {
bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
sCookieName: \'upshrinkIC\'
}
});
// ]]></script>';
} 


Por el siguiente codigo

$usuariostotales = $context["num_users_online"] + $context["num_guests"];

echo'
<div>
<table class="tablastats">
<tbody>
<tr>
<td>
<div class="cuadrostats">
<strong>Visitantes</strong>
<br><br>
Usuarios en línea: <span class="aladerecha">'.$context["num_users_online"].'</span><br>
Invitados en línea: <span class="aladerecha">'.$context["num_guests"].'</span><br>
Total de visitantes: <span class="aladerecha">'.$usuariostotales.'</span><br>

</div>
</td>


<td>
<div class="cuadrostats">
<strong>Estadísticas</strong>
<br><br>
Temas: <span class="aladerecha">'.$context["common_stats"]["total_topics"].'</span><br>
Mensajes: <span class="aladerecha">'.$context["common_stats"]["total_posts"].'</span><br>
Usuarios: <span class="aladerecha">'.$context["common_stats"]["total_members"].'</span><br>
Último usuario: <span class="aladerecha">'.$context['common_stats']['latest_member']['link'],'</span><br>
</div>
</td>
</tr>
</tbody>
</table>
</div>


<style>
.aladerecha
{
float: right;
}

.tablastats
{
width: 100%;
}

.tablastats td
{
width: 50%;
height: 140px;
padding-left: 8px;
}

.cuadrostats
{
background-color: white;
border: 2px solid #ECECEC;
width: 100%;
height: 100%;
border-radius: 5px;
padding: 8px;
}
</style>
';

Estimado usuario, en caso de haber realizado los cambios de forma correcta tal cual como lo he mencionado su sitio se deberia ver de la siguiente forma.

Linea de código resumida:



echo'
<div>
<table class="tablastats">
<tbody>
<tr>
<td>
<div class="cuadrostats">
<strong>Visitantes</strong>
<br><br>
Usuarios en línea: <span class="aladerecha">'.$context["num_users_online"].'</span><br>
Invitados en línea: <span class="aladerecha">'.$context["num_guests"].'</span><br>
Total de visitantes: <span class="aladerecha">'.$usuariostotales.'</span><br>

</div>
</td>


<td>
<div class="cuadrostats">
<strong>Estadísticas</strong>
<br><br>
Temas: <span class="aladerecha">'.$context["common_stats"]["total_topics"].'</span><br>
Mensajes: <span class="aladerecha">'.$context["common_stats"]["total_posts"].'</span><br>
Usuarios: <span class="aladerecha">'.$context["common_stats"]["total_members"].'</span><br>
Último usuario: <span class="aladerecha">'.$context['common_stats']['latest_member']['link'],'</span><br>
</div>
</td>
</tr>
</tbody>
</table>
</div>


<style>
.aladerecha
{
float: right;
}

.tablastats
{
width: 100%;
}

.tablastats td
{
width: 50%;
height: 140px;
padding-left: 8px;
}

.cuadrostats
{
background-color: white;
border: 2px solid #ECECEC;
width: 100%;
height: 100%;
border-radius: 5px;
padding: 8px;
}
</style>
';

Para la advertencia legal, es fundamental dirigirse al index.template.php y buscar el sitio donde queremos añadir el siguiente codigo, para visualizar la advertencia


//Alerta!
echo '
</div><!-- #main_content_section -->
</div><!-- #content_section -->
</div><!-- #wrapper -->
<div class="container" style="width: 90%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;margin-top: 15px;"><div class="md-index_wrap" style="display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;border-radius: .5rem .5rem;-webkit-box-shadow: 0 1px 2px 1px rgba(0,0,0,.06);box-shadow: 0 1px 2px 1px rgba(0,0,0,.06);background-color: #fff;margin-bottom: 1em;">
<div class="md-index_icon" style="width: 4rem;padding-left: 1rem;padding-right: .5rem;">
<div class="md-index_icon_status" style="display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;-ms-flex-pack: center;justify-content: center;height: 2.5rem;width: 2.5rem;font-size: 1rem;border-radius: 50%;color: #f5f7f8;background-color: #6389A8;">
<i class="fa fa-anchor" aria-hidden="true"></i>
</div></div>
<div class="md-index_main"><h4 class="md-index_title" style="display: inline-block;margin-bottom: .1rem;font-size: 16px;text-transform: uppercase;font-weight: 600;color: #4e4e4e;">Anuncio importante</h4>
<p class="md-index_desc"> Estimado usuario <strong>La administración de wintxcoders</strong> no se hace responsables por el uso de cualquier tipo de informacion mostrada en este dominio y todos sus subdominios. La responsabilidad de uso es unicamente del que lo utiliza debido a que no podemos realizar un control masivo sobre la actividad de cada persona.  </p></div></div>
    </div><!-- #footerfix -->';