Images typographiques et couleurs ( via css ? )

Général
1

-----Message d'origine-----
De : spip-bounces@rezo.net [mailto:spip-bounces@rezo.net]De la part de
EK
Envoyé : mardi 9 janvier 2007 22:43
À : spip@rezo.net
Objet : Re: [Spip] Images typographiques et couleurs ( via css ? )

> Ouais, je pige, te faudrait une variable en javascript cote client qui s
> executerait cote serveur avec le filtre image_typo et sans recharger la
> page, cela semble en effet peu probable (ou alors en AJAX ??),

Là je ne sais pas du tout mes connaissances en javascript sont assez
limiter :confused:

> - tu dois avoir une solution en utilsant des css, mais assez ardue a
> mettre en place, complique a expliquer, et lourd si site avec
gros contenu
> et beaucoup de css, est ce le cas ?

Pour chaque style les css ne sont pas beaucoup plus gros que celui de la
dist. Par contre le site contient pas mal d'articles multilangues (4
pour l'instant), dans un premier temps 40 articles mais ça ne vas pas
aller en diminuant :slight_smile:

> en gros :
> 3 css dynamiques
> rouge.css, vert.css, bleu.css
> dans article.html
> <DIV class="[(#TITRE)]"></div>
> et dans tes 3 css
> a l interieur d une boucle article qui va te creer toutes les class pour
> tous les titres existant sur le site (d ou une certaine
lourdeur) tu mets
> :
> .#TITRE
> {
> display:block;
>
background-url([(#TITRE|image_typo{police=typo.otf,couleur=Couleur
DeLaCSS....);
> backgrund-repeat:no-repeat;
> }
> En gros, tu crees une class par titre, et c est cette class qui fabrique
> le titre grace a la fonction image_typo...
> Donc dans vert.css tu te retrouves avec :
> .LePremierTitre
> {
> background-url....
> }
> .LeDeuxiemeTitre
> {
> background-url....
> }
> Cela implique que tous les titres d une meme css ont la meme couleur ?

oui, un thème de couleur par css, donc tout les titres d'une css on la
même couleur.

> C est vraiment en vitesse (ca peut etre un peu optimise, faut egalement
> filtrer les #TITRE pour eviter noms de class incompatibles... En plus,
> niveau accessibilite tel quel, c est vraiment pas tres heureux....
> MAis c est quand meme faisable...

J'ai essayer de me démener avec ton explication je suis pas encore
arrivé à des résultats.

Je ne pense pas avoir besoin d'une classe différente par titre ( <DIV
class="[(#TITRE)]"></div> ), vus qu'ils sont tous de la même couleur du
coup on élimine la lourdeur d'1 class par titre différent.

<div class="titre"></div>

et dans le css pour ne pas avoir de problème avec les {} j'arrive jusque
là :

.titre
{
display : block;
background :
url("[(#TITRE|image_typo{police=typo.otf,taille=26,couleur=ffffff,
padding=5})]");
}

mais ça ne marche pas et c'est normal j'ai mal compris ton explication
je crois :slight_smile:

Je patine à fond, je ne pense pas que j'ai les compétences requises pour
arriver à faire ça de cette manière là :confused:

> - Sinon, creer une image avec image_typo, utiliser cette image comme
> masque pour perforer une image blanche unie qui laisserait apparaitre la
> couleur de fond par la decoupe... Pffff.... me semble que ce n est pas
> possible avec les filtres graphiques disponibles... mais pas sur....

Finalement je me dis que cette solution (si on peut appeler ça solution)
est peut être plus simple.
Je regarde aussi vers les couleurs automatiques (
Couleurs automatiques - SPIP )

> Si besoin d info en plus...
> codialement
> triton

Merci beaucoup pour ton aide c'est déjà beaucoup :slight_smile:

Une bonne nuit de sommeil, peut être que la solution sortira d'un de mes
rêves :slight_smile:

cordialement
EK

Bonsoir,
a toute vitesse et en vrac :

dans le squelette article html tu appeles ta css dynamique comme ca :
<link rel="stylesheet" type="text/css" media="screen"
href="#URL_SITE_SPIP/spip.php?page=rouge" />
A l endroit ou tu souhaites afficher ton titre image tu mets ca :
<div class="[(#TITRE|supprimer_numero|texte_script)]"></div>

tu crees un fichier rouge.html dans un dossier squelette accessible par le
systeme dans lequel tu mets ca :
#CACHE{24*7*3600}
#HTTP_HEADER{Content-Type: text/css;}

<BOUCLE_Couleur(ARTICLES)>
.[(#TITRE|supprimer_numero|texte_script)]
{
background-image :
url([(#TITRE|supprimer_numero|image_typo{police=ARIAL.TTF,taille=26,couleur=
ff0000}|extraire_attribut{src})]);
background-repeat:no-repeat;
display:block;
}
</BOUCLE_Couleur>

et voila, si tu regardes le code source de ton article sur ton navigateur,
tu vas avoir une ligne :
<link rel="stylesheet" type="text/css" media="screen"
href="http://TonUrlSite/spip.php?page=rouge&quot; />
tu te connectes a cette adresse : http://TonUrlSite/spip.php?page=rouge (c
est cette adresse qu il faudra mettre dans la liste de selection des css
javascript) et tu vas voir ta css avec les noms des class et les url des
images titres...
Faudra faire la meme chose avec la css verte et bleu
Mais ca ne va pas marcher encore tout a fait, car les noms des class ne sont
pas valides, a cause des espaces, ponctuations, et j ai pas le temps de
chercher maintenant, mais faudrait juste remplacer le filtre texte_script
par un autre qui ferait des noms de class acceptables, la fonction qui
transforme les titres d articles en url de spip conviendrait tres bien, mais
je ne sais pas si disponible en tant que filtre, en tous les cas, pas tres
complique a faire si n existe pas... voila, un peu a l arrache, a adapter a
ton cas, mais ca marche dans le principe, essaye juste de trouver le bon
filtre (ou demande a la liste) vais pas etre disponible pendant un p tit
moment...
cordialement
triton