28172 sujets

CSS et mise en forme, CSS3

Bonjour
De retour, car je n'arrive pas à finaliser le transfert de mon code https://forum.alsacreations.com/topic-4-89302-1-Reduire-format-image-sur-une-page-blog.html qui fonctionnait sur le site de test.
Je pense que cela vient du fait que vu le nombre de l'introduction de sous-menu (car le nbr d'items de menu va poser un problème)
Fatigue et pas très compétent là-dessus, je me demande aussi si c'est possible

=> Ce qui fonctionne ; l'affichage d'une icône correspondant à la bonne catégorie/item de menu sur https://cochanger.eu/media-web/calculateur-taxe-carbone-juste. Logique il n'y a qu'un item.
=> Ce qui ne fonctionne pas?; l'affichage d'une icône correspondant à la bonne catégorie/item de menu sur https://cochanger.eu/documents ou sur la page accueil du site. Il ya un mélange de catégorie sur un menu type blog

Je m'aperçois que l'url de la catégorie en haut de l'encadre de chaque article mentionne les termes "association-collectif", "lieu-avec-activites" ... ce qui pourrait peut-être permettre d'identifier la catégorie pour utiliser la bonne icône ?

Le code est

/* mise en page titre blog avec icone */
h2 {
  border-bottom: 2px solid red;
  margin-left: 40px;
}
h2::before {
  font-family: "Font Awesome 5 Free";
  content: "\f133";
  font-weight: 400;
  display: inline-block;
  width: 40px;
  text-align: center;
  margin-left: -40px;
}

Modifié par HDcms (09 Aug 2022 - 13:45)
Bonjour
Je pense que celà n'est pas forcément possible, sinon j'essaierai de faire cela en php mais cela m'embête plus.
Bonjour
J'essaie encore, car sinon je devrais enlever les icônes, ce qui est moins jolie.
Est-ce que ce que je dis est compréhensible?? J'ai modifié l'explication du 1er post aujourd'hui
Est-ce possible ?
Modifié par HDcms (09 Aug 2022 - 13:45)
Bonjour
Bon je ne suis pas arrivé à faire de surcharge en php.
Du coup, j'ai enlevé les icônes dans les parties blog et je trouve cela moche.
En même temps, en regardant le code source, je vois

<div class="item-content">
			<div class="page-header">
					<h2 itemprop="name">
									<a href="/autour-de-film/ztemp-autour-film" itemprop="url">
						zTemp autour film					</a>
							</h2>
		
		
		
			</div>


<div class="item-content">
			<div class="page-header">
					<h2 itemprop="name">
									<a href="/editeur-media-hors-web/editeur1" itemprop="url">
						z Tmp - Editeur1					</a>
							</h2>
		
		
		
			</div>

Je me demandais si c'était possible de pointer en fonction du début contenu de l'url qui contient la catégorie ? dernière chance ?
Modifié par HDcms (17 Aug 2022 - 18:16)
Modérateur
Bonjour,
oui c'est tout à fait faisable sur les liens eux mêmes
exemple
a[href^="/autour-de-film/"]::before {
  content: "unicode de ton icone film"; /* + font-family+fontweight eventuellement*/
}
a[href^="/editeur-media-hors-web/"]::before {
  content: "idem";
}


Cdt
Bonjour
C'est génial Smiley smile , cela permet bien de cibler précisément un élément d'une liste
https://cochanger.eu/organisations
Néanmoins, j'ai un souci avec le content

a[href^="/autour-de-film/"]::before {
  font-family: "Font Awesome 5 Free";
	content: "\f03d"; 
	font-weight: 400;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -40px;
}
a[href^="/editeur-media-hors-web/"]::before {
 font-family: "Font Awesome 5 Free";
	content: "\f133"; 
	font-weight: 400;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -40px;
}

Je n'arrive pas à utiliser alors que l'icone est bien rendu sur la page
https://cochanger.eu/autour-de-film/ztemp-autour-film
et que j'ai été voir sur https://fontawesome.com/search?q=video&m=free&s=solid pour récupérer "f03d"
Ou est-ce que j'ai fais une erreur ?
Si ce n'est pas possible, peut-t-on mettre comme l'autre 'fas fa-film' ?
ou le glyp?
Cdt
Modérateur
Re,

c'est ton font-weight qui ne correspond pas, il te faut :
font-weight: 900 /* valeurs okay : 600,700,800,900*/;
ou
font-weight: bold;
ou
font-weight: bolder;
pour cette icône gratuite Smiley cligne
Modifié par gcyrillus (18 Aug 2022 - 12:47)
Re
Encore une fois merci
Erreur en reprenant la valeur 400px au lieu de 900px !!
Sinon j'ai un autre soucis, j'ai une belle page blog avec un icone selon les types de catégories
Néanmoins, je n'arrive pas à avoir le même icone sur la page finale
https://cochanger.eu/lieu-avec-activites/cochanger-eu

Dans le 1er cas, j'ai mis
a[href^="/association-collectif/"]::before {
  	font-family: "Font Awesome 5 Free";
	content: "\f0c0"; 
	font-weight: 900;
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-left: -40px;
}


Dans le 2ème cas, j'ai fais plusieurs essais dont
<i class='fas fa-location-dot' aria-hidden='true'>


A moins d'une erreur bête, y t-il encore un moyen de contournement, voir mettre le content: "\f0c0"; dans la class ?

@+
ps: j'ai j'imagines ? le même problème pour https://cochanger.eu/editeur-media-hors-web/editeur1
Modifié par HDcms (18 Aug 2022 - 14:24)
Modérateur
En regardant ta feuille de style font-awesome, on voit que tu utilises la version 5.15.4. En faisant une recherche de nom dans ce fichier sur "location-dot", on ne voit aucune occurence. Je dirais donc que tu devrais mettre à jour la librairie car l'icône que tu veux utiliser n'est pas dans cette version.
Smiley smile
Bonjour
Yordi a écrit :
En regardant ta feuille de style font-awesome, on voit que tu utilises la version 5.15.4. En faisant une recherche de nom dans ce fichier sur "location-dot", on ne voit aucune occurence. Je dirais donc que tu devrais mettre à jour la librairie car l'icône que tu veux utiliser n'est pas dans cette version.
Smiley smile

Ah ok malheureusement, je ne sais pas faire la maj de la bibliothèque ? car c'est celle intégré par défaut par joomla 4.x.

Avec toutes ces versions, je ne comprends pas pourquoi cela dès fois, cela fonctionne (déjà vu une icone passé et une autre non avec la même fourchette de version genre 5 à 6 !) notamment avec la valeur du content sur la partie blog.
Dans un cas, j'ai réussi à avoir l'icone sur la page article en ajoutant font-weight='900px' Smiley rolleyes

<i class='fas fa-file-contract' aria-hidden='true' font-weight='900px'></i> 


Cela ne fonctionne pas dans les 2 cas mentionnés. Smiley decu
Dans la class sur la page de l'article, il n'y aurait pas moyen d'utiliser la même valeur ? ou le glyph ?
Modifié par HDcms (18 Aug 2022 - 16:13)
Bonsoir
Pas d'autres solutions de contournement ? si non je vais intégrer 1 icone différent pour la page en attendant l'intégration de la version 6.x
Bonjour
Relance sur mes 2 derniers posts à tout hasard pour personne rentrée de vacances ?
Bonjour
Celà semblait une bonne piste. Merci.
J'ai renommé le dossier 5.1.2 et téléchargé le nouveau.
Après maj du cache et plusieurs essais, je pense que cela doit être un peu plus compliqué.
Bon je vais me résoudre à attendre et mettre en attendant des icônes moins bien sur la page de l'article
@+