Show posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.

Topics - Arnau

#1
Previews / Habbotx
January 05, 2014, 06:23:25 AM
Estos ultimos dias he estado realizando un theme, alguien me dijo, no me acuerdo, que hay mucha demanda en los themes habbo asi que empeze a realizar uno,  aqui les paso una previa de como va mi proceso, la tematica habbo, no es mi fuerte, aún asi espero conseguir un satisfactorio resultado.
Ando intentando realizar un user area diferente como pueden ver  ::)
Aún me falta añadir la opcion de cambiar de color el theme tambien entre otros archivos que aún no he tocado (display...).

Sin loguear:
Spoiler
[close]
http://i.imgur.com/eCZDFrU.png

Logueado (el user area por terminar):
Spoiler
[close]
http://i.imgur.com/s2JWgMc.png

Aprovechando dicho tema, me gustaria saber como consiguen sacar una previa de todo el theme sencero  ???.

Saludos.
#2


·Antes de empezar el tutorial aclare unos aspectos, tutorial realizado y comprovado por mi.
·El titulo del tema dice una manera entre parentesis porque también existe la opción de cambiar de color al theme como lo tiene el Bluez Color. (Si también deseasen hacerlo de esa manera comentarlo y explico encantado).


Empezamos:
Abrimos el index.template.php y buscamos:
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
   echo '
   <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';

Reemplazar por:
// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
   echo '
   <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index.css?fin20" />
   <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';


Buscar:
<div class="user">';

Agregar antes:
<div id="colores">
          <a href="'.$scripturl.'?variant=default"><span class="default"></span></a>
         <a href="'.$scripturl.'?variant=red"><span class="red"></span></a>
         <a href="'.$scripturl.'?variant=green"><span class="green"></span></a>
      </div>


Buscar algo asi, puede que alguna parte no la tengan igual no pasa nada:
/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
   $settings['require_theme_strings'] = false;


Agregar despues:
/*Theme changer*/
   $settings['theme_variants'] = array('default', 'green', 'red');


Abrimos el index.css y agregamos al final:
#colores {
    background: -moz-linear-gradient(top, hsla(0,0%,100%,1) 0%, hsla(0,0%,90%,1) 100%);
   border: 1px solid #999;
    border-radius: 4px;
    height: 20px;
   float: right;
    margin: 4px 0 -1px 82px;
    padding: 3px 0 3px 12px;
    width: 164px;
}
#colores span.red {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #DA4F49;
    background-image: -moz-linear-gradient(center top , #EE5F5B, #BD362F);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-image: none;
    border-style: solid;
    border-width: 1px;
    display: inline;
    float: left;
    height: 18px;
    margin-right: 2px;
    width: 18px;
}
#colores span.green {
    background-image: linear-gradient(to bottom, #7EE594, #2DB54A);
    border: 1px solid #1EA13A;
    display: inline;
    float: left;
    height: 18px;
    margin-right: 2px;
    width: 18px;
}
#colores span.default {
    background-image: url(../images/theme/main_block.png);
    border: 1px solid #c6c6c6;
    display: inline;
    float: left;
    height: 18px;
    margin-right: 2px;
    width: 18px;
}


La siguiente parte solo la explicare una vez, vosotros en la segunda vez copian el codigo y cambian los codigos hexadecimales:

Creamos un nuevo archivo y pegamos el siguiente codigo (es el archivo que cambiara el theme en rojo):
#header, div.cat_bar, h4.catbg, h4.catbg2 , h3.catbg , h3.catbg2 , .table_list tbody.header td.catbg, #footer,tr.catbg th.first_th, tr.catbg th.last_th,
tr.titlebg th.first_th,tr.titlebg th.last_th, .titlebg, .titlebg2, tr.titlebg th, tr.titlebg td, tr.titlebg2 td, .catbg, .catbg2, tr.catbg td, tr.catbg2 td, tr.catbg th, tr.catbg2 th
{
   background: #e50505;
   background: -moz-linear-gradient(top,  #e50505 0%, #cf0404 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e50505), color-stop(100%,#cf0404));
   background: -webkit-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: -o-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: -ms-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: linear-gradient(to bottom,  #e50505 0%,#cf0404 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e50505', endColorstr='#cf0404',GradientType=0 );
}
#header div.frame{
background: #e50505;
   background: -moz-linear-gradient(top,  #e50505 0%, #cf0404 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e50505), color-stop(100%,#cf0404));
   background: -webkit-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: -o-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: -ms-linear-gradient(top,  #e50505 0%,#cf0404 100%);
   background: linear-gradient(to bottom,  #e50505 0%,#cf0404 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e50505', endColorstr='#cf0404',GradientType=0 );
}

Lo guardamos en la carpeta css con el siguiente nombre index_red.css
Creamos las siguientes carpetas en Themes/tutheme/images:
_default :
_red 

Copiamos y pegamos dentro de ellas las imagenes on on2 y off.


Para agregar nuevos colores seria lo mismo, el proceso es repetitivo, si no saben preguntad, estamos para ayudar.

PD: Basado en el theme default.

Imagenes:

#3
RESULTADO FINAL

Abrimos el index.template y buscamos:
// Here comes the JavaScript bits!
echo '

Abajo de dicho codigo agregan:
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/dropdown.js"></script>


Buscamos:

<div class="user">';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
if (!empty($context['user']['avatar']))
echo '
<p class="avatar">', $context['user']['avatar']['image'], '</p>';
echo '
<ul class="reset">
<li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
<li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<li class="notice">', $txt['maintain_mode_on'], '</li>';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
<li>', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'], '</li>';

if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
echo '
<li><a href="', $scripturl, '?action=moderate;area=reports">', sprintf($txt['mod_reports_waiting'], $context['open_mod_reports']), '</a></li>';

echo '
<li>', $context['current_time'], '</li>
</ul>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
elseif (!empty($context['show_login_bar']))
{
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
<input type="text" name="user" size="10" class="input_text" />
<input type="password" name="passwrd" size="10" class="input_password" />
<select name="cookielength">
<option value="60">', $txt['one_hour'], '</option>
<option value="1440">', $txt['one_day'], '</option>
<option value="10080">', $txt['one_week'], '</option>
<option value="43200">', $txt['one_month'], '</option>
<option value="-1" selected="selected">', $txt['forever'], '</option>
</select>
<input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
<div class="info">', $txt['quick_login_dec'], '</div>';

if (!empty($modSettings['enableOpenID']))
echo '
<br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

echo '
<input type="hidden" name="hash_passwrd" value="" />
</form>';
}

echo '
</div>


Reemplazamos por:
<div class="user">';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
if (!empty($context['user']['avatar']))
echo '
<img class="avatar" src="', $context['user']['avatar']['href'], '" alt="" />';
else
echo '
<img class="avatar" src="'. $settings['images_url']. '/theme/noavatar.png" alt="" />';
echo '
<div class="user_menu">
<span class="userbutton" onclick="return overlay(this, \'menulinks\',\'bottom\')">', $txt['hello_member_ndt'], ' ', $context['user']['name'], ' <img class="floatright" src="', $settings['images_url'], '/arrowbox.png" alt="" /></span>
<ul class="reset menulinks" id="menulinks" style="display: none;">
<li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<li class="notice">', $txt['maintain_mode_on'], '</li>';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
<li class="notice">', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'], '</li>';

if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
echo '
<li class="notice"><a href="', $scripturl, '?action=moderate;area=reports">', sprintf($txt['mod_reports_waiting'], $context['open_mod_reports']), '</a></li>';

echo '
</ul>';

// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))
{
echo '
<div class="user_time">';
echo $txt['totalTimeLogged1'], '<br /> ';
// If days is just zero, don't bother to show it.
if ($context['user']['total_time_logged_in']['days'] > 0)
echo $context['user']['total_time_logged_in']['days'], $txt['totalTimeLogged2'], '';

// Same with hours - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['hours'] > 0)
echo $context['user']['total_time_logged_in']['hours'], $txt['totalTimeLogged3'], '';

// Same with minutes - only show it if it's above zero.
if ($context['user']['total_time_logged_in']['minutes'] > 0)
echo $context['user']['total_time_logged_in']['minutes'], $txt['totalTimeLogged4'], '';

echo '
</div>';

}

echo '
</div>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
elseif (!empty($context['show_login_bar']))
{
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
<input type="text" name="user" size="10" class="input_text" />
<input type="password" name="passwrd" size="10" class="input_password" />
<select name="cookielength">
<option value="60">', $txt['one_hour'], '</option>
<option value="1440">', $txt['one_day'], '</option>
<option value="10080">', $txt['one_week'], '</option>
<option value="43200">', $txt['one_month'], '</option>
<option value="-1" selected="selected">', $txt['forever'], '</option>
</select>
<input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
<div class="info">', $txt['quick_login_dec'], '</div>';

if (!empty($modSettings['enableOpenID']))
echo '
<br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';

echo '
<input type="hidden" name="hash_passwrd" value="" />
</form>';
}

echo '
</div>


Abrimos el index.css y añadimos al final:
div.user
{
width: 278px;
float: right;
padding: 2px;
background: #2E2E2E;
box-shadow: #fff;
}
div.user img.avatar
{
float: left;
margin: 0 1em 0 0;
height: 60px;
width: 60px;
border: 1px solid #000;
padding: 1px;
}
.user_time
{
color: #fff;
font-weight: bold;
    padding: 38px 0 0 75px;
    text-shadow: 0 1px 0 #000;
}
.user_menu span.userbutton {
    background: #50504E;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #000;
float: left;
width: 260px;
height: 10px;
padding: 10px 7px;
text-transform: uppercase;
font-weight: bold;
color: #aaa;
}
.user_menu span.userbutton:hover {
cursor: pointer;
}
.user_menu span.userbutton img {
opacity: 0.7;
margin-top: -2px;
}
.user_menu > ul.menulinks {
    background: rgba(32,32,32,0.7);
    border: 2px solid #50504E;
    border-radius: 0 0 3px 3px;
    margin: 0;
    opacity: 0.9;
    padding: 7px;
    position: absolute;
    top: 33px;
    transition: all 0.7s ease 0s;
    width: 258px;
    z-index: 99999;
}
.user_menu > ul.menulinks li {
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid #50504E;
    display: block;
    float: none;
    font-size: 10px;
    margin: 0;
    opacity: 0.9;
    padding: 8px 4px;
    transition: all 0.7s ease 0s;
}
.user_menu > ul.menulinks li a {
    color: #ebebeb;
    text-decoration: none;
}
.user_menu > ul.menulinks li.notice, .user_menu > ul.menulinks li.notice a {
    color: #985229;
    text-decoration: none;
}
.user_menu > ul.menulinks li.notice:hover, .user_menu > ul.menulinks li.notice a:hover {
color: #a33200;
text-decoration: none;
}
.user_menu > ul.menulinks li a:hover {
    color: #fff;
    text-decoration: none;
}



Antes de terminar, descargamos los recursos adjuntos, que son el script y la imagen arrowbox:
·dropdown.script > Pegar en la carpeta scripts de tu theme (Themes/tutheme/scripts).
·arrowbox.png > Pegar en la carpeta images de tu theme (Themes/tutheme/images).
#4
Como añadir un borde en el poster de los perfiles de los usuarios SMF según el color que posean su grupo de usuario:
Resultado final:
Spoiler
[close]


Este tutorial esta basado en el default, antes de hacer las modificaciones se recomienda hacer una copia de los archivos que se modificaran por si sale mal.
Abrimos el Display.template de tu theme y buscamos:
// Show information about the poster of this message.
      echo '
                  <div class="poster">


Lo reemplazamos por:
// Show information about the poster of this message.
      echo '
                  <div class="poster" ', (!empty($message['member']['group_color'] ) ?  'style="border-left: 4px solid '. $message['member']['group_color']  .';"': '' ),'">


Ahora les cuento que añadimos de nuevo, aparte del codigo que verifica el color de los grupos y eso, añadimos un style que hace aparecen el border, en este caso en la zona derecha, el grosor del borde se puede modificar cambiando el 4px por otro valor numerico.

Saludos, ahora no me acuerdo si tambien se tenia que modificar algo al Load.php, asi que si no les sale  comenten.
Es un pequeño tutorial pero util, si quieren crear celdas unicas.
[/spoiler]
#5
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.

#6
Previews / Que les parece el theme que ando haciendo?
September 04, 2013, 10:49:34 AM
Hola smfhipaneros, ya voy terminando el theme que hace una semana mas o menos empece( si voy lento...) y posteo una previa aqui en foro libre para ver que opinan y criticas.
Cabe destacar que es mi primer theme asi que fui mirando codigo de otros themes, tutoriales y asi voy terminando.



Veo que me quedo la segunda imagen un poco a la derecha, pero ya se hacen una idea.
El nombre de copyright es mi nombre real y utilizable en otras comunidades.