Incrustar código PHP dentro de clases CSS
En este artículo vamos a ver como incrustar código PHP dentro de clases CSS para dinamizar los estilos de una página Web. Si necesitas crear un sitio en el cual es necesario por ejemplo que los usuarios puedan elegir los estilos para mostrar el contenido a su gusto este artículo te puede servir.
La clave del asunto hay que montarlo en el <head> de nuestra página donde deberemos añadir algo como lo siguiente:
<?php
if (isset($_POST['send'])) {
$background_content = $_POST['backgroundContentColor'];
$width = $_POST['width'];
$height = $_POST['height'];
$padding = $_POST['padding'];
$color = $_POST['color'];
$fontsize = $_POST['fontsize'];
$border = $_POST['border_width'].'px '.$_POST['border_type'].' '.$_POST['border_color'];
}
else {
$background_content = '#CCCCCC';
$width = '400';
$height = '250';
$padding = '10';
$color = '#000';
$fontsize = '12';
$border = 'none';
}
?>
Como puedes observar, en el código anterior tan solo estamos guardando en variables los valores seleccionados por el usuario en el formulario que veremos en el ejemplo. Si el usuario pulsa el botón de «guardar», capturamos esos parámetros recibos y en caso contrario tenemos unos valores por defecto.
En el mismo <head> justo debajo del código PHP anterior añadiremos los siguientes estilos CSS incrustando las variables PHP:
.content {
margin:0px auto;
width: <?=$width?>px;
height: <?=$height?>px;
background-color:<?=$background_content?>;
padding:<?=$padding?>px;
font-size:<?=$fontsize?>px;
color:<?=$color?>;
border:<?=$border?>;
}
En este caso tan solo estamos parametrizando una clase CSS pero podríamos parametrizar toda una hoja de estilos.
En el <body> a parte del formulario tendremos el contenedor de aplicación:
<div class="content"> Texto del contenedor </div>
En el ejemplo que vamos a ver tenemos un formulario con distintos atributos o parámetros CSS que al pulsar el botón de «Guardar» se visualizará este contenedor con los estilos elegidos. En este caso específico, vamos a permitir al usuario poder seleccionar el color de fondo del cotenedor, su border (ancho, tipo y color), el color del texto, el tamaño del texto, sus dimensiones (alto y ancho) y el padding.
Para los colores de fondo y del texto estamos empleando el plugin ColorPicker de jQuery que nos permite elegir un color de una paleta de colores.
En el ejemplo al pulsar en el botón de guardar, estamos guardando en la variable $_POST de PHP para mostrar el efecto. No estamos guardando de forma permanente. Si necesitas guardar de forma permanente podrías guardar estos parámetros en una variable de sesión, en una base de datos o en un archivo.
Ver el ejemplo en funcionamiento
Autor
¿Buscas trabajo de programador?
4 respuestas a “Incrustar código PHP dentro de clases CSS”
Deja una respuesta
Saludos, gracias por el post, por favor podrian poner un ejemplo descargable como el de la imagen, gracias
Disculpa por culpa de un ataque al servidor perdi muchos ejemplos. Este es uno de ellos y ya no lo tengo disponible
jose, mi duda es otra, pero ya te he visto en otras paginas y otro scomentarios tuyos, o se a que se qque sabes, o por lo menos te gusta programar. Yo necesito hacer esto mismo del formuario de comentarios y respuesta, pero realmente no tengo idea. Podrias ayudarme??
Gracias de antemano
Hola que tal,
Para este tipo de ayudas que se salen de lo que hay disponible en el blog lo que podemos hacer es que nos envíes un correo a blog@jose-aguilar.com con todos los detalles para que revisemos como podemos proceder.
Saludos