• ¡Bienvenido a XenFácil!

    Estás viendo el sitio como Invitado. Para poder participar en este sitio

    y obtendrás privilegios adicionales, acceso a otras áreas y mucho mas.

    ¡Es gratis!


    ¿Ya eres miembro? Inicia sesión
Estilo de rejilla para los temas sin complemento

Mod.Plantillas Estilo de rejilla para los temas sin complemento

Para XenForo...
2.0.x
Autor
hemant_bhardwaj
URL de XenForo
https://xenforo.com/community/resources/grid-layout-for-thread-without-addon.6577/
hemant_bhardwaj vuelve con diseño de rejilla para temas sin complemento. Tras publicar su Diseño de rejilla para RMXF sin complemento Neutral Singh sugirió hacer el diseño de rejilla para los temas. Aquí está.

Únicamente precisas de CSS y ubicarlo en la plantilla Extra.less.

Si te gusta, revísalo

Nota : es necesario ajustar max-width: 50Ch; de acuerdo con el diseño de tu foro. Ej : max-width: 40Ch;
Esto configura ... conforme a la anchura.
CSS:
CSS:
/********* Css Grid Code Start ********/
.structItem-title{
    text-overflow: ellipsis !important;
    max-width: 50ch;
    white-space: nowrap;
    overflow: hidden; }
.structItem--thread{
    border-collapse: collapse;
    width: 100%;
    height: auto;
    display: inline-block !important;
    margin: 9px 0px 0px 6px;
    max-width: 49% !important;
    box-sizing: border-box;
    vertical-align: top;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); }
.structItem-cell{width:100%;}
@media (max-width: 650px){
.structItem-cell.structItem-cell--meta { display:none; } }
.structItem-cell--meta{
    display: block;
    width: auto !important;
    margin-top: -13px;
    float:left; }
.structItem-cell--latest{
    display: block;
    width: auto !important;
    margin-top: -13px;
    margin-bottom: 15px;
   float:right; }
.structItem-cell--meta > .pairs.pairs--justified>dd {
    float: left; text-align: right;  max-width: 100%; }
.structItem-cell--meta dl.pairs.pairs--justified{  float:left; }
.structItem-cell--latest{ margin-bottom:0px !important; }
@media (max-width: 1125px) {
  .structItem--thread {max-width: calc(95%) !important;   } }
@media (max-width: 650px) {
  .structItem-cell--latest{ margin-top: -20px !important;}
  .structItem--thread {
    display: table !important;
    max-width: 100% !important;
    margin: 5px 5px 5px 0px;
    box-shadow: none;     } }
@media (max-width: 650px){
.structItem-cell.structItem-cell--latest,.structItem-cell--meta { float:right !important;  }}
.structItem-cell--meta dt{ font-size:0px; }
.structItem-cell--meta dd{ margin-left:18px; font-size: 12px; color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before , .structItem-cell--meta dt:before{
    font-family: FontAwesome;
    font-size: 12px;
    position: absolute;
    margin-left: 0px;
    color:#ababab; }
.structItem-cell--meta .structItem-minor dt:before {content: '\f06e '; }
.structItem-cell--meta dt:before {content: '\f112'; }
.structItem-cell--latest{ margin-top: -34px;}
.structItemContainer-group.js-threadList { margin-bottom: 8px; }
/********* Css Grid Code End ********/
1533010681099.png

Si alguien desea que los temas anclados luzcan con el color de texto diferente, péguese a continuacióneste CSS en la plantilla extra.less
CSS:
.structItemContainer-group--sticky .structItem--thread {
    background: #fff5e8 !important;
  border: 1px solid #f9c479 !important;
}
Resultado:
1533010723255.png
Autor
lms
Primer lanzamiento
Última actualización
Votar
0,00 estrella(s) 0 calificaciones
Arriba