plugin CCS dynamique

danielsan · mars 2014

Salut à vous,

je cherche à faire une feuille de style dynamique.

feuille style.php :

[== PHP ==]
<?php header("Content-type: text/css; charset: UTF-8");

	function border($color = "black", $width = "1", $style = "solid"){
		echo "border : ".$width."px ".$style." ".$color.";";
	}
	
	function background($color = "#FFF", $repeat = "no-repeat", $url=""){
		$return = "background : ".$color;
		if($url!=""){
			$return .= " url(".$url.") repeat: ".$repeat;
		}
		echo $return.";";
	}
	
	$colorText		= "#278F58";
	$colorLink		= $colorText;
	$body_bgColor 		= "#FFF";
	$nav_bgColor 		= "#555555";
	$article_bgColor 	= "#ADF5A4";
	$article_borderColor 	= $colorText;
	$article_titleColor 	= $colorText;

	
?>


/* ---------- BODY ---------- */
body {
	<?php background($body_bgColor); ?>
}
#container{padding:150px 40px 40px 40px}

a {
	color: <?php echo $article_titleColor; ?>;
	text-decoration: none;
}
a:hover{text-decoration:underline;}


/* ---------- ARTICLE[role=article] ---------- */
article{
	width:25%;
	padding:8px;
	float:left;
}
article .artContainer{
	position:relative;
	padding:8px 60px 8px 8px;
	<?php background($article_bgColor); ?>
	<?php border($article_borderColor); ?>
}


etc.

et l'appelle dans le header (notez le style.PHP) :

[== PHP ==]
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/css/style.php" media="screen"/>

déjà ça, comme ça, ça marche, ouf.

j'aimerai que mes variables proviennent d'une configuration d'un plugin, du type :

[== PHP ==]
$colorText = $this->getParam('colorText');

mais je n'arrive pas à appeler PluXml dans ce fichier CSS.
J'ai essayé des instances, des clones, etc ... arg !
C'est l'en-tête qui bug.
Je ne sais pas si je dois utiliser la buffurisation, et auquel cas, comment l'utiliser ...

Avez-vous déjà planché sur ce genre de feuille de style ?
Sauriez-vous comment m'en sortir ?

Dans l'idéal, il faudrait qu'une fois les paramètres fixés (une fois qu'on a fini de faire mu-muse avec le plugin),
on valide la feuille de style pour éviter de la recalculer à chaque fois.

J'ai déjà fait ça avec un brutal preg_replace \ma_variable\ dans une CSS, mais bon, c'est pas propre !

Merci.
@+

bazooka07 · mars 2014

Bonjour,

Il va falloir franchir quelques marches pour y arriver.
Etape1 :
Quand la page web appelle la feuille CSS style.php, la liaison avec PluXml est rompue et la feuille CSS ne connait que la page qui l'a appelée.
On peut faire des calculs dans style.php, genre je descends de 2 niveaux et je suis à la racine du site. Perso, je n'aime pas trop ça. Le jour où on déplace style.php dans la hiérarchie du site, rien ne va plus. Lorsque Pluxml est actif, dans un hook du plugin, je calcule l'emplacement de style.php et je stocke le résultat dans une variable $_SESSION. Quand la page appelle style.css la variable sera envoyée en même temps et style.php pourra accéder à la racine du site avec la valeur de cette variable.
Etape2:
Il faut donner des outils à style.php pour utiliser Pluxml, c'est à dire charger certaines de ses bibliothèques pour utiliser le plugin.
Elles sont listées dans le fichier index.php et core/admin/preprend.php. Elles ne sont pas toutes obligatoires (captcha ne doit pas trop servir pour une feuille de style)
Etape3:
Connaissant le nom du plugin, il faut instancier $plxMotor et $plxShow et appeler une fonction de plxShow avec le nom du plugin pour récupérer l'instance du plugin.

Tu peux jeter un œil sur le script uploader.php dans le plugin html5uploader bien que j'utilise une instance plxMedias à la place du plugin.

Après, si c'est juste pour récupérer une valeur calculée par le plugin, je trouve cela lourd. Il sera plus simple de stocker le résultat dans un cookie ou une variable $_SESSION que la page html transmettra automatiquement à style.php.

Mais d'après ce que je comprends dans ton code, c'est juste pour changer un fond de page. On peut faire plus simple en utilisant un hook :

[== PHP ==]
class myPlugin extends plxPlugin {

  public function __construct($default_lang) {
    .......
    $this->addHook('plxShowPluginsCss', 'plxShowPluginsCss');
  }

  public function plxShowPluginsCss($params) {
     $myBackground = $this->getParam('mybackground'); ?>
     <style type="text/css"> body {background: <?php echo $myBackground; ?>;} </style>
<?php
  }

}

danielsan · mars 2014

salut bazooka07 et merci pour ta réponse.

en parcourant class.plx.plugins, il y a la méthode cssCache($type).
Si Stéphane peut nous en dire plus ... je sais que parfois il y a des fonctions cachées dans PluXml qu'il est le seul à connaître et à utiliser !

Ton approche d'enregistrer une donnée en SESSION pour la récupérer dans un fichier à part,
j'avoue que c'est très malin !

Du coup je vais voir pour (si j'ai bien compris) :
1/ envoyer en SESSION via le plugin les paramètres nécessaires à style.php
2/ récupérer ces paramètres dans ma style.php

C'est tout bête !

En mode développement la pirouette se fait.
Quand le paramétrage des styles est fixé, on génère un vrai fichier CSS compilé.

Ce n'est pas pour un simple changement de background du body que je fais ça ...

Je teste ça ce WE et donne un retour

Merci encore.

je-evrard · mars 2014

Perso voici ma méthode :

Dans le header je charge un css normal plus un dynamic css qui va surcharger les couleurs, les images... :

[== Indéfini ==]
 <!-- Custom Theme CSS -->
    <link href="<?php $plxShow->template(); ?>/custom/custom.css" rel="stylesheet">
    
     <style type="text/css">
        <?php include($plxShow->plxMotor->aConf['racine_themes'].$plxMotor->style.'/custom/dynamic_css.php'); ?>
    </style>

Dans dynamic_css, j'ai par exemple :

[== Indéfini ==]
global $plxShow;
$IMAGEPATH = $plxShow->plxMotor->aConf['images'];
 
# constante provenant d'un autre plugin
$colf="#".SPXTHEMEDISPLAY_CODE2;
$colt1="#".SPXTHEMEDISPLAY_CODE3;

 
?>
/* ici vos styles dynamiques */

#filters a:hover,
.selected {
	background-color:  <?php echo $colt1; ?> !important;
	border: 1px solid #29a9df !important;
	color: #fff !important;
}

.intro {
    background: url( <?php echo $IMAGEPATH.SPXTHEMECORE_SECTION_INTRO_BGIMAGE; ?>) no-repeat bottom center scroll;
}

.btn-circle:hover,
.btn-circle:focus {
    color: <?php echo $colt1; ?>;
}

.stylebaseline{
	background-color: <?php echo $colt1; ?>;
}

.top-nav-collapse, .bg-color2 {
        background-color: <?php echo $colf; ?>;
}

Sachant que par exemple SPXTHEMEDISPLAY_CODE2 sont des constantes définis via un autre plugin de mon cru. Voili voilou. Il y a en fait pas mal de méthodes différentes pour faire du css dynamique.

A noter : ma méthode reste simple mais n'est pas forcément la bonne. Si stef a une solution autre, je suis preneur d'ailleurs (soif de savoir)

danielsan · mars 2014

ah oui d'accord.
tu ne charges pas une feuille de style mais des styles ... qui sont donc tous rechargés sur chaque page ...

je-evrard · mars 2014

Oui c'est ça pour le moment.

plugin CCS dynamique

Réponses