Cambiar el estilo del user area de tu theme (Estilo dropdown)

Started by Arnau, December 08, 2013, 03:27:02 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Arnau

RESULTADO FINAL

Abrimos el index.template y buscamos:
// Here comes the JavaScript bits!
echo '

Abajo de dicho codigo agregan:
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/dropdown.js"></script>


Buscamos:

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

Muy buen tutorial amigo, gracias por compartir!

Exelente aporte!
EduardO
AZORAHAI
NerO
EDesign

Aboul

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

Saludos.

Marlon

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