0 Members and 1 Guest are viewing this topic.

*

Arnau

  • ST Fan
RESULTADO FINAL

Abrimos el index.template y buscamos:
Code: [Select]
// Here comes the JavaScript bits!
echo '
Abajo de dicho codigo agregan:
Code: [Select]
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/dropdown.js"></script>

Buscamos:

Code: [Select]
<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:
Code: [Select]
<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:
Code: [Select]
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).
Last Edit: August 20, 2019, 09:25:23 PM by Diego Andrés


*

EduardO

  • ST Lover
Muy buen tutorial amigo, gracias por compartir!

Exelente aporte!
EduardO
AZORAHAI
NerO
EDesign
*

Aboul

  • Newbie
Excelente tutorial bro, pero yo tengo codigos diferentes, ya te escribí por el foro a ver si me ayudas.

Saludos.
*

Marlon

  • Friend
eres dios? hahaha excelente aporte siempre me preguntaba donde conseguía algo así, me animaré y crearé un theme con esto  ;D