Rango: Friend de SMFSimple
Mensajes: 305
Points: 2
Mi web:
Perfil:
March 06, 2012 - 12:37 12:37
Con esta guía le daremos un estilo diferente y elegante al área del post y la informacion de usuario de forma horizontal
Resultado final:
Archivos a modificar:Display.template.php
Index.css
Esta guía fue probada con el el theme default pero debería funcionar con la mayoría de los themes.
Recuerden hacer respaldo de los archivos que van a modificar antes de hacerle cualquier cambio.
Display.template.php Buscar: <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>';
Reemplazar:<li class="membergroup">', $message['member']['group'], '</li>
</div></div>';
// 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 '
<div class="left_col2">', $message['member']['post_group'], '<br/>';
echo '
', $message['member']['group_stars'], '</div>';
echo ' </ul>
<div class="right_col">
<div class="smalltext"><strong>', !empty($message['counter']) ? $txt['reply_noun'] . ' #' . $message['counter'] : '', ' ', $txt['on'], ':</strong> ', $message['time'], '</div>
<div class="poster"><ul class="reset smalltext">';
// Show how many posts they have made.
if (!isset($context['disabled_fields']['posts']))
echo '
<div class="right_col2"> <br /><li class="postcount"><img src="'.$settings['images_url'].'/theme/mesajes.png"/>', $message['member']['posts'], '</li></div>';
Buscar:<div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'windowbg' : 'windowbg2') : 'approvebg', '">
<span class="topslice"><span></span></span>
<div class="post_wrapper">';
// Show information about the poster of this message.
echo '
<div class="poster">
Reeplazar por:<span></span>
<div>
<div class="col_post">';
// Show avatars, images, etc.?
if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
echo ' <div class="left_col1"><ul class="reset">
<a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
', $message['member']['avatar']['image'], '
</a>
</ul></div>
';
else {
echo '
<div class="left_col1">
<img class="avatar" src="'.$settings['images_url'].'/theme/noavatar.png" alt="" />
</a></div>';
}
// Show information about the poster of this message.
echo ' <div class="left_col">
<a href="', $message['href'], '" rel="nofollow">', $message['subject'], '</a>
<div class="poster">
Buscar: </ul>
</div>
<div class="postarea">
<div class="flow_hidden">
<div class="keyinfo">
<div class="messageicon">
<img src="', $message['icon_url'] . '" alt=""', $message['can_modify'] ? ' id="msg_icon_' . $message['id'] . '"' : '', ' />
</div>
<h5 id="subject_', $message['id'], '">
<a href="', $message['href'], '" rel="nofollow">', $message['subject'], '</a>
</h5>
<div class="smalltext">« <strong>', !empty($message['counter']) ? $txt['reply_noun'] . ' #' . $message['counter'] : '', ' ', $txt['on'], ':</strong> ', $message['time'], ' »</div>
reemplazar:</ul>
</div></div>
</div>
</div>
<span></span>
<span class="divider_info"><span></span></span>
<div class="', $message['approved'] ? ($message['alternate'] == 0 ? 'style_post' : 'style_post') : 'approvebg', '">
<div class="post_wrapper">
<div class="postarea">
<div class="flow_hidden">
<div class="keyinfo">
En Index.cssBuscar:/* poster and postarea + moderation area underneath */
.post_wrapper
{
float:left;
width:100%;
}
.poster
{
float: left;
width: 15em;
}
.postarea, .moderatorbar
{
margin: 0 0 0 16em;
}
.postarea div.flow_hidden
{
width: 100%;
}
Reemplazar:/* SMFSimple información de usuario by Josua */
#forumposts div.poster {
width: auto; }
.col_post
{
background: #F9F9F9 url(../images/theme/bg_msg.png) no-repeat;
margin-top: 18px;
width: 100%;
overflow:hidden;
border: solid 1px #CFCFCF;
-moz-border-radius-toleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
}
.left_col
{
float: left;
margin-left: 3px;
padding-top: 4px;
}
.left_col1
{
float: left;
padding-top: 2px;
padding-left: 2px;
padding-bottom: 2px;
padding-right: 2px;
border-right: 1px solid #CFCFCF;
}
.left_col2
{
float: left;
padding-top: 24px;
padding-left: 2px;
padding-right: 2px;
border: 0px solid #CFCFCF;
}
.left_date
{
float: left;
}
.right_col
{
float: right;
padding-top: 4px;
margin-right: 2em;
}
.right_col2
{
float: right;
padding-top: 4px;
margin-right: 2em;
}
.moderatorbar
{
clear: right;
margin: 13px;
}
ul.avat1, li.avat1
{
border: 1px solid #000;
margin-top:12px;
}
.moderatorbar
{
clear: right;
}
.style_post
{
background: #fff;
border-left: solid 1px #CFCFCF;
border-right: solid 1px #CFCFCF;
border-bottom: solid 1px #CFCFCF;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
}
buscar:.post
{
margin-top: 0.5em;
clear: right;
}
.inner
{
padding: 1em 1em 2px 0;
margin: 0 1em 0 0;
border-top: 1px solid #99a;
}
reemplazar:.post
{
margin-top: 0.5em;
margin-left: 15px;
clear: right;
}
.inner
{
padding: 1em 1em 2px 0;
margin: 0 1em 0 0;
}
Ahora suban las imagenes adjuntas a la carpeta:
/images/theme de el theme que usan
¡Y recuerden, lo vieron primero en SMFsimple!
Logged