Nuevo estilo en post área [Tutorial]

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:
 

Code: [Select]

<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:

Code: [Select]

<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:

Code: [Select]

<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:

Code: [Select]

<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:
 

Code: [Select]

</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">&#171; <strong>', !empty($message['counter']) ? $txt['reply_noun'] . ' #' . $message['counter'] : '', ' ', $txt['on'], ':</strong> ', $message['time'], ' &#187;</div>


reemplazar:

Code: [Select]

</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.css

Buscar:

Code: [Select]

/* 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:

Code: [Select]

/* 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:

Code: [Select]

.post
{
margin-top: 0.5em;
clear: right;
}
.inner
{
padding: 1em 1em 2px 0;
margin: 0 1em 0 0;
border-top: 1px solid #99a;
}
reemplazar:

Code: [Select]

.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!

Muy bueno !!!

Y has tenido problemas al instalar mods ?

No me ha dado problemas, con el SMFSimple Rewards System! me dio un error pero solo fue poner una linea de código de forma manual y listo.

Me gusto me gusto!
Se podría hacer un mod de esto así no se hace tantas modificaciones manuales!
+20

Muy bueno eh!! van mis 20 del dia tambien!

Me gusta me gusta van puntines! !

Buen tip da un estilo unico y sexy +10

Me gusto me gusto!
Se podría hacer un mod de esto así no se hace tantas modificaciones manuales!
+20

Exacto, eso mismo les queria consultar, si lo podrian convertir en un Mod, ya que empeze a hacer las Modificaciones y algo me Fallo, tuve que perder unas Cosas que habia diseñado para poder reponer todo, pero haci y todo SE AGRADECE

Espero que saquen un MOD de esto , ya se que el tema es un poco antiguo XD

Espero que saquen un MOD de esto , ya se que el tema es un poco antiguo XD

Para que sacar un mod? si están las modificaciones ahí puestas para que cada uno las haga

Me gusto me gusto!
Se podría hacer un mod de esto así no se hace tantas modificaciones manuales!
+20

será por esto que lo dijo?

Enviado desde mi XT910 usando Tapatalk 2

Me gusto me gusto!
Se podría hacer un mod de esto así no se hace tantas modificaciones manuales!
+20

será por esto que lo dijo?

Enviado desde mi XT910 usando Tapatalk 2

Cuak jajajaja