Changer dynamiquement une feuille css ?

Programmation
#1

Bonjour,
J’avance, et je me suis pris au jeu… :wink:
J’ai trouvé un petit javascript qui me permet de changer à la volée de css

[code]

[/code] + [code]function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } }[/code] + [code]Style 1 Style 2[/code]

Avec ces quelques lignes, je change à la volée le css de ma page Web. L’inconvénient, c’est qu’il faut que je me paluche tous les css avant… Je n’ai pas le résultat “en direct” !

Je souhaite donc aller plus loin et être capable, à partir d’un petit menu dans un coin de ma page HTML, de changer à partir d’une palette ou d’une liste déroulante des parties du CSS (CSS qui est dans un fichier séparé)

Comment changer les variables du css (qui se trouve dans un fichier séparé) à partir du html ?
Le but est de tester, dans ma page, en temps réel, différentes couleurs, polices, tailles de caractères, etc.

La solution la plus simple serait d’introduire le CSS directement dans le HTML, ça je sais le faire, mais je ne le souhaite pas !

Je fouille les tutos et blogs depuis plusieurs jours. Je n’ai rien trouvé… Si quelqu’un avait un lien ou une piste à ma proposer j’en serais ravi :smiley:

#2

Tu peux faire ça avec Quanta+

#3

Bonjour et merci,

[quote=“ricardo”][quote=“lol”]
Le but est de tester, dans ma page, en temps réel, différentes couleurs, polices, tailles de caractères, etc.
[/quote]
Tu peux faire ça avec Quanta+[/quote]

Oui, mais (je sais que je cherche les complications…) ce n’est pas “aussi simple” que ça. Il faut aller dans la feuille de style, trouver la variable, changer le #xxxxxx, le refaire pour une autre variable… Et ça je le fait en ce moment. Je trouve dommage de ne pas pouvoir le faire directement dans le navigateur…

Je pense qu’il doit être possible d’avoir un css dynamique avec du PHP… Mais je n’ai pas encore trouvé…
Je ne lâche pas l’affaire, je trouverais !

#4

[quote=“lol”]Je pense qu’il doit être possible d’avoir un css dynamique avec du PHP… Mais je n’ai pas encore trouvé…
Je ne lâche pas l’affaire, je trouverais ![/quote]
Le seul truc que je vois serais de faire une feuille de style comme ça

#hello{ border-color: <?php echo $couleur ?> }

Mais je trouve pas ça terrible. Moi aussi je trouve les CSS limité.

#5

Bonjour Michel, et merci.

[quote=“MisterFreez”]Le seul truc que je vois serais de faire une feuille de style comme ça

#hello{ border-color: <?php echo $couleur ?> }

Mais je trouve pas ça terrible. Moi aussi je trouve les CSS limité.[/quote]

Ta solution est peut-être la bonne ! Avec quelle commande changes-tu la variable ? (je suis un grand débutant…)

De mon côté, j’ai peut-être trouvé, mais je ne parviens pas à le mettre en oeuvre… css4design.com/blog/feuille- … e-avec-php (ils font une feuille de style en php…)

#6

Ben on propose la même chose que ton lien. Sauf que moi mon exemple est incomplet.

#7

[quote=“MisterFreez”]Ben on propose la même chose que ton lien. Sauf que moi mon exemple est incomplet.[/quote]Je suis en train de bosser dessus, mais j’y arrive pas… acharne - acharne - acharne… J’vais peut-être faire une pose… :cry:

#8

Tu montre ton source ? :slightly_smiling:

#9

si tu as besoin de tester des trucs en direct et que c’est juste pour toi : firebug, onglet ‘html’ =)

Dans la partie gauche tu as le code de ta page et dans celle de droite le bout de css qui correspond à l’élément de la zone gauche sur laquelle tu cliques … démentiellement pratique (quasiment tout s’édite et tu as le résultat sous le nez et “en situation”) et ca évite de recharger des bouts de page toutes les 2 secondes.

Si tu souhaites modifier le style d’un élément particulier de ta page à la volée et ce de façon générale, en dehors des tests, et à ce que j’en ai vu ces derniers temps,le JS est une solution (trouve toi un framework du genre JQuery par contre parceque sinon ça devient vite lourd à gérer à la main).

Par contre les mélanges de php et css je ne suis pas convaincu du tout, je ne pense pas que cela soit interpretté comme on le souhaiterait ici (et de toute façon il vaut mieux avoir plusieurs css à utiliser selon les besoins, du moins je pense). En tout cas je serais curieux de voir si ça fonctionne.

#10

Si c’est fonctionnel s’il les nomment en « *.php », mais je trouve pas ces mélanges extraordinaires.

#11

ah bah remarque du moment que le duo apache/php est au courant ça devrait passer oui … m’enfin bon on s’éloigne vachement des CSS là :stuck_out_tongue:

#12

Ce que je trouve c’est que le PHP, le XHTML sont déjà bien imbriqués si on ajoute les CSS, la javascript voir atom/RSS ça donne une bonne bouillie.

#13

[quote=“Hoshin”]firebug[/quote]Ce plugin à été instalé depuis le début… C’est VRAIMENT indispensable. Je l’ouvre maintenant dés que je tombe sur un site que je trouve bien fait :wink:

C’est bien mon problème, c’est lourd à la main…

C’est “marqué” comme fonctionnel sur quelques sites, mais impossible de trouver un exemple “in situ”

[quote=“MisterFreez”]Ce que je trouve c’est que le PHP, le XHTML sont déjà bien imbriqués si on ajoute les CSS, la javascript voir atom/RSS ça donne une bonne bouillie.[/quote]Oui, tu as raison…

[quote=“MisterFreez”]Tu montre ton source ? :slightly_smiling:[/quote]Et bien j’ai fait le ménage avant de partir hier soir… Un sacré bordel dans mon /var/www :laughing:

Merci à vous deux pour vos observations.
D’après ce que j’en ai lu, et Michel le confirme, c’est possible, mais bien que j’ai écumé Internet hier, je n’ai pas trouvé une seule mise en oeuvre… Et tu retourne toujours vers la même page…
Ce n’est peut-être pas une si bonne idée que ça…

#14

comme dirait mon chef “dis moi de quoi t’as besoin et je te dirais pourquoi ce n’est pas le cas” XD
Essaye de rassembler tout ce dont tu as besoin, pourquoi et dans quel cadre, tu trouveras sans doute des choses “à jeter : trop de prise de tête” en y repensant ^^.
En tant que lecteur, je trouve la façon dont tu as énoncé ton pb peu claire, il y a sans doute un effort à faire là dessus et il y a fort à parier qu’une fois que cela sera parfaitement clair pour tous, ça deviendra plus simple pour tout plein de raisons =)

Perso je trouve que le fait de séparer l’information et son organisation (HTML, PHP se contentant de générer du HTML pour le navigateur qui fait une demande à Apache) de sa présentation (CSS) est une chose plus que nécessaire pour éviter le bordel généralisé dans un source de page … après oui dès qu’on commence à faire plus de mélanges que le strict nécessaire ça pique très vite les yeux pour se relire, et des fois ce n’est peut être pas aussi évident qu’on le souhaiterait.

#15

Et comme disais ma chère mère, “Ce que l’on conçoit bien s’énonce clairement…” Et il est vrai que je n’ai pas été champion pour ce fil !

Pour faire bref, je veux faire du WYSIWYG sur ma page avec mon navigateur… Changer les couleurs (et d’autres variables de mise en forme) pour trouver rapidement LA CSS qui va bien…

Je commence à bien maîtriser la HTLM et le CSS, mais c’est un peu “laborieux” de changer des couleurs, polices, etc…

J’ai bien compris que le risque de ma tentative est de rendre “ma construction” ingérable (pas joli ce terme) et lourdingue (pas dans le dico ce mot ?)… :frowning:

Quanta ne fait pas ça… (le “reload preview” ne fonctionne pas chez moi ! Je pense que c’est ça que Ricardo voulais que je fasse)
Kompozer insère du CSS dans mon HTML, je n’aime pas ça !

Mais je crois qu’il n’y a pas de solution miracle, il faut que je ma tape les changements à la main que je bascule dans mon navigateur et que je rafraîchisse ma page…

#16

tu dois pouvoir te faire une “sandbox” en JS sans trop de pbs, c’est juste que ca risque de te prendre pas mal de temps pour un gain presque nul si tu le fais juste pour toi … Si tu as l’ossature HTML de ton site, fais tes manips via firebug et note ce qui te convient ou se doit, si ce que tu cherches a faire n’est pas plus tordu que ce que tu viens de dire je ne vois pas en quoi firebug te limite, et il aura l’avantage de te laisser te concentrer sur ce que tu veux realiser.

Bien sur si tu souhaites que tout le monde puisse en faire autant sur ton site c’est different. Regarde la facon dont sont faits certains exemples JS / jquery, quand on te propose de modifier le code sur certains sites, ca peut aussi etre une piste.

#17

Je crois que c’est la voix de la raison… :wink:
Merci pour ton aide, je regarde si je trouve un jquerry qui me fasse un genre de “sandbox”. :smt006

#18

Je viens d’uploader une preuve qu’on peut faire de la bouillie avec du PHP et du CSS:
michel.barret5.free.fr/blog/test.html

La feuille de style (css.php) c’est ça :

[code]h1{
color: <?php echo '#FF00FF'; ?>;
text-align: <?php echo 'center'; ?>;

}[/code]

Ça me fait penser qu’avec firebig et webdevelopper tu modifier en live ta CSS et voir dynamiquement les changements.

#19

[quote=“MisterFreez”]Je viens d’uploader une preuve qu’on peut faire de la bouillie avec du PHP et du CSS:
michel.barret5.free.fr/blog/test.html

La feuille de style (css.php) c’est ça :

[code]h1{
color: <?php echo '#FF00FF'; ?>;
text-align: <?php echo 'center'; ?>;

}[/code]

Ça me fait penser qu’avec firebig et webdevelopper tu modifier en live ta CSS et voir dynamiquement les changements.[/quote]
Coucou !
Je pense que personne n’a mis en doute le fait que ce soit possible (pas moi en tout cas) ! C’est juste que c’est sûrement un peu complexe à mettre en oeuvre pour l’utilité que j’en aurais…
Maintenant si tu me montres comment changer la couleur du “coucou” à partir d’une palette accessible dans la page html, alors là ça m’intéresse [size=150]énormément[/size] !

#20

bah… Imaginons un script:

avec GD tu crée des images de 12x12 px;
tu donne un id à chaque image créée
lorsqu’on clique sur l’image, l’option onclick de l’image va envoyer un paramètre de couleur( en hexa par exemple) à la fonction js change_couleur()
la couleur du texte qui aura l’id désiré va changer.

c’est tout simple…
bon, je ne sais pas utiliser gd, mais le onclick et le changement d’attributs sont tout simples

<html>
<head>
<style type="text/css">
p{
color = green;
}
</style>
<script type="text/javascript">
function change_couleur(hexa){
   document.getElementById("montexte").style.color='#'+hexa;
}
</script>
</head>
<body>
<?php 
function rvb2hexa($r, $g=-1, $b=-1)
{
    if (is_array($r) && sizeof($r) == 3)
        list($r, $g, $b) = $r;

    $r = intval($r); $g = intval($g);
    $b = intval($b);

    $r = dechex($r<0?0:($r>255?255:$r));
    $g = dechex($g<0?0:($g>255?255:$g));
    $b = dechex($b<0?0:($b>255?255:$b));

    $color = (strlen($r) < 2?'0':'').$r;
    $color .= (strlen($g) < 2?'0':'').$g;
    $color .= (strlen($b) < 2?'0':'').$b;
    return $color;
}
function couleur_palette($r,$v,$b){
$image = imagecreate(12,12);
$hexa = rvb2hexa($r,$v,$b);
$color = imagecolorallocate($image,$r,$v,$b);

return '<a href="#" onclick="change_couleur('.$hexa.')">'.imagepng($image).'</a>';
}
for($r=0,$r<255,$r+=50){
    for($v=0,$v<255,$v+=50){
        for($b=0,$b<255,$b+=50){
            echo couleur_palette($r,$v,$b) . '<br/>';
        }
    }
}
?>
<p id="montexte">bonjour!!</p>
</body>
</html>

bon, voila un code…
je ne sais pas ce que sa va donner, je ne l’ai pas testé.
Il n’y a que la fonction rvb2hexa que je n’ai pas faite, je n’avais pas envie de me compliquer le vie.

note qu’il faut avoir gd installé.