[tutorial]Información de Usuario deslizante

Les traigo una modificación que hice para mi foro. Como no la he visto en ningun lado quiero compartirla con ustedes.

Creo que la principal función de este mod es reducir un poco el tamaño de la pagina y darle un bonito estyle al área del perfil

les dejo la demostración (pasen el puntero sobre el avatar para expandir y ocultar)

demo:
http://despeloterosunidos.com/index.php?topic=532.0[/url]

en index.template.php
buscamos

Code: [Select]

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';

// Here comes the JavaScript bits!
echo '
Y agregamos despues

Code: [Select]

<script type="text/javascript" src="[url]http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/ddaccordion.js?rc3"></script>
(quitar [ url ] de la primer linea de codigo para que funcione)

En
display.themplate.php  (de tu theme, si este no lo trae en default)

Buscamos:

Code: [Select]

// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<li class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</li>';

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';

Y reemplazamos por

Code: [Select]

// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<a class="menuitem submenuheader"/><li class="avatar">
', $message['member']['avatar']['image'], '

</li></a>';

else {
echo '
<a class="menuitem submenuheader"/><li class="avatar">
<img class="avatar" src="'.$settings['images_url'].'/theme/noavatar.png" alt="" />
</li></a>';
}


// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<div class="glossymenu">
                <div class="submenu">
<li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';
Subimos el avatar default a Themes/tutheme/images/theme/noavatar.png
Luego subimos el archivo adjunto a la carpeta

/Themes/default/scripts


/*lo que hice fue adaptar un script para un menu desplegable lo usé acá y quedo de maravilla*/

Cualquier problema, me dicen.

Recuerden, lo vieron primero en SMFSimple.com

Saludos.

excelente tutorial, gracias por compartirlo +1

Excelente y mas por compartirlo! +1!

Excelente tutu +1

Excelentisimo tutorial!!!! +1

Salu2!!

Excelente, aunque me gustaría que solo a pasar el mouse en esa área se quede como seleccionado y muestra la información. Sería grandiosa esa idea, ya que así debes estar pasando el mouse dos veces.

Saludos.

Esto esta disponible para la version SMF 2.0 ??¿¿

el tutorial esta hecho en la versión 2.0 en aunque mi foro lo uso en la 2.0 RC5.

Saludos

Woo recién veo este tema, bonito efecto, en SMF se pueden hacer miles y miles de cosas, y ahora si de plano que sin un poquito de imaginación y creatividad, pues te vas a estancar jaja
Gracias por el tip.

Muy buen tuto amigo ademas me parece perfecto le da un aspecto perfecto.

Pues yo eh hecho todo bien y no me muestra el efecto 

Woo recién veo este tema, bonito efecto, en SMF se pueden hacer miles y miles de cosas, y ahora si de plano que sin un poquito de imaginación y creatividad, pues te vas a estancar jaja
Gracias por el tip.

No hay de que y que bueno que les haya gustado. Y así como dices con SMF puedes hacer lo que se te venga a la mente todo es tocar un poco el código.

Muy buen tuto amigo ademas me parece perfecto le da un aspecto perfecto.

gracias que bueno que te gustó.
Saludos.

Pues yo eh hecho todo bien y no me muestra el efecto 

URL de tu foro, subiste el archivo ddaccordion.js  a la carpeta script de tu theme?
Saludos 

Claro si lo eh hecho, ademas que se me presento un error en colocar
Esto:
<script type="text/javascript" src="[url]http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/ddaccordion.js?rc3"></script>
Despues de esto:
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';

   echo '

Asi que coloque el script debajo de:
// Here comes the JavaScript bits!
echo '

Prueba cambiando <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/ddaccordion.js?rc3"></script>

por:

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/ddaccordion.js?rc3"></script>

Prueba cambiando <script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/ddaccordion.js?rc3"></script>

por:

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/ddaccordion.js?rc3"></script>

Gracias por tu ayuda , pero mi "Perfil" Sigue normal y sin ningun cambio de efecto...