Antes de todo este tutorial esta basado por un tutorial del mismo tema creado por Daniel por comodidad de los usuarios, ya que el codigo que poseo yo del activity y la modificación de archivos es distinta y más larga.
http://smftricks.com/index.php?topic=126.0 (http://smftricks.com/index.php?topic=126.0)
Recordar: Tener instalado mod Activity Bar y Member Color Link
Empezamos:
Display.template.php (Themes/TuTheme)Buscar:[code] /* Activity Bar Mod */
if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_posts']) && !empty($message['Activity_Bar']))
echo '
<li class="activity_li">', !empty($modSettings['Activity_Bar_label']) ? $modSettings['Activity_Bar_label'] : $txt['Activity_Bar_standardlabel'], ':
<div class="activity_holder" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $message['Activity_Bar']['width'], 'px;"><div class="activity_percentage">', $message['Activity_Bar']['percentage'], '%</div></div></div></li>';
/* Activity Bar Mod */
Reemplazar por:
/* Activity Bar Mod */
if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_posts']) && !empty($message['Activity_Bar']))
echo '
<li class="activity_li">', !empty($modSettings['Activity_Bar_label']) ? $modSettings['Activity_Bar_label'] : $txt['Activity_Bar_standardlabel'], ':
<div class="progress-bar shine" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;">
<span style="background-color: '. $message['member']['online_color']. ';width: ', $message['Activity_Bar']['width'], 'px;">
', $message['Activity_Bar']['percentage'], '%
</span>
</div></li>';
/* Activity Bar Mod */Para los usuarios que posean el poster que la mayoria utiliza (Poster Kekomundo)
/* Activity Bar Mod */
if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_posts']) && !empty($message['Activity_Bar']))
echo '
<li class="activity_li"><span class="kmtitle">', $modSettings['Activity_Bar_label'], '</span><img class="kmimages" src="'. $settings['images_url']. '/id/activity.png" alt="" /><hr class="kmdivisor2" />
<div class="progress-bar shine" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;">
<span style="background-color: '. $message['member']['online_color']. ';width: ', $message['Activity_Bar']['width'], 'px;">
', $message['Activity_Bar']['percentage'], '%
</span>
</div></li>';
/* Activity Bar Mod */Luego subir a la siguiente ruta: Themes/tutheme/images/id/ la imagen adjunta.
Abrimos ActivityBar.php (Carpeta Sources)
Borrar todo lo existente en el archivo y reemplazarlo:
<?php
/**
* @package Activity Bar mod
* @version 1.1
* @author Jessica González <missallsunday@simplemachines.org>
* @copyright Copyright (c) 2011, Jessica González
* @license http://www.mozilla.org/MPL/MPL-1.1.html
*/
/*
* Version: MPL 1.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is http://www.marcusforsberg.net/ code.
*
* The Initial Developer of the Original Code is
* Marcus Forsberg <http://www.marcusforsberg.net>.
* Portions created by the Initial Developer are Copyright (C)
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Jessica González <missallsunday@simplemachines.org>
*/
if (!defined('SMF'))
die('Hacking attempt...');
function Activity_Bar_settings(&$config_vars)
{
global $txt;
$config_vars[] = $txt['Activity_Bar_title'];
$config_vars[] = array('check', 'Activity_Bar_enable');
$config_vars[] = array('check', 'Activity_Bar_show_in_posts');
$config_vars[] = array('check', 'Activity_Bar_show_in_profile');
$config_vars[] = array('text', 'Activity_Bar_label');
$config_vars[] = array('int', 'Activity_Bar_timeframe');
$config_vars[] = array('int', 'Activity_Bar_max_posts');
$config_vars[] = array('int', 'Activity_Bar_max_width');
$config_vars[] = '';
}
function Activity_Bar($user)
{
global $modSettings, $smcFunc, $context;
/* No user, no fun */
if (empty($user))
return false;
/* Safety first! */
else
$user = (int) $user;
/* We already have what we need */
if ( isset($context[$user]['activity_bar']) && !empty($context[$user]['activity_bar']))
return $context[$user]['activity_bar'];
/* No? then get it!!! */
else
{
/* Make sure everything is set. If something is missing, use a default value. */
$max_width = !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139;
$max_posts = !empty($modSettings['Activity_Bar_max_posts']) ? $modSettings['Activity_Bar_max_posts'] : 500;
$days = !empty($modSettings['Activity_Bar_timeframe']) ? $modSettings['Activity_Bar_timeframe'] : 30;
$context[$user]['activity_bar'] = array();
/* Calculate the startingdate */
$startingdate = time() - ($days * 86400);
/* Get all posts posted since the startingdate. */
$request = $smcFunc['db_query']('', '
SELECT poster_time, id_member
FROM {db_prefix}messages
WHERE poster_time > {int:startingdate} AND id_member = {int:user}',
array(
'startingdate' => $startingdate,
'user' => $user,
)
);
/* Count the posts. */
$posts = $smcFunc['db_num_rows']($request);
$smcFunc['db_free_result']($request);
/* Calculate everything. */
$num_posts = $posts / $max_posts;
$num_posts = $num_posts > 1 ? 1 : $num_posts;
$percentage = $num_posts * 100;
$bar_width = $max_width * $num_posts;
/* Store the result in a array. */
$context[$user]['activity_bar'] = array(
'width' => $bar_width,
'percentage' => round($percentage,2),
);
/* There you go. Anything else? */
return $context[$user]['activity_bar'];
}
}
function Activity_Bar_css()
{
global $modSettings, $settings, $message;
$return = '';
/* Only show this sutff if we are on a message page or the profile */
if(!empty($modSettings['Activity_Bar_enable']) && isset($_REQUEST['topic']) || isset($_REQUEST['action']) && $_REQUEST['action'] == 'profile')
$return = '
<style type="text/css">
.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
height: 100%;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
.shine span {
position: relative;
}
.shine span::after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-animation: animate-shine 2s ease-out infinite;
-moz-animation: animate-shine 2s ease-out infinite;
}
@-webkit-keyframes animate-shine {
0% {opacity: 0; width: 0;}
50% {opacity: .5;}
100% {opacity: 0; width: 95%;}
}
@-moz-keyframes animate-shine {
0% {opacity: 0; width: 0;}
50% {opacity: .5;}
100% {opacity: 0; width: 95%;}
}
</style>
';
return $return;
}
/* DUH! WINNING! */
function Activity_Bar_Who()
{
$MAS = '<a href="http://missallsunday.com" title="Free SMF Mods">Activity Bar mod © Suki</a>';
return $MAS;
}Resultado final (Siento no tener una imagen con el perfil SMF, cuando consiga lo pondre lo más pronto posible, pero el resultado es el mismo:
Spoiler
(https://smftricks.com/proxy.php?request=http%3A%2F%2Fwww.red-team-design.com%2Fwp-content%2Fuploads%2F2011%2F11%2Fcss3-progress-bar-shine.png&hash=e3b4c08e74c6643bcb8a13a4a14e6d3438de009c)
Agradacimientos:
A Suki, autora del mod y a ayudarme hacer dichas modificaciones(aunque con diferente codigo)
A Daniel realizar el tutorial original e inspirarme a este.
Más tarde agregare otro estilo si me da tiempo
Saludos,espero que les haya gustado mi primer tutorial.