Userarea estilo "Assistive touch"

Started by Daniel, December 12, 2013, 04:03:07 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Daniel

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".

Imagen


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
Last Edit: August 20, 2019, 09:24:37 PM by Diego Andrés

EduardO

Lo estaba esperando, muchas gracias por compartir amigo.

Saludos.
EduardO
AZORAHAI
NerO
EDesign

Marlon

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

Aboul

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..

xSuby

Hola, perdonen si revivo, pero es una pregunta:

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.


PortalZone, mi foro, tú foro, ¡El foro de todos!
¡Entra ya!

Diego Andrés

Quote from: xSuby on December 29, 2013, 05:10:40 PM
Hola, perdonen si revivo, pero es una pregunta:

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;
}