Cambiando el estilo del Poster (Estilo kekomundo) - SMF Tricks

[Diego Andrés]

Hola, como han notado se ha vuelto muy "popular" el poster o display de kekomundo, el cuál yo decidí implementar de mis themes y el cuál se hizo de 0.
Bueno en esta ocasión les dejaré una guía, para que puedan dejarlo exactamente igual, tomando como base el default.

La guía es paso por paso, nada de tomar un pedazo de código de 300 lineas y reemplazarlo, tal como hacían algunos usuarios poco competentes en anteriores épocas.
También se dejará como editar el poster para dejar igual otras modificaciones como la barra de actividad, topic count, country flags, shop, y más.

Bueno pues empecemos ...

Display.template.php

Buscamos:

Code Select Expand

// Let them know, if their report was a success!

Agregamos antes:

Code Select Expand

loadlanguage('Profile');


Buscamos:

Code Select Expand

<div class="poster">
<h4>';

// Show online and offline buttons?
if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
echo '
', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';

// Show a link to the member's profile.
echo '
', $message['member']['link'], '
</h4>

Reemplazamos por:

Code Select Expand

<div class="poster">
<h4>
', $message['member']['link'], '
</h4>

Buscamos:

Code Select Expand

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

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

Reemplazamos por:

Code Select Expand

// 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>';

Buscamos:

Code Select Expand

// Don't show these things for guests.
if (!$message['member']['is_guest'])
{
// 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="postgroup">', $message['member']['post_group'], '</li>';
echo '
<li class="stars">', $message['member']['group_stars'], '</li>';

Reemplazamos por:

Code Select Expand

// 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'])
{

Buscamos:

Code Select Expand

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

Reemplazamos por:

Code Select Expand

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

Buscamos:

Code Select Expand

// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<li class="postcount">', $txt['member_postcount'], ': ', $message['member']['posts'], '</li>';

Reemplazamos por:

Code Select Expand

//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>';

Buscamos:

Code Select Expand

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

// Is this user allowed to modify this member's karma?
if ($message['member']['karma']['allow'])
echo '
<li class="karma_allow">
<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'], '">', $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'], '">', $modSettings['karmaSmiteLabel'], '</a>
</li>';

Reemplazamos por:

Code Select Expand

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

Buscamos:

Code Select Expand

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

Reemplazamos por:

Code Select Expand

// 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>';

Buscamos:

Code Select Expand

// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="blurb">', $message['member']['blurb'], '</li>';

Reemplazamos por:

Code Select Expand

// 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>';

Buscamos:

Code Select Expand

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

Reemplazamos por:

Code Select Expand

// 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>';

Index.css

Buscamos:

Code Select Expand

.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 120%;
}

Reemplazamos por:

Code Select Expand

.poster ul
{
text-shadow: 0 1px 0 #fff;
}
.poster h4
{
margin: 0.2em 0 0 1.1em;
font-size: 120%;
}

Buscamos:

Code Select Expand

.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}

Reemplazamos por:

Code Select Expand

.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;
}

Buscamos:

Code Select Expand

.poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
margin-top: 0.5em;
}
.poster li.avatar
{
overflow: hidden;
}
.poster li.warning
{
line-height: 1.2em;
padding-top: 1em;
}

Reemplazamos con:

Code Select Expand

.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 {
    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;
}

Buscamos:

Code Select Expand

.messageicon img
{
padding: 6px 3px;
}
.keyinfo
{
float: left;
width: 50%;
}

Reemplazamos por:

Code Select Expand

.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%;
}

Ahora simplemente descargamos el zip adjunto.
Dentro veremos dos carpetas...
Sin modificar o mover nada, arrastramos todo a ---> Themes/tutheme/images/

Y eso sería todo 
Debajo podrán encontrar como hacer algunos cambios.

El resultado final sería este:

[robertoiui]

¿Como podriamos poner que salgan los koins como en KM?

[Hasslek]

¿Como podriamos poner que salgan los koins como en KM?

Ahora hago un tutorial

[robertoiui]

Ahora hago un tutorial

Muchas gracias!

[fabriig2]

Hola. cómo estás? Mira hice al pie de la letra el tutorial y ahora me sale el siguiente error.


Error en la Base de Datos
Duplicate entry '1-2' for key 'id_member_id_award'
Archivo: /home/jschebza/public_html/untalforo.com/Sources/AwardsManage.php
L�nea: 350

[Diego Andrés]

No creo que eso tenga algo que ver con ese tutorial.

Recuerda que está basado en el theme Default.
Además el error que dejas seguramente está relacionado con algún mod que instalaste.

[fabriig2]

Diego!! Estoy en skype, soy Fabricio ^_^ el pendejo de ayer y siempre

[Brianϟ]

¡Muy buen post! de mucha ayuda para muchos usuarios

[Junior]

Hola Andrés! No encuentro ese archivo uso el theme pelikan ¿Como hago?

[Diego Andrés]

Edita el Display del theme default

[Junior]

Me dio el siguiente error:

¡Error al analizar la Plantilla!

Hubo un problema cargando el tema o archivo de idioma /Themes/default/Display.template.php. Por favor revisa la sintaxis e intenta nuevamente - recuerda, los apóstrofes (') por lo general deben tener una secuencia de escape con la diagonal invertida (\). Para ver información especifica del error del sitio de PHP intenta acceder al archivo directamente. Puedes intentar actualizar esta página o usar el tema predeterminado.

Parse error: syntax error, unexpected end of file in .../Themes/default/Display.template.php on line 920
911:                   ]
912:                });';
913:       }
914:    }
915:
916:    echo '
917:             // ]]></script>';
918: }
919:
920: ?>

Modifique el de default y el index del pelikan y me salio eso ¿Qué debo de hacer?

[Diego Andrés]

No te puedo ayudar demasiado, lo mejor es que preguntes en la web de dzinerstudio que es donde se supone que adquiriste ese theme.

Saludos