¿Cómo preservar los estilos de widget incrustado?

Cómo hacer que una página externa de widgets PHP tenga su propio CSS. El truco es: cuando la página externa está include se ha visto afectada por la hoja de estilo de la página de host .

La página incluida es en realidad un “widget” de comentarios (con su propio archivo .css, cerca de 30 líneas, no mucho) y la flexibilidad de alto y ancho es DEBE TENER.

El PHP include fue hasta ahora la mejor solución, pero perdí mi cabello ajustando su archivo CSS para ajustar / null (agregar / excluir / estilos) cualquier página web de host posible.

Ejemplo:
si la página de host tiene estilos para bordes img , tengo que anularlos desde style.css del widget, lo mismo para H3 , P , y así sucesivamente.

¿Cómo evitaría que una hoja de estilo de widget se vea afectada por los estilos de página de host , además de usar iframe ?

Sabes que CSS es una cosa del lado del cliente; no sabe acerca de PHP y cómo la página se ha generado en el servidor.

Debe centrarse en el HTML final resultante y redefinir las tags, las clases y los ID para que las reglas de estilo que desee se apliquen a los elementos correctos.

Puede limitar el scope de las reglas de CSS rodeando esa parte en un div con una ID o clase única y usarla en sus selectores de CSS para que no se apliquen a los elementos fuera de ese div.

O si no puede hacer eso, debe usar reglas más fuertes para anular las incluidas para sus otros elementos. Lo cual será un poco desordenado, pero puede anular los estilos aplicados a un elemento utilizando varias técnicas como! Importante o tener más partes del selector.

Por ejemplo, en las dos muestras siguientes, la segunda regla sobrescribirá la primera:

 #comments .link { color: red; } /* Included page rule */ #header .link { color: blue !important; } 

o

 #comments .link { color: red; } /* Included page rule */ #header div a.link { color: blue; } 

Intente rodear su código de widget en un div con una identificación. Luego, prefija cada selector de CSS utilizado en el widget con ese selector.

ex.

 

en lugar de,

 .nav{ // styles } 

hacer

 #widget.nav{ // styles } 

Es posible que desee aplicar un mini restablecimiento de CSS en su código incluido. Rodea tu código en una identificación única, como esta:

 

Ahora aplique el restablecimiento a todo lo que hay dentro de este, usando un restablecimiento básico de CSS como el de Eric Meyer, disponible aquí: http://meyerweb.com/eric/tools/css/reset/

Ahora, aplique su propio CSS. Casi todos los CSS externos se eliminarán y los tuyos se aplicarán.

Los estilos CSS priorizan así:

  1. Navegador predeterminado
  2. Hoja de estilo externo
  3. Hoja de estilo interna (en la sección de la cabeza)
  4. Estilo en línea (dentro de un elemento HTML)

Dependiendo de la cantidad de CSS que necesite aplicar, puede escribirlo en la etiqueta “head”.
Espero que la sugerencia ayude.

Si entendí correctamente, su página incluida tiene algunas reglas de CSS tales como:

 div {/*rules*/}; p {/*rules*/}; 

y así.

Debe cambiar sus selectores de CSS de los más generales (div selecciona todos los divs en la página) a los más particulares (utilícelos en este orden: id, clase, selector de niños ) para que sus reglas se apliquen solo a sus elementos incluidos

Por ejemplo, supongamos que su página incluida está envuelta en un div, el código PHP sería:

 

Entonces, todas las reglas de la página deben referirse solo a los elementos my_page del elemento con el id my_page :

En lugar de

 div {/*rules*/}; 

tendras

 #my_page div {/*rules*/};