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:
Agregamos antes:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Index.css
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos por:
Buscamos:
Reemplazamos con:
Buscamos:
Reemplazamos por:
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:
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
// Let them know, if their report was a success!
Agregamos antes:
Code Select
loadlanguage('Profile');
Buscamos:
Code Select
<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
<div class="poster">
<h4>
', $message['member']['link'], '
</h4>
Buscamos:
Code Select
// 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
// 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
// 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
// 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
// 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
// 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
// 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
//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
// 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
// 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
// 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
// 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
// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="blurb">', $message['member']['blurb'], '</li>';
Reemplazamos por:
Code Select
// 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
// 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
// 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
.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 120%;
}
Reemplazamos por:
Code Select
.poster ul
{
text-shadow: 0 1px 0 #fff;
}
.poster h4
{
margin: 0.2em 0 0 1.1em;
font-size: 120%;
}
Buscamos:
Code Select
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
Reemplazamos por:
Code Select
.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
.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
.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
.messageicon img
{
padding: 6px 3px;
}
.keyinfo
{
float: left;
width: 50%;
}
Reemplazamos por:
Code Select
.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:
