Soucis suite ajout JS dans le head - Forums Joomla.fr

X

lordbdp a répondu

27/12/2021, 11h15
un petit up (>
Laisser un commentaire:
lordbdp a répondu

15/12/2021, 17h48
Envoyé par dolmenhir Voir le message

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.

Bizarre car j'ai bien une valeur dans le css :

Code:

.ttr_slogan_style { font-size:16px; font-family:"Arial"; font-weight:400; font-style:normal; color:#45515A; text-shadow:none;text-align:left; text-decoration:none;text-transform:none; margin:0; line-height:normal; padding:0; background:none; display: block; }

En revanche voilà ce qui est dans le index.php du template :

Code PHP:

.ttr_slogan_style { font-size:<?php echo $this->params->get('Site_Slogan_FontSize'); ?>px; <?php $color = $this->params->get('site_slogan_color'); if ( $color ) { echo 'color: ' . $color . ';'; } ?> }
Dernière édition par lordbdp à 15/12/2021, 18h45
Laisser un commentaire:
lordbdp a répondu

15/12/2021, 17h30
Envoyé par woluweb Voir le message

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

J'ai donc créer le layout de mod_custom nommé default2.php, mais je supprime complètement le code d'origine ? Ou bien je remplace uniquement

Code PHP:

<?php echo $module->content; ?>

par

Code PHP:

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

Du coup si je mets tout le code JS et CSS dans le layout du module, une fois coté admin je retourne sur le module créé et en contenu je mets la partie HTML qui est en rapport au lieu de l'avoir dans le Code de mon article ? Ou je balance la totalité du script dans le layout du module ?

Je sais ça paraît super simple en théorie mais en pratique pour les néophytes c'est plus la même (en plus je n'ai pas trouvé tes articles...).
Laisser un commentaire:
woluweb a répondu

11/12/2021, 14h32
Va voir mes 2 drtnier articles fs le Joomla Community magazine, pour un autre module j explique ct faire.
Doit via interface soit via ftp
Laisser un commentaire:
lordbdp a répondu

11/12/2021, 12h22
Envoyé par woluweb Voir le message

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

J'ai trouvé comment faire sur Jommlashack, mais c'est bien le default.php qui se trouve dans modules\mod_custom\tmpl que je dois copier ?
Laisser un commentaire:
woluweb a répondu

10/12/2021, 23h04
Ok cherche d'abord comment faire un Alternate Layout si tu ne connais pas bien...
Laisser un commentaire:
lordbdp a répondu

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é.
Laisser un commentaire:
woluweb a répondu

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)
Laisser un commentaire:
lordbdp a répondu

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
Laisser un commentaire:
dolmenhir a répondu

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.

Dernière édition par dolmenhir à 09/12/2021, 19h16
"J'aime" 1
Laisser un commentaire:
dolmenhir a répondu

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
Laisser un commentaire:
woluweb a répondu

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> ...
Laisser un commentaire:
lordbdp a répondu

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'));
Dernière édition par lordbdp à 09/12/2021, 19h00
Laisser un commentaire:
dolmenhir a répondu

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.
Laisser un commentaire:
dolmenhir a répondu

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.
Laisser un commentaire:

Précédent 1 2 template Suivant

Travaille ...

X