Cambiar de estilo el login/userarea de tu theme (Estilo Kekomundo v4)

Started by Daniel, August 06, 2013, 02:33:41 PM

Previous topic - Next topic

0 Members and 2 Guests are viewing this topic.

Daniel

Hola, he visto que algunos estan intentando como "sacar" el login/userarea de algunos de nuestros themes, asi que aqui les dejo el tutorial de como hacerlo. Nota: este tutorial esta basado en el theme default

RESULTADO FINAL

Ok, empezemos.

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


Reemplazar por:
// Here comes the JavaScript bits!
echo '
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.tools.min.js"></script>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>


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


Reemplazar por:
<div id="userinf" class="smalltext">';

// 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 '
<a href="', $scripturl, '?action=profile"><img class="ava_bar" src="', $context['user']['avatar']['href'], '" alt="" /></a>';
}
else {
echo '
<a href="', $scripturl, '?action=profile"><img class="ava_bar" src="', $settings['images_url'], '/theme/avatardefault.png" alt="" /></a>';
}

echo '
<span class="greeting"><a href="', $scripturl, '?action=profile">', $context['user']['name'], '</a></span>
<div id="userbar">
<ul class="tabs">
<li><a class="current" href="', $scripturl, '?action=profile;area=forumprofile"><img src="', $settings['images_url'], '/theme/icons/icon2.png" alt="" /></a></li>
<li><a href="', $scripturl, '?action=profile;area=account"><img src="', $settings['images_url'], '/theme/icons/icon3.png" alt="" /></a></li>
<li style="cursor:default"><a href="#"><img src="', $settings['images_url'], '/theme/icons/icon4.png" alt="" /></a></li>
<li><a href="', $scripturl, '?action=unread"><img src="', $settings['images_url'], '/theme/icons/icon5.png" alt="" /></a></li>
<li><a href="', $scripturl, '?action=unreadreplies"><img src="', $settings['images_url'], '/theme/icons/icon6.png" alt="" /></a></li>
</ul>

<div class="panes">
<div style="display: block;">', $txt['forumprofile'], '</div>
<div style="display: none;">', $txt['account'], '</div>
<div style="display: none;">';
// Show the total time logged in?
if (!empty($context['user']['total_time_logged_in']))

{
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>
<div style="display: none;">', $txt['unread_topics_visit'], '</div>
<div style="display: none;">', $txt['unread_replies'], '</div>
</div>
<script type="text/javascript">
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div",{event:\'mouseover\'});
});
</script>
</div>';

}
else
{
echo '
<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'] . '\');"' : '', '>
<input type="text" size="10" name="user" value="', $txt['username'], '" onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['username'], '\';" class="input_text" />
<input type="password" size="10" name="passwrd" value="', $txt['password'], '" onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\'', $txt['password'], '\';" class="input_text" />
<input class="button_submit" type="submit" value="', $txt['login'], '" />
<input type="hidden" value="" name="hash_passwrd" />
</form>';
    }
echo'
</div>


Theme.js (Themes/tutheme/scripts)

Agregar al final:
$(document).ready(function(){
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div",{event:'mouseover'});
});
});

Index.css (Themes/tutheme/css)

Agregar al final:
.panes div {
    background: #134874;
    border-radius: 5px 5px 5px 5px;
    color: #bbb;
    display: none;
    font-size: 10px;
    font-style: italic;
    line-height: 11px;
    padding: 3px;
}
ul.tabs {
    height: 23px;
    list-style: none outside none;
    margin: 0 !important;
    padding-left: 10px;
    z-index: 1;
}
ul.tabs li {
    float: left;
    list-style-image: none !important;
    margin: 0 !important;
    padding: 0;
    text-indent: 0;
}
ul.tabs a {
    color: #333333;
    display: block;
    font-size: 11px;
    height: 22px;
    line-height: 30px;
    margin: 0;
    padding: 0 2px;
    padding-top: 2px;
    position: static;
    text-align: center;
    text-decoration: none;
    top: 1px;
    width: 23px;
border-radius: 4px 4px 0 0;
}
ul.tabs a:active {
    outline: medium none;
}
ul.tabs a:hover {
    background: #134874;
    color: #FFFFFF;
}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
    background: #134874;
padding-right: 2px;
    color: #000000 !important;
    height: 24px;
}
ul.tabs a img {
    margin-top: 3px;
}
.panes .pane {
    display: none;
}
.ava_bar {
    border: 1px solid #222;
border-radius: 5px;
    float: left;
    margin: 3px 10px 6px 6px;
    z-index: 2;
width: 50px;
height: 50px;
}
#userinf {
float: left;
    height: 67px;
    margin: 0 15px 0 0;
    padding: 0;
    position: relative;
    width: 260px;
}
#userinf img.avatar {
border: 1px solid #1D3652;
    float: left;
    margin: 3px 10px 6px 6px;
    z-index: 2;
width: 50px;
height: 50px;
}
#rightarrow {
    position: absolute;
    right: 5px;
    top: 8px;
}
#userbar {
    display: block;
    float: right;
    position: relative;
    width: 192px;
}
#userinf .greeting
{
font-weight: bold;
margin-left: 10px;
color: #FFF;
text-shadow: 0 2px 0 #000;
}
#userinf .greeting a
{
color: #FFF;
text-shadow: 0 2px 0 #000;
text-decoration: none;
}


Listo, ahora en el siguiente rar que les dejare deberan hacer lo siguiente:
avatardefault.png: Subir a la siguiente ruta Themes/tutheme/images/theme.
Carpeta icons: Subir a la siguiente ruta Themes/tutheme/images/theme.
jquery.tools.min: Subir a la siguiente ruta Themes/tutheme/scripts.

Y listo eso es todo, recuerden que esta basado en el theme default, asi que es su trabajo tratar de acomodarlo al theme que estan utilizando, y si tienes algunas duda o necesitan un poco de ayuda pueden dejar un comentario o crear un tema en su debida seccion.

Saludos!
Last Edit: August 20, 2019, 09:28:10 PM by Diego Andrés

Losox


Hasslek


bombero

estoy probando a cambiarlo en mi theme, el silentwave y encuentro lo que tengo que modificar excepto la parte que dice

<div class="user">';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{


esa parte no aparece en mi index.template, he encontrado algo parecido pero no me fio de arriesgarme a realizar el cambio sin saber.

Modifico:

Podría hacer en mi theme un login de usuario como el que adjunto en la imagen? Que ademas lo he visto aqui, jeje
http://awesomescreenshot.com/00820cludc

www.foropatrol.es
theme: silentwave
versión 2.0.6 smf
Last Edit: June 21, 2014, 12:06:30 PM by Diego Andrés

bombero

Quote from: bombero on November 25, 2013, 03:17:51 PM
estoy probando a cambiarlo en mi theme, el silentwave y encuentro lo que tengo que modificar excepto la parte que dice

<div class="user">';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{


esa parte no aparece en mi index.template, he encontrado algo parecido pero no me fio de arriesgarme a realizar el cambio sin saber.

Modifico:

Podría hacer en mi theme un login de usuario como el que adjunto en la imagen? Que ademas lo he visto aqui, jeje
http://awesomescreenshot.com/00820cludc

www.foropatrol.es
theme: silentwave
versión 2.0.6 smf

alguna posible solución??  ::) ::)

Diego Andrés

Lo siento pero es de un theme premium, tendrías que comprarlo.
Si quieres acomodar lo de este tuto por favor adjunta el display pero en un nuevo tema en la sección de soporte.

Saludos!