WINTXCODERS

Programación => Desarrollo web => Mensaje iniciado por: Sucuri en Junio 20, 2020, 07:55:23 PM

Título: [SMF] Personalizar centro de informacion.
Publicado por: Sucuri en Junio 20, 2020, 07:55:23 PM
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.
(https://i.imgur.com/QhTEXRD.png)
Título: Re:[SMF] Personalizar centro de informacion.
Publicado por: Sucuri en Junio 20, 2020, 08:09:03 PM
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>
';
Título: Re:[SMF] Personalizar centro de informacion.
Publicado por: Sucuri en Junio 21, 2020, 12:00:21 AM
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 -->';