como cambiar las CSS de una página estática en particular

aledarbo · #1 (**permalink**) 25/11/2008, 10:10

Hola;

He creado una página estática para mostrar como index de la web.
El caso es que en esa página me gustaría que algunos detalles de la hoja de estilos fuesen diferentes (background, tamaños...etc)

¿como puedo cambiar las CSS de una página estática en particular?

Gracias

metacortex · #2 (**permalink**) 25/11/2008, 13:52

La forma más fácil de hacerlo es:

Código html:

Ver original<?php get_header() ?>
  <div id="contenedor-2">
    <!-- tu contenido -->
  </div>
<?php get_footer() ?>

... donde "contenedor-2" es el estilo que diferenciará todos los estilos-hijo de esa página. Por ejemplo si tienes una columna izquierda a la que quieres dar un estilo personalizado colocarías:

Código css:

Ver original#contenedor-2 .columna-izquierda {
  /* tus estilos */
}

La otra forma es aplicando una condicional en tu header.php dentro de las etiquetas <head>:

Código php:

Ver original<?php
if (is_page('5')) { // Tu ID de página ?>
  <link rel="stylesheet" type="text/css" media="screen" href="estilo5.css" />
<?php } elseif (is_page('8')) { // Otra página en particular ?>
  <link rel="stylesheet" type="text/css" media="screen" href="estilo8.css" />
<?php } ?>

Esto debes colocarlos después de tu hoja CSS general, a fin de que los estilos especiales sobreescriban a los otros en caso de que tengan el mismo nombre.

aledarbo · #3 (**permalink**) 25/11/2008, 16:01

Gracias metacortex, no encontraba nada acerca de esto y estaba hecho un lio. Gran foro éste.

Voy a probarlos ahora mismo.

En el primer método que me describes...¿body, header y el footer permanecerían igual que el resto de la web, no?

Y respecto al segundo método...
según lo he entendido, el código que posteas lo coloco en header.php, y después creo las hojas de estilos CSS correspondientes para las páginas. Estas hojas de estilos las subiría al directorio del theme, ¿no?

No entiendo entonces esta frase tuya "Esto debes colocarlos después de tu hoja CSS general"

Muchas gracias por tu ayuda

metacortex · #4 (**permalink**) 27/11/2008, 15:00

Cita:

En el primer método que me describes...¿body, header y el footer permanecerían igual que el resto de la web, no?

Así es.

Cita:

Y respecto al segundo método...
según lo he entendido, el código que posteas lo coloco en header.php, y después creo las hojas de estilos CSS correspondientes para las páginas. Estas hojas de estilos las subiría al directorio del theme, ¿no?

Sí. Sólo que en el ejemplo olvidé colocar la ruta al theme. El link al CSS quedaría así:

Código html:

Ver original<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_url'); ?>/estilo5.css" />

En realidad puedes colocar las hojas de estilos donde desees. Sin embargo es bueno trabajar dentro del theme para que tengas tus archivos organizados en un solo directorio.

Cita:

No entiendo entonces esta frase tuya "Esto debes colocarlos después de tu hoja CSS general"

Supongamos que tienes un estilo para tu columna en la hoja de estilos que controla la mayoría de la presentación de tu web:

Código css:

Ver original.columna {
  width: 180px;
  float: left;
  background: #555;
  color: #fff;
  border: 1px solid #222;
}

Pero al mismo tiempo tienes una columna en tu página interna (la que quieres personalizar) a la que sólo le vas a cambiar el ancho, conservando los demás valores. Si colocas la hoja de estilos de la página interna después de tu hoja general, solo tienes que hacer esto:

Código css:

Ver original.columna {
  width: 300px;
}

Y sobrescribirá el ancho de tu columna, pero conservará las demás propiedades. Este método es muy útil cuando usas varias hojas de estilos y no quieres embarrarte con tantas clases distintas. Simplemente re-usas los estilos que te interesan y construirías nuevos estilos sólo cuando verdaderamente te hagan falta.

Entonces, cuando vayas -por ejemplo- a la página que personalizaste, el navegador leerá ambas hojas de estilo: la general y la especial, pero le dará prioridad a los estilos de la página que se encuentre de última, y sobrescribirá todos los estilos cuyos selectores coincidan.

skullz-group · #5 (**permalink**) 01/12/2008, 16:24

Genial Meta,tomo nota para mi nuevo proyecto por si más adelante quiero meterle mano al css.

metacortex · #6 (**permalink**) 01/12/2008, 17:00

Cita:

Iniciado por skullz-group

Genial Meta,tomo nota para mi nuevo proyecto por si más adelante quiero meterle mano al css.

Hola Skullz, me alegra verte de nuevo hombre

. Como sé que eres de quienes les gusta caerse a puños con los códigos, voy a recomendarte que revises este tópico acerca del CSS dinámico (lee todo el hilo). Hay muy buenas contribuciones colectivas. Es el método que personalmente utilizo y va muy bien, ya que no sólo es posible extender los límites de personalización sino que además controlas el asunto de los navegadores de forma integral. Encontrarás cierta dificultad inicial, pero hasta ahora no he visto/probado un método más efectivo para la gestión de estilos.

Saludos.