SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

289 Plugins, 197 contribs sur SPIP-Zone, 88 visiteurs en ce moment

Accueil > Affichage multimédia > Audio, vidéo > Lecteur Multimédia > Modifier les styles du modèle playliste_video

Modifier les styles du modèle playliste_video

15 octobre 2010 – par Billard_fm

3 votes

Attention, cette contribution est EN CHANTIER : elle n’est peut-être pas fonctionnelle.

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 :

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

Télécharger

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

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

Télécharger

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

  1. #playliste_video{
  2. {{      clear:both;}}
  3.         margin : 20px auto;
  4.         padding:0px;
  5.         background-color:#3E4040;
  6.         border:none;
  7.         width:480px;
  8. }

Télécharger

et avant les titres

  1. 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.

Dernière modification de cette page le 4 octobre 2011

Retour en haut de la page

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Grappes 1.0

    23 novembre 2012 – 33 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • Cycle2

    7 août 2014 – 117 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 128 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Mon site affiche une page blanche ou je ne peux plus accèder à l’espace privé

    7 février 2008 – 34 commentaires

    Au secours ! « Tout à coup » votre site devient inutilisable ou inaccessible ! Comment faire ? Pourquoi ? Par où commencer ? Sans pouvoir couvrir tous les cas, cet article va essayer de vous guider rapidement vers la (...)

  • Japibas, squelette responsive

    11 octobre 2013 – 113 commentaires

    Japibas est un squelette responsive, multilingue (français, anglais et espagnol), dont l’habillage conviendrait à un site de type blog ou webzine. Le graphisme est inspiré du template Wordpress Japibas réalisé par Jesper Johansen et distribué sous (...)