CSS Reutilizable con PHP (Parte I)

baluart6 Mayo 2005 - 12:00am 3 comentarios
Enviar por Email Imprimir

Es normal encontrar preguntas acerca de la reutilización de CSS con PHP (CSS Dinámico). Algo que siempre me interesó.

Actualizado: Hemos publicado la Segunda Parte (Como utilizar PHP StyleSwitcher v.2).

El CSS tiene como concepción el diseño, la presentación o la disposición de una página web. Mostramos páginas HTML diferenciando la apariencia del contenido. Por lo que se hizo indispensable el manejo de XHTML.

PHP por su parte, es código abierto (gratuito), fácil de aprender y actualmente uno de los estándares mundiales de programación.

Vamos a unir estos dos lenguajes de programación para crear una estructura a nuestro sitio web usando CSS. La estructura básica y más usada: el header, el menú lateral y el contenido. A estos le asignamos los colores usando PHP, mostrando como cambiarlos fácilmente.

Como ya hemos visto en un articulo anterior, podemos imprimir o mostrar nuestro código PHP en el navegador usando las funciones de salida por ejemplo print() o echo().

Para empezar debemos indicar al navegador que el código que va a imprimir es CSS para esto mediante PHP le colocamos una función (tipo MIME):

header('Content-type: text/css');

Luego definimos los esquemas de colores que usaremos. Esto se hace almacenando la información que identifica los colores en variables (recuerda que todas las variables son prefijadas por el signo del dólar). Nuestro código quedaría como este:

$persistent = array(
'bgmast' => 'bbd9ee', /* encabezado */
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3', /* menú */
'fgmenu' => '444444',
'bgcont' => 'ffffff', /* contenido */
'fgcont' => '444444' );

Como puedes ver estamos usando valores hexadecimales para los colores que no incluyen su prefijo “#”. Esto se debe a un conflicto entre el Análisis de PHP y de CSS. Pues para referirnos a un color que hemos instanciado en un array, lo debemos hacer de la siguiente manera:

print $persistent['bgmast']; /* encabezado - bgmast: bbd9ee */

Siguiendo estos pasos definimos dos esquemas de colores alternativos al original.

header('Content-type: text/css');

/* persistent (default) */

$persistent = array(
'bgmast' => 'bbd9ee', /* encabezado */
'fgmast' => '4d4d4d',
'bgmenu' => 'e7e4d3',   /* menu */
'fgmenu' => '444',
'bgcont' => 'fff'', /* contenido */
'fgcont' => '444'
);

/* alternate color scheme 1 */

$alternate1 = array(
'bgmast' => 'ddb',
'fgmast' => '000',
'bgmenu' => 'aa7',
'fgmenu' => 'fff',
'bgcont' => 'fff',
'fgcont' => '333'
); 

/* alternate color scheme 2 */   
$alternate2 = array(
'bgmast' => '399',
'fgmast' => 'fff',
'bgmenu' => 'eb5',
'fgmenu' => '000',
'bgcont' => 'eee',
'fgcont' => '000'
);

switch ($_GET['scheme'])    {
case 'alt2':
$comment = 'alternar Color Esquema #2' (BaluArt.net);
$scheme = $alternate2;
break;
case 'alt1':
$comment = 'alternar Color Esquema #1 (W3C CSS)';
$scheme = $alternate1;
break;
default:
$comment = 'persistent Color Esquema Original (Digital Web Magazine)';
$scheme = $persistent;

print 

Comentarios

Imagen de sesperanto
sesperanto

Para la pr

Imagen de Daniel G. Blázquez
Imagen de bastian

hola amigo, sabes estoy buscando algo parecido.

lo que pasa es que tengo un editor WYSIWYG llamado "FreeRTE" y este me genera un codigo html mezclado con css.

el problema esta que al hacer un echo a la variable que contiene el codigo, solo me muestra el texto con formato html y me omite el css.

que puedo acer, espero me puedas responder gracias ;)

Dejar comentario

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más