WINTXCODERS Terminal
[visitante@wintxcoders-pc ~]:$ Bienvenido a la comunidad
Recuerda que puedes participar en nuestra comunidad registrándote

[SMF] Personalizar centro de informacion.

Iniciado por Sucuri, Junio 20, 2020, 07:55:23 PM

« anterior - próximo »

Sucuri

Visitante

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

    Sucuri

    Visitante

  • Desconectado
  • Junio 20, 2020, 08:09:03 PM #1 Last Edit: Junio 20, 2020, 08:12:55 PM by DeiivisBs
    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>
    ';

    Sucuri

    Visitante

  • Desconectado
  • 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 -->';