Cambiando el estilo del Poster (Estilo kekomundo)

Started by Diego Andrés, June 06, 2013, 10:00:45 PM

Previous topic - Next topic

Diego Andrés

Hola, como han notado se ha vuelto muy "popular" el poster o display de kekomundo, el cuál yo recreé y suelo usar en algunos de mis themes.
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.


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 las dos carpetas a ---> Themes/tutheme/images/

Y eso sería todo  ;)

El resultado final sería este:

SMF Tricks - Free & Premium Responsive Themes for SMF.

Dhayzon

buena modificación ..... pero ala hora q lo posteas XD --- me gusta el efecto q tiene

Angel Muñoz

Gran tutorial lo usare para mi nueva comunidad saludos!, por cierto tus themes estan muy buenos

davidtorresruiz


Diego Andrés

Sí seguiste al pie de la letra los pasos, debe de quedar igual.
Recuerda que esta basado en el theme Default.

SMF Tricks - Free & Premium Responsive Themes for SMF.


juegamasperu

Buenos Dias, comenzando no me sale la clase div class = poster
Quote<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>

ademas de ello cuando busco el index.css, no me figura la opción de .poster
lo unico que tengo es .poster
{
   width: 15em;
   float: left;

y no mas que otras opciones, si me pueden ayudar , os agradecería muchisimo.

Saludos Cordiales

Dhayzon

indiquenos  el thema  que  esta usando usted,  si es posible adjunte su  index.css y su display.template.php.

econsorte

Excelente TUTO, pero me queda mal. No se porq! Gracias de todos modo!

Diego Andrés

Recuerda que el tutorial se basa en el theme default.
Si has seguido correctamente todos los pasos debería quedar igual.

Saludos

SMF Tricks - Free & Premium Responsive Themes for SMF.

Advertisement: