Soucis suite ajout JS dans le head

**woluweb** · 08/12/2021, 16h25

Voici une petite procédure universelle et simple pour mettre dans le <head> un script. Procédure valable pour n'importe quel template.
Et en plus on peut assigner aux pages qu'on veut (filtre par langue, sélection d'éléments de menu, ...).

En effet, il s'agit simplement de créer un Alternate Layout du Module "Custom HTML".

Code PHP:


<?php
defined('_JEXEC') or die;
?>
<?php
$doc = JFactory::getDocument(); // note: for J3 JFactory for J4 Factory
$doc->addScript('/mon-fichier-javascript.js', array('version'=>'auto'));
return; // we don't want to display anything from the Custom HTML Module.
?>

**lordbdp** · 08/12/2021, 19h01

Pour le module, tu parles du module Custom Inline HTML ? Si oui j'ai juste à l'activer et l'assigner à la page que je souhaite ?

Du coups si j'ai un autre JS (ou JS + CSS) à intégrer pour une autre page, je dois dupliquer le module ?

Par rapport au code que tu me proposes, j'ai l'information sur https://docs.joomla.org/J3.x:Adding_...to_the_page/fr que ça ne supporte pas le JQuery, or j'en ai dans le code à intégrer...

**woluweb** · 08/12/2021, 21h18

En français : Module "Contenu personnalisé" ("Custom HTML").
Autrement dit, tu crées un override de "mod_custom".
(note qu'on pourrait en fait strictement dit le faire avec n'importe quel Type Module, mais celui-ci est le plus simple/léger pcq aucun paramètre. Alors tant qu'à faire...)

Tu renommes le fichier comme ça il ne s'applique pas partout (= override) mais slmt lorsque tu le sélectionnes au niveau de l'onglet "paramètres avancés" du module (= alternate layout)

Maintenant, tu peux charger 10 javascript avec le même module bien sûr.
Et pourquoi pas mettre le fichier "jquery" en local et le charger de la même manière...

**lordbdp** · 09/12/2021, 13h55

J'explique ce que j'ai donc fait.

J'avais le code suivant à intégrer dans le Head :

Code:

href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

J'ai donc créé le Module de contenu personnalisé (expliqué pour les nuls comme moi ici) paramétré comme suit :
- Assignation des menus/Toutes les pages sauf les liens...\uniquement à la page souhaitée
- Paramètres/Plug-ins de contenu/Oui
- Paramètres avancés/Tag de module/header
Code intégré :

Code:

<?php
defined('_JEXEC') or die;
?>
<?php
$doc = JFactory::getDocument(); // note: for J3 JFactory for J4 Factory
$doc->addStyleSheet('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
$doc->addScript('//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js', array('version'=>'auto'));
$doc->addScript('//code.jquery.com/jquery-1.11.1.min.js', array('version'=>'auto'));
return; // we don't want to display anything from the Custom HTML Module.
?>

Résultat,
la taille du texte est redevenu normal sur le site,
les images affichées dans le script sont sur fond gris et non blanc (???),
Si je place le curseur sur une des image elle s’éclaircit.

En affichage sur mobile :
Menu toujours avec le contour bleu sans contenu sauf une fois que je clique dessus,
le script ne semble pas responsive et tente de compressé le plus possible les images au lieu de les afficher les unes sous les autres.

**dolmenhir** · 09/12/2021, 18h32

Pour le fond de tes images, tu peux régler cela simplement en personnalisant la classe ".btn.btn-default," dans ta feuille de style personnalisée.
Actuellement, cette classe est traitée par le css du template comme suit (ligne 5550)

Code:

.btn.btn-default, .btn.btn-deafult:focus {
[COLOR=#c0392b][B]background-color: #34414A;[/B][/COLOR]
[COLOR=#c0392b][B]background: rgba(52,65,74,1);[/B][/COLOR]
background-clip: padding-box;
border-radius: 4px 4px 4px 4px;
border: solid rgba(204,204,204,1);
border-width: 0 0 0 0;
box-shadow: none;
}

il suffit de changer cela en

Code HTML:

background-color: #fff;
background: rgba(255,255,255,1);

tu pourras contrôler l'arrière-plan lors du survol avec la classe .btn.btn-default:hover

Pour moi l'item de menu sélectionné a aussi un contour bleu en mode "desktop" (edge chromium)

Ton menu mobile (hamburger) est blanc à cause de la feuille du site du template, ligne 7499

Code:

@media only screen and (max-width: 767px)
#ttr_menu nav .icon-bar {
[COLOR=#c0392b][B]border-width: 0 0 0 0;[/B][/COLOR]
border-style: solid;
border-color: #1B9BFF;
height: 0px;
}

cela enlève tout épaisseur aux lignes
mets "border-width:1px" ou mets la ligne en commentaire.

Quant au côté "responsive" du script, c'est pas à lui de l'être (sur mon écran ça l'est, même si c'est pas parfait).
Un script reste un script.
Le design et l'ergonomie c'est généralement contrôlé par les css.

**dolmenhir** · 09/12/2021, 18h37

J'ai aussi noté une erreur dans le code, ligne 36 à 41

Code:

@media (min-width:1024px){.ttr_title_style, header .ttr_title_style a, header .ttr_title_style a:link, header .ttr_title_style a:visited, header .ttr_title_style a:hover {
[COLOR=#c0392b][B]font-size: px;[/B][/COLOR]
}
.ttr_slogan_style {
[COLOR=#c0392b][B]font-size: px;[/B][/COLOR]
}

il n'y a aucune valeur.
Donc soit ce font-size n'a rien à faire là, soit faut ajouter une valeur.

nb : perso, je préfère utiliser l'unité rem plutôt que px pour les typo.

**lordbdp** · 09/12/2021, 18h48

Je vais voir pour modifier cela, merci

Comment faire pour réaliser les modifications de couleur sans que cela n'affecte le CSS d'origine du template ? Je passe par le biais du Module de contenu personnalisé aussi ?

En revanche pour le Module de contenu personnalisé, je ne lui affecte pas de position ? Si j'en choisi une, le contenu s'affiche à la position choisie (ce qui paraît logique). Ça me semble normal mais je préfère avoir votre confirmation...

Concernant le code que j'ai intégré, j'ai modifié cette partie :

Code:

$doc->addStyleSheet('//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
$doc->addScript('//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js', array('version'=>'auto'));
$doc->addScript('//code.jquery.com/jquery-1.11.1.min.js', array('version'=>'auto'));

par ça mais je n'ai pas remarqué de changements, ni de bug :

Code:

$doc->addStyleSheet('https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css');
$doc->addScript('https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js', array('version'=>'auto'));
$doc->addScript('https://code.jquery.com/jquery-1.11.1.min.js', array('version'=>'auto'));

**woluweb** · 09/12/2021, 18h55

pour la position, sois juste sûr de mettre "afficher le titre" sur Non et de choisir une position qui existe sur ton site (debug p ex).
Mais peu importe laquelle vu que de toute façon on n'affiche pas de contenu : on ne fait qu'injecter du code dans le <head> ...

**dolmenhir** · 09/12/2021, 19h07

Envoyé par lordbdp Voir le message

Comment faire pour réaliser les modifications de couleur sans que cela n'affecte le CSS d'origine du template ? Je passe par le biais du Module de contenu personnalisé aussi ?

En général, un template bien fait doit permettre d'ajouter une ou plusieurs feuille de style personnalisées dans le dossier css.
Le template natif de Joomla le charge automatiquement s'il se nomme user.css
pour d'autres c'est custom.css
mais certains templates charge carrément tous les fichier css contenu dans le dossier css du template.
Et normalement, ces fichiers personnalisés sont chargé après le css du template, donc les déclarations de classe supplémentaires ou en doublons se substituent à celle chargées avant (par le css du template).

sinon tu ajoutes ce css personnalisé de la même manière que tu l'as fait avec ton module

**dolmenhir** · 09/12/2021, 19h13

par contre, je sais pas avec quel écran tu testes le rendu du site, mais moi j'ai en écran principal un 28" 4k (3840px) et ton site tout en largeur fait un peu dépouillé (au sens péjoratif du terme).
Sur mon second écran en 24" full hd (1920px) c'est pas forcément génial non plus, mais c'est moins pire.

**lordbdp** · 09/12/2021, 20h39

Envoyé par woluweb Voir le message

pour la position, sois juste sûr de mettre "afficher le titre" sur Non et de choisir une position qui existe sur ton site (debug p ex).
Mais peu importe laquelle vu que de toute façon on n'affiche pas de contenu : on ne fait qu'injecter du code dans le <head> ...

J'ai un soucis alors car si je choisi une position, le code s'affiche

**woluweb** · 09/12/2021, 20h57

ha, ça c'est pas possible que ça s'affiche
es-tu sûr d'avoir choisir le Layout sur l'onglet idoine ? (cfr mon screenshot)

**lordbdp** · 10/12/2021, 20h18

Envoyé par woluweb Voir le message

ha, ça c'est pas possible que ça s'affiche
es-tu sûr d'avoir choisir le Layout sur l'onglet idoine ? (cfr mon screenshot)

Il est sur Défaut (j'ai rien d'autre

), mais tu as mis le Style du module sur quoi ? Moi il est sur Hérité.

**woluweb** · 10/12/2021, 23h04

Ok cherche d'abord comment faire un Alternate Layout si tu ne connais pas bien...

Soucis suite ajout JS dans le head

[Problème] Soucis suite ajout JS dans le head

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association