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

Started by Diego Andrés, August 06, 2013, 02:39:16 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

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:
// Let them know, if their report was a success!

Agregamos antes:
loadlanguage('Profile');


Buscamos:
<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:
<div class="poster">
<h4>
', $message['member']['link'], '
</h4>


Buscamos:
// 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:
// 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:
// 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:
// 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:
// 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:
// 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:
// 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:
//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:
// 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:
// 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:
// 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:
// 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:
// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="blurb">', $message['member']['blurb'], '</li>';


Reemplazamos por:
// 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:
// 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:
// 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:
.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 120%;
}


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


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


Reemplazamos por:
.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:
.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:
.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:
.messageicon img
{
padding: 6px 3px;
}
.keyinfo
{
float: left;
width: 50%;
}


Reemplazamos por:
.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:
Last Edit: August 20, 2019, 09:21:03 PM by Diego Andrés

robertoiui


Hasslek



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
Last Edit: June 27, 2015, 12:09:20 PM by Diego Andrés

Brianϟ


Junior

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

Diego Andrés


Junior

Me dio el siguiente error:

Quote¡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?
Last Edit: January 08, 2015, 10:53:50 PM by Junior

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