Dar estilos a una plantilla de página

Inicio Foros WordPress Themes y Diseño Dar estilos a una plantilla de página

Este debate contiene 11 respuestas, tiene 3 mensajes y lo actualizó  Javier hace 6 años.

  • Autor
    Publicaciones
  • #66302

    Javier
    Participante

    Un saludo.

    Siguiendo un post de este sitio he duplicado el archivo “page.php”, le he dado otro nombre y le he añadido el código para que sea reconocido como plantilla de página… hasta ahí todo bien.

    Ahora quiero darle un estilo concreto, muy sencillo, pero no se cómo hacerlo para que, tras incluir esos estilos en “styles.css” la plantilla los tome.

    ¿Alguien se ha visto en las mismas y puede orientarme?

    Gracias.

  • #66324

    LGrusin
    Miembro

    Si lo pones en style.css la plantilla debe tomarlos. Los nombres de las cajas div (id y class) y demás elementos a modificar tienen que ser diferentes a los del theme.

    No sé si es eso lo que preguntas…

    Un saludo

  • #66327

    Javier
    Participante

    Hola LGrusin, gracias por responder.

    Me he explicado raro, tienes razón.

    Necesito que esa plantilla de página tenga fondo de color negro, solo esa página… el resto tienen otro color de fondo y debe mantenerse.

    No se como expresarlo en la hoja de estilos para que solo esa página tome el estilo del background en negro.

    Gracias de nuevo.

    Javier

  • #66334

    LGrusin
    Miembro

    Para cambios más profundos en las plantillas de páginas podrías crear una cabecera personalizada que llame a una hoja de estilos diferente. De la misma manera el footer puede ser diferente.

    Digo esto porque si cambias el color del fondo también deberás cambiar el color del texto y algunos elementos para que se vean bien.

    De todas formas sin saber tus conocimientos y el theme que usas es dificil decirte…

    Saludos

  • #66345

    Javier
    Participante

    Gracias de nuevo.

    Uso WordPress 3.4.2 y el tema base Twenty Eleven (modificado en estilos solamente)… no necesito cambiar el color del texto porque ambos fondos son oscuros. Solo es eso.

    He intentado hacerlo sin plantilla, con la ID de la página pero solo consigo darle color en parte porque uso CLASS en lugar de ID. La capa main y footer, obviamente, no se modifican.

    Vamos, que igual no es necesario crear una plantilla de página y con una simple regla CSS se arregla, pero estoy bloqueado.

    Javier

  • #66347

    LGrusin
    Miembro

    Pues quizás la solución más fácil es poner estilos en línea. Si te fijas el archivo page.php llama a content-page.php.

    Puedes copiar content-page.php y llamarlo, por ejemplo,
    content-personal.php y en la plantilla cambia
    <?php get_template_part( ‘content’, ‘page’ ); ?>
    por
    <?php get_template_part( ‘content’, ‘personal’ ); ?>

    Ahora puedes modificar el color desde el archivo content-personal.php con estilos en línea sin necesidad de modificar style.css o dark.css, este último es el que se usa cuando eliges el fondo oscuro en las opciones del theme.

    Un saludo

  • #66351

    23r9i0
    Participante

    otra mas facil es usando el is_page() o el is_page_template() o incluso las propias class del body para modificar el estilo.

     

  • #66366

    LGrusin
    Miembro

    El problema 23r9i0 es que body está en la cabecera. Por eso le dije que si eran muchos los cambios que usara una cabecera personalizada con su propia hoja de estilos. A no ser que use la misma cabecera para todo (header.php) y la modifique para adaptarla a cada plantilla de página como dices.

    Soluciones hay varias para usuarios con diferentes conocimientos…

    Un saludo

  • #66373

    23r9i0
    Participante

    Bueno como dices hay varias soluciones…
    Yo solo me referia que el body_class() añade una class segun donde te encuentres y a partir de hay definir un estilo por ejemplo:

    body.page-id-x .post { .... }

    y las funciones is_page y is_page_template seria usando un if para llamar a un estilo personalizado por ejemplo:

    if( is_page( Page ID, Page Title or Page Slug ) ) {
    wp_enqueue_style( $handle, $src, $deps, $ver, $media );
    }

  • #66375

    LGrusin
    Miembro

    Exacto, me has recordado que WordPress el theme Twenty Eleven crea una clase para la plantilla de página dónde te encuentres. No hace falta código ninguno, sólo añadir los estilos en style.css

    Ejemplo, suponiendo una plantilla de página llamada personal.php la clase asociada al body será .page-template-personal-php, de manera que si quieres cambiar el color de las entradas sería algo como:

    .page-template-personal-php .entry-content {
    color:#0f0;
    }

    Lo mismo para el resto de elementos de esa plantilla de página.

    Un saludo

  • #66485

    Javier
    Participante

    Hola de nuevo y perdón por tardar en responder…

    Gracias a ambos por vuestro tiempo.

    No he logrado mi objetivo al 100%… he conseguido que algunas partes del template se muestren con el color de fondo que buscaba y que al cambiar a otra página se mantuviese el color anterior.

    Pero si intentaba hacerlo en el footer, o el main los cambios se mantenían para todas las páginas.

    Demasiada complicación para algo tan sencillo… simplemente esperaba poder hacerlo desde la hoja de estilos indicando el código simple que 23r9i0 comenta aplicado a ese template, pero el comportamiento es errático al cambiar de página.

    Gracias por vuestro tiempo y disculpad las molestias.

    Javier

  • #66486

    Javier
    Participante

    Amigos, rectifico: CONSEGUIDO

    ¡GRACIAS!

    Por si puede servir de ayuda a alguien que se encuentre en mi misma situación, os cuento:

    – He duplicado el archivo page.php y al duplicado lo he renombrado a wellcome.php

    – Le he cambiado el código de cabecera por el consabido:

    /*
    Template Name: Wellcome
    */

    – En la hoja de estilos (styles.css) he añadido primero éste código:

    .page-template-wellcome-php #page, #site-generator {
    background: #000;
    }

    – Pero por alguna razón solo me cambiaba el color de fondo del footer (#site-generator) y me lo mantenía igual en todas las páginas ¡¿?¡

    – Si invertía el orden, primero #site-generator y luego #page, ocurría lo contrario… pero el color de fondo se aplicaba correctamente sólo a la página de plantilla ¡¿?!

    – Lo he resuelto creando dos clases:

    .page-template-wellcome-php #page {
    background: #000;
    }

    .page-template-wellcome-php #site-generator {
    background: #000;
    }

    – Ahora el color de fondo se aplica sólo a wellcome.php y el resto del sitio conserva el color de fondo predeterminado por mi.

    Gracias de nuevo a LGrusin y a 23r9i0 por mostrarme la senda por la que debía adentrarme.

    Javier

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest