Insertion de code css et js

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Insertion de code css et js

    Bonjour,

    Je voudrai ajouter des codes CSS et JS dans mon site pour l'appliquer à mon article mais je ne sais pas ou le placer et comment procéder. Quelqu'un peut-il m'aider?

    Merci

  • #2
    Bonjour

    Notre ami Loïc (lomart) a développé un super plugin pour ce type d'usage. Il se nomme UP. Tu devrais le trouver aisément (up.lomart.fr mais j'ai un doute)
    Christophe (cavo789)
    Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
    Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

    Commentaire


    • #3
      Merci Christophe,
      Tu as tout bon sur l'URL.
      Il permet en effet d'ajouter du CSS pour un article, mais pas de JS. Mais c'est une idée !
      Pour ajouter du CSS, mais aussi du JS, il est préférable d'utiliser https://lomart.fr/extensions/lm-custom
      UP, le plugin universel à découvrir sur https//up.lomart.fr
      bgMax
      , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

      Commentaire


      • #4
        Rectificatif!
        Avec UP, Il est possible d'inclure un fichier JS (pas du code) avec {up addCodeHead=<script src="chemin/monfichier.js"></script>}

        Pour le CSS, c'est https://up.lomart.fr/demo/action-addcsshead
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          Bonjour, l'adresse est bien https://up.lomart.fr/
          je viens de l'installer. ça semble top ! merci
          Dernière édition par valserine à 31/01/2018, 12h06 Raison: ah ben je retarde, moi !!! :-)

          Commentaire


          • #6
            Merci à vous, et je l'installe dans mon dossier joomla ou à l'exterieur?

            Commentaire


            • #7
              Envoyé par walt Voir le message
              Merci à vous, et je l'installe dans mon dossier joomla ou à l'exterieur?
              Ce sont des extensions Joomla qui s'installent comme toutes les extensions Joomla ... ou je n'ai pas compris la question
              UP, le plugin universel à découvrir sur https//up.lomart.fr
              bgMax
              , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

              Commentaire


              • #8
                ça y est je l'ai installé et comment puis je m'en servir maintenant? Merci

                Commentaire


                • #9
                  Envoyé par walt Voir le message
                  ça y est je l'ai installé et comment puis je m'en servir maintenant? Merci
                  En lisant le mode d'emploi sur le site !

                  Vous n'avez jamais indiqué ce que vous vouliez faire en dehors de :
                  Je voudrai ajouter des codes CSS et JS dans mon site pour l'appliquer à mon article
                  UP, le plugin universel à découvrir sur https//up.lomart.fr
                  bgMax
                  , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                  Commentaire


                  • #10
                    En fait je voudrai inserer ce code css et js dans mon article pour faire un slide.
                    Code:
                     [COLOR=brown]* [COLOR=black]{[/COLOR]
                    [COLOR=red]  box-sizing[COLOR=mediumblue][COLOR=black]:[/COLOR] border-box[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Position the image container (needed to position the left and right arrows) */[/COLOR]
                    .container [COLOR=black]{[/COLOR]
                    [COLOR=red]  position[COLOR=mediumblue][COLOR=black]:[/COLOR] relative[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Hide the images by default */[/COLOR]
                    .mySlides [COLOR=black]{[/COLOR]
                    [COLOR=red]  display[COLOR=mediumblue][COLOR=black]:[/COLOR] none[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Add a pointer when hovering over the thumbnail images */[/COLOR]
                    .cursor [COLOR=black]{[/COLOR]
                    [COLOR=red]  cursor[COLOR=mediumblue][COLOR=black]:[/COLOR] pointer[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Next & previous buttons */[/COLOR]
                    .prev,
                    .next [COLOR=black]{[/COLOR]
                    [COLOR=red]  cursor[COLOR=mediumblue][COLOR=black]:[/COLOR] pointer[COLOR=black];[/COLOR][/COLOR]
                      position[COLOR=mediumblue][COLOR=black]:[/COLOR] absolute[COLOR=black];[/COLOR][/COLOR]
                      top[COLOR=mediumblue][COLOR=black]:[/COLOR] 40%[COLOR=black];[/COLOR][/COLOR]
                      width[COLOR=mediumblue][COLOR=black]:[/COLOR] auto[COLOR=black];[/COLOR][/COLOR]
                      padding[COLOR=mediumblue][COLOR=black]:[/COLOR] 16px[COLOR=black];[/COLOR][/COLOR]
                      margin-top[COLOR=mediumblue][COLOR=black]:[/COLOR] -50px[COLOR=black];[/COLOR][/COLOR]
                      color[COLOR=mediumblue][COLOR=black]:[/COLOR] white[COLOR=black];[/COLOR][/COLOR]
                      font-weight[COLOR=mediumblue][COLOR=black]:[/COLOR] bold[COLOR=black];[/COLOR][/COLOR]
                      font-size[COLOR=mediumblue][COLOR=black]:[/COLOR] 20px[COLOR=black];[/COLOR][/COLOR]
                      border-radius[COLOR=mediumblue][COLOR=black]:[/COLOR] 0 3px 3px 0[COLOR=black];[/COLOR][/COLOR]
                      user-select[COLOR=mediumblue][COLOR=black]:[/COLOR] none[COLOR=black];[/COLOR][/COLOR]
                      -webkit-user-select[COLOR=mediumblue][COLOR=black]:[/COLOR] none[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Position the "next button" to the right */[/COLOR]
                    .next [COLOR=black]{[/COLOR]
                    [COLOR=red]  right[COLOR=mediumblue][COLOR=black]:[/COLOR] 0[COLOR=black];[/COLOR][/COLOR]
                      border-radius[COLOR=mediumblue][COLOR=black]:[/COLOR] 3px 0 0 3px[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* On hover, add a black background color with a little bit see-through */[/COLOR]
                    .prev:hover,
                    .next:hover [COLOR=black]{[/COLOR]
                    [COLOR=red]  background-color[COLOR=mediumblue][COLOR=black]:[/COLOR] rgba(0, 0, 0, 0.8)[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Number text (1/3 etc) */[/COLOR]
                    .numbertext [COLOR=black]{[/COLOR]
                    [COLOR=red]  color[COLOR=mediumblue][COLOR=black]:[/COLOR] #f2f2f2[COLOR=black];[/COLOR][/COLOR]
                      font-size[COLOR=mediumblue][COLOR=black]:[/COLOR] 12px[COLOR=black];[/COLOR][/COLOR]
                      padding[COLOR=mediumblue][COLOR=black]:[/COLOR] 8px 12px[COLOR=black];[/COLOR][/COLOR]
                      position[COLOR=mediumblue][COLOR=black]:[/COLOR] absolute[COLOR=black];[/COLOR][/COLOR]
                      top[COLOR=mediumblue][COLOR=black]:[/COLOR] 0[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Container for image text */[/COLOR]
                    .caption-container [COLOR=black]{[/COLOR]
                    [COLOR=red]  text-align[COLOR=mediumblue][COLOR=black]:[/COLOR] center[COLOR=black];[/COLOR][/COLOR]
                      background-color[COLOR=mediumblue][COLOR=black]:[/COLOR] #222[COLOR=black];[/COLOR][/COLOR]
                      padding[COLOR=mediumblue][COLOR=black]:[/COLOR] 2px 16px[COLOR=black];[/COLOR][/COLOR]
                      color[COLOR=mediumblue][COLOR=black]:[/COLOR] white[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    .row:after [COLOR=black]{[/COLOR]
                    [COLOR=red]  content[COLOR=mediumblue][COLOR=black]:[/COLOR] ""[COLOR=black];[/COLOR][/COLOR]
                      display[COLOR=mediumblue][COLOR=black]:[/COLOR] table[COLOR=black];[/COLOR][/COLOR]
                      clear[COLOR=mediumblue][COLOR=black]:[/COLOR] both[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Six columns side by side */[/COLOR]
                    .column [COLOR=black]{[/COLOR]
                    [COLOR=red]  float[COLOR=mediumblue][COLOR=black]:[/COLOR] left[COLOR=black];[/COLOR][/COLOR]
                      width[COLOR=mediumblue][COLOR=black]:[/COLOR] 16.66%[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    [COLOR=green]/* Add a transparency effect for thumnbail images */[/COLOR]
                    .demo [COLOR=black]{[/COLOR]
                    [COLOR=red]  opacity[COLOR=mediumblue][COLOR=black]:[/COLOR] 0.6[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR]
                    
                    .active,
                    .demo:hover [COLOR=black]{[/COLOR]
                    [COLOR=red]  opacity[COLOR=mediumblue][COLOR=black]:[/COLOR] 1[COLOR=black];[/COLOR][/COLOR][/COLOR]
                    [COLOR=black]}[/COLOR][/COLOR]
                    Code:
                    [COLOR=black][COLOR=mediumblue]var[/COLOR] slideIndex = [COLOR=red]1[/COLOR];
                    showSlides(slideIndex);
                    
                    [COLOR=green]// Next/previous controls[/COLOR]
                    [COLOR=mediumblue]function[/COLOR] plusSlides(n) {
                    [COLOR=red] [/COLOR] showSlides(slideIndex += n);
                    }
                    
                    [COLOR=green]// Thumbnail image controls[/COLOR]
                    [COLOR=mediumblue]function[/COLOR] currentSlide(n) {
                    [COLOR=red] [/COLOR] showSlides(slideIndex = n);
                    }
                    
                    [COLOR=mediumblue]function[/COLOR] showSlides(n) {
                    [COLOR=mediumblue]var[/COLOR] [COLOR=red] [/COLOR] i;
                    [COLOR=mediumblue]var[/COLOR] slides = document.[COLOR=black]getElementsByClassName[/COLOR]([COLOR=brown]"mySlides"[/COLOR]);
                    [COLOR=red] [/COLOR] [COLOR=mediumblue]var[/COLOR] dots = document.[COLOR=black]getElementsByClassName[/COLOR]([COLOR=brown]"demo"[/COLOR]);
                    [COLOR=mediumblue]var[/COLOR] captionText [COLOR=red] [/COLOR] = document.[COLOR=black]getElementById[/COLOR]([COLOR=brown]"caption"[/COLOR]);
                    [COLOR=mediumblue]if[/COLOR] (n > slides.[COLOR=black]length[/COLOR]) {slideIndex [COLOR=red] [/COLOR] = [COLOR=red]1[/COLOR]}
                    [COLOR=mediumblue]if[/COLOR] (n < [COLOR=red]1[/COLOR]) {slideIndex = slides.[COLOR=black]length[/COLOR]}
                    [COLOR=mediumblue]for[/COLOR] (i = [COLOR=red]0[/COLOR]; i [COLOR=red] [/COLOR] < slides.[COLOR=black]length[/COLOR]; i++) {
                        slides[i].[COLOR=black]style[/COLOR].[COLOR=black]display[/COLOR] = [COLOR=red] [/COLOR] [COLOR=brown]"none"[/COLOR];
                      }
                    [COLOR=mediumblue]for[/COLOR] (i = [COLOR=red]0[/COLOR]; i < dots.[COLOR=black]length[/COLOR]; i++) {
                    [COLOR=red] [/COLOR] dots[i].[COLOR=black]className[/COLOR] = dots[i].[COLOR=black]className[/COLOR].[COLOR=black]replace[/COLOR]([COLOR=brown]" active"[/COLOR], [COLOR=brown]""[/COLOR]);
                      }
                    [COLOR=red] [/COLOR] slides[slideIndex-[COLOR=red]1[/COLOR]].[COLOR=black]style[/COLOR].[COLOR=black]display[/COLOR] = [COLOR=brown]"block"[/COLOR];
                      dots[slideIndex-[COLOR=red]1[/COLOR]].[COLOR=black]className[/COLOR] [COLOR=red] [/COLOR] += [COLOR=brown]" active"[/COLOR];
                      captionText.[COLOR=black]innerHTML[/COLOR] = dots[slideIndex-[COLOR=red]1[/COLOR]].[COLOR=black]alt[/COLOR];
                    } [/COLOR]

                    Commentaire


                    • #11
                      Il n'existe pas suffisamment de modules de slide sur le marché ? Franchement je ne pense pas qu'il soit nécessaire de réinventer la roue.
                      Lorsque l'on se cogne la tête contre un pot et que cela sonne creux, ça n'est pas forcément le pot qui est vide.
                      Confucius

                      Commentaire


                      • #12
                        +1 avec lesoutier

                        Il ne suffit pas de charger le code, il faut aussi l'utiliser. En avez-vous l'habitude ?

                        Si oui, le plus simple est mon module custom avec un loadposition dans l'article. Mais je répète, cela demande de l'expérience
                        UP, le plugin universel à découvrir sur https//up.lomart.fr
                        bgMax
                        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                        Commentaire


                        • #13
                          Lomart a dit : Mais je répète, cela demande de l'expérience
                          Je confirme, il va me falloir plus d'expérience et bien étudier le mode d'emploi pour utiliser cet outil...
                          time is my friend !

                          Commentaire


                          • #14
                            Envoyé par valserine Voir le message

                            Je confirme, il va me falloir plus d'expérience et bien étudier le mode d'emploi pour utiliser cet outil...
                            time is my friend !
                            Ce n'est pas utiliser UP qui demande de l'expérience. C'est l'utilisation du JS/CSS importé qui demande de l'expérience
                            Pour la majorité des actions possibles avec UP, il suffit de s'inspirer des démos
                            UP, le plugin universel à découvrir sur https//up.lomart.fr
                            bgMax
                            , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                            Commentaire


                            • #15
                              bonjour,

                              oui c'est bien ce que je voulais dire... je maîtriserai sûrement UP, surtout avec toutes les explications et démos que tu fournis quand j'aurai progressé dans mon apprentissage du codage ;
                              j'en suis seulement à mon 3me cours sur open class-room et je viens juste de découvrir le notepad :-/

                              Commentaire

                              Annonce

                              Réduire
                              Aucune annonce pour le moment.

                              Partenaire de l'association

                              Réduire

                              Hébergeur Web PlanetHoster
                              Travaille ...
                              X