fonction templateCss()

danielsan · octobre 2011

Bonjour,

je n'arrive pas à comprendre la fonction templateCss().

Admettons que j'ai créé un template categorie-slide.php ( qui affiche les articles sous forme de slide ),
et que j'ai dans mon dossier css une feuille de style categorie-slide.css

Avec cette fonction, cette dernière feuille s'insère automatiquement ?
J'ai apparemment du mal à la faire fonctionner ...

j'ai déjà

<link media="screen" rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/css/<?php echo $plxShow->mode(); ?>.css"/><!-- CSS mode -->

qui insère la feuille de style associée au mode ( home|article|categorie|etc... )
J'aimerai être encore plus fin ...

Quelques petites explications ?

Cordialement,
_____
D.San

ps: oui-oui, PluXml mène une vie dure avec moi, je l'exploite dans ses moindres détails, pôv' bête

danielsan · octobre 2011

après plusieurs essais et recherches: c'est good

Je ne sais pas où ça coinçait, mais ça marche plutôt bien :cool:
C'est même super agréable.

Pour résumer, on peut différencier 3 choses:
le mode: home, static, article, categorie, archives, tags
le style: nom du dossier dans le dossier themes ( par exemple "defaut" )
et le template: celui que l'on choisi grâce aux menus déroulants présents dans l'administration des articles et catégories.

Pour associer une feuille de style en fonction du mode:

<link media="screen" rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/css/<?php echo $plxShow->mode(); ?>.css"/>

Pour associer une feuille de style en fonction du style:

<link media="screen" rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/css/<?php $plxShow->template(); ?>.css"/>

Pour associer une feuille de style en fonction du template:

<?php $plxShow->templateCss() ?>

rappel: pour cette dernière, si la feuille de style est dans un dossier,
renseigner son nom sans oublier le "/" à la fin, exemple:

<?php $plxShow->templateCss('css/') ?>

ça peut paraître "usine à gaz", mais ça
limite le nombre d'ID et class dans le code,
réduit les règles de sélection/exclusion en css ( les #id:not(#ID2):not(:last-child) ... ne sont pas forcément lues par toutes les versions de tous les navigateurs ),
améliore la compréhension en développement ( raz le bol du scrolling :P ),
et surtout avoir une bibliothèque de styles que l'on peut composer à souhait

Voili-voilou !

si vous avez des remarques et suggestions...

_____
D.San

Bloody · octobre 2011

Merci pour ta question/réponse. Ça va m'être utile.

Ça me fait penser qu'il serait peut être possible de réaliser des child themes.

danielsan · octobre 2011

de rien

penses-tu qu'il faille compiler l'ensemble des feuilles de styles ?
j'ai 11 feuilles actuellement ... ( faut pas oublier celles des plugins et autre adons ... )

ti_pierre · octobre 2011

Bonjour bonjour, en effet cette méthode est forte utile mais est-elle une bonne solution ?

Perso je ne l'ai pas adoptée et je l'expliquerai plus en détail dans un autre billet.

Astuce à moi : en voyant le travail de Paul Irish sur les commentaires conditionnels et ie une idée m'est venue : si je pouvais ajouter une class sur chaque page de mon site automatiquement me permettant de cibler cette dernière précisément, je pourrais alors alléger mon code en id et class.

C'est possible facilement en fouinant dans la doc du dev ( voir wiki ) en affichant dans la balise body le :

- mode ( home / cat / ... )
- Nom ou numéro de cat
- Nom ou numéro d'art
- Nom ou numéro de page statique

Alors oui ça fait beaucoup de class sur affichées certes sur TOUTES les pages que l'on visite, mais c'estr juste très pratique.

A méditer et ouvert au débat

Gzyg · octobre 2011

On retombe dans ce vieux débat philosophique (à ce jour irrésolu) : le mieux est-il l'ennemi du bien ?

Et si l'on faisait plutôt des designs simples en considérant que ce qui doit être transmis c'est l'information et pas la décoration de cette information ?

Bon, c'est juste mon avis de fainéant qui n'aime pas changer ses habitudes...

à plus,

Gzyg

danielsan · octobre 2011

@ti_pierre: effectivement, j'ai pour le body une class qui correspond au mode et une ID qui correspond à mode+ID (artId, catId, etc ... ).

J'en ai eu besoin car je voulais par exemple filtrer l'affichage de certaines infos présentes dans le chapo d'un article mais que je ne voulais pas voir dans la liste des chapo en mode catégorie ... c'est une pratique somme toute rare ... mais utile.

Si tu peux effectivement détailler ta raison :P

@Gzyg: personnellement,
je ne cherche pas du tout à relancer ce débat qui ne l'a jamais été pour moi:

pour avoir une plus grande chance d'avoir un site clair,
celui-ci doit d'abord s'afficher clairement sans feuille de style,
seulement avec les balises de mise en forme ( H1, H2, p, b, etc ... )

je fais ensuite un blueprint global qui doit s'afficher "potablement" dans IE7 sans JS ( si si ... )
puis la feuille de style générale ( font, liens, alignement, marges, etc ... )
puis la css globale pour le mode ( catégorie, article, etc ... )
puis une par template si différent du mode,
j'ajoute enfin les spécificités des pages particulières sur la CSS globale du mode ( un bouton de formulaire différent, une image qui ne doit pas s'afficher, etc ... )
on pourrait pousser le bouchon plus loin avec une CSS par page, mais bon, j'm'appelle pas Maurice ^^^
( vu qu'à ce stade il ne reste plus rien, c'est pas vraiment la peine )

il y a aussi la CSS pour la sidebar, les formulaires, la print, une ou plusieurs médiaqueries ...

j'oubliais une CSS si JS activé ( c'est un code JS qui insère une CSS et ajoute la class JS au body, pas de JS, pas d'insertion :P )
puis le jQuery ( j'aime bien 1/3 de marge haute pour 2/3 de marge basse quand la hauteur du contenu est trop inférieure à la hauteur de la fenêtre

) et les plugins.

En gros, je développe en partant d'une page blanche et en retraçant l'histoire du web ...
du gros taf, rendu possible par une bonne structure de base du contenu.

bon, j'avoue qu'il y a pas mal de templates aguichants soit-disant gratuits que je pourrai modifier.
Mais de cette manière, mon template, c'est mon template !

Dernier point, étant responsable d'une agence de Design,
j'ai ainsi une bibliothèque segmentée facilitant le travail à venir ...
je change le blueprint mais garde le style du mode, etc ...
c'est la raison principale de cette gestion de style.

La future version de mon site utilise plusieurs template de catégorie ( sous forme standard, de liste, en grille, en slide ) et d'article.
L'objectif est d'une part de montrer au client que PluXml a tous les atouts d'un grand en terme de résultat et d'autre part de faire en sorte qu'il projette plus facilement son futur site dans le mien ( "j'préfère cette mise en page que celle-ci" etc ... )

Voili voilou vous savez tout !

Et vous, vous faites comment ?

Cordialement,
_____
D.San

Bloody · octobre 2011

Danielsan, bon, je ne sais pas si je vais répondre à ta question, mais peut être partiellement.

Si tu veux un id css spécifique par page, il ya la solution du plugin plxornament que tu peux cloner.
En ajoutant, ton id css à chaque article dans le champ de plxornament, tu peux formater spécifiquement chaque article.

danielsan · octobre 2011

danielsan a écrit:

effectivement, j'ai pour le body une class qui correspond au mode et une ID qui correspond à mode+ID (artId, catId, etc ... ).

et ça marche

sans nouveau champ

danielsan a écrit:

j'ajoute enfin les spécificités des pages particulières sur la CSS globale du mode ( un bouton de formulaire différent, une image qui ne doit pas s'afficher, etc ... )
on pourrait pousser le bouchon plus loin avec une CSS par page, mais bon, j'm'appelle pas Maurice ^^^
( vu qu'à ce stade il ne reste plus rien, c'est pas vraiment la peine )

J'avoue que le dernier message était un peu long ...

danielsan · octobre 2011

topic transformé en article illustré ici

fonction templateCss()

Réponses