Estilo diferente para "Activity Bar" según el rango.

Started by Arnau, November 20, 2013, 11:52:07 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Arnau

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
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 $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 &copy 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
[close]


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.

Last Edit: August 20, 2019, 09:28:27 PM by Diego Andrés