Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal
Xtatter

(Mod) Post Reciente y Post Sticky

Recommended Posts

Hola A Todos

 

Hoy les traigo un sencillo y Lindo Diseño para Los Post Reciente

 

Bueno Algunas Cap

 

Post Sticky

 

6NH34.png

 

Post Normales

 

6NH2a.png

 

Pasos para Instalación

 

 

1)Buscar en phpost.css
 
  .lastPosts .categoriaPost{
        height: auto!important;
        margin:0!important;
         border-bottom: 1px dotted #CCC;
      }
 
2)Y lo Remplaza por esto
 
 .lastPosts .categoriaPost{
margin: 0!important;
border: 1px dotted #CCC;
      }
 
3)bueno en el mismo archivo buscamos:
.lastPosts {
padding: 6px;
background-color: #F9F9F9;
border-radius: 3px;
-moz-border-radius: 3px;
border: 1px solid #CCC;
padding-bottom: 7px;
margin-bottom: 7px;
}
 
4)Y lo remplazamos por
 
.lastPosts {
padding: 6px;
background-color: #F9F9F9;
border-radius: 3px;
-moz-border-radius: 3px;
padding-bottom: 7px;
margin-bottom: 7px;
border: 1px solid #ddd;
}
 
5)ahora busca en estilo.css:
 
.categoriaPost {
clear: both;
font-size: 12px;
height: 16px;
margin-bottom: 5px;
padding: 3px 3px 3px 28px;
}
 
6)y Lo remplaza por esto:
.categoriaPost {
clear: both;
font-size: 12px;
height: 16px;
margin-bottom: 5px;
}
 
7)Ahora agrega esta imagen a tutheme/images/ [las imagenes estan en las descarga]
 
ico.png
estrellas.png
 
8)y despues Pegar todo esto en estilo.css a lo ultimo de Todo
 
/*
Post Reciente y Stiki - Xtatter Desing
*/


.post-reciente{
width: 416px;
height: 59px;
}


.avatar_post-reciente{
float: left;
width: 57px;
height: 51px;
margin: 4px 6px;
border-right: 1px solid #CCC;
}


#datos_post-reciente{
width: 333px;
background: aqua;
margin: 7px 0px;
float: right;
}


.ico {
display: block;
float: left;
width: 16px;
height: 16px;
background: url(images/ico.png) no-repeat;
}


.ico.vis {
background-position: -240px -102px;
width: 14px;
opacity: .3;
}


.ico.vis:hover {
opacity: 3;
}


.ico.com {
background-position: -242px -135px;
width: 10px;
opacity: .3;
}


.ico.com:hover {
opacity: 3;
}


.ico.borrar {
background-position: -221px -102px;
opacity: .2;
margin-top: 1px;
}


.ico.borrar:hover {
opacity: .8;
}


.borrar_post-reciente{
float:right;
}


.cuerpo_post-reciente{
width: 346px;
margin: 6px 0px;
float: right;
height: 48px;
}


.estrellas-post {
display: block;
float: right;
background: url(images/estrellas.png);
width: 60px;
height: 11px;
margin: 2px 7px 0 0;
}


.estrellas-post.s0 {
background-position: 0 211px;
}


.estrellas-post.s1 {
background-position: 0 302px;
}


.estrellas-post.s2 {
background-position: 0 402px;
}


.estrellas-post.s3 {
background-position: 0 71px;
}


.estrellas-post.s4 {
background-position: 0 171px;
}


.estrellas-post.s5 {
background-position: 0 51px;
}


.estrellas-post.s6 {
background-position: 0 151px;
}


.estrellas-post.s7 {
background-position: 0 31px;
}


.estrellas-post.s8 {
background-position: 0 131px;
}


.estrellas-post.s9 {
background-position: 0 11px;
}


.estrellas-post.s10 {
background-position: 0 111px;
}


.list:hover .elipost {
display:block;
}


.nombre_user_post-reciente{
margin-top: 3px;
}


/*HASTA AQUI EL CSS DE LOS POST NORMALES*/




/*AHORA LOS STIKI Y PATROCINADO*/


.cuerpo_stiki_post-reciente{
width: 342px;
margin: 6px 6px;
float: left;
height: 48px;
}


.avatar_stiki_post-reciente{
float: right;
width: 57px;
height: 51px;
margin: 4px -5px;
padding: 0px 5px;
border-left: 1px solid #CCC;
}


.ico.stiky {
background-position: -84px -174px;
width: 14px;
float: right;
}


/*Hasta AQUI*/
 
9) Ahora Abre el m.home_last_post.tpl que esta en templates/modules/ y borra todo lo que tenga que quede en cero ._.
 
10) Pega Todo esto en el archivo m.home_last_post.tpl que ustedes dejaron en cero 
 
 
<! CREADO POR XTATTER PARA PHPOST ._. !>                   <! toup tambien me ayudo un poco asi q creditos a el .-.   !>




<div class="clearbeta lastPosts">
                    {if $tsPostsStickys}
                 <div class="header">
                     <div class="box_txt ultimos_posts">Posts importantes en {$tsConfig.titulo}</div>
                        <div class="box_rss">
                            <img src="{$tsConfig.default}/images/icons/note.png" />
                        </div>
                        <div class="clearBoth"></div>
                    </div>
                    <div class="body">
                        <ul>
                         {foreach from=$tsPostsStickys item=p}


  <li {if $p.post_status == 3}style="background-color:#f1f1f1;"{elseif $p.post_status == 1}style="background-color:coral;"{elseif $p.post_status == 2}style="background-color:rosyBrown;"{elseif $p.user_activo == 0}style="background-color:burlyWood;"{elseif $p.user_baneado == 1}style="background-color:orange;"{/if} class="categoriaPost post-reciente {if $p.post_sponsored == 1} patrocinado{/if}">


<span class="avatar_stiki_post-reciente">
<a href="{$tsConfig.url}/perfil/{$p.user_name}"> <img src="{$tsConfig.url}/files/avatar/{$p.post_user}_120.jpg" style="width: 45px;height: 45px; border: 1px solid #ddd; padding: 2px;"></a>
   </span>




                                       <div class="cuerpo_stiki_post-reciente"> 
                
  <span style="width: 265px;">
<a {if $p.post_status == 3}class="qtip" title="El post est&aacute; en revisi&oacute;n"{elseif $p.post_status == 1}class="qtip" title="El post se encuentra en revisi&oacute;n por acumulaci&oacute;n de denuncias"{elseif $p.post_status == 2}class="qtip" title="El post est&aacute; eliminado"{elseif $p.user_activo == 0}class="qtip" title="La cuenta del usuario est&aacute; desactivada"{/if}  href="{$tsConfig.url}/posts/{$p.c_seo}/{$p.post_id}/{$p.post_title|seo}.html" title="{$p.post_title}" target="_self" class="title" style="font-size: 12px;margin: 1px;">{$p.post_title|truncate:38}</a><span title="Post Stiky" class="qtip ico stiky"></span>
                           </span>
  <br>
<div class="nombre_user_post-reciente">
<span> <a href="{$tsConfig.url}/perfil/{$p.user_name}"><strong style="
    color: #999;
">@{$p.user_name}</strong></a></span><br>
<div>


<span class="ico vis"></span><b style="float: left;font-weight: normal;margin-right: 15px;font-size: 11px;color: #999;margin: 2px;">Visitas: {$p.post_hits|number_format}</b><span class="ico com" style="margin-left: 9px;"></span><b style="float: left;font-weight: normal;margin-right: 15px;font-size: 11px;color: #999;margin: 2px;">Comentarios: {$p.post_comments|number_format}</b>
{if $tsUser->info.user_rango == 1 || $tsUser->info.user_rango == 2}
<a onclick="{if !$p.post_status == 2}mod.posts.borrar({$p.post_id}, 'posts', null);{else}admin.posts.borrar({$p.post_id});{/if} return false;" style="float: right;"><span title="Borrar Post" class="ico borrar"></span></a>
{/if}


</div>  </li>
                            {/foreach}
                        </ul>
                    </div>{/if}</div>
                   
  
  
  
<!SEPARACION DE LOS POST STIKY Y NORMALES!>
  
  
  
  
  <div class="clearbeta lastPosts">
                 <div class="header">
                     <div class="box_txt ultimos_posts">&Uacute;ltimos posts en {$tsConfig.titulo}</div>
                        <div class="box_rss">
                            <a href="/rss/ultimos-post">
                                <span class="systemicons sRss" style="position:relative;z-index:87"></span>
                            </a>
                        </div>
                        <div class="clearBoth"></div>
                    </div>
                    <div class="body">
                     <ul>
                            {if $tsPosts}
                            {foreach from=$tsPosts item=p}






<li class="categoriaPost post-reciente" style="background-image:none; {if $p.post_status == 3} background-color:#f1f1f1; {elseif $p.post_status == 1}background-color:coral;{elseif $p.post_status == 2} background-color:rosyBrown;{elseif $p.user_activo == 0} background-color:burlyWood;{elseif $p.user_baneado == 1} background-color:orange;{/if}" > 






<!AVATAR DEL POST RECIENTE!>


<span class="avatar_post-reciente">
<a href="{$tsConfig.url}/perfil/{$p.user_name}"> <img src="{$tsConfig.url}/files/avatar/{$p.post_user}_120.jpg" style="width: 45px;height: 45px; border: 1px solid #ddd; padding: 2px;"></a>
   </span>


<!FIN DEL AVATAR DEL POST RECIENTE!>


<!DATOS DEL POST RECIENTE!>




<div class="cuerpo_post-reciente"> 




<strong class="estrellas-post s{if $p.post_comments > 15}10{else}{if $p.post_comments == 0}0{elseif $p.post_comments > 0}{$p.post_comments}{/if}{/if}"></strong>






<span class="title_post-reciente"> 
                         <a {if $p.post_status == 3}class="qtip" title="El post est&aacute; en revisi&oacute;n"{elseif $p.post_status == 1}class="qtip" title="El post se encuentra en revisi&oacute;n por acumulaci&oacute;n de denuncias"{elseif $p.post_status == 2}class="qtip" title="El post est&aacute; eliminado"{elseif $p.user_activo == 0}class="qtip" title="La cuenta del usuario est&aacute; desactivada"{elseif $p.user_baneado == 1}class="qtip" title="La cuenta del usuario est&aacute; suspendida"{/if} class="title {if $p.post_private}categoria privado{/if}" alt="{$p.post_title}" title="{$p.post_title}" target="_self" href="{$tsConfig.url}/posts/{$p.c_seo}/{$p.post_id}/{$p.post_title|seo}.html" style="font-size: 12px;">{$p.post_title|truncate:38}</a>
</span><br>
<div class="nombre_user_post-reciente">
<span> <a href="{$tsConfig.url}/perfil/{$p.user_name}"><strong style="
    color: #999;
">@{$p.user_name}</strong></a></span><br>
<div>


<span class="ico vis"></span><b style="float: left;font-weight: normal;margin-right: 15px;font-size: 11px;color: #999;margin: 2px;">Visitas: {$p.post_hits|number_format}</b><span class="ico com" style="margin-left: 9px;"></span><b style="float: left;font-weight: normal;margin-right: 15px;font-size: 11px;color: #999;margin: 2px;">Comentarios: {$p.post_comments|number_format}</b>
{if $tsUser->info.user_rango == 1 || $tsUser->info.user_rango == 2}
<a onclick="{if !$p.post_status == 2}mod.posts.borrar({$p.post_id}, 'posts', null);{else}admin.posts.borrar({$p.post_id});{/if} return false;" style="float: left;"><span title="Borrar Post" class="ico borrar"></span></a>
{/if}


<span class="floatR"><a href="{$tsConfig.url}/posts/{$p.c_seo}/" style="font-size: 11px;
margin-right: 6px;">{$p.c_nombre}</a></span>
                          


</div>


<!FIN DE DATOS DEL POST RECIENTE!>


 </li>
                            {/foreach}
                            {else}
                            <li class="emptyData">No hay posts aqu&iacute;</li>
                            {/if}
                        </ul>
                        <br clear="left"/>
                    </div>
                    <div class="footer size13">
                        {if $tsPages.prev > 0 && $tsPages.max == false}<a href="pagina{$tsPages.prev}" class="floatL">&laquo; Anterior</a>{/if}
                        {if $tsPages.next <= $tsPages.pages}<a href="pagina{$tsPages.next}" class="floatR">Siguiente &raquo;</a>
                        {elseif $tsPages.max == true}<a href="pagina2">Siguiente &raquo;</a>{/if}
                    </div>
                 </div>

---    Como Ven son 10 Sencillos Pasos ---

 

Bueno aquí la Descarga

(Trae: Demo y Pasos y imagenes)

 

DESCARGAR

 

Bueno eso es Todo

 

Sirve para cualquier Diseño solo que tienen que hacer la Linda adaptacion  -_- 

 

Pero Sirve un 100% en la v4 y no hay adaptaciones que hacer (Pues ya yo lo hice)

 

Aqui una Cap en la v5 

6NGWf.jpg

 

Como ven el Mod sirve Bien pero es que el espacio es muy Chiquito ._. y deben hacer la adaptacion

 

Sin Mas Nada que decir

 

:rolleyes:

 

--------------- Actualizado (07/02/2014 23:22 GTM) ---------------

Ahh... Se me olvido algunos CSS son de Toup y las img Pues Creditos para el tambien ._. y los Moderadores y Administradores veran la X para eliminar el Post  6NI86.png Bueno eso es todo ._.

  • Like 8

Share this post


Link to post
Share on other sites

esta bueno, despues lo instalo!

Ok gracias por pasar pero tienes que hacer la adaptacion mejor pasame el diseño y yo hago uno para ti ._.

--------------- Actualizado (08/02/2014 00:37 GTM) ---------------

+1 por compartir.

Gracias por Pasar....

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Miguel92
      Pedido: [Mod] Imagen de cabecera en comunidades
      Por: @fellomix
       
      Una segunda forma de poder hacerlo!
       
      1 -  Ejecutar esta consulta
      ALTER TABLE `c_comunidades` ADD `c_headercom` VARCHAR(255) NOT NULL AFTER `c_nombre_corto`; 2 -  Buscar en c.comunidades.php en la función nueva_comunidad()
                      'fecha' => time(),                 'nombre' => $tsCore->setSecure($tsCore->parseBadWords($_POST['nombre']), true),                 'ncorto' => $tsCore->setSeo($tsCore->setSecure($_POST['ncorto'], true)),
      y debajo agregamos
                      'headercom' => $tsCore->setSecure($tsCore->parseBadWords($_POST['headercom']), true),
      un poco más abajo buscamos
                  // Insertamos             if(db_exec(array(__FILE__, __LINE__), 'query', 'INSERT INTO c_comunidades (c_autor, c_nombre, c_nombre_corto,
      y le agregamos a lado 
                   c_headercom,
      un poquito más abajo de
                      VALUES (                     \''.$tsUser->uid.'\',                     \''.$dato['nombre'].'\',                     \''.$dato['ncorto'].'\',
      agregamos
                          \''.$dato['headercom'].'\',
      Luego buscamos la función editar_comunidad($comid)
                          'pais' => $tsCore->setSecure($_POST['pais']),                         'desc' => $tsCore->setSecure($_POST['descripcion']),                     'color' => $tsCore->setSecure($_POST['back_color']),
      y debajo pegamos
                          'headercom' => $tsCore->setSecure($_POST['headercom']),
      más abajo buscamos 
                          c_acceso = \''.(int)$dato['acceso'].'\',                     c_permisos = \''.$dato['permisos'].'\',
      y debajo pegamos
       
                         c_headercom = \''.$dato['headercom'].'\',             
      3 - Después buscamos en c.crear_left.tpl
          <div class="item_form clearfix">         <label>Categoría</label>         <select name="categoria" id="ShowCats" class="required" onChange="com.subcat()" tabindex="3">             <option value="0">Selecciona una categoría</option>             {foreach from=$tsCats item=c}             <option value="{$c.cid}" {if $tsDato.c_categoria == $c.cid}selected="selected"{/if}>{$c.c_nombre}</option>             {/foreach}         </select>     </div>
      y debajo o arriba pegamos (se me olvido quitar los required, ya que no es obligatorio)
          <div class="item_form clearfix">         <label>Cabecera!</label>         <input type="text" name="headercom" tabindex="10" maxlength="180" size="60" class="required input_text https" placeholder="URL de portada (debe tener https://)" pattern="https://.*" value="{$tsDato.c_headercom}">         <small class="mg-lt">Solo admitirá los https!</small>     </div> 4 - Después buscamos c.com_info.tpl [línea 24 y 25]
      <div class="ver_com_info">     <div class="vci_left floatL">
      y la reemplazamos por
      <div class="ver_com_info" style="background-image: url({$tsCom.c_headercom});">     <div class="opacity">     <div class="vci_left floatL">
      luego debajo de la línea 61 agregaremos un 
          </div> 5 -  Por último agregaremos esto a comunidades.css
      .ver_com_info {     padding: 0; } .headercom {      background-position: center center;     background-size: cover;     background-repeat: no-repeat; } .opacity {     padding: 20px 8px;     background-color: rgba(255,255,255,.6); }  
    • By Miguel92
      Bueno dice N°2 porque a la N°1 la tengo que adaptar a la default ya que tenia class de bootstrap!
       

      si no se ve clic
       
      1) Crean un archivo llamado panel.js y agregan esto dentro
       
      2) En extras.css agregan esto
       
      3) Ahora crearemos un archivo llamado head_usuario.tpl y lo colocaremos en sections y dentro agregaremos
      la parte del st-panel-footer la pueden sacar no hay problema
       
      4) Ahora en la misma carpeta sections buscamos main_footer.tpl y agregaremos esto arriba de </body>
      {include file='sections/head_usuario.tpl'} <script src="{$tsConfig.js}/panel.js" type="text/javascript"></script>  
      5) Para los iconos descarguen esto → ICONOS FUENTES  ← y lo descomprimen en css
       
      6) Busquen en main_header.tpl y debajo de
      <link href="{$tsConfig.tema.t_url}/extras.css" rel="stylesheet" type="text/css" /> colocan
      <link rel="stylesheet" href="{$tsConfig.css}/iconfont.css">  
      y eso sería todo
       
      En el caso que haya error avísenme!
      Esta es la N°1
       
      si no se ve clic
      Ver panel N°2 ir a Demo32.hol.es
      Usuario: Demo
      Pass: demouser
    • By Rhuan
      Hola, este complemento podría considerarse en realidad una "plantilla" para el anterior RChat que publiqué ya que la mayor parte del funcionamiento es el mismo.
       
      Para instalar este chat no es necesario tener el anterior RChat y si lo tienes también puedes instalarlo sin problemas, los archivos se sobrescribirán.
       
       
      Actualización
      06/03/2015 a las 18:00 - Descarga actualizada: se ha corregido un fallo en el instalador que evita que aparezca el icono de los emoticonos. 08/03/2015 a las 22:10 - Descarga actualizada: se añadió seguridad adicional para evitar el flood. 09/03/2015 a las 23:15 - Descarga actualizada: ahora se muestran todos los emoticonos y se pueden agregar desde el chat.  
      Más capturas

        Caja de emoticonos abierta.
       

      Lista de moderación.
       

      Eliminar mensajes (onmouseover).
       

      Suspender usuario (onmouseover).
       
       
      Características
      Color de nick aleatorio como en grupos de WhatsApp. Suspender usuario por nick y por mensaje. Ver/editar/eliminar usuarios suspendidos. Borrar mensajes individualmente o todos de un usuario. Agrupar mensajes seguidos del mismo usuario. Mensajes propios diferenciados (alineado a la derecha en verde) BBCodes: [b], [i], [u], [br], [url], [color]. Imágenes y URLs automáticas. Censuras globales. Emoticonos globales a través de censuras. Antiflood, suspende durante 2 horas. El antiflood no afecta al staff. Diseño separado para funcionar con cualquier plantilla. Agregar emoticonos desde el chat. Selector de emoticonos.  
      Descarga
       
      Para Risus 1.2 o superior: rchat_whatsapp_1.2.zip
       
       
      Instrucciones
       
      Subir el directorio "install" a la raíz y acceder desde el navegador a http://www.tuweb.com/install/index.php
    • By Altffenser
      Hola, traigo esta pequeña modificación, es un dialogo de confirmación para cerrar sesión. Utilizo el plugin "mydialog" que trae por default el script por lo que no hará falta nada más. Este MOD lo vi hace años, lo publicó un usuario llamado mega-lucas ((o algo así (aún mantengo su V5 ))
       
      Instrucciones.
      1. Abrir el archivo acciones.js y al ultimo del archivo colocar:
      /* Logout confirm by Altffenser */ function open_logout_box() { mydialog.show(); mydialog.title('Cerrar sesión'); mydialog.body('Estas a punto de salir de tu cuenta. <b>¿Seguro que deseas continuar?</b>'); mydialog.buttons(true, true, 'Cerrar sesión', 'logout_by_now()', true, false, true, 'No, permanecer aquí', 'close', true, true); mydialog.center(); } function logout_by_now(){ $(function (){ window.location.href = global_data.url + "/login-salir.php"; }); } 2. Abrir el archivo head_menu.tpl y buscar:
      <li class="logout"> <a href="{$tsConfig.url}/login-salir.php" style="vertical-align: middle" title="Salir"> <span class="systemicons logout"></span> </a> </li> a) Reemplazar por:
      <li class="logout"> <a href="#" onclick="open_logout_box();" style="vertical-align: middle" title="Salir"> <span class="systemicons logout"></span> </a> </li>  
      ¡Has terminado!
       
      Con eso lo tendrán, ahora cada que den clic en "salir"; primero aparecerá un dialogo como este:
       

       
      Es muy sencillo el MOD pero a mi parecer, se ve bien Saludos
       
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×