Problema de validacion con el thickbox.css de WP

Inicio Foros WordPress General WordPress.org Problema de validacion con el thickbox.css de WP

Este debate contiene 3 respuestas, tiene 2 mensajes y lo actualizó  guardafaro hace 8 años, 8 meses.

  • Autor
    Publicaciones
  • #15924

    guardafaro
    Participante

    <p>La colocación de la usual Action Hook Template Tags &lt; ?php do_action(‘wp_head’); ? &gt; o &lt; ?php wp_head(); ? &gt; inmediatamente antes de cerrar el &lt; /head &gt; en header.php, hace que WP inserte 9 lineas de codigo diverso en el código de la página, desde scripts a links y meta informacion. Pero hay una en particular que me está creando problemas. Se trata de la siguiente llamada al css de thickbox</p>
    <p>&lt; link rel=’stylesheet’ id=’thickbox-css’ href=’http://demo.ciudadsinbarreras.es/wp-includes/js/thickbox/thickbox.css?ver=20090514′ type=’text/css’ media=’all’ /&gt;</p>
    <p>Por causa de ella, el validador de CSS de la W3C me indica nada menos que 16 errores por causas como: errores de análisis sintáctico, propiedades no válidas y la utilización de propiedades que "no existen en CSS 2", tales como: -ms-filter, opacity, -moz-opacity, box-shadow y otras.</p>
    <p> Necesito solucionar esto, pues el theme tiene que estar 100% validado. Pero no creo que sea cosa de ponerme a "quitar" o corregir en wp-includes/js/thickbox/thickbox.css esos 16 errores que la W3C me indica.<br />
    ¿Alguien ha pasado por esto y le ha encontrado una solución?
    </p>

  • #37108

    guardafaro
    Participante

    En vista de la nula ayuda que he conseguido en este foro para el particular, no me ha quedado más remedio que poner yo manos a la obra que no quería hacer: editar el codigo del tickbox.css.

    De todos los errores dados por la validación de la W3C y que tienen que ver con el thickbox.css, la mayor parte son de hakcs para IE (del tipo *html), por lo que lo resolví sacándolos del tickbox.css y pasándolos a mi archivo ie.css que contiene las correcciones para Internet Explorer. Fue la parte fácil.

    El resto de los errores tienen que ver con las propiedades de transparencia u opacidad, tales como:
    -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=75)”;
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
    Y con las sombras, para Mozilla como
    -moz-box-shadow: rgba(0,0,0,1) 0 4px 30px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 4px 30px;
    -khtml-box-shadow: rgba(0,0,0,1) 0 4px 30px;
    box-shadow: rgba(0,0,0,1) 0 4px 30px;

    ¿Por qué esos errores de validación? Simplemente porque:
    [b]-moz-opacity[/b] es una propiedad propietaria de Mozilla y no valida,
    [b]filter: alpha()[/b] es un desarrollo de Microsoft y menos aún valida;
    [b]Opacity[/b] es una propiedad futura, que validará solo en CSS3 (que está aún en desarrollo), por lo que no valida en el actual CSS2.

    Pues de nuevo: las propiedades filter:alpha(), relacionadas con el IE, las pasé también al ie.css. (De nuevo la parte fácil)
    Y como el problema es que no he podido encontrar como hacer una instrucción css para Firefox fuera del style.css que valide, pues tomé la solución salomónica: eliminé las -moz-opacity (que ya no son necesarias en las versiones actuales de ese navegador).

    El problema es que no me quedó más remedio que elimintar también la propiedad [b]opacity[/b] (definida en .TB_overlayBG {) y ahora si que valida todo el CSS. [b]PERO[/b] en Firefox y en Opera la capa de fondo (que despliega el thickbox para presentar encima la imagen aumentada), no es parcialmente transparente, como debiera ser, sino totalmente opaca. En los IE sí se mantiene la transparencia, al haberlas incluído dentro del ie.css.

    Dicen que las propiedades “opacity” (y las otras que no son para IE) pueden ser incluídas dentro del fichero thickbox.js pero yo no he encontrado como hacerlo, ni he sabido hacerlo, pues lo intenté pero no me funcionó.

    Si alguien sabe como hacer esta parte, le agradeceré la ayuda.

  • #37842

    alejandroivan
    Participante

    Estimado:

    Tal como mencionas, la propiedad [b]opacity[/b] está definida en la clase TB_overlayBG.

    Como te darás cuenta, para iniciar un recuadro de thickbox, basta con ponerle la clase [b]thickbox[/b] al link que requieres. Entonces, para habilitar la transparencia, basta con ejecutar un código que la aplique al darle click a las cosas con clase “thickbox”.

    Me explico (en jQuery):

    $(“.thickbox”).click(function(e) {
    $(“.TB_overlayBG”).fadeTo(0, 0.7);
    });

    Por dar un ejemplo. Ahí puedes probar con todas las cosas que necesites “transparentizar”, sin ensuciar tu CSS.

    ¡Saludos!

  • #37843

    guardafaro
    Participante

    Bueno, gracias, Alejandroivan. Como dije, ya solucioné todo lo que tenía que ver con IE. Pero no en lo que respecta al atributo “opacity” para los otros navegadores. A pesar de haber eliminado esos atributos para poder validar, el thickbox funciona relativamente bien en Firefox y en Opera, excepto que la capa opaca carece de transparencia, y la ausencia del botón de cierre de imagen en la vista dentro de los posts; lo que resulta solo en males menores. En foros sobre thinkbox aconsejan sacar del thickbox.css esas propiedades y pasarlas como funciones al thickbox.js. Son tres:

    .TB_overlayBG { opacity: 0.75;}
    #TB_HideSelect{ opacity: 0;}
    #TB_window {
    -moz-box-shadow: rgba(0,0,0,1) 0 4px 30px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 4px 30px;
    -khtml-box-shadow: rgba(0,0,0,1) 0 4px 30px;
    box-shadow: rgba(0,0,0,1) 0 4px 30px;
    }

    El asunto es que no colocan el código para hacerlo, pues asumen que uno save js. En un sitio alguien dio como ajemplo algo como esto:
    .append(“< div id=’TB_overlayBG’ style=’filter:alpha(opacity=75);” >

    Pero no he podido aclararme con esa función .append, ni en donde se coloca. No me ha funciondo la sintaxis de lo que he intentado. Otros convieren el código en funciones js que yo no he podido resolver. Y así están las cosas.

El foro ‘General WordPress.org’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest