HOME FORUM DOWNLOADS THEMES TUTORIALS PRIVATE SUPPORT
  • 0
  • 0 RepliesReplies
  • 3951 ReadTimes Read
  • 0 PointsPoints
Pages: [1]

Topic: Tutorial Smf Parte 3

Usuario: Nelson
Rango: Nuevo Usuario
Mensajes: 42
Points: 5
Mi web: http://datomundo.com.ar/
Perfil: View Profile
Tutorial Smf Parte 3
June 29, 2012 - 05:53 17:53
Tutorial Smf Parte 3 (Creación de Un Theme)
Hola Usuarios, Ya vamos en la parte 3, que es crear nuestro propio theme, para ello necesitamos las siguientes herramientas.
Todos los Subí A PSD
main_block: http://www.mediafire.com/i/?4ib4pdtwdc3cjz2
menu_gfx: http://www.mediafire.com/i/?0srgidx2shegxht
backdrop: http://www.mediafire.com/i/?5254toab17sqq88
Todavía no suban esos archivos.
Cambiar User Al Lado Derecho
Show content
Index.css (Themes/default/css)
Buscar:
Code: [Select]
div#upper_section div.user
{
width: 50%;
float: left;
overflow: auto;
}
div#upper_section div.user p
{
float: left;
margin: 0 1em 1em 0;
padding: 0;
}
Reemplazar por:
Code: [Select]
div#upper_section div.user
{
width: 50%;
float: right;
overflow: auto;
text-align: right;
}
div#upper_section div.user p
{
float: right;
margin: 0 0 0 1em;
padding: 0;
}
Buscar:
Code: [Select]
#upper_section div.news
{
width: 50%;
float: right;
text-align: right;
}
Reemplazar por:
Code: [Select]
#upper_section div.news
{
width: 50%;
float: left;
text-align: left;
}
Les quedara así:
Show content
Show content
Busca & Elimina
Code: [Select]
         <img id="upshrink" src="', $settings['images_url'], '/upshrink.png" alt="*" title="', $txt['upshrink_description'], '" style="display: none;" />';
   echo '
         ', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '
      </div>Quedara Así:
Show content

Login Estilo Diferente
Show content
busca en tu index.template.php
Busca:
Code: [Select]
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?rc3"></script>Agrega despues:
Code: [Select]
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/menu.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/menu2.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/menu3.js"></script>Busca:
Code: [Select]
<div class="user">';

// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
<ul class="reset">
<li class="greeting"><span>', $txt['hello_member_ndt'], '</span>, ', $context['user']['name'], '</li>
<li><a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '">',$txt['newtopics'],'</a></li>
<li><a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '">',$txt['newreplies'],'</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 '
</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>
<div class="guest_box">
<ul>
<li><a href="',$scripturl,'?action=register">', $txt['register'], '</a></li>
<li><a  href="',$scripturl,'?action=help">', $txt['help'], '</a></li>
<li>
<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'] . '\');"' : '', '>
   <fieldset>
<input type="text" name="user" size="10" class="input_text" />
<input type="password" name="passwrd" size="10" class="input_password" />
<input type="submit" value="', $txt['login'], '" class="button_submit" />
   </fieldset>
<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>';

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>
</li></ul></div>';
}

echo '
</div>reemplaza por:
Code: [Select]
';
// If the user is logged.
user_bar();
echo 'Busca:
Code: [Select]
?>Agrega antes:
Code: [Select]
// If the user is logged in, display stuff like their name, new messages, etc.
function user_bar()
{
global $context, $settings, $scripturl, $txt, $modSettings;
echo '
<div id="topnav">';
if ($context['user']['is_logged'])
{
echo '
' ,$txt['wel_come'], '<a class="signin_user"><span>', $context['user']['name'], '</span></a>
  <fieldset id="user_area">';
if (!empty($context['user']['avatar']))
echo '
<p class="avatar">', $context['user']['avatar']['image'], '</p>';
echo '
<ul class="reset">
<li><a href="', $scripturl, '?action=unread">',$txt['newpost'],'</a></li>
<li><a href="', $scripturl, '?action=unreadreplies">',$txt['newreplies'],'</a></li>';

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<li class="notice">', $txt['maintain_mode'], '</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 '
</ul>
</fieldset>';

}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
elseif (!empty($context['show_login_bar']))
{
echo '
 ' ,$txt['account'], '<a class="signin"><span>' ,$txt['login'], '</span></a>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
  <fieldset id="signin_menu">
      <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'] . '\');"' : '', '>
  <label>' ,$txt['user_name'], '</label>
  <input type="text" name="user" size="10" class="new_login" />
  <label>' ,$txt['pass_word'], '</label>
  <input type="password" name="passwrd" size="10" class="new_login" />
  <select class="new_login" 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" />';
        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="" />
  <p class="forgot"> <a href="', $scripturl, '?action=reminder" id="resend_password_link">', $txt['forgot_your_password'], '</a></p>
 
    </form>
  </fieldset>';
} 
echo '
<a class="signin_bs"><span>', $txt['search'], '</span></a>
   <fieldset id="signin_search">
<form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />&nbsp;
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';

echo '</form>
  </fieldset></div>';
} Abre tu index.css
agrega al final:
Code: [Select]
/* Top - User area
----------------------------------------------------------------*/
#topnav {
   font-size: 11px;
    position: absolute;
    right: 20px;
    text-align: right;
    top: 0;
   color: #A9A9A9;
}
#topnav a.signin, a.signin_bs, a.signin_user {
background: #88bbd4;
padding: 4px 6px 6px;
text-decoration: none;
font-weight: bold;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#topnav a.signin:hover, a.signin_bs:hover, a.signin_user:hover {
background: #59B;
}
a.signin, a.signin_bs, a.signin_user {
position: relative;
margin-left: 3px;
}
a.signin span, a.signin_bs span, a.signin_user span {
background: url(../images/theme/down_light.png) no-repeat 100% 50%;
padding: 4px 16px 6px 0;
}
#topnav a.menu-open {
background: #ddeef6 !important;
color: #666 !important;
outline:none;
}
a.signin.menu-open span, a.signin_bs.menu-open span, a.signin_user.menu-open span {
background-image: url(../images/theme/up_dark.png);
color: #789;
}
#signin_menu {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: none;
background-color: #ddeef6;
position: absolute;
width: 210px;
z-index: 100;
border: 1px transparent;
text-align: left;
padding: 10px;
right: 72px;
color: #789;
font-size: 11px;
}
#signin_menu input[type=text], #signin_menu input[type=password], #signin_search input[type=text] {
display: block;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
        border-radius: 4px;
border: 1px solid #ACE;
font-size: 13px;
margin: 0 0 5px;
padding: 5px;
width: 196px;
}
#signin_menu p {
margin: 0;
}
#signin_menu a {
color: #6AC;
}
#signin_menu label {
font-weight: normal;
}
#signin_menu p.forgot {
clear: both;
margin: 5px 0;
}
#signin_menu p a {
color: #27B !important;
}
#signin_search {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: none;
background-color: #ddeef6;
position: absolute;
width: 210px;
z-index: 100;
border: 1px transparent;
text-align: left;
padding: -3px;
right: 0px;
color: #789;
font-size: 11px;
}
#user_area {
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: none;
background-color: #ddeef6;
position: absolute;
width: 210px;
z-index: 100;
line-height: 16px;
border: 1px transparent;
text-align: left;
padding: 10px;
right: 72px;
color: #789;
font-size: 11px;
}
p.avatar img {
   float: left;
   border: 3px solid #778899;
   padding: 0;
   margin-right: 5px;
   position: relative;
}Busca:
Code: [Select]
#guest_form
{
    clear: left;
    display: block;
    float: right;
    margin-right: 10px;
    min-width: 220px;
    text-align: left;
}y eliminalo
Abre : tu foro/languages/ThemeStrings.tuidioma.php
Busca:
Code: [Select]
?>Agrega antes:
Code: [Select]
$txt['wel_come'] = 'Bienvenido';
$txt['account'] = '¿Tienes una cuenta?';
$txt['user_name'] = 'Nombre de usuario';
$txt['pass_word'] = 'Contraseña';
$txt['newpost'] = 'Nuevos temas';
$txt['maintain_mode'] = 'Modo Mantenimiento';
Luego sube las imagenes que adjunto a: tuforo/images/theme
igual los archivos js a: tuforo/scripts
Descarga:
Imágenes:
http://www.mediafire.com/i/?he322td2p2qn2e6
http://www.mediafire.com/i/?he322td2p2qn2e6
Scripts:
http://www.mediafire.com/?oba9ti4cg62y08c
Resultado:
Show content
Si Te tira algún error Envíame MP

Ahora podemos editar los PSD Que les pase antes:
Quote
main_block: http://www.mediafire.com/i/?4ib4pdtwdc3cjz2
menu_gfx: http://www.mediafire.com/i/?0srgidx2shegxht
backdrop: http://www.mediafire.com/i/?5254toab17sqq88
Cuando los editen los suben a Su FTP Foro/theme/images/theme/
Cuando los suban, les quedara así (Cámbienlos de color)(el mio es de otro color)
Show content
Show content
Luego va a index.cc y buscan
Code: [Select]
background: #E9EEF2 url(../images/theme/backdrop.png) repeat-x;& remplazan por este
Code: [Select]
background: #E9EEF2 url(../images/theme/backdrop.png) repeat;
Parte 4
Logged
You do not have permission to give points
point 0 Points
This topic did not receive points.
Pages: [1]
 

TAGS



top

Smfsimple.com es un sitio destinado a brindar un servicio de soporte y herramientas para foros realizados con el sistema de foros gratuito simplemachines.org. Contamos con un selecto equipo de desarrolladores y conocedores del sistema, sus foros estaran en buenas manos.
This site is not affiliated with or endorsed by Simple Machines