Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

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

Estas en el tema de como cambiar las CSS de una página estática en particular en el foro de WordPress en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/11/2008, 10:10
 
Fecha de Ingreso: junio-2008
Mensajes: 13
Antigüedad: 16 años, 5 meses
Puntos: 0
como cambiar las CSS de una página estática en particular

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
  #2 (permalink)  
Antiguo 25/11/2008, 13:52
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Respuesta: como cambiar las CSS de una página estática en particular

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

Código html:
Ver original
  1. <?php get_header() ?>
  2.   <div id="contenedor-2">
  3.     <!-- tu contenido -->
  4.   </div>
  5. <?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
  1. #contenedor-2 .columna-izquierda {
  2.   /* tus estilos */
  3. }

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

Código php:
Ver original
  1. <?php
  2. if (is_page('5')) { // Tu ID de página ?>
  3.   <link rel="stylesheet" type="text/css" media="screen" href="estilo5.css" />
  4. <?php } elseif (is_page('8')) { // Otra página en particular ?>
  5.   <link rel="stylesheet" type="text/css" media="screen" href="estilo8.css" />
  6. <?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.
  #3 (permalink)  
Antiguo 25/11/2008, 16:01
 
Fecha de Ingreso: junio-2008
Mensajes: 13
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: como cambiar las CSS de una página estática en particular

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

Última edición por aledarbo; 25/11/2008 a las 16:15
  #4 (permalink)  
Antiguo 27/11/2008, 15:00
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Respuesta: como cambiar las CSS de una página estática en particular

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
  1. <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
  1. .columna {
  2.   width: 180px;
  3.   float: left;
  4.   background: #555;
  5.   color: #fff;
  6.   border: 1px solid #222;
  7. }

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
  1. .columna {
  2.   width: 300px;
  3. }

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.
  #5 (permalink)  
Antiguo 01/12/2008, 16:24
Avatar de skullz-group  
Fecha de Ingreso: noviembre-2007
Ubicación: Catalunya
Mensajes: 461
Antigüedad: 17 años
Puntos: 10
Respuesta: como cambiar las CSS de una página estática en particular

Genial Meta,tomo nota para mi nuevo proyecto por si más adelante quiero meterle mano al css.
  #6 (permalink)  
Antiguo 01/12/2008, 17:00
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.027
Antigüedad: 20 años, 5 meses
Puntos: 832
Respuesta: como cambiar las CSS de una página estática en particular

Cita:
Iniciado por skullz-group Ver Mensaje
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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:13.