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

Modificar Theme FlatPost

Question

Que tal amigo

 

Pues bueno me ha gustado el Theme Flatpost para un sitio web que tengo en mente, mi pregunta es si hay forma de modificar la parte de los temas en forma de lista, es decir como originalmente lo tiene Phpost, ya que en este tema aparecen cuadros con imágenes y par mi utilidad es mejor en forma de listado. 

 

Este es el theme 

 

 Agradecería si alguien puede orientarme o asesorar como realizarlo.

 

Saludos.

Share this post


Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 1
hace 12 minutos, GordoSatiro dijo:

¿Lo comparten? -3

Para hacerlo como en la imagen buscas en estilo.css más o meno en la línea 1362

Spoiler
.card{
    border-radius: 5px;
    border: 1px solid #e6ecf5;
    box-shadow: none;
}
.card-image img {border-radius: 5px 5px 0 0;}
.image-post:after{
    display: block;
    position: absolute;
    box-shadow: inset 0 -130px 50px -53px rgba(0, 0, 0, 0.44);
    content: '';
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
}
.post-title{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding: 20px 25px;
}
.post-category{
    border-radius: 3px !important;
    padding: 4px 9px!important;
    font-size: 10px!important;
    text-transform: uppercase;
}
.titulo{
    color: #eee;
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
}
.titulo:hover{color: #fff;}

 

 

y la reemplazas por

Spoiler
.card{
    border-radius: 5px;
    border: 1px solid #e6ecf5;
    box-shadow: none;
}
.image-post:after{
    display: block;
    position: absolute;
    box-shadow: inset 0 -130px 50px -53px rgba(0, 0, 0, 0.44);
    content: '';
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
}
.card-image .img-portada {
    float: left;
    width: 130px; /* Este es el ancho de la imagen */
    height: 123px; /* Este es el largo de la imagen */
}
.post-category{
    border-radius: 3px !important;
    padding: 4px 9px!important;
    font-size: 10px!important;
    text-transform: uppercase;
    float: right;
}
.content-left {
    margin-left: 130px; /* Si modificas el ancho de .img-portada debes ponerle el mismo valor de width */
    padding-left: 6px;
}
.titulo{
    color: #333;
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
}
.titulo:hover{color: #888;}

 

 

y luego buscas en templates/modules/m.home_last_posts.tpl y reemplazas el contenido por este 

Spoiler
<div>
      {if $tsPosts}
      <div class="columns is-multiline">
         {if $tsPostsStickys}
          {foreach from=$tsPostsStickys item=p}
          <div class="column is-12">
              <div class="card">
                <div class="card-image image-post">
                    <img src="{$p.post_portada}" class="img-portada">
                </div>
                <div class="card-content content-left">
                    <div class="post-title">
                      <a href="#"><span class="tag is-danger post-category">Importante</span></a>
                      <a href="{$tsConfig.url}/posts/{$p.c_seo}/{$p.post_id}/{$p.post_title|seo}.html" class="titulo"><h1>{$p.post_title|truncate:50}</h1></a>
                    </div>
                  <div class="media">
                      <div class="media-left">
                        <div class="image is-32x32"><img class="is-rounded" src="{$tsConfig.url}/files/avatar/{$p.user_id}_120.jpg" title="{$p.user_name}"></div>
                        </div>
                        <div class="media-content">
                         <p class="title is-6"> <a href="{$tsConfig.url}/perfil/{$p.user_name}">{$p.user_name}</a></p>
                         <p class="subtitle is-7"><span class="icon is-small"><i class="icon feather icon-calendar"></i></span> {$p.post_date|hace}</p>
                        </div>
                    </div>
                </div>
              </div>
              </div>
          {/foreach}
          {/if}
      {foreach from=$tsPosts item=p}
      <div class="column is-12">
        <div class="card">
          <div class="card-image image-post">
              <img src="{$p.post_portada}" class="img-portada">
          </div>
          <div class="card-content content-left">
              <div class="post-title">
                <a href="{$tsConfig.url}/posts/{$p.c_seo}/"><span class="tag is-danger post-category c{$p.post_category}">{$p.c_nombre}</span></a>
                <a href="{$tsConfig.url}/posts/{$p.c_seo}/{$p.post_id}/{$p.post_title|seo}.html" class="titulo"><h1>{$p.post_title|truncate:50}</h1></a>
              </div>
            <div class="media">
              <div class="media-left">
                <div class="image is-32x32"><img class="is-rounded" src="{$tsConfig.url}/files/avatar/{$p.user_id}_120.jpg" title="{$p.user_name}"></div>
                
                </div>
                  <div class="media-content">
                   <p class="title is-6"> <a href="{$tsConfig.url}/perfil/{$p.user_name}">{$p.user_name}</a></p>
                   <p class="subtitle is-7"><span class="icon is-small"><i class="icon feather icon-calendar"></i></span>{$p.post_date|hace}</p>
                  </div>
                <div class="media-right">
                  <p class="title is-6"><span class="icon is-small"><i class="icon feather icon-message-square"></i></span> {$p.post_comments}</p>
                </div>
              </div>
          </div>
        </div>
        </div>
      {/foreach}
      </div>
      {else}
                            <li class="emptyData">No hay posts aquí</li>
                            {/if}
                 </div>
                        <div class="pagination pag">
                        {if $tsPages.prev > 0 && $tsPages.max == false}<a href="pagina{$tsPages.prev}" class="button is-primary">« Anterior</a>{/if}
                        <ul></ul>
                        {if $tsPages.next <= $tsPages.pages}<a href="pagina{$tsPages.next}" class="button is-primary">Siguiente »</a>
                        {elseif $tsPages.max == true}<a href="pagina2" class="button is-primary">Siguiente »</a>{/if}
                    </div>

 

 

Share this post


Link to post
Share on other sites
  • 0

Solo tienes que acceder a bulma.io en la sección de columnas se detalla las formas de usarlo

https://bulma.io/documentation/columns/basics/

 

En m.home_last_posts.tpl solo tendrías que cambiar (X2)

column is-6

por

column is-12

 

otra manera, que también se detalla en https://bulma.io/documentation/columns/sizes/

column is-full

 

Share this post


Link to post
Share on other sites
  • 0
On 6/4/2019 at 2:48, Miguel92 dijo:

Solo tienes que acceder a bulma.io en la sección de columnas se detalla las formas de usarlo

https://bulma.io/documentation/columns/basics/

 

En m.home_last_posts.tpl solo tendrías que cambiar (X2)

column is-6

por

column is-12

 

otra manera, que también se detalla en https://bulma.io/documentation/columns/sizes/

column is-full

 

Al poner 12 lo unico que hace es agrandar los cuadros de temas, más no el poderlos hacer en forma de lista.

 

Realmente no se si me explique bien, el theme default del script trae los Post en forma de lista, este theme los trae tipo cuadros, entonces deseo que se vean en lista, no se si esto haga que así se vean. 

Share this post


Link to post
Share on other sites
  • 0
hace 3 horas, Pichancho dijo:

Al poner 12 lo unico que hace es agrandar los cuadros de temas, más no el poderlos hacer en forma de lista.

 

Realmente no se si me explique bien, el theme default del script trae los Post en forma de lista, este theme los trae tipo cuadros, entonces deseo que se vean en lista, no se si esto haga que así se vean. 

Solo con un poco de css se puede hacer...esto es lo que queres?

v6REvga.png

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
hace 36 minutos, Miguel92 dijo:

Solo con un poco de css se puede hacer...esto es lo que queres?

v6REvga.png

Si exacto, super genial se ve, tal ves un poco más delgados esos cuadros, pero si tal cual seria lo que busco y que tenga la opción de búsqueda por categoria:

 

http://prntscr.com/n8txls 

 

Share this post


Link to post
Share on other sites
  • 0
1 hour ago, Miguel92 dijo:

Para hacerlo como en la imagen buscas en estilo.css más o meno en la línea 1362

  Ocultar contenido

.card{
    border-radius: 5px;
    border: 1px solid #e6ecf5;
    box-shadow: none;
}
.card-image img {border-radius: 5px 5px 0 0;}
.image-post:after{
    display: block;
    position: absolute;
    box-shadow: inset 0 -130px 50px -53px rgba(0, 0, 0, 0.44);
    content: '';
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
}
.post-title{
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
    padding: 20px 25px;
}
.post-category{
    border-radius: 3px !important;
    padding: 4px 9px!important;
    font-size: 10px!important;
    text-transform: uppercase;
}
.titulo{
    color: #eee;
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
}
.titulo:hover{color: #fff;}

 

 

y la reemplazas por

  Ocultar contenido

.card{
    border-radius: 5px;
    border: 1px solid #e6ecf5;
    box-shadow: none;
}
.image-post:after{
    display: block;
    position: absolute;
    box-shadow: inset 0 -130px 50px -53px rgba(0, 0, 0, 0.44);
    content: '';
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
}
.card-image .img-portada {
    float: left;
    width: 130px; /* Este es el ancho de la imagen */
    height: 123px; /* Este es el largo de la imagen */
}
.post-category{
    border-radius: 3px !important;
    padding: 4px 9px!important;
    font-size: 10px!important;
    text-transform: uppercase;
    float: right;
}
.content-left {
    margin-left: 130px; /* Si modificas el ancho de .img-portada debes ponerle el mismo valor de width */
    padding-left: 6px;
}
.titulo{
    color: #333;
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
}
.titulo:hover{color: #888;}

 

 

y luego buscas en templates/modules/m.home_last_posts.tpl y reemplazas el contenido por este 

  Ocultar contenido

<div>
      {if $tsPosts}
      <div class="columns is-multiline">
         {if $tsPostsStickys}
          {foreach from=$tsPostsStickys item=p}
          <div class="column is-12">
              <div class="card">
                <div class="card-image image-post">
                    <img src="{$p.post_portada}" class="img-portada">
                </div>
                <div class="card-content content-left">
                    <div class="post-title">
                      <a href="#"><span class="tag is-danger post-category">Importante</span></a>
                      <a href="{$tsConfig.url}/posts/{$p.c_seo}/{$p.post_id}/{$p.post_title|seo}.html" class="titulo"><h1>{$p.post_title|truncate:50}</h1></a>
                    </div>
                  <div class="media">
                      <div class="media-left">
                        <div class="image is-32x32"><img class="is-rounded" src="{$tsConfig.url}/files/avatar/{$p.user_id}_120.jpg" title="{$p.user_name}"></div>
                        </div>
                        <div class="media-content">
                         <p class="title is-6"> <a href="{$tsConfig.url}/perfil/{$p.user_name}">{$p.user_name}</a></p>
                         <p class="subtitle is-7"><span class="icon is-small"><i class="icon feather icon-calendar"></i></span> {$p.post_date|hace}</p>
                        </div>
                    </div>
                </div>
              </div>
              </div>
          {/foreach}
          {/if}
      {foreach from=$tsPosts item=p}
      <div class="column is-12">
        <div class="card">
          <div class="card-image image-post">
              <img src="{$p.post_portada}" class="img-portada">
          </div>
          <div class="card-content content-left">
              <div class="post-title">
                <a href="{$tsConfig.url}/posts/{$p.c_seo}/"><span class="tag is-danger post-category c{$p.post_category}">{$p.c_nombre}</span></a>
                <a href="{$tsConfig.url}/posts/{$p.c_seo}/{$p.post_id}/{$p.post_title|seo}.html" class="titulo"><h1>{$p.post_title|truncate:50}</h1></a>
              </div>
            <div class="media">
              <div class="media-left">
                <div class="image is-32x32"><img class="is-rounded" src="{$tsConfig.url}/files/avatar/{$p.user_id}_120.jpg" title="{$p.user_name}"></div>
                
                </div>
                  <div class="media-content">
                   <p class="title is-6"> <a href="{$tsConfig.url}/perfil/{$p.user_name}">{$p.user_name}</a></p>
                   <p class="subtitle is-7"><span class="icon is-small"><i class="icon feather icon-calendar"></i></span>{$p.post_date|hace}</p>
                  </div>
                <div class="media-right">
                  <p class="title is-6"><span class="icon is-small"><i class="icon feather icon-message-square"></i></span> {$p.post_comments}</p>
                </div>
              </div>
          </div>
        </div>
        </div>
      {/foreach}
      </div>
      {else}
                            <li class="emptyData">No hay posts aquí</li>
                            {/if}
                 </div>
                        <div class="pagination pag">
                        {if $tsPages.prev > 0 && $tsPages.max == false}<a href="pagina{$tsPages.prev}" class="button is-primary">« Anterior</a>{/if}
                        <ul></ul>
                        {if $tsPages.next <= $tsPages.pages}<a href="pagina{$tsPages.next}" class="button is-primary">Siguiente »</a>
                        {elseif $tsPages.max == true}<a href="pagina2" class="button is-primary">Siguiente »</a>{/if}
                    </div>

 

 

🤔

LFLWiGU.png

 

 

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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Patrocinador



  • ×