0 Members and 1 Guest are viewing this topic.

*

Daniel

  • Webmaster
Userarea estilo "Assistive touch"
December 12, 2013, 04:03:07 PM
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:
Code: [Select]
// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>

Reemplazar por/Replace with:
Code: [Select]
// 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:
Code: [Select]
theme_linktree();
Reemplazar por/Replace with:
Code: [Select]
theme_linktree();
UserArea();

Agregar antes del codigo ?> lo siguiente/Add before the code ?> the following:
Code: [Select]
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:
Code: [Select]
#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

  • ST Lover
Re:Userarea estilo "Assistive touch"
December 12, 2013, 09:35:29 PM
Lo estaba esperando, muchas gracias por compartir amigo.

Saludos.
EduardO
AZORAHAI
NerO
EDesign
*

Marlon

  • Friend
Re:Userarea estilo "Assistive touch"
December 13, 2013, 06:42:29 AM
Gracias por aportarlo daniel está bueno espero aportes como este!
*

Aboul

  • Newbie
Re:Userarea estilo "Assistive touch"
December 13, 2013, 05:06:16 PM
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

  • Lurker
Re:Userarea estilo "Assistive touch"
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.


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

Diego Andrés

  • Webmaster
Re:Userarea estilo "Assistive touch"
December 31, 2013, 01:24:38 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
Code: [Select]
#draggable
{
background: none;
height: 25px;
padding: 5px;
position: fixed;
right: 100px;
top: 55px;
width: 25px;
z-index: 10000;
}

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