Modifier les styles du modèle playliste_video

Code work in progress

Objectifs:
Modifier l’aspect du modèle «playliste_video» en surchargeant la CSS sans toucher le plugin de départ.
Méthode :
Mise en place d’un nouveau modèle personnalisé et d’une nouvelle CSS dans le dossier «/squelettes/modeles/» et configuration de l’ensemble.

Description du problème :

Ce modèle va permettre de remplacer via une feuille de style deux «clear : both». Un avant l’affichage de l’ensemble de la vidéo et l’autre après les boutons.

Méthode suivie :

Le plugin lecteur multimédia nous propose un modèle nommé playliste_video.html situé dans le dossier «Lecteur multimedia -> modeles» . C’est ce modèle que nous allons recopier dans notre dossier «/squelettes/modèles/» sous le nom : «playliste_video_clear_none.html» puis le modifier. Dans vos articles ou squelettes il faudra appeler le modèles playliste_video_clear_none en lieu et place de playliste_video

Originellement ce modèle charge une feuille de style via ces instructions :

<style type="text/css">
	#SET{skin,#ENV{skin,skins/la-bas}|concat{'/skin.css'}}
	[(#INCLURE{fond=#GET{skin}}|compacte{css})]
	[#playliste_video{ width:(#ENV{largeur,''})px;}]
</style>

La seconde ligne indique que la variable skin aura comme valeur «skins/la-bas/skin.css»

La troisième ligne var charger cette feuille de style via #INCLURE.

A ce stade nous savons que la feuille de style en question est stockée dans le répertoire «skins/la-bas/» et que son nom complet sera skin.css.html (à cause de #INCLURE ).

Modifions ces lignes dans le fichier «playliste_video_clear_none.html» situé dans le répertoire «/squelettes/modèles/» de la sorte

<style type="text/css">
	#SET{skin,"./modeles/css/lecteur_multimedia_skin_none.css"}
	[(#INCLURE{fond=#GET{skin}}|compacte{css})]
	[#playliste_video{ width:(#ENV{largeur,''})px;}]
</style>

La seconde ligne va donc allez chercher une nouvelle feuille de style dans le répertoire /squelettes/modeles/css nommée «lecteur_multimedia_skin_none.css.html»

A ce stade notre modèle chargera un nouvelle feuille de style que nous réaliserons en copiant la feuille originale «skin.css.html» dans «squelettes/modeles/css» en «lecteur_multimedia_skin_none.css.html»

Au sein de cette feuille de style vous pouvez effectuer les modifications que vous souhaitez. Pour ma part j’ai voulu supprimer le clear : both situé au début de la playliste

#playliste_video{
{{	clear:both;}}
	margin : 20px auto;
	padding:0px;
	background-color:#3E4040;
	border:none;
	width:480px;
}

et avant les titres

ul.video { {{clear:both;}} margin : 10px 20px; padding:10px 0px; border:none;text-align:left; }

que je remplace par un clear : none;.

Et voila le tour est joué.

Conclusions :

Il est possible de modifier d’autres éléments y compris les icônes de ce plugin en les plaçants dans un répertoire du squelette.

L’avantage de la méthode est de ne pas toucher aux fichiers du plugin, Ainsi pas de perte des modifications en cas de mise à jour du plugin.
Bien sur il faudra mettre à jour si nécessaire le modèle a chaque mise a jour du plugin.

Cette méthode est généralisable à bien d’autres situations.

Discussion

No discussion

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom