SMF Tricks

Hola a todos, hoy les vengo a traer un nuevo tutorial que es el userarea que SMFHispano utilizo en su antigua version, este userarea es al estilo "assistive touch".

---

Hello everyone, today I come to bring a new tutorial that is UserArea that SMFHispano use in its old version, this UserArea is like "assistive touch".


Index.template.php (Themes/tutheme)

Buscar/Search:
// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>

Reemplazar por/Replace with:
// Here comes the JavaScript bits!
echo '
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
$( "#draggable" ).draggable();
$(".trigger").click(function(){
$(".trigger").hide();
$(".userareap").show("slow");
        });
$(".closeuser").click(function(){
$(".userareap").hide("fast");
$(".trigger").show();
        });
});
   </script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>

Buscar/Search:
theme_linktree();

Reemplazar por/Replace with:
theme_linktree();
UserArea();

Agregar antes del codigo ?> lo siguiente/Add before the code ?> the following:
function UserArea()
{
global $context, $settings, $options, $scripturl, $txt;

if($context['user']['is_logged'])
{
echo'
<div class="floatright">
<div id="draggable">
<div class="userareap">
<div style="width: 100%;">
<a class="floatright closeuser"><img src="', $settings['images_url'], '/userarea/cancel.png" alt="" /></a>
<span class="greetingarea">', $context['user']['name'], '</span>
</div>
<hr />
<div class="panel_block">
<a href="', $scripturl, '?action=profile;area=forumprofile" title="Editar perfil">
<img src="', $settings['images_url'], '/userarea/1.png" alt="" />
</a>
</div>
<div class="panel_block floatright">
<a href="', $scripturl, '?action=unread" title="Temas sin leer">
<img src="', $settings['images_url'], '/userarea/3.png" alt="" />
</a>
</div>
<div class="panel_block floatleft">
<a href="', $scripturl, '?action=unreadreplies" title="Nuevas respuestas">
<img src="', $settings['images_url'], '/userarea/2.png" alt="" />
</a>
</div>
<br class="clear" />
<div class="panel_block">
<a href="', $scripturl, '?action=profile;area=theme" title="Apariencia y dise&ntilde;o">
<img src="', $settings['images_url'], '/userarea/4.png" alt="" />
</a>
</div>
</div>
<a class="trigger" href="#"></a>
</div>
</div>';
    }
}

Index.css (Themes/tutheme/css)

Agregar al final/Add to the end:
#draggable
{
background: none;
height: 25px;
padding: 5px;
position: fixed;
right: 100px;
top: 55px;
width: 25px;
z-index: 10000;
}
.userareap
{
display: none;
background: rgba(36, 36, 36, 0.5);
border-radius: 5px;
height: auto;
padding: 15px;
position: absolute;
right: 30px;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #F0F0F0;
text-shadow: 0 1px rgba(0,0,0,0.2);
width: 150px;
}
a.trigger
{
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
width: 24px;
height: 24px;
font-weight: 700;
background: url(../images/userarea/Circle_Grey.png) 0 0 no-repeat;
background-position: center;
background-color: #2b2b2b;
opacity: 0.6;
border-radius: 3px;
z-index: 90;
display: block;
}
a.trigger:hover
{
text-decoration: none;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
font-weight: 700;
opacity: 0.8;
z-index: 90;
display: block;
}
a.active.trigger
{
text-decoration: none;
opacity: 0.8;
z-index: 90;
}
a.active.trigger:hover
{
text-decoration: none;
background-color: #000;
}
.panel_block
{
line-height: 15px;
text-align: center;
display: block;
}
.panel_block a
{
color: #FFF;
}
.panel_block a:hover
{
color: #F5F5F5;
text-decoration: none;
}


Ahora, el archivo adjunto que verán al final del tema, deberan subirlo a la carpeta images de su theme.

---

Now, the attachment you will see the end of the topic, MUST upload it to the images folder of your theme.

Saludos!

Créditos:
-Diego por la idea
-Daniel por mejorar el código

Lo estaba esperando, muchas gracias por compartir amigo.

Saludos.

Gracias por aportarlo daniel está bueno espero aportes como este!

Muy bueno, gracias por el aporte.
Estoy diseñando un theme así al estilo de el iPhone, en cualquier momento les pedire a alguno de ustedes que me ayude con eso..

Hola, perdonen si revivo, pero es una pregunta:
(https://smftricks.com/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FA935Fab.png&hash=567933aee37a06704cf21f7fcb22200d7e953f30)
El menú para clickear y para que aparezca el UserArea aparece justo en el avatar del usuario, se puede cambiar la ubicación?? como??
Saludos.

Quote from: xSuby on December 29, 2013, 05:10:40 PM
Hola, perdonen si revivo, pero es una pregunta:
(https://smftricks.com/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FA935Fab.png&hash=567933aee37a06704cf21f7fcb22200d7e953f30)
El menú para clickear y para que aparezca el UserArea aparece justo en el avatar del usuario, se puede cambiar la ubicación?? como??
Saludos.

No estoy seguro pero podrías cambiar esto
#draggable
{
background: none;
height: 25px;
padding: 5px;
position: fixed;
right: 100px;
top: 55px;
width: 25px;
z-index: 10000;
}

Por esto:
#draggable
{
background: none;
height: 25px;
padding: 5px;
position: fixed;
right: 140px;
top: 120px;
width: 25px;
z-index: 10000;
}