CSS Dinámico?

[demis57]

Hola amigos,

tengo un problema de exceso de código que me gustaría solucionar.
El caso, es que en el siguiente código, solamente cambia una palabra, esta se encuentra en una base de datos y la obtengo por MySQL con PHP.

Mi pregunta es: Podría hacer dinámico este CSS para que este valor sea una variable que se pase y muestre el códido correcto???

En este caso, les muestro el código para las cajas en azul. Tengo el mismo código en verde, rojo, etc... y lo único que cambia es la URL de donde obtiene las imágenes.

Tendría que comenzar, algo como:

div.module_[variable]{

no??

Código:

/*PARA EL BOX AZUL*/

div.module_azul {
        margin: 0px 0px 0px 0px;
        width: 100%;
        border-left: solid 0px #000000;
        border-right: solid 0px #000000;
        border-top: solid 0px #000000;
        border-bottom: solid 0px #000000;
        margin-left: 0px;
		background: url('../images/azul/box_L.jpg') repeat-y left;
        }
		
div.module_azul div{
	background: url('../images/azul/box_R.jpg') repeat-y right;
	}
	
div.module_azul div div {
	background: url('../images/azul/box_T.jpg') no-repeat top;
}

div.module_azul div div div {
    background: url('../images/azul/box_B.jpg') no-repeat bottom;
}

Muchas gracias por su ayuda

Demis

[frijolerou]

Para la hoja de estilos puedes usar un archivo PHP en vez de CSS.

Un ejemplo (estilos.php):

Código:

/*PARA EL BOX AZUL*/
<?php
    $color = 'azul';
?>

div.module_<?php echo $color;?> {
        margin: 0px 0px 0px 0px;
        width: 100%;
        border-left: solid 0px #000000;
        border-right: solid 0px #000000;
        border-top: solid 0px #000000;
        border-bottom: solid 0px #000000;
        margin-left: 0px;
background: url('../images/<?php echo $color;?>/box_L.jpg') repeat-y left;
        }

div.module_<?php echo $color;?> div{
background: url('../images/<?php echo $color;?>/box_R.jpg') repeat-y right;
}

div.module_<?php echo $color;?> div div {
background: url('../images/<?php echo $color;?>/box_T.jpg') no-repeat top;
}

div.module_<?php echo $color;?> div div div {
    background: url('../images/<?php echo $color;?>/box_B.jpg') no-repeat bottom;
}

En este caso el "color" lo defino en una variable, y luego imprimo esa variable en la zona del texto correspondiente. en tu caso el valor de esa variable la sacas desde la BD.

Finalmente llamas al archivo PHP igual como si lo hicieras con un archivo CSS:

Código:

<link href="estilos.php" type="text/css" rel="stylesheet">

[demis57]

Hay un problema.... esta hoja de estilos no puedo (o en todo caso lo veo complicado) convertirla a php, porque es la hoja de estilos principal del Joomla! (hermano mayor de Mambo). O sea, es parte de un CMS.

Se puede hacer algo en este caso?

Gracias por tu respuesta

Demis

[K3NNY]

No es para nada complicado. Simplemente tenes que renombrarla a .php y cambiar la URL en el "header" (supongo que tendra un header en comun).

[RoQ]

o puedes crear otra donde solo vayan esas clases y le aumentas otro <link ..../> en el header

[webosiris]

yo antes de complicarme con php y demás puliría bien el css... por ejemplo

border-left: solid 0px #000000;
border-right: solid 0px #000000;
border-top: solid 0px #000000;
border-bottom: solid 0px #000000;

se puede sustituir por

Código HTML:

border: 0;

[demis57]

Tienes toda la razón webosiris, es el siguiente paso.

Pero quiero compartir con todos la solución por la que tuve que optar, no lo que quería exactamente, pero a final de cuentas "solución".

Tuve que crear un archivo CSS más con toda la información de estos boxes por separado por cada color.

Intenté convirtiendo el CSS a PHP, pero el Joomla! parece que no le gusto la idea, pues por más que le ponía la extensión .php tanto en el XML como en el link del index.php, no lo reconció pero por nada del mundo.

Muchas gracias a todos por sus ideas!

Demis