Editando tu theme & [FAQS]

Buenas a todos amigos, hoy voy a enseñar a editar a tu gusto tu theme SMF.
Pueden hacer preguntas una vez leído el tema y pidan lo que necesiten también.

Comenzamos:

RECOMIENDO NO HACER ESTE TUTORIAL CON MODS YA INSTALADOS ANTERIORMENTE.

1 TUTORIAL

1.- Vamos a colocar las celdas, las mas pedidas son las de este foro, así que haremos lo siguiente;

Una vez instalado cualquier theme que no sea Aqua que es el único que lo tiene por defecto y no haría falta hacer este.

Yo me instale un theme llamado Bluez ya que es uno de los mas utilizado, pero bueno, da igual que theme tengas saldrá igual.

Nos dirigimos a nuestro display del theme que tenemos, allí vamos a buscar lo siguiente:

Code: [Select]

// Show information about the poster of this message.
Luego vamos a seleccionar desde allí hasta donde ponga:

Code: [Select]

<div class="postarea">
Una vez seleccionado todo eso lo vamos a sustituir por este código:

      

Code: [Select]

// Show information about the poster of this message.
echo '
<div class="poster">
<h4>
', $message['member']['link'], '
</h4>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '<hr class="kmdivisor" /></li>';
// Show the post group if and only if they have no other group or the option is on, and they are in a post group.
if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
echo '
<li class="membergroup">', $message['member']['post_group'], '<hr class="kmdivisor" /></li>';

// Don't show these things for guests.
if (!$message['member']['is_guest'])
{

// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo '
<li class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
<hr class="kmdivisor" /></li>';
else {
echo '
<li class="avatar">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
<img src="', $settings['images_url'], '/theme/noavatar.png" alt="" />
</a>
<hr class="kmdivisor" /></li>';
}

// Send PM Easy way
if ($context['can_send_pm'])
echo '
<li class="send_pm" style="float: left;"><a href="', $scripturl, '?action=pm;sa=send;u=', $message['member']['id'], '"><span class="send_mp_new">', $txt['profile_sendpm_short'], '</span></a></li>';

// Show online and offline buttons?
if ($message['member']['online']['is_online']) {
echo '
<li class="status"><span class="online" style="text-transform: uppercase; font-size: 8px; text-shadow: 0 1px 0 #fff; color: #6DA26B;"> ' . $message['member']['online']['text'] . '</span></li>';
}
else {
echo '
<li class="status"><span class="offline" style="text-transform: uppercase; font-size: 8px; text-shadow: 0 1px 0 #fff; color: #AEAEAF;"> ' . $message['member']['online']['text'] . '</span></li>';
}

//Show the stars!
echo '
<li class="stars">', $message['member']['group_stars'], '</li>';

// Show the member's custom title, if they have one.
if (!empty($message['member']['title']))
echo '
<li class="title">', $message['member']['title'], '</li>';

echo '
<li class="postcount"><hr class="kmdivisor" />
<div class="cr_post">';

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<img style="margin: 3px 0 0 1px" src="', $settings['images_url'], '/id/postscount.png" alt="" /><span style="text-align:right; margin: 12px 6px 0 0; float: right;">', $message['member']['posts'], '</span><br />';

echo '
</div>
</li>';


// Is this user allowed to modify this member's karma?
if ($modSettings['karmaMode'] == '1' || ($modSettings['karmaMode'] == '2')) {
echo '
<li class="karma_allow"><span class="kmtitle">', $modSettings['karmaLabel'], '</span><img class="kmimages" src="', $settings['images_url'], '/id/star.png" alt="" /><hr class="kmdivisor2" />';

// Is karma display enabled?  Total or +/-?
if ($modSettings['karmaMode'] == '1')
echo '
<span class="karma_n">', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</span>';
elseif ($modSettings['karmaMode'] == '2')
echo '
<span class="karma_n">+', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '</span>';

if ($message['member']['karma']['allow'])
echo '
<a href="', $scripturl, '?action=modifykarma;sa=applaud;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.' . $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '"><img src="', $settings['images_url'], '/id/up.png" alt="', $modSettings['karmaApplaudLabel'], '" /></a>
<a href="', $scripturl, '?action=modifykarma;sa=smite;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '"><img src="', $settings['images_url'], '/id/down.png" alt="', $modSettings['karmaSmiteLabel'], '" /></a>';

echo '
</li>';
}

// Show the member's gender icon?
if (!empty($settings['show_gender']) && $message['member']['gender']['image'] != '' && !isset($context['disabled_fields']['gender']))
echo '
<li class="gender"><span class="kmtitle">', $txt['gender'], '</span><div class="kmimages">', $message['member']['gender']['image'], '</div><hr class="kmdivisor2" />
', $message['member']['gender']['name'], '
</li>';

// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="blurb"><span class="kmtitle">', $txt['personal_text'], '</span><img class="kmimages" src="', $settings['images_url'], '/id/personal_text.png" alt="" /><hr class="kmdivisor2" />', $message['member']['blurb'], '</li>';

// Any custom fields to show as icons?
if (!empty($message['member']['custom_fields']))
{
$shown = false;
foreach ($message['member']['custom_fields'] as $custom)
{
if ($custom['placement'] != 1 || empty($custom['value']))
continue;
if (empty($shown))
{
$shown = true;
echo '
<li class="im_icons">
<ul>';
}
echo '
<li>', $custom['value'], '</li>';
}
if ($shown)
echo '
</ul>
</li>';
}

// This shows the popular messaging icons.
if ($message['member']['has_messenger'] && $message['member']['can_view_profile'])
echo '
<li class="im_icons">
<ul>
', !empty($message['member']['icq']['link']) ? '<li>' . $message['member']['icq']['link'] . '</li>' : '', '
', !empty($message['member']['msn']['link']) ? '<li>' . $message['member']['msn']['link'] . '</li>' : '', '
', !empty($message['member']['aim']['link']) ? '<li>' . $message['member']['aim']['link'] . '</li>' : '', '
', !empty($message['member']['yim']['link']) ? '<li>' . $message['member']['yim']['link'] . '</li>' : '', '
</ul>
</li>';

// Show the profile, website, email address, and personal message buttons.
if ($settings['show_profile_buttons'])
{
echo '
<li class="profile">
<ul>';
// Don't show the profile button if you're not allowed to view the profile.
if ($message['member']['can_view_profile'])
echo '
<li><a href="', $message['member']['href'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/icons/profile_sm.gif" alt="' . $txt['view_profile'] . '" title="' . $txt['view_profile'] . '" />' : $txt['view_profile']), '</a></li>';

// Don't show an icon if they haven't specified a website.
if ($message['member']['website']['url'] != '' && !isset($context['disabled_fields']['website']))
echo '
<li><a href="', $message['member']['website']['url'], '" title="' . $message['member']['website']['title'] . '" target="_blank" class="new_win">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/www_sm.gif" alt="' . $message['member']['website']['title'] . '" />' : $txt['www']), '</a></li>';

// Don't show the email address if they want it hidden.
if (in_array($message['member']['show_email'], array('yes', 'yes_permission_override', 'no_through_forum')))
echo '
<li><a href="', $scripturl, '?action=emailuser;sa=email;msg=', $message['id'], '" rel="nofollow">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . '" />' : $txt['email']), '</a></li>';

// Since we know this person isn't a guest, you *can* message them.
if ($context['can_send_pm'])
echo '
<li><a href="', $scripturl, '?action=pm;sa=send;u=', $message['member']['id'], '" title="', $message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline'], '">', $settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/im_' . ($message['member']['online']['is_online'] ? 'on' : 'off') . '.gif" alt="' . ($message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline']) . '" />' : ($message['member']['online']['is_online'] ? $txt['pm_online'] : $txt['pm_offline']), '</a></li>';

echo '
</ul>
</li>';
}

// Any custom fields for standard placement?
if (!empty($message['member']['custom_fields']))
{
foreach ($message['member']['custom_fields'] as $custom)
if (empty($custom['placement']) || empty($custom['value']))
echo '
<li class="custom">', $custom['title'], ': ', $custom['value'], '</li>';
}

// Are we showing the warning status?
if ($message['member']['can_see_warning'])
echo '
<li class="warning"><span class="kmtitle">', $txt['mc_warnings'], '</span>', $context['can_issue_warning'] ? '<a href="' . $scripturl . '?action=profile;area=issuewarning;u=' . $message['member']['id'] . '">' : '', '<img class="kmimages" src="', $settings['images_url'], '/warning_', $message['member']['warning_status'], '.gif" alt="', $txt['user_warn_' . $message['member']['warning_status']], '" />', $context['can_issue_warning'] ? '</a>' : '', '<hr class="kmdivisor2" />

<span class="warn_', $message['member']['warning_status'], '">', $txt['warn_' . $message['member']['warning_status']], '</span></li>';
}

// Otherwise, show the guest's email.
elseif (!empty($message['member']['email']) && in_array($message['member']['show_email'], array('yes', 'yes_permission_override', 'no_through_forum')))
echo '
<li class="email"><a href="', $scripturl, '?action=emailuser;sa=email;msg=', $message['id'], '" rel="nofollow">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . '" />' : $txt['email']), '</a></li>';

// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>
<div class="postarea">

Una vez echo estos, nos dirigimos a la carpeta CSS de nuestro theme, pues ahí vamos a buscar el archivo index.css y lo vamos a abrir.

Ahí vamos a buscar lo siguiente:

Code: [Select]

/* poster details and list of items */
Una vez encontrado vamos a seleccionar desde ahí hasta este codigo:

Code: [Select]

.modifybutton
{
clear: right;
float: right;
margin: 6px 20px 10px 0;
text-align: right;
font: bold 0.85em arial, sans-serif;
color: #334466;
}
Y vamos a sustituir todo lo seleccionado por esto:

Code: [Select]

/* poster details and list of items */
.poster h4, .poster ul
{
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster ul
{
text-shadow: 0 1px 0 #fff;
}
.poster h4
{
margin: 0.2em 0 0 1.1em;
font-size: 120%;
}
.poster h4, .poster h4 a
{
color: #c06002;
}
.poster ul ul
{
background: url("../images/noise.png") repeat scroll 0 0 #CBD1D3;
    border: 1px solid #edf5f8;
    border-radius: 5px 5px 5px 5px;
    margin: 0.3em 0 0.3em 0;
    padding: 4px 0 0;
    text-align: center;
}
.poster ul ul li
{
display: inline;
}
.poster li.title
{
text-align: center;
margin: 5px 0 -7px 0;
}
.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
margin-top: 0.5em;
}
.poster li.stars
{
text-align: center;
background: rgb(224,224,224); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZmVmZWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(224,224,224,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(224,224,224,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(224,224,224,1) 0%,rgba(239,239,239,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(224,224,224,1) 0%,rgba(239,239,239,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(224,224,224,1) 0%,rgba(239,239,239,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#efefef',GradientType=0 ); /* IE6-8 */
border-radius: 6px;
border: 1px solid #D0D7DB;
padding: 7px 0;
}
.poster li.blurb
{
text-align: center;
}
.poster li.karma_allow
{
text-align: center;
}
.poster li.avatar
{
text-align: center;
}
.poster li.gender
{
text-align: center;
}
.poster li.status
{
font-weight: bold;
text-align: right;
}
.cr_post
{
background: #cdd7da;
border-bottom: 3px dashed #acb7b9;
border-top: 3px dashed #acb7b9;
margin-top: 5px;
}
.poster li.membergroup
{
color: #686868;
}
.poster li.avatar
{
overflow: hidden;
}
.poster li.send_pm
{
margin: 0 0 0 0;
}
.send_mp_new {
    -moz-transition: background 0.5s ease 0s;
    background-color: #D3D6D9;
    border-radius: 2px 2px 2px 2px;
    color: #eee;
    float: left;
    font-size: 8px;
    font-weight: bold;
    margin-top: 2px;
    padding: 0 5px;
    text-shadow: 0 1px 0 #9A9797;
    text-transform: uppercase;
}
.send_mp_new:hover {
    background: none repeat scroll 0 0 gray;
}

.poster li.postcount
{
color: #575757;
    font-size: 14pt;
    font-weight: bold;
    margin-top: 13px;
    text-shadow: 0 1px 0 white;
}
.poster li.warning
{
text-align: center;
}
.poster li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}
.messageicon
{
float: left;
margin: 0 0.5em 0 0;
}
.messageicon img
{
padding: 6px 3px;
}
.kmdivisor
{
border-bottom: 1px solid #FBFCFD;
    border-top: 1px solid #C4C9CD;
    color: #C4C9CD;
    margin: 0;
}
.kmdivisor2
{
border-bottom: 1px solid #FBFCFD;
    border-top: 1px solid #C4C9CD;
    color: #C4C9CD;
margin-top: 16px;
margin-bottom: 11px;
margin-left: 20px;
}
.karma_n
{
font-size: 27px;
text-shadow: 0 1px 0 #fff;
}
.kmimages, .kmimages a
{
float: left;
    margin-bottom: -9px;
margin-top: -10px;
}
.kmtitle
{
float: right;
margin-top: -8px;
margin-left: 5px;
}
.messageicon
{
float: left;
margin: 0 0.5em 0 0;
}
.messageicon img
{
padding: 6px 3px;
}
.keyinfo
{
float: left;
width: 50%;
}
.modifybutton
{
clear: right;
float: right;
margin: 6px 20px 10px 0;
text-align: right;
font: bold 0.85em arial, sans-serif;
color: #334466;
}
Y lo guardamos.

Luego de eso tenemos que descargarnos estos:

http://www.mediafire.com/?74sysdu6sifccdq

VT: https://www.virustotal.com/file/f79a0290ba0f0b622596aa46af869257c1f0031b8d058db45b649efa424f11a6/analysis/1355684734/

Una vez descargado ese archivo hay que colocarlo en la carpeta images de nuestro theme si no existe carpeta colocalo como esta en el archivo descargado, pero si hay carpetas solo coloca el nuevo contenido

Una vez seguido mis pasos nos tiene que quedar así:

Show content

Bueno, pues ahora es la tipica pregunta;

¿DIBILO porque me sale los signos raros?
Mira amigo te explico cuando uno ha editado directamente desde el block de notas la codificación de nuestro archivo editado se cambia por el cambio.

¿Y entonces DIBILO que tengo que hacer para que se quite?
Mi solución a esto es sencillo cogemos nuestro display de nuestra theme y la descargamos en nuestro escritorio, una vez descargado lo abrimos con un simple programa que la mayoría tienen, se llama NOTEPAD++ pues lo abrimos con eso y arriba en el MENU pone codificación, le vamos a dar ahí y vamos a poner la codificación en ANSI y vamos a guardar el archivo y lo vamos a subir de nuevo ya con la nueva codificación.

Ahora sí podemos comprobar que nuestro foro ya no tiene los signos raros;

Show content

Ya tenemos eso instalado.


¿DIBILO yo quiero que me salga el botón de "ENVIAR MP" en mi display.
Pues bien amigo, debemos hacer lo siguiente, nos vamos a nuestro display y buscamos este pequeño codigo:

Code: [Select]

', $txt['profile_sendpm_short'], '
Y lo vamos a sustituir por esto:

Code: [Select]

ENVIAR MP
Y ya esta, recuerda que si te vuelve a salir los signos raros hagas lo que te e dicho anteriormente.

Una imagen ya editado:

Show content

Bueno ya tenemos colocado eso.

¿DIBILO como pongo la actividad como aquí?

Pues bien amigo lo que tenemos que hacer es descargar un MOD llamado Activitybar, vamos a ser lo siguiente.

Nos vamos a descargar el MOD aquí

Cuando estemos en la instalación del MOD bajaremos y seleccionaremos nuestro theme, así:

Show content

Le damos a instalar ahora, y luego le daremos a redireccionar ahora, y nos saldrá un menu con muchas opciones vamos a seleccionar todo como la imagen:

Show content

Ya tendremos el MOD instalado en nuestro foro, pero OJO no en nuestro nuevo Display, ahora tendremos que colocarlo, solo lo tendremos en nuestro perfil;

Show content

¿DIBILO como lo pongo en mi display nuevo?

Pues mira amiga vamos a buscar este codigo en nuestro display:

Code: [Select]

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<img style="margin: 3px 0 0 1px" src="', $settings['images_url'], '/id/postscount.png" alt="" /><span style="text-align:right; margin: 12px 6px 0 0; float: right;">', $message['member']['posts'], '</span><br />';

echo '
</div>
</li>';
Y debajo colocaremos este codigo, debajo del </li>';

Code: [Select]

/* Activity Bar Mod */
if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_posts']) && !empty($message['Activity_Bar']))
echo '

<li class="activity_li"><span class="kmtitle">', $modSettings['Activity_Bar_label'], '</span><img class="kmimages" src="http://shareforo.com/Themes/ShareProyect/images/id/ActivityMonitor.png" alt="" /><hr class="kmdivisor2" />

<div class="activity_holder" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $message['Activity_Bar']['width'], 'px;"><div class="activity_percentage">', $message['Activity_Bar']['percentage'], '%</div></div></div></li>';
/* Activity Bar Mod */
Haciendo esto correctamente nos quedará así:

Show content

¿Pero DIBILO no queda igual que aquí como lo pongo igual?

Pues mira amigo, tendremos que hacer lo siguiente, nos dirigimos a nuestra carpeta de raiz y allí buscamos una carpeta llamada Sources entramos y allí encontraremos un archivo llamado ActivityBar.php, lo abrimos y vamos a hacer lo siguiente:

Buscamos lo siguiente:

Code: [Select]

.activity_holder

{

height: 15px;

border: 1px solid #9BAEBF;

}



.activity_bar

{

height: 15px;

background: url('. $settings['default_theme_url'] .'/images/theme/main_block.png) 90% -200px;

}



.activity_percentage

{

height: 15px;

color: #333333;

text-align: center;

}

Y lo vamos a sustituir por esto:

Code: [Select]

.activity_holder
{
height:23px;
border:1px solid #8ca093;
margin-left:1px;
border-radius:3px;
}

.activity_bar
{
height:23px;
background:url(http://shareforo.com/Themes/ShareForo/images/ActivityBar.png) repeat-x;
}

.activity_percentage
{
height: 23px;color: #416D45;
text-align: center;
font-weight: bold;
padding-top: 3px;
text-shadow: 0 1px 0 #ff0000;
}
Luego de hacer esto nos dirigiremos a la administración, Configuracion del foro luego a modificaciones y en miscelanea vamos a hacer lo siguiente:

Show content

Si tenemos todo echo con mis pasos, tendremos que tener así lo siguiente, yo puse para exagerar un solo mensaje para que este la barra entera:

Show content

Todo perfecto por ahora no.

DIBILO me gustaría que salga el dinero en abajo de los mensajes ¿Como lo hago?

Pues amigo lo que debemos descargarnos el MOD aquí

Lo subimos al foro y cuando estemos instalandolo nos saldrá esto:

Show content

No pasa nada, no seleccionamos nada ya que esto lo modificaremos posteriormente.

Una vez tenemos la shop instalada correctamente tiene que quedar así:

Show content

Bueno ahora vamos a colocar los creditos en el display de mi theme, que vamos a hacer, pues bien.

Nos dirigimos a nuestro Display de nuestro theme lo abrimos y buscamos lo siguiente:

Code: [Select]

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<img style="margin: 3px 0 0 1px" src="', $settings['images_url'], '/id/postscount.png" alt="" /><span style="text-align:right; margin: 12px 6px 0 0; float: right;">', $message['member']['posts'], '</span><br />';

echo '
</div>
</li>';
Y lo vamos a sustituir por este codigo:

Code: [Select]

// Show how many posts they have made.


if (!isset($context['disabled_fields']['posts']))
echo '
<img style="margin: 3px 0 0 1px" src="', $settings['images_url'], '/id/postscount.png" alt="" /><span style="text-align:right; margin: 12px 6px 0 0; float: right;">', $message['member']['posts'], '</span><br />';

echo '
<img style="margin: 3px 0 0 1px" src="', $settings['images_url'], '/id/koinscount.png" alt="" /><span style="text-align:right; margin: 12px 6px 0 0; float: right;">', $message['member']['money'], '</span><br />';
echo '
</div>
</li>';
Una vez echo esto nos tendría que quedar el display así:

Show content

DIBILO una consulta, mira estoy utilizando el hosting com.nu y la publicidad no me gusta ¿Que puedo hacer?

Pues mira amigo, que esto quede entre tu y yo, la publicidad es que mantiene al hosting y como te pillen, pero siendo un foro pequeño no te van hacer nada.

Pues que tenemos que hacer es muy sencillo, mira nos vamos a nuestro index.template.php de nuestro theme, y buscamos ahí lo siguiente:

Code: [Select]

</body>
Lo eliminamos guardamos y listo ya no tenemos publicidad en ninguna parte de nuestro foro.

¿Otra pregunta DIBILO como puedo cambiar las placas de mi foro?

Pues esto es muy sencillo amigo, nos dirigimos a nuestra administración allí vamos a buscar "Controles de los usuarios" ahí le damos a "Grupos de usuarios" y le daremos a "Editar Grupos" nos saldrá todo los grupos creados y nos dirigimos por ejemplo al rango "Administrator" y le vamos a dar a modificar, bajaremos hasta donde pone "Archivo de imagen de estrella:" y pondremos rangos/admin.png, haciendo esto, tenemos que hacer lo siguiente nos vamos a nuestro FTP y en nuestro theme vamos a entrar a images, luego vamos a crear una nueva carpeta llamada rangos donde vamos a colocar el rango que queramos en este caso admin, con formato .png o con los que quieran ustedes, arriba pone "Número de imágenes de estrella:" vamos a colocar siempre 1 ya que esto lo trae por defecto para los rangos.

Un ejemplo de como tiene que quedar:

Show content

Luego de hacer esto nos quedaría el display de esta forma:

Show content

Y así con los rangos que queramos podemos ir haciendo las placas.

¿DIBILO como pongo el karma en mi display?

Esto lo trae por defecto el codigo que te pase del display solo hay que activarlo desde la administración.

Nos dirigimos a la administración le damos en "Configuración del foro" y cuando le demos a opciones principales nos saldrá el menu para activarlo le vamos a dar al botón de la derecha y se nos va a encender en color verde donde pone Karma, luego bajamos hasta abajo y pondrá "Guardar" le damos y ya esta, ahora nuestro diplay estará así:

Show content

2 TUTORIAL

Después de un tiempo pensando que añadir mas y que la gente a dado sus dudas he creado el 2 y no el último tutorial para poder ir mejorando tu foro poco a poco, bueno lo siguiente sera como añadir el inventario a mi display (Ficha) pues bien nos quedamos así:

Show content

Sigamos.

¿DIBILO como puedo añadir mi inventario a mi display?

Pues muy fácil amigo, añadiremos nuestro inventario debajo de nuestro KARMA en este tutorial, pero tu puedes colocarlo donde quieras recordando bien los pasos siguiente.

Primero que todo vamos a abrir nuestro display.template.php de nuestro theme luego buscaremos este código que es el del KARMA, y debajo de este código agregaremos esto.

Buscamos el código:

Code: [Select]

// Is this user allowed to modify this member's karma?
if ($modSettings['karmaMode'] == '1' || ($modSettings['karmaMode'] == '2')) {
echo '
<li class="karma_allow"><span class="kmtitle">', $modSettings['karmaLabel'], '</span><img class="kmimages" src="', $settings['images_url'], '/id/star.png" alt="" /><hr class="kmdivisor2" />';

// Is karma display enabled?  Total or +/-?
if ($modSettings['karmaMode'] == '1')
echo '
<span class="karma_n">', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</span>';
elseif ($modSettings['karmaMode'] == '2')
echo '
<span class="karma_n">+', $message['member']['karma']['good'], '/-', $message['member']['karma']['bad'], '</span>';

if ($message['member']['karma']['allow'])
echo '
<a href="', $scripturl, '?action=modifykarma;sa=applaud;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.' . $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '"><img src="', $settings['images_url'], '/id/up.png" alt="', $modSettings['karmaApplaudLabel'], '" /></a>
<a href="', $scripturl, '?action=modifykarma;sa=smite;uid=', $message['member']['id'], ';topic=', $context['current_topic'], '.', $context['start'], ';m=', $message['id'], ';', $context['session_var'], '=', $context['session_id'], '"><img src="', $settings['images_url'], '/id/down.png" alt="', $modSettings['karmaSmiteLabel'], '" /></a>';

echo '
</li>';
}
Y debajo agregaremos este código:

Code: [Select]

// Inventario By DIBILO
    global $db_prefix, $smcFunc, $boardurl, $modSettings;
    $cant = $modSettings['inventory_cant'];
    $request = $smcFunc['db_query']('','
        SELECT it.desc, it.image
        FROM {db_prefix}shop_items AS it,
              {db_prefix}shop_inventory AS iv
        WHERE iv.ownerid = {int:member}
        AND iv.itemid = it.id
        LIMIT 0, 8',
        array(
            'member' => $message['member']['id'],
        )
    );
    if ($smcFunc['db_num_rows']($request))
    {

         echo '<li class="blurb"><span class="kmtitle">Compras de SF</span><img class="kmimages" src="http://shareforo.com/Themes/ShareProyect/images/id/items.png" alt="" /><hr class="kmdivisor2" />
    </li>';
     while ($row = $smcFunc['db_fetch_assoc']($request))
      {
        echo '<img src="',$boardurl,'/Sources/shop/item_images/'.$row['image'].'" title="'.$row['desc'].'" alt="'.$row['image'].'" /> ';
      }
      $smcFunc['db_free_result']($request);
         echo '</fieldset>';
    }
Y ya esta amigos, ya tendremos nuestro inventario, este código esta programado para que solo le salga a los usuarios que tengan items y solo para 8 items ustedes lo pueden bajar buscando el numero 8 en este código por el que quieran, recomiendo que lo dejen así.

Y quedara así:

Show content

Bueno esto es todo por hoy, pero no por siempre ya que falta muchoooo... Así que estate atento al tema y pregunta lo que necesites.


-Un saludo, DIBILO.

TutorialesDIBILO | Internosfera | KekoMundo | SMF

Buen tutorial +10

Excelente aporte! Seguramente a muchos les servira! +10

Muchas gracias amigos.


INFO:

Cada cierto voy actualizando el topics, cada que tengo un ratito libre voy aumentando el contenido para así poder evitar spam preguntas obvias de usuarios nuevos o no.

Espero que lo veais todo y si teneis algún problema pregunten y les respondo sin ningún problema.


-Un saludo, DIBILO.

Definitivamente este es un foro extrahordinariamente bueno!

Felicitaciones DIBILO +10

Bastante bueno este tutorial; aunque la mayoria de las modificaciones que mencionas ya llevan algo de tiempo publicadas, hacia falta que alguien las reuniera en un solo lugar y explicado de una manera tan sencilla. 

Gracias amigo; a muchos nos ayudara esto.

¡Muchas gracias por esta gran guia! Me irá perfecta!

Un Saludo!


Sent from my iPod touch using Tapatalk 2

Perdón por el doble post, pero estoy desde el móbil y no me deja editar...
Bueno, lo que quería comentar esque he hecho todo lo del tutorial y me ha salido todo perfecto!
Lo único es que en los mensajes, el display es una mezcla entre el default de smf y el de este tutorial.

Para poder ponerlo igual, ¿qué debo modificar?
Muchas gracias.

Un Saludo!


Sent from my iPod touch using Tapatalk 2

Bueno yo tengo un par de preguntas para empezar... ante todo gracias por el tutorial.

La primera es cuando dices "RECOMIENDO NO HACER ESTE TUTORIAL CON MODS YA INSTALADOS ANTERIORMENTE"
es que recomiendas su instalación sin ningun mod?


Otra es que al empezar a instalar por ejemplo mi Theme no tiene el archivo Display. Es por que usa el display del default? tendria entonces que modificar todo en el default? es que modifique el dysplay en default y el otro archivo de mi theme y vi por duplicado el display xDD

Vale primero que todo te respondo aquí por que son preguntas de dudas si quieres ya un soporte deberás ir a su sección correspondiente.

El consejo de que no lo hagas con MODs instalados es por el cual, el código que te paso abarca mucho y si tu tienes MODs entre medio de ese código se va a quitar, si te interesa mucho podrías ir yendo código por código, solo hablo del display.

A ver si tienes un display en tu theme deberás hacer los cambios allí, con su respectivo CSS de tu theme, si no tiene display, todos los cambios lo deberás hacer en la carpeta default incluyendo su CSS no la del otro theme.

No te puede dar duplicado 

-Un saludo, DIBILO.

Excelente. Tardé un poco modificando pero lo logré. Solo tengo un problema, que al colocar la actividad y estar activado, dices en el tema, que no estará activado, aun después de estar instalado.

Ya tendremos el MOD instalado en nuestro foro, pero OJO no en nuestro nuevo Display, ahora tendremos que colocarlo, solo lo tendremos en nuestro perfil

Pero no se por qué me causa problema. Es decir, cuando voy al paso que dices> ¿DIBILO como lo pongo en mi display nuevo? Y le introduzco el código>

         /* Activity Bar Mod */
         if(!empty($modSettings['Activity_Bar_enable']) && !empty($modSettings['Activity_Bar_show_in_posts']) && !empty($message['Activity_Bar']))
            echo '
                  
                  <li class="activity_li"><span class="kmtitle">', $modSettings['Activity_Bar_label'], '</span><img class="kmimages" src="http://shareforo.com/Themes/ShareProyect/images/id/ActivityMonitor.png" alt="" /><hr class="kmdivisor2" />
                  
                  <div class="activity_holder" style="width: ', !empty($modSettings['Activity_Bar_max_width']) ? $modSettings['Activity_Bar_max_width'] : 139, 'px;"><div class="activity_bar" style="width: ', $message['Activity_Bar']['width'], 'px;"><div class="activity_percentage">', $message['Activity_Bar']['percentage'], '%</div></div></div></li>';
         /* Activity Bar Mod */

Lo que hace es, que me desapare la actividad y luego no se activa. Porque como te dije, sin introducir este código, me funciona, lo único que es sin css ni nada, pero me sale.

Dibilo aquí puedes ver a lo que me refiero> http://foro.dioseslindo.net/index.php?topic=2.msg7

Aparece la actividad, pero si me meto el código que dices, desaparece, eso no se por qué, y entonces, sin ese código, no tiene diseño ni nada la actividad...

Adjuntame tu display.template.php, pero crea un tema en soporte adjuntandolo ya que este tema no es de soporte.


-Un saludo, DIBILO.

Disculpa amigo los inconvenientes. Ahí te lo adjunto, estaré activo a ver que me dices. xD

PD: Dibilo Logré ponerle otro estilo, que encontré en otro foro. El código es:

Code: [Select]

.progress-bar {
        background-color: #c6d5db;
        height: 25px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
        -webkit-box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
        box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
padding: 3px;
text-align: left;
}

.progress-bar span {
        display: inline-block;
padding: 5px 0;
text-align: center;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
color: #ccc;
text-shadow: 0 1px 0 #2f2f2f;
font-weight: bold;
}
.blue span {
        background: #053159 url(../images/theme/backdrop.png) repeat;
}

.stripes span {
        -webkit-background-size: 30px 30px;
        -moz-background-size: 30px 30px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear, left top, right bottom,
                                                color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                                                color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);           

        -webkit-animation: animate-stripes 3s linear infinite;
        -moz-animation: animate-stripes 3s linear infinite;
}

¿Cómo hago para centrarlo? Es el mismo que usa este mira:

Disculpa amigo los inconvenientes. Ahí te lo adjunto, estaré activo a ver que me dices. xD

PD: Dibilo Logré ponerle otro estilo, que encontré en otro foro. El código es:

Code: [Select]

.progress-bar {
        background-color: #c6d5db;
        height: 25px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
        -webkit-box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
        box-shadow: 0 1px 2px #000 inset, 0 1px 0 #444;
padding: 3px;
text-align: left;
}

.progress-bar span {
        display: inline-block;
padding: 5px 0;
text-align: center;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
color: #ccc;
text-shadow: 0 1px 0 #2f2f2f;
font-weight: bold;
}
.blue span {
        background: #053159 url(../images/theme/backdrop.png) repeat;
}

.stripes span {
        -webkit-background-size: 30px 30px;
        -moz-background-size: 30px 30px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear, left top, right bottom,
                                                color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
                                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
                                                color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
                                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
                                                transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
                                                transparent 75%, transparent);           

        -webkit-animation: animate-stripes 3s linear infinite;
        -moz-animation: animate-stripes 3s linear infinite;
}

¿Cómo hago para centrarlo? Es el mismo que usa este mira:

Solo debes de cambiar el text-align: left; por; text-align: center;

Porfavor amigo crea temas en la sección de soporte aquí no hagas respuestas así.

-Un saludo, DIBILO.

Hola Dibilo gracias por tu tutorial me esta ayudando bastante. Me gustaria saber como hacen para modificar las celdas, en el sentido como el anterior compañero en poner el borde solo 1 un cuadro?

Puedo mover arriba y abajo los codigos para que aparezcan como yo deseo? Muchas gracia Dibilo!