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

[walt]

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

[cavo789]

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)

[lomart]

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

[lomart]

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

[valserine]

Bonjour, l'adresse est bien https://up.lomart.fr/
je viens de l'installer. ça semble top ! merci

[walt]

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

[lomart]

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

[walt]

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

[lomart]

ç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

[walt]

En fait je voudrai inserer ce code css et js dans mon article pour faire un slide.

 [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]

[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]

[lesoutier]

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.

[lomart]

+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

[valserine]

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 !

[lomart]

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

[valserine]

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 :-/