• ¡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

Solucionado ¿Esconder plantilla en diseño responsivo?

Estado
Cerrado para nuevas respuestas

RarePepe

Nuevo
Mensajes
7
Puntuación de reacciones
0
Puntos
1
País
México
Versión de XenForo
1.5.6
Hola, buenos días/tardes a todos.

Me encuentro en una labor de optimizar un foro de forma responsiva lo más que se pueda guiandome de tutoriales ya que mis conocimientos de css son básicos. Hasta el momento he podido con varios elementos pero hay uno que lleva un rato dándome dolores de cabeza.

Se trata de una plantilla personalizada con la siguiente estructura

HTML:
<xen:require css="plantilla1.css" />

<div class="tablaPopularidad">
<xen:title>Título</xen:title>
<xen:h1>Título</xen:h1>
    <ol>
    <xen:foreach loop="$threads" value="$thread">
        <xen:include template="plantilla2" />
    </xen:foreach>
    </ol>
</div>

Bueno, para efectos prácticos he modificado los nombres de las plantillas. Básicamente lo que esto hace es que genera una tabla con los datos suministrados de "plantilla 2". Sin embargo lo que deseo es que en el diseño responsable esta tabla NO se visualice. La cuestión es que ya he intentado en el css hacer que el div no se muestre del siguiente modo:

HTML:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        .tablaPopularidad{
        display: none;
        }
</xen:if>
Del mismo modo intenté poner esto en EXTRA pero sin resultados. He intentado otras variantes del condicional y nada. ¿Tengo alguna manera de que esto no se muestre en el móvil?

De antemano, gracias.
 

DL6

Moderador
Mensajes
162
Puntuación de reacciones
61
Puntos
28
País
México
Versión de XenForo
2.1.x
Página web
Web
Recomiendo utilizar la herramienta de inspeccionar el elemento del navegador y ver por que no se aplica, si lo que añades aparece tachado es por que no tiene suficiente relevancia, de todas maneras puede probar con añadir !important

Saludos
 

RarePepe

Nuevo
Mensajes
7
Puntuación de reacciones
0
Puntos
1
País
México
Versión de XenForo
1.5.6
Recomiendo utilizar la herramienta de inspeccionar el elemento del navegador y ver por que no se aplica, si lo que añades aparece tachado es por que no tiene suficiente relevancia, de todas maneras puede probar con añadir !important

Saludos

Hola, muchas gracias por la respuesta. Lo de !important es algo que ya también había intentado sin resultado. Sin embargo, no se me había ocurrido inspeccionar el código de la plantilla desde el navegador y acabo de ver algo curioso. En "plantilla 2" hay un script que genera los datos que yo creía estaban dentro del primer DIV donde se invoca... pero en el código, el script está posicionado después del cierre del DIV. Entonces... ¿cómo sería para que el script no se ejecute en modo responsivo?
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Prueba con esto a ver si te funciona. No lo he probado. Es una ocurrencia, sin más.
HTML:
<xen:require css="plantilla1.css" />

<div class="tablaPopularidad">
<xen:title>Título</xen:title>
<xen:h1>Título</xen:h1>
    <ol>
    <xen:foreach loop="$threads" value="$thread">
        <xen:if is="@enableResponsive && !(@media (max-width:@maxResponsiveNarrowWidth))">
               <xen:include template="plantilla2" />
        </xen:if>
    </xen:foreach>
    </ol>
</div>

Salud2
 

RarePepe

Nuevo
Mensajes
7
Puntuación de reacciones
0
Puntos
1
País
México
Versión de XenForo
1.5.6
Ahora que marca que dicha condición es inválida :(

Pero me dio para hacer una pequeña variación que sí me guardó:

Insertar CODE, HTML o PHP:
<xen:require css="plantilla1.css" />
<div class="tablaPopularity">
<xen:if is="!@enableResponsive">
<xen:title>Título</xen:title>
<xen:h1>Título</xen:h1>
    <ol>
    <xen:foreach loop="$threads" value="$thread">   
            <xen:include template="plantilla2" />
    </xen:foreach>
    </ol>
</xen:if>   
</div>

Para decir que si no es responsivo muestre el código.

Lo malo es que sigo entrando con el móvil y sigue mostrando la tabla :(
 

RarePepe

Nuevo
Mensajes
7
Puntuación de reacciones
0
Puntos
1
País
México
Versión de XenForo
1.5.6
¿No puedo editar mi post? Oh...

Bueno, probé ese mismo condicional en otro elemento que me andaba dando problemas en una plantilla diferente y... ¡sí funcionó! Lo que me hace pensar que entonces estoy obviando algo de otra plantilla que también afecte a esa tabla. Seguiré buscando hasta que quede.

Igualmente, muchísimas gracias por la ayuda prestada :)
 

lms

Administrador
Mensajes
7.741
Puntuación de reacciones
2.163
Puntos
2.613
Sitio web
xenfacil.com
País
España
Versión de XenForo
2.1.x
PayPal
Donar dinero a este usuario
Página web
Web
Normal. No has modificado nada salvo que cuando decidas quitar esa opción, se verá en el foro pero no en el móvil y viceversa cuando la actives: la verás en pantallas pequeñas y grandes..
Prueba en EXTRA.css con:
PHP:
#tablaPopularity.tablaPopularity{
       display: none !important;
y con esta plantilla (algo modificada):
Insertar CODE, HTML o PHP:
<xen:require css="plantilla1.css" />
<script type="text/javascript">
$(document).ready(function(){
   ancho=screen.width;
if (ancho > @maxResponsiveNarrowWidth)
   document.getElementById("tablaPopularity").style.display="none";
});
</script>
<div id="tablaPopularity" class="tablaPopularity">
<xen:if is="!@enableResponsive">
<xen:title>Título</xen:title>
<xen:h1>Título</xen:h1>
    <ol>
    <xen:foreach loop="$threads" value="$thread">   
            <xen:include template="plantilla2" />
    </xen:foreach>
    </ol>
</xen:if> 
</div>

A ver si lo logramos.

Salud2
 

RarePepe

Nuevo
Mensajes
7
Puntuación de reacciones
0
Puntos
1
País
México
Versión de XenForo
1.5.6
Uff perdón por tardar en responder pero ya quedó. Traté de usar el código y no funcionó pero la solución fue mucho más sencilla. En efecto me sirvió muchísimo lo de inspeccionar elemento para ver bien la función y al final en el extra mandé llamar a la que realmente era:

HTML:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        .listBlock main{
        display:none !important;
        }
    }
</xen:if>

Y bajo esa misma metodología pude ir quitando de la visualización para móvil un montón de cositas que entorpecían la navegación y hacer otras tantas responsivas. Ahora entrar al sitio ya no es tan dolor de cabeza.

Muchísimas gracias a @Ims y @DL6 por la atención prestada
 
Estado
Cerrado para nuevas respuestas
Arriba