[TUTORIAL]Modificar celdas donde se visualiza el post

[YahirKeym]

Hola, primero que nada: Si éste post no va a quí, pido de favor si pueden moverlo de lugar, lo hagan .

Hoy les vengo a enseñar como modificar sus celdas del lugar donde ustedes hacen post, o bueno, donde éste se visualiza.

Éstas celdas son provadas con los siguientes mods; como lo dije, soy nuevo haciendo ésto y no sé si esté bien en el como se hace; los mods y extenciones son los/as siguientes: SMF Shop 3.1.7, Awards, Activity bar, Country, y el karma.

Ésta es la versión final o bueno, como tendría que quedar:

ANTES DE HACER ÉSTO, REALIZAR UNA COPIA DE SEGURIDAD(ya que no estoy seguro de lo que hago y no sé si así se haga)

Antes de empezar,verificaremos que tengamos los archivos apropiados para ésto(Cabe recalcar, que yo utilizare los archivos default como referencia):
-Display.template.php - 
-css/index.css - 
-(carpeta)fonts - La descargaremos más adelante
Si no tienen los archivos, recomiendo tomarlos de la carpeta del tema por defecto, "Default".

Comenzemos con la edición:

Recomiendo usar Sublime Text como editor de texto, desde mi experiencia como programador, es el mejor.

En el Display.template.php qué está por default, buscaremos la siguiente linea:

Code Select Expand


// Show information about the poster of this message.


Seleccionaremos lo siguiente (linea 240 a la 405):

Code Select Expand


// Show information about the poster of this message.
echo '
<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>
<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

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

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

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

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

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

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

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

Y remplazaremos por éste codigo(recordemos que SMF nos facilita el codigo comentandolo, así que si solo gustan agregar ciertas cosas, bien, no será díficil encontrar cada una de ellas):

Code Select Expand


// Show information about the poster of this message.
echo '
<div class="poster">
<h4 class="">';

// 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>
<ul class="reset smalltext center" 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 left">', $message['member']['group'], '</li>';

// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
{echo '
<li class="center ava-profile img-full">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</li>';}
// Show the member's custom title, if they have one.
if (!empty($message['member']['title']))
echo '
<li class="title">', $message['member']['title'], '</li>';

// Send PM Easy way
if ($context['can_send_pm'])
echo '
<li class="send_pm center""><a href="', $scripturl, '?action=pm;sa=send;u=', $message['member']['id'], '"><span class="send_mp_new">', $txt['profile_sendpm_short'], '</span></a></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>';

// 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 center">', $message['member']['post_group'], '</li>';
echo '
<li class="stars ">', $message['member']['group_stars'], '</li>';

// Show their above profile awards, like badges and stuff
if (!empty($message['member']['awards']) && $modSettings['awards_in_post'] > 0)
{
$awards = 0;
$award_output = '';

foreach ($message['member']['awards'] as $award)
{
if (($award['location'] == 2) && ($awards < $modSettings['awards_in_post']))
{
$award_output .= '
<a href="' . $scripturl . $award['more'] . '"><img src="' . dirname($scripturl) . $award['img'] . '" alt="' . $award['description'] . '" title="' . $award['description'] . '" /></a> ';
$awards++;
}
}

// If we found awards to output in this location ...
if (!empty($awards))
{
$style = (empty($modSettings['awards_aboveavatar_format']) || $modSettings['awards_aboveavatar_format'] == 1) ? 'style="border:1px;border-style:solid; border-color:#CCC;padding:2px 2px 2px 5px;margin-right:15px;"'
: ($modSettings['awards_aboveavatar_format'] == 2 ? 'style="border-top:1px;border-bottom:0;border-right:0;border-left:0;border-style:solid;border-color:#CCC;padding:2px 2px 2px 5px;margin-right:15px;"'
: 'style="border:0px;border-style:solid; border-color:#CCC; padding:0 0;"');

echo '
<li>
<fieldset ', $style , '>';

if (isset($modSettings['awards_aboveavatar_title']))
echo '
<legend><a href="' . $scripturl . '?action=profile;area=showAwards;u=' . $message['member']['id'] . '" title="' . $txt['awards'] . '">' . $modSettings['awards_aboveavatar_title'] . '</a></legend>';

echo $award_output;

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



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

// Begin SMFShop 2.3 (Build 11) code
echo '
<li class="coinsposter center"><div class="inline-block row-49m text-shop left">', $modSettings['shopCurrencySuffix'],' </div><div class="inline-block row-45m">', $message['member']['money'], $modSettings['shopCurrencyPrefix'],'</div></li>
<li class="inline-block row-45m veralg-midd blue center p-2all m-5top br-r5 hover"><a class="white-text hovertext" href="', $scripturl, '?action=shop;do=invother2;member=', $message['member']['username'], '">', $txt['shop_display_view_inventory'], '</a></li>
<li class="inline-block row-45m veralg-midd blue center p-2all m-5top br-r5 hover"><a class="white-text hovertext" href="', $scripturl, '?action=shop;do=sendmoney;member=', $message['member']['username'], '">', $txt['shop_display_send_money'], '</a></li>';
//END SMFShop code


/* 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 m-5top p-5all br-r5"><div class="inline-block row-45m veralg-midd center white-text">', !empty($modSettings['Activity_Bar_label']) ? $modSettings['Activity_Bar_label'] : $txt['Activity_Bar_standardlabel'], '</div> <hr class="br-r5 inline-block row-49m veralg-midd">
<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 */




// Start of AutoAward
if (!isset($context['disabled_fields']['posts'])){
$imagesURL = $settings['default_images_url'] . '/medals';
$medalscore = array (10,20,30,40,50,100,150,200,300,400,600,800,1000,1300,1600,2000);

$mc=1;
foreach($medalscore as $ms){
if($message['member']['posts']>=$ms)
echo '<img src="', $imagesURL, '/medal', $mc++, '.png" alt="" />';
} // end of ms foreach
} //end isset disabled fields if
// End of AutoAward.


// Show the country they hail from!
if (isset($message['member']['country_flag']) && !empty($modSettings['country_flag_show']) && !empty($message['member']['country_flag']))
{
$flags = CountryFlag();
echo '
<li class="country blue white-text m-5top p-5all br-r5"><div class="text-bander inline-block row-49m">', $txt['country_flag'], '</div> <div class="img-bander inline-block row-45m center"><img src="', $settings['images_url'], '/flags/', $message['member']['country_flag'], '.png" alt="', $message['member']['country_flag'], '" title="', $flags[$message['member']['country_flag']], '" /></div></li>';
}
// Is karma display enabled?  Total or +/-?
if ($modSettings['karmaMode'] == '1')
echo '
<li class="karma blue m-5top p-5all white-text br-r5">', $modSettings['karmaLabel'], ' ', $message['member']['karma']['good'] - $message['member']['karma']['bad'], '</li>';
elseif ($modSettings['karmaMode'] == '2')
echo '
<li class="karma blue m-5top p-5all br-r5">', $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  br-r5 m-5top p-5all">
<div class="inline-block row-45m brdr-r-b"><a class="" 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'], '"><i class="icon-thumb-up mano-up"></i></a>
</div><div class="inline-block row-45m"><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'], '"><i class="icon-thumb-down mano-down"></i></a></div>
</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">', $txt['gender'], ': ', $message['member']['gender']['image'], '</li>';

// Show their personal text?
if (!empty($settings['show_blurb']) && $message['member']['blurb'] != '')
echo '
<li class="blurb blue white-text br-r5 p-5all m-5top">', $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>';
}

// Show their below profile awards?
if (!empty($message['member']['awards']) && $modSettings['awards_in_post'] > 0)
{
$awards_above = (empty($awards) ? 0 : $awards);
$awards = 0;
$award_output = '';

foreach ($message['member']['awards'] as $award)
{
if (($award['location'] == 1) && ($awards < $modSettings['awards_in_post']))
{
$award_output .= '
<a href="' . $scripturl . $award['more'] . '"><img src="' . dirname($scripturl) . $award['img'] . '" alt="' . $award['description'] . '" title="' . $award['description'] . '" /></a> ';
$awards++;
}
}

// If we found some to output here, then show them
if (!empty($awards))
{
$style = (empty($modSettings['awards_belowavatar_format']) || $modSettings['awards_belowavatar_format'] == 1) ? 'style="border:1px;border-style:solid; border-color:#CCC;padding:2px 2px 2px 5px;margin-right:15px;"'
: ($modSettings['awards_belowavatar_format'] == 2 ? 'style="border-top:1px;border-bottom:0;border-right:0;border-left:0;border-style:solid;border-color:#CCC;padding:2px 2px 2px 5px;margin-right:15px;"'
: 'style="border:0px;border-style:solid; border-color:#CCC; padding: 0 0;"');

echo '
<li>
<fieldset class="p-5all" ', $style, '>';

if (isset($modSettings['awards_belowavatar_title']))
echo '
<legend><a href="' . $scripturl . '?action=profile;area=showAwards;u=' . $message['member']['id'] . '" title="' . $txt['awards'] . '">' . $modSettings['awards_belowavatar_title'] . '</a></legend>';

echo $award_output;

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


// Awards!
echo '
<li><a href="', $scripturl, '?action=profile;area=showAwards;u=', $message['member']['id'], '" title="', $txt['awards'], '">', ($settings['use_image_buttons'] ? '<img src="' . $settings['images_url'] . '/award.gif" alt="' . $txt['awards'] . '" title="' . $txt['awards'] . '" border="0" />' : $txt['awards']), '</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">', $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>';
}
// 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>


Ahora pasemos a la edición del css/index.css:

Antes que nada, ¿recuerdan la carpeta fonts?, aquí les dejo el link de descarga(Si el archivo necesita ser analizado, para ver que éste no contenga virus, por favor de decirmelo):

Mediafire: http: //www.mediafire.com/download/j1ld27rh1e7v1bi/fonts.rar
Mega: https ://mega.nz/#!Zg5l1AZR!_WwsCNm-YX_YaBMeTJKfGbjK_0Myjw-Ztjjgo6F7jUs

Una vez que se hayan descargado el archivo, lo pegan en su carpeta del tema que usaran:

Bien, ahora editemos el css:
Abriremos el css/index.css y en la tercera linea de codigo, que se encuentra vacía, copiaremos y colocaremos ésto:

Code Select Expand


/*Fonts*/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?9stgpb');
  src:  url('../fonts/icomoon.eot?9stgpb#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?9stgpb') format('truetype'),
    url('../fonts/icomoon.woff?9stgpb') format('woff'),
    url('../fonts/icomoon.svg?9stgpb#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-thumb-down:before {
  content: "\e900";
}
.icon-thumb-up:before {
  content: "\e901";
}


Ahora buscaremos lo siguiente:

Code Select Expand


/* poster details and list of items */

Y seleccionaremos todo ésto (linea 1940 a 2004):

Code Select Expand


/* poster details and list of items */
.poster h4, .poster ul
{
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster h4
{
margin: 0.2em 0 0.4em 1.1em;
font-size: 120%;
}
.poster h4, .poster h4 a
{
color: #c06002;
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
.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;
}
.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;
}
.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;
}

Remplazaremos por ésto:

Code Select Expand


/* poster details and list of items */
.poster h4, .poster ul
{
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster h4
{
font-size: 120%;
margin: 0.2em 0 0 1.1em;
}
.poster ul li.membergroup{
color: rgba(150,150,150,1) !important;
font-size: .6rem;
}
.poster h4, .poster h4 a
{
color: rgba(48,97,171,1);
}
.poster ul ul
{
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li
{
display: inline;
}
.poster li.stars, .poster li.ava-profile, .poster li.blurb, li.postcount, li.im_icons ul
{
margin-top: 0.5em;
}
.poster li.stars img{
width: 100% !important;
}
.poster li.ava-profile
{
border-top: solid 2px rgba(150,150,150,1);
overflow: hidden;
padding: 8px 0 0 0;
}
.poster li.title{
border-bottom: solid 2px rgba(150,150,150,1);
color: rgba(60,116,199,1);
padding: 0  0 5px 0 !important;

}
.poster li.send_pm, .poster li.postgroup{
background: rgba(180,180,180,.7);
border-radius: 2px;
display: inline-block;
margin: 5px 0 0 0;
padding: 2px;
width: 46%;
}
.poster li.send_pm a{
color: rgba(19,38,67,1);
}
.poster li.postgroup{
color: rgba(43,88,155,1);
}
.poster li.warning
{
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img
{
vertical-align: bottom;
padding: 0 0.2em;
}
.poster li.postcount{
background: rgba(180,180,180,.5);
border-top: dashed 4px rgba(90,90,90,.8);
border-bottom: dashed 4px rgba(90,90,90,.8);
border-radius: 5px;
padding: 10px;
}
.poster li.postcount div.messagepost,.poster li.postcount div.postcountnumber{
display: inline-block;
width: 49% !important;
}
.poster li.postcount div.postcountnumber{
font-size: 1.6rem;
text-align: right;
}
.poster li.coinsposter{
background: rgba(32,66,115,1);
border-radius: 5px;
color: #fff;
font-size: .9rem;
margin: 5px 0 0 0;
padding: 10px;
}
.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;
}

Iremos a la parte final del css y agregaremos ésto:

Code Select Expand


/*Estilos personalizados*/
/* Alineaciones */
.center{
text-align: center !important;
}
.right{
text-align: right !important;
}
.left{
text-align: left !important;
}
.inline-block{
display: inline-block !important;
}
.veralg-top{
vertical-align: top !important;
}
.veralg-midd{
vertical-align: middle !important;
}
/* Medidas */
.row-45m{
width:45% !important;
}
.row-49m{
width:49% !important;
}
/*Colors*/
.blue{
background: rgba(37,75,131,1) !important;
}
.white-text{
color: rgba(255,255,255,1) !important;
}
.hover{
transition: .5s all;
}
.hover:hover{
opacity: 0.8 !important;
}
.hovertext{
transition: .5s all;
}
.hovertext:hover{
color: rgba(200,200,200,1) !important;
}
/* Padding and margin */
.p-2all{
padding: 2px !important;
}
.p-5all{
padding: 5px !important;
}
.m-5top{
margin: 5px 0 0 0!important;
}
/*Borders*/
.brdr-r-b{
border-right: solid 2px rgba(37,75,131,1) !important;
}
.br-r5{
border-radius: 5px !important;
}
hr{
height: 3px !important;
color: rgba(150,150,150,1) !important;
}
/*Barra de actividad*/
.activity_li{
background: rgba(37,75,131,1) !important;
border-top: dashed 4px rgba(200, 200, 200, .7);
border-bottom: dashed 4px rgba(200, 200, 200, .7);

}
.activity_holder{
border: solid 2px rgba(255,255,255,1) !important;
border-radius: 5px !important;
/*width: 100% !important;*/
}
.activity_percentage{
background: rgba(0,86,214,1) !important;
color: #fff !important;
}
/*Country*/
.poster li.country{
font-size: 1rem !important;
}
.poster li.country .text-bander{
border-right: solid 1px rgba(255,255,255,1) !important;
}
/*Shop*/
.text-shop{
border-right: solid 1px rgba(255,255,255,1) !important;
}
/*Karma*/
.mano-up{
color: rgba(37,131,88,1) !important;
font-size: 1.5rem;
}
.mano-down{
color: rgba(155,53,43,1) !important;
font-size: 1.5rem;
}
/*Awards*/
fieldset{
background: rgba(220,220,220,1);
border: solid 2px rgba(37,75,131,1) !important;
width: 90% !important;
}


Y listo, ya tendremos el estilo completo.
ESTO ES POR SI TIENEN EL SMF SHOP Y EL COUNTRY COMO MODS INSTALADOS
Ahora veremos lo que es modificar textos, para que el estilo quede correcto.
Necesitaremos los siguientes archivos de lenguaje o traducción :
-Modifications.spanish_latin-utf8 - 

Si no los tienen, recomiendo tomarlos de la carpeta del thema "Default".

Abrimos el Modifications.spanish_latin-utf8, y buscamos lo siguiente:

Code Select Expand


// Begin SMFShop code

Una vez encontrado, seleccionan todo lo de SMF shop y remplazan por ésto:

Code Select Expand


// Begin SMFShop code
$txt['shop_menu_button'] = 'Tienda';
$txt['shop_profile_credits'] = 'Créditos';
$txt['shop_display_view_inventory'] = 'Inventario';
$txt['shop_display_send_money'] = 'Enviar $';
// End SMFShop code

Con country buscamos lo siguiente:

Code Select Expand

// Country Flag mod
Seleccionamos todo lo de country y remplazamos por ésto:

Code Select Expand


// Country Flag mod
$txt['country_flag_label'] = 'Por favor selecciona tu país';
$txt['country_flag_error_required'] = 'You must select the country that you visit us from';
$txt['country_flag_ask'] = 'Ask for country flag on';
$txt['country_flag_disabled'] = 'Don\'t show (Disabled)';
$txt['country_flag_profile'] = 'Perfil';
$txt['country_flag_registration'] = 'Registro';
$txt['country_flag_both'] = 'Both';
$txt['country_flag_required'] = 'Require a member to select a location?';
$txt['country_flag_show'] = 'Show flags on Display page (Where posts are shown).';
$txt['country_flag'] = 'Pais';
// Country Flag mod finish

Y listo las celdas quedarán instaladas perfectamente, ó éso creo yo, la verdad como lo dije, soy nuevo en ésto y espero estar bien

Si tienen algún problema, sólo regresenlo a como estaba con su copia de seguridad

Sin más que decir, me despido: YahirKeym a su servicios

Si desea publicar éste diseño en algún otro lugar, por favor de ser tan amables de colorcar los creditos

[Príncipe_Azul]

Hola amigo YahirKeym, muchísimas gracias por compartir éste tutorial que seguro les servirá a los demás compañeros del foro y a los visitantes que miren éste aporte.

Después de haber leído el post completo, solo me queda agradecerte y en cuanto a alguna crítica, jaja no soy mucho de las críticas, así que solo te digo gracias!!!


Un abrazo y EnHoraBuena por tu trabajo!!

[YahirKeym]

Hola amigo YahirKeym, muchísimas gracias por compartir éste tutorial que seguro les servirá a los demás compañeros del foro y a los visitantes que miren éste aporte.

Después de haber leído el post completo, solo me queda agradecerte y en cuanto a alguna crítica, jaja no soy mucho de las críticas, así que solo te digo gracias!!!


Un abrazo y EnHoraBuena por tu trabajo!!

Muchas gracias Espero poder seguir aportando a la comunidad (Ya que entro al bachillerato, ésto me será complicado, peor lo aré)

[Príncipe_Azul]

De nada
Esperamos que puedas seguir aportando!!


Saludos y buena suerte!!

[d3vcho]

En mi opinión el diseño en sí no es bonito. Si te das cuenta hay muchos boxes y muy pequeños, algo que estéticamente no queda bien.
Luego tienes un box para "Enviar MP" cuando al final de la celda tienes el icono para Enviar un Mensaje Privado. Quizás deberías remover este último para que quedase algo mejor.
También, al lado de ese box tienes el rango actual del usuario, en este caso "Novato" y justo debajo tienes la placa del rango. Es lo habitual en el diseño de las celdas, pero en realidad queda algo repetivivo para mi gusto.

En cualquier caso, buen trabajo compañero

[YahirKeym]

En mi opinión el diseño en sí no es bonito. Si te das cuenta hay muchos boxes y muy pequeños, algo que estéticamente no queda bien.
Luego tienes un box para "Enviar MP" cuando al final de la celda tienes el icono para Enviar un Mensaje Privado. Quizás deberías remover este último para que quedase algo mejor.
También, al lado de ese box tienes el rango actual del usuario, en este caso "Novato" y justo debajo tienes la placa del rango. Es lo habitual en el diseño de las celdas, pero en realidad queda algo repetivivo para mi gusto.

En cualquier caso, buen trabajo compañero

Oh, muchas gracias, lo tendré en cuenta para futuros diseños

[Diew]

Amigo el "Modifications.spanish_es-utf8" me sale totalmente vacio.

[-Rock Lee-]

Amigo el "Modifications.spanish_es-utf8" me sale totalmente vacio.

El instalo varias modificaciones y si este tiene traduccion aparecera en el archivo de lo contrario queda vacio por no tenerlo, quedandose con el por defecto el cual es el ingles. Verifica que al momento de instalar aplico correctamente dichas traducciones de tenerlo sino tienes aplicarlo manualmente (o tienes que traducirlas tu mismo).


Saludos!