27572 sujets

CSS et mise en forme, CSS3

Bonjour,
en cours de migrer un site sur les logiciels libres de wordpress à joomla.
L'ancien site possédait un plugin de shortcode qui réalisait une belle mise en page.

Nous cherchons à faire une mise en page au moins aussi agréable et fonctionnelle. [A moins d'avoir des modèles de layout tout fait pour la présentation d'une fiche documentaire m’étonnerait que cela existe, mais n’hésitez pas à nous en suggérer même dans quelques mois, cela pourra tjs servir].

En partant sur ce layout, nous avons vu que ce plugin utilisait des images plutôt que du css.
https://www.clibre.eu/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit/
Mon niveau en css étant faible, pouvez-vous nous suggérer le code css pour les 3 points afin de le porter sur le nouveau site (en cours de dev donc pas https:// =>v2.clibre.eu/fr/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit )

1/ encadrement accroche
"Mozilla Firefox est un navigateur Web libre et gratuit"

2/ séparateur
"---- Caractéristiques ----"

3/ encadré
" Mots clés "

@+
Modifié par HDcms (07 Oct 2020 - 13:42)
Salut,

Tu peux tout à fait reproduire le CSS d'un élément en le copiant depuis le site:
_ F12 + inspecteur ( puis sélectionner l’élément voulu )

Pour le picto du séparateur c'est pareil il s'agit d'un SVG, le code est visible clairement:

<path d="M 104.3125 0 L 104.3125 699.84375 L 0 699.84375 L 0 953.90625 L 367.28125 953.90625 L 367.28125 699.84375 L 262.96875 699.84375 L 262.96875 0 L 104.3125 0 z M 520.75 0 L 520.75 451.75 L 416.34375 451.75 L 416.34375 705.8125 L 783.65625 705.8125 L 783.65625 451.75 L 679.3125 451.75 L 679.3125 0 L 520.75 0 z M 937.03125 0 L 937.03125 201.625 L 832.71875 201.625 L 832.71875 455.6875 L 1200 455.6875 L 1200 201.625 L 1095.6875 201.625 L 1095.6875 0 L 937.03125 0 z M 885.9375 252.03125 L 1146.7812 252.03125 L 1146.7812 302.46875 L 885.9375 302.46875 L 885.9375 252.03125 z M 937.03125 498.125 L 937.03125 1200 L 1095.6875 1200 L 1095.6875 498.125 L 937.03125 498.125 z M 469.59375 502.15625 L 730.40625 502.15625 L 730.40625 552.59375 L 469.59375 552.59375 L 469.59375 502.15625 z M 520.75 746.1875 L 520.75 1200 L 679.3125 1200 L 679.3125 746.1875 L 520.75 746.1875 z M 53.21875 750.21875 L 314.0625 750.21875 L 314.0625 800.65625 L 53.21875 800.65625 L 53.21875 750.21875 z M 104.34375 996.3125 L 104.34375 1200 L 263 1200 L 263 996.3125 L 104.34375 996.3125 z "></path>
Bonjour,

Euh ce n'est pas si simple pour moi Smiley ohwell
J'avai bien pensé à cette méthode mais je me demande s'il n'y a pas plus simple ou rapide dans des bibliothèques ue certains peuvent avoir (comme d'aures codes) ou des sites qui donneraient un résultat même approchant https://la-cascade.io/

2/ séparateur
<h4 class="intense hr-title " style="background-color: #FCFCFC; border-radius: 25%px; "><i class="intense icon icon-2x"><svg><use xlink:href="#elusive-link" class="" style="fill: rgb(68, 68, 68);"></use></svg></i> Liens ressources web externes</h4>

De mon côté je ne vois pas de svg et ne sait pas comment le générer

autre exemple 1/ et 3/ utilisent image
pour faire l'effet de soulignement (je ne sais pas son nom en css)
...<img src="https://www.clibre.eu/wp-content/plugins/intense/assets/img/shadow3.png" ...
Modérateur
Bonjour,

Il y a bien un svg. Il est plus bas dans la page (il faut le chercher via son id qui est spécifié dans la balise <use> du bout de code que tu as indiqué).

Ci-dessous la partie de code de https://www.clibre.eu/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit/ qui fait les 3 points demandés.

Les feuilles de style proviennent de :
https://www.clibre.eu/wp-content/themes/betheme/css/
Je n'y ai pas touché.

Edit : attention, en fin de code il y a une feuille de style, intense_3bc05b1753073b7d7d3ddd2262104f38fa838972.css, qui provient de https://www.clibre.eu/wp-content/uploads/intense-cache/css/

J'ai gardé la même structure html que dans https://www.clibre.eu/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit/ (elle peut être simplifiée en fonction du contexte).

Le problème est que si on touche à cette structure, ce n'est plus parfaitement responsive (ou alors il faut modifier le css en conséquence, et tenir compte de la structure de la future page). C'est difficile de deviner jusqu'où il faudrait aller en étant extérieur au projet.

J'ai simplifié, mais ça reste volumineux.

<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" id="mfn-base-css" href="base.css" type="text/css" media="all">
<link rel="stylesheet" id="mfn-layout-css" href="layout.css" type="text/css" media="all">
<link rel="stylesheet" id="mfn-shortcodes-css" href="shortcodes.css" type="text/css" media="all">
<link rel="stylesheet" id="mfn-responsive-css" href="responsive.css" type="text/css" media="all">
<link rel="stylesheet" id="mfn-skin-blue-css" href="style.css" type="text/css" media="all">
<style>
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Patua One';
  font-style: normal;
  font-weight: 400;
  src: local('Patua One'), local('PatuaOne-Regular'), url(https://fonts.gstatic.com/s/patuaone/v11/ZXuke1cDvLCKLDcimxB44_luFgxbuQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style>
	#Wrapper, #Content {background-color: #FCFCFC;}
	body {font-family: "Roboto", Arial, Tahoma, sans-serif;}
	h3, h4 {font-family: "Patua One", Arial, Tahoma, sans-serif;}
	body {font-size: 13px;line-height: 21px;font-weight: 400;letter-spacing: 0px;}
	h3 {font-size: 25px;line-height: 27px;font-weight: 300;letter-spacing: 0px;}
	h4 {font-size: 21px;line-height: 25px;font-weight: 300;letter-spacing: 0px;}
	@media only screen and (min-width: 768px) and (max-width: 959px)
	{
		body {font-size: 13px;line-height: 19px;}
		h3 {font-size: 21px;line-height: 23px;}
		h4 {font-size: 18px;line-height: 21px;}
	}
	@media only screen and (min-width: 480px) and (max-width: 767px)
	{
		body {font-size: 13px;line-height: 19px;}
		h3 {font-size: 19px;line-height: 20px;}
		h4 {font-size: 16px;line-height: 19px;}
	}
	@media only screen and (max-width: 479px)
	{
		body {font-size: 13px;line-height: 19px;}
		h3 {font-size: 15px;line-height: 19px;}
		h4 {font-size: 13px;line-height: 19px;}
	}
	.with_aside .sections_group {width: 77%;}
	.aside_both .sections_group {width: 64%;margin-left: 18%;}
	@media only screen and (min-width:1240px)
	{
		#Wrapper, .with_aside .content_wrapper {max-width: 1240px;}
		.section_wrapper, .container {max-width: 1220px;}
	}
</style>
</head>
<body class="single with_aside aside_right color-blue style-default layout-full-width mobile-tb-left">
	<!-- #Wrapper -->
	<div id="Wrapper">
		<!-- #Content -->
		<div id="Content">
			<div class="content_wrapper clearfix">
				<!-- .sections_group -->
				<div class="sections_group">
					<div class="no-title no-share post type-post status-publish format-standard has-post-thumbnail hentry category-application-mobile category-logiciel-ordinateur tag-navigateur-internet">
						<div class="post-wrapper-content">
							<div class="section the_content has_content">
								<div class="section_wrapper">
									<div class="the_content_wrapper">
										<div>
											<div class="intense well " style="margin-bottom: 0; background-color: #e8e8e8 !important; color: #333333 !important;     border-left: 3px solid #1a8be2 !important;  ">
												<h3>Mozilla Firefox est un navigateur Web libre et gratuit</h3>
												<div class="clearfix"></div>
											</div>
											<img src="shadow3.png" class="intense shadow" style="vertical-align: top; border:0px; border-radius: 0px; box-shadow: 0 0 0;" alt="">
										</div>
										<div class="intense hr horizontal hr-center  ">
											<h4 class="intense hr-title " style="background-color: #FCFCFC; border-radius: 25%px; ">
												<i class="intense icon icon-2x">
													<svg><use xlink:href="#elusive-adjust-alt" class="" style="fill: rgb(68, 68, 68);"></use>
													</svg>
												</i>
												Caractéristiques
											</h4>
											<span class="intense hr-inner hr-solid shadow " style="border-color: #a3a3a3; border-width: 0; border:0px; border-radius: 0px; box-shadow: 0 0 0; ">
												<img src="shadow1.png">
											</span>
										</div>
										<div>
											<div style="margin-bottom: 0;">
												<div class="intense ipanel" style=" margin-bottom: 10px; border: 1px solid #1a8be2 !important;  border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
													<div class="intense ipanel-heading" style="color: #fff; background: #1a8be2;  border-top-left-radius:5px; border-top-right-radius:5px;">
														<h4 class="intense ipanel-title">
															Mots clés
														</h4>
													</div>
													<div class="intense ipanel-body" style="color: #444; background: #ffffff;  border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
														<a class="mfn-link mfn-link-8 " href="https://www.clibre.eu/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit/" data-hover="navigateur internet" ontouchstart="this.classList.toggle(&#39;hover&#39;);">
															<span data-hover="navigateur internet">navigateur internet</span>
														</a>
													</div>
												</div>
											</div>
											<img src="shadow3.png" class="intense shadow" style="vertical-align: top; margin-bottom: 10px;  margin-top: -10px; " alt="">
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div><!-- #Wrapper -->
<link rel="stylesheet" id="intense-custom-css-css" href="intense_3bc05b1753073b7d7d3ddd2262104f38fa838972.css" type="text/css" media="all">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
	<symbol id="elusive-adjust-alt" viewBox="0 0 1200 1200">
		<path d="M 104.3125 0 L 104.3125 699.84375 L 0 699.84375 L 0 953.90625 L 367.28125 953.90625 L 367.28125 699.84375 L 262.96875 699.84375 L 262.96875 0 L 104.3125 0 z M 520.75 0 L 520.75 451.75 L 416.34375 451.75 L 416.34375 705.8125 L 783.65625 705.8125 L 783.65625 451.75 L 679.3125 451.75 L 679.3125 0 L 520.75 0 z M 937.03125 0 L 937.03125 201.625 L 832.71875 201.625 L 832.71875 455.6875 L 1200 455.6875 L 1200 201.625 L 1095.6875 201.625 L 1095.6875 0 L 937.03125 0 z M 885.9375 252.03125 L 1146.7812 252.03125 L 1146.7812 302.46875 L 885.9375 302.46875 L 885.9375 252.03125 z M 937.03125 498.125 L 937.03125 1200 L 1095.6875 1200 L 1095.6875 498.125 L 937.03125 498.125 z M 469.59375 502.15625 L 730.40625 502.15625 L 730.40625 552.59375 L 469.59375 552.59375 L 469.59375 502.15625 z M 520.75 746.1875 L 520.75 1200 L 679.3125 1200 L 679.3125 746.1875 L 520.75 746.1875 z M 53.21875 750.21875 L 314.0625 750.21875 L 314.0625 800.65625 L 53.21875 800.65625 L 53.21875 750.21875 z M 104.34375 996.3125 L 104.34375 1200 L 263 1200 L 263 996.3125 L 104.34375 996.3125 z " id="path2998">
		</path>
	</symbol>
</svg>
</body>
</html>

Amicalement,
Modifié par parsimonhi (08 Oct 2020 - 00:58)
Modérateur
Bonjour,

Finalement, on arrive à se passer des feuilles de styles du theme bethem et à simplifier sans trop de casse. Il faudra juste revoir la largeur des conteneurs suivant la place disponible.

Il ne reste plus comme ressources externes que les images shadow1.png et shadow3.png, ainsi que la feuille de style intense_3bc05b1753073b7d7d3ddd2262104f38fa838972.css.
Voir :
https://www.clibre.eu/wp-content/plugins/intense/assets/img/shadow1.png
https://www.clibre.eu/wp-content/plugins/intense/assets/img/shadow3.png
https://www.clibre.eu/wp-content/uploads/intense-cache/css/intense_3bc05b1753073b7d7d3ddd2262104f38fa838972.css

On pourrait sans doute extraire de intense_3bc05b1753073b7d7d3ddd2262104f38fa838972.css les quelques styles dont on a besoin. Mais cette feuille de style étant énorme et peu lisible, je ne l'ai pas fait.

Si on ne veut pas de l'effet quand on fait un hover sur le lien "navigateur internet", il suffit de supprimer les styles "Muffin link" (voir dans le code ci-dessous).

Note : aucun javascript nécessaire, je les ai tous retiré.

<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Patua One';
  font-style: normal;
  font-weight: 400;
  src: local('Patua One'), local('PatuaOne-Regular'), url(https://fonts.gstatic.com/s/patuaone/v11/ZXuke1cDvLCKLDcimxB44_luFgxbuQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style>
body
{
	background-color: #FCFCFC;
	font-family: "Roboto", Arial, Tahoma, sans-serif;
	font-size: 13px;
	line-height: 21px;
	font-weight: 400;
}
body>div
{
	margin:2rem;
}
h3, h4 {font-family: "Patua One", Arial, Tahoma, sans-serif;}
h3 {font-size: 25px;}
h4 {font-size: 21px;}
@media only screen and (min-width: 768px) and (max-width: 959px)
{
	body {font-size: 13px;}
	h3 {font-size: 21px;}
	h4 {font-size: 18px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px)
{
	body {font-size: 13px;}
	h3 {font-size: 19px;}
	h4 {font-size: 16px;}
}
@media only screen and (max-width: 479px)
{
	body {font-size: 13px;}
	h3 {font-size: 15px;}
	h4 {font-size: 13px;}
}
/* Muffin link ----------------------------------------------------------------------- */
a.mfn-link {color: #656B6F}		
a.mfn-link-8:after,
a.mfn-link-8:before {background: #2195de}	
a:hover.mfn-link {color: #2991d6}
a.mfn-link{position:relative;display:inline-block;margin:15px 25px;font-size:15px;text-shadow:0 0 1px rgba(255,255,255,0.3);text-decoration:none;outline:none;white-space:nowrap}
a:hover.mfn-link{text-decoration:none}
a.mfn-link-8{padding:0 5px;font-weight:700;-webkit-transition:color .3s;-moz-transition:color .3s;transition:color .3s;position:relative;z-index:1}
a.mfn-link-8:before,a.mfn-link-8:after{position:absolute;width:100%;left:0;top:50%;height:2px;margin-top:-1px;content:'';z-index:-1;-webkit-transition:-webkit-transform 0.3s,opacity .3s;-moz-transition:-moz-transform 0.3s,opacity .3s;transition:transform 0.3s,opacity .3s;pointer-events:none}
a.mfn-link-8:before{-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);transform:translateY(-20px)}
a.mfn-link-8:after{-webkit-transform:translateY(20px);-moz-transform:translateY(20px);transform:translateY(20px)}
a:hover.mfn-link-8:before,a:hover.mfn-link-8:after,a.hover.mfn-link-8:before,a.hover.mfn-link-8:after{opacity:.7}
a:hover.mfn-link-8:before,a.hover.mfn-link-8:before{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
a:hover.mfn-link-8:after,a.hover.mfn-link-8:after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
a:hover.mfn-link-8:after,a:hover.mfn-link-8:before,a.hover.mfn-link-8:after,a.hover.mfn-link-8:before{background:rgba(0,0,0,0.1)}
</style>
</head>
<body>
<div>
	<div class="intense well " style="margin-bottom: 0; background-color: #e8e8e8 !important; color: #333333 !important;     border-left: 3px solid #1a8be2 !important;  ">
		<h3>Mozilla Firefox est un navigateur Web libre et gratuit</h3>
		<div class="clearfix"></div>
	</div>
	<img src="shadow3.png" class="intense shadow" style="vertical-align: top; border:0px; border-radius: 0px; box-shadow: 0 0 0;" alt="">
</div>
<div class="intense hr horizontal hr-center  ">
	<h4 class="intense hr-title " style="background-color: #FCFCFC; border-radius: 25%px; ">
		<i class="intense icon icon-2x">
			<svg><use xlink:href="#elusive-adjust-alt" class="" style="fill: rgb(68, 68, 68);"></use>
			</svg>
		</i>
		Caractéristiques
	</h4>
	<span class="intense hr-inner hr-solid shadow " style="border-color: #a3a3a3; border-width: 0; border:0px; border-radius: 0px; box-shadow: 0 0 0; ">
		<img src="shadow1.png">
	</span>
</div>
<div>
	<div style="margin-bottom: 0;">
		<div class="intense ipanel" style=" margin-bottom: 10px; border: 1px solid #1a8be2 !important;  border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
			<div class="intense ipanel-heading" style="color: #fff; background: #1a8be2;  border-top-left-radius:5px; border-top-right-radius:5px;">
				<h4 class="intense ipanel-title">
					Mots clés
				</h4>
			</div>
			<div class="intense ipanel-body" style="color: #444; background: #ffffff;  border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
				<a class="mfn-link mfn-link-8 " href="https://www.clibre.eu/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit/" data-hover="navigateur internet" ontouchstart="this.classList.toggle(&#39;hover&#39;);">
					<span data-hover="navigateur internet">navigateur internet</span>
				</a>
			</div>
		</div>
	</div>
	<img src="shadow3.png" class="intense shadow" style="vertical-align: top; margin-bottom: 10px;  margin-top: -10px; " alt="">
</div>
<link rel="stylesheet" id="intense-custom-css-css" href="intense_3bc05b1753073b7d7d3ddd2262104f38fa838972.css" type="text/css" media="all">
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
	<symbol id="elusive-adjust-alt" viewBox="0 0 1200 1200">
		<path d="M 104.3125 0 L 104.3125 699.84375 L 0 699.84375 L 0 953.90625 L 367.28125 953.90625 L 367.28125 699.84375 L 262.96875 699.84375 L 262.96875 0 L 104.3125 0 z M 520.75 0 L 520.75 451.75 L 416.34375 451.75 L 416.34375 705.8125 L 783.65625 705.8125 L 783.65625 451.75 L 679.3125 451.75 L 679.3125 0 L 520.75 0 z M 937.03125 0 L 937.03125 201.625 L 832.71875 201.625 L 832.71875 455.6875 L 1200 455.6875 L 1200 201.625 L 1095.6875 201.625 L 1095.6875 0 L 937.03125 0 z M 885.9375 252.03125 L 1146.7812 252.03125 L 1146.7812 302.46875 L 885.9375 302.46875 L 885.9375 252.03125 z M 937.03125 498.125 L 937.03125 1200 L 1095.6875 1200 L 1095.6875 498.125 L 937.03125 498.125 z M 469.59375 502.15625 L 730.40625 502.15625 L 730.40625 552.59375 L 469.59375 552.59375 L 469.59375 502.15625 z M 520.75 746.1875 L 520.75 1200 L 679.3125 1200 L 679.3125 746.1875 L 520.75 746.1875 z M 53.21875 750.21875 L 314.0625 750.21875 L 314.0625 800.65625 L 53.21875 800.65625 L 53.21875 750.21875 z M 104.34375 996.3125 L 104.34375 1200 L 263 1200 L 263 996.3125 L 104.34375 996.3125 z " id="path2998">
		</path>
	</symbol>
</svg>
</body>
</html>

Amicalement,
Modérateur
Bonjour,

Nouvelle version encore plus simplifiée. Les seules ressources externes sont les images shadow1.png et shadow3.png.

J'ai séparé les css des exemples en 3 "types" : classes type1, type2 et type3. Ils peuvent être utilisés indépendamment les uns des autres.

Le css commence par la déclaration des polices. Ça peut être modifié en cas de changement de police sans problème.

Ensuite, on a des adaptations de la taille des polices en fonction de la largeur du viewport. A adapter éventuellement en fonction de la place réellement disponible.

Enfin, on a les styles pour les 3 "types".

Ça peut paraitre encore un peu compliqué, mais en fait, ça doit s'intégrer assez facilement dans une page. Il faut tester.

<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* polices */
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Patua One';
  font-style: normal;
  font-weight: 400;
  src: local('Patua One'), local('PatuaOne-Regular'), url(https://fonts.gstatic.com/s/patuaone/v11/ZXuke1cDvLCKLDcimxB44_luFgxbuQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* style du body et tailles des polices */
body
{
	background-color: #FCFCFC;
	font-family: "Roboto", Arial, Tahoma, sans-serif;
	font-size: 13px;
	line-height: 21px;
}
body>div
{
	margin: 2em;
}
h3, h4 {font-family: "Patua One", Arial, Tahoma, sans-serif;}
h3 {font-size: 25px;}
h4 {font-size: 21px;}
@media only screen and (min-width: 768px) and (max-width: 959px)
{
	body {font-size: 13px;}
	h3 {font-size: 21px;}
	h4 {font-size: 18px;}
}
@media only screen and (min-width: 480px) and (max-width: 767px)
{
	body {font-size: 13px;}
	h3 {font-size: 19px;}
	h4 {font-size: 16px;}
}
@media only screen and (max-width: 479px)
{
	body {font-size: 13px;}
	h3 {font-size: 15px;}
	h4 {font-size: 13px;}
}
/* style des 3 types */
img.shadow
{
	display:block;
	width:100%;
}
.type1,
.type2,
.type3
{
	position: relative;
}
.type1:after,
.type3:after
{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1rem;
	height: 1rem;
	width:100%;
	background-image: url(shadow3.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
.type1 h3
{
	margin: 0;
	background-color: #e8e8e8;
	color: #333333;
	border-left: 3px solid #1a8be2;
	padding: 1.5em;
}
.type2
{
	text-align: center;
}
.type2 img
{
	display: block;
	width: 100%;
	position: absolute;
	bottom: 0.25em;
	z-index: -1;
}
.type2 h4
{
	margin: 0;
	height: 2em;
}
.type2 h4 span
{
	display: inline-block;
	background: #fff;
	padding-left: 0.25em;
	padding-right: 1em;
}
.type2 h4 svg
{
	display: inline-block;
	height: 2em;
	fill: rgb(68, 68, 68);
	background: #fff;
	padding-left: 1em;
}
.type3>div
{
	border-radius: 5px;
	border: 1px solid #1a8be2;
	overflow: hidden;
}
.type3>div>div
{
	color: #444;
	background: #fff;
	padding:1em;
}
.type3 h4
{
	margin: 0;
	background-color: #1a8be2;
	color: #fff;
	padding: 0.5em 1em;
	font-weight: light;
}
/* style du lien du type 3. Peut-être supprimé complètement si on ne veut pas d'animation quand on fait un hover sur le lien */
.type3 a {color: #656B6F}		
.type3 a:after,
.type3 a:before {background: #2195de}	
.type3 a:hover {color: #2991d6}
.type3 a {position:relative;display:inline-block;margin:15px 25px;font-size:15px;text-shadow:0 0 1px rgba(255,255,255,0.3);text-decoration:none;outline:none;white-space:nowrap}
.type3 a:hover {text-decoration:none}
.type3 a {padding:0 5px;font-weight:700;-webkit-transition:color .3s;-moz-transition:color .3s;transition:color .3s;position:relative;z-index:1}
.type3 a:before,
.type3 a:after {position:absolute;width:100%;left:0;top:50%;height:2px;margin-top:-1px;content:'';z-index:-1;-webkit-transition:-webkit-transform 0.3s,opacity .3s;-moz-transition:-moz-transform 0.3s,opacity .3s;transition:transform 0.3s,opacity .3s;pointer-events:none}
.type3 a:before {-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);transform:translateY(-20px)}
.type3 a:after {-webkit-transform:translateY(20px);-moz-transform:translateY(20px);transform:translateY(20px)}
.type3 a:hover:before,
.type3 a:hover:after,
.type3 a.hover:before,
.type3 a.hover:after {opacity:.7}
.type3 a:hover:before,
.type3 a.hover:before {-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}
.type3 a:hover:after,
.type3 a.hover:after {-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}
.type3 a:hover:after,
.type3 a:hover:before,
.type3 a.hover:after,
.type3 a.hover:before {background:rgba(0,0,0,0.1)}
</style>
</head>
<body>
<div class="type1">
	<h3>Mozilla Firefox est un navigateur Web libre et gratuit</h3>
</div>
<div class="type2">
	<img src="shadow1.png">
	<h4>
		<svg viewBox="0 0 1200 1200">
			<use xlink:href="#elusive-adjust-alt"></use>
		</svg><span>Caractéristiques</span>
	</h4>
</div>
<div class="type3">
	<div>
		<h4>Mots clés</h4>
		<div>
			<a href="https://www.clibre.eu/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit/" ontouchstart="this.classList.toggle(&#39;hover&#39;);">
				<span>navigateur internet</span>
			</a>
		</div>
	</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
	<symbol id="elusive-adjust-alt" viewBox="0 0 1200 1200">
		<path d="M 104.3125 0 L 104.3125 699.84375 L 0 699.84375 L 0 953.90625 L 367.28125 953.90625 L 367.28125 699.84375 L 262.96875 699.84375 L 262.96875 0 L 104.3125 0 z M 520.75 0 L 520.75 451.75 L 416.34375 451.75 L 416.34375 705.8125 L 783.65625 705.8125 L 783.65625 451.75 L 679.3125 451.75 L 679.3125 0 L 520.75 0 z M 937.03125 0 L 937.03125 201.625 L 832.71875 201.625 L 832.71875 455.6875 L 1200 455.6875 L 1200 201.625 L 1095.6875 201.625 L 1095.6875 0 L 937.03125 0 z M 885.9375 252.03125 L 1146.7812 252.03125 L 1146.7812 302.46875 L 885.9375 302.46875 L 885.9375 252.03125 z M 937.03125 498.125 L 937.03125 1200 L 1095.6875 1200 L 1095.6875 498.125 L 937.03125 498.125 z M 469.59375 502.15625 L 730.40625 502.15625 L 730.40625 552.59375 L 469.59375 552.59375 L 469.59375 502.15625 z M 520.75 746.1875 L 520.75 1200 L 679.3125 1200 L 679.3125 746.1875 L 520.75 746.1875 z M 53.21875 750.21875 L 314.0625 750.21875 L 314.0625 800.65625 L 53.21875 800.65625 L 53.21875 750.21875 z M 104.34375 996.3125 L 104.34375 1200 L 263 1200 L 263 996.3125 L 104.34375 996.3125 z " id="path2998">
		</path>
	</symbol>
</svg>
</body>
</html>

Amicalement,
Bonjour,
Merci pour ce travail approfondi.
Effectivement tout se trouve dans le css du plugin intense qui est énorme car couvre plein d'autres effets. Rien d'important n'est dans le css du thème betheme
Je n'avai pas spécialement envie de reprendre l'effet de survol, mais je regarderai car l'idée était de s'approcher de l'ancienne page.

J'aimerai aussi me passer des images shadow1.png et shadow3.png car on m'a dit que l'on peut faire la même chose en css (si un jour quelqu'un a ce code car je pense que j'utiliserai sur un autre site) sinon je mettrai l'image ou ... rien.

En attendant j'ai du boulot, d'abords de mettre les containers dans la surcharge de l'article joomla , ensuite d'intégrer tes suggestions du dernier post.
Je reviendrai ici présenté le résultat ou difficultés rencontrés
Bonne journée
Modérateur
Bonjour,

Comme la maison ne recule devant aucun sacrifice Smiley biggrin , voilà une version "sans image" (on utilise des css radial-gradients à la place).

EDIT : finalement j'ai remis encore une fois tout le code, avec de nouvelles simplifications, et correction de quelques maladresses.

<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* types */
.type1,
.type2,
.type3
{
	font-family: Tahoma, sans-serif;
	margin: 2rem;
	position: relative;
	min-width: 10em;
}
.type1:after,
.type3:after
{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1vw;
	height: 1vw;
	width:100%;
	background-image: radial-gradient(farthest-side at top center, #777, #888, #fff);
	background-size: 100%;
	background-position: top;
	background-repeat: no-repeat;
}
.type1 h3
{
	margin: 0;
	background-color: #e8e8e8;
	color: #333333;
	border-left: 3px solid #1a8be2;
	padding: 1.5em;
}
.type2
{
	text-align: center;
	background-image: radial-gradient(#777, #888, #fff);
	background-size: 100% 0.2vw;
	background-position: center bottom 0.5em;
	background-repeat: no-repeat;
}
.type2 h4
{
	display: inline-block;
	margin: 0;
	padding: 0 1em;
	background: #fff;
}
.type2 h4 svg
{
	height: 2em;
	fill: rgb(68, 68, 68);
}
.type3 div
{
	color: #444;
	background: #fff;
	padding:1em;
	margin: 0;
	border: 1px solid #1a8be2;
	border-bottom-left-radius: 0.25em;
	border-bottom-right-radius: 0.25em;
}
.type3 h4
{
	margin: 0;
	background-color: #1a8be2;
	color: #fff;
	padding: 0.5em 1em;
	font-weight: light;
	border:0;
	border-top-left-radius: 0.25em;
	border-top-right-radius: 0.25em;
}
/* style du lien du type 3 */
.type3 a
{
	display:inline-block;
	position:relative;
	z-index:1;
	color: #656B6F;
	transition:color .3s;
	padding:0 0.25em;
	margin:1em 1.5em;
	text-shadow:0 0 1px rgba(255,255,255,0.3);
	text-decoration:none;
	outline:none;
}
.type3 a:before,
.type3 a:after
{
	content:'';
	position:absolute;
	background: #2195de;
	width:100%;
	left:0;
	top:50%;
	height:2px;
	margin-top:-1px;
	z-index:-1;
	transition:transform 0.3s,opacity .3s;
	pointer-events:none;
}
.type3 a:before {transform:translateY(-20px)}
.type3 a:after {transform:translateY(20px)}
.type3 a:hover {color: #2991d6}
.type3 a:hover:before,
.type3 a:hover:after,
.type3 a.hover:before,
.type3 a.hover:after {opacity:.7;background:rgba(0,0,0,0.1)}
.type3 a:hover:before,
.type3 a.hover:before {transform:rotate(45deg)}
.type3 a:hover:after,
.type3 a.hover:after {transform:rotate(-45deg)}
</style>
</head>
<body>
<div class="type1">
	<h3>Mozilla Firefox est un navigateur Web libre et gratuit</h3>
</div>
<div class="type2">
	<h4>
		<svg viewBox="0 0 1200 1200">
			<use xlink:href="#elusive-adjust-alt"></use>
		</svg>
		Caractéristiques
	</h4>
</div>
<div class="type3">
	<h4>Mots clés</h4>
	<div>
		<a href="https://www.clibre.eu/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit/" ontouchstart="this.classList.toggle('hover');">
			<span>navigateur internet</span>
		</a>
	</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
	<symbol id="elusive-adjust-alt" viewBox="0 0 1200 1200">
		<path d="M 104.3125 0 L 104.3125 699.84375 L 0 699.84375 L 0 953.90625 L 367.28125 953.90625 L 367.28125 699.84375 L 262.96875 699.84375 L 262.96875 0 L 104.3125 0 z M 520.75 0 L 520.75 451.75 L 416.34375 451.75 L 416.34375 705.8125 L 783.65625 705.8125 L 783.65625 451.75 L 679.3125 451.75 L 679.3125 0 L 520.75 0 z M 937.03125 0 L 937.03125 201.625 L 832.71875 201.625 L 832.71875 455.6875 L 1200 455.6875 L 1200 201.625 L 1095.6875 201.625 L 1095.6875 0 L 937.03125 0 z M 885.9375 252.03125 L 1146.7812 252.03125 L 1146.7812 302.46875 L 885.9375 302.46875 L 885.9375 252.03125 z M 937.03125 498.125 L 937.03125 1200 L 1095.6875 1200 L 1095.6875 498.125 L 937.03125 498.125 z M 469.59375 502.15625 L 730.40625 502.15625 L 730.40625 552.59375 L 469.59375 552.59375 L 469.59375 502.15625 z M 520.75 746.1875 L 520.75 1200 L 679.3125 1200 L 679.3125 746.1875 L 520.75 746.1875 z M 53.21875 750.21875 L 314.0625 750.21875 L 314.0625 800.65625 L 53.21875 800.65625 L 53.21875 750.21875 z M 104.34375 996.3125 L 104.34375 1200 L 263 1200 L 263 996.3125 L 104.34375 996.3125 z " id="path2998">
		</path>
	</symbol>
</svg>
</body>
</html>

Amicalement,
Modifié par parsimonhi (08 Oct 2020 - 18:00)
Bonsoir
Ok merci j'avance doucement mais sûrement.
D'abords des questions d'ordre générales

src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;

j'imagine que la 1ère permet un téléchargement plus rapide que ce que j'ai actuellement ?
pour unicode-range, a quoi ça sert ? il ne faut pas se tromper d'une lettre !

Pour l'adaptation
.type2 img
{
	display: block;
	width: 100%;
	position: absolute;
	bottom: 0.25em;
	z-index: -1;
}

est-ce que cela sert encore ?

<symbol id="elusive-adjust-alt" viewBox="0 0 1200 1200">

Là je vais chercher à plutôt utiliser un icône "Font Awesome icons" 4.7 car inclus dans le thème et me semble plus simple à rechercher. Du coup je fais sauter tout ce qui concerne le svg?

Pour l'effet de survol sur un terme, je rencontre une difficulté car il faudrait certainement que cela soit intégré autrement aux champs personnalisés de Joomla.
Je vais chercher s'il y a une autre solution d'animation mais c'est anecdotique

@+
Modérateur
Bonjour,
HDcms a écrit :
Bonsoir
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;

j'imagine que la 1ère permet un téléchargement plus rapide que ce que j'ai actuellement ?
pour unicode-range, a quoi ça sert ? il ne faut pas se tromper d'une lettre !

Je n'ai fait que reprendre le code qui était dans l'une des feuilles de style de l'ancienne page de ton site. Les unicode-range précisent les caractères concernés. En pratique on ne touche quasi jamais à ça.

En fait ce code est le code généré par les scripts de https://fonts.google.com/

Par exemple pour la police Roboto, si tu fais une recherche sur https://fonts.google.com/, le site va te conseiller pour inclure la police dans ton site une ligne du genre :
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">

Et si tu affiches le code source de ta page contenant ça via un navigateur, tu verras que le code de cette ligne génère en fait des instructions css du genre de celles que j'ai mis dans mes exemples (c'est légèrement plus rapide pour le chargement de la page de mettre ce code css plutôt que la ligne avec le <link>). Il faut un peu d'expérience pour faire ça. Mais si tu as du mal avec tout ça, tu peux largement te contenter de mettre la ligne avec la balise <link> ci-dessus.

HDcms a écrit :
Pour l'adaptation
.type2 img
{
	display: block;
	width: 100%;
	position: absolute;
	bottom: 0.25em;
	z-index: -1;
}

est-ce que cela sert encore ?

Non, ça ne sert plus. J'avais oublié de le retirer, mais je l'ai retiré a posteriori dans mon dernier exemple.

HDcms a écrit :
&lt;symbol id="elusive-adjust-alt" viewBox="0 0 1200 1200"&gt;

Là je vais chercher à plutôt utiliser un icône "Font Awesome icons" 4.7 car inclus dans le thème et me semble plus simple à rechercher. Du coup je fais sauter tout ce qui concerne le svg?

Tu peux. Tu essaies. Et tu vois ce que ça donne.

HDcms a écrit :
Pour l'effet de survol sur un terme, je rencontre une difficulté car il faudrait certainement que cela soit intégré autrement aux champs personnalisés de Joomla.
Je vais chercher s'il y a une autre solution d'animation mais c'est anecdotique

Oui c'est anecdotique, et c'est la raison pour laquelle j'ai mis ce code séparé du reste dans mes exemples.

Amicalement,
Bonjour,
Dernière ligne droite. Voici le résultat:
https://v2.clibre.eu/fr/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit
Je suis content mais si pourrais-tu m’accompagner pour les points suivants

a) alignement du texte à droite de l'image
Le plus important. L'image est généré dans un div. J'ai fait cela pour la mettre en ligne mais après plusieurs essais, je n'arrive tjs pas à monter le texte en dessous à droite de l'image.
.econaImage  {
	display:inline-block; /*.econaArticleImageBlock, ZZ EN COURS */ 
	text-align: left;}

Une partie est générée donc plus difficile d'accès! des idées ?

b) séparateur
J'ai mis un icon de fontawesome.com, mais il est rayé. Est-ce possible d'enlever cette rayure?
<div class="separateur">
	<h4>
		<svg viewBox="0 0 1200 1200">
			<i class="fa fa-link" aria-hidden="true"></i>

		</svg><span>Autres Informations</span>
	</h4>
</div>

Sinon je me rabattrai sur les svg mais je connais moins bien
J'ai vu plusieurs sites ressources, mais certains sont payant. J'ai trouvé https://www.flaticon.com/

c) Encadré
Plus embêtant, les mots sont collés par défaut à gauche. J'ai voulu les espace un peu mais il espace tout les mots. Est- ce possible de mettre un espace juste après la virgule ?
J'enlève l'effet mais pour info, j'envisage peut-être un jour d'intégrer un effet en m'appuyant sur https://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/ Ca m'a l'air sympa, pas hors standard maintenant ?
@+
Modérateur
Bonjour,
HDcms a écrit :

Dernière ligne droite. Voici le résultat:
https://v2.clibre.eu/fr/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit
Je suis content mais si pourrais-tu m’accompagner pour les points suivants

Ça prend forme en effet. Je dois dire d'ailleurs que je te voyais assez mal parti, le portage que tu essayais de faire, s'il était réalisé à l'identique, étant dans la catégorie assez difficile. Bravo d'avoir pu sortir quelque chose qui tient la route.

HDcms a écrit :

a) alignement du texte à droite de l'image
Le plus important. L'image est généré dans un div. J'ai fait cela pour la mettre en ligne mais après plusieurs essais, je n'arrive tjs pas à monter le texte en dessous à droite de l'image.
.econaImage  {
	display:inline-block; /*.econaArticleImageBlock, ZZ EN COURS */ 
	text-align: left;}

Une partie est générée donc plus difficile d'accès! des idées ?

Ton image est encapsulée dans div.econaImage lui-même encapsulé dans div.econaListImageBlock

Tu peux éventuellement simplifier (en retirant un des deux <div>). Et sur le <div> restant ou le <div> le plus externe si tu ne simplifies pas (donc ici div.econaListImageBlock), tu peux ajouter un propriété float:left (une solution parmi d'autres : à vérifier que ça donne bien ce que tu souhaites avec différentes tailles de fenêtre).
.econaListImageBlock {
    float: left;
}


HDcms a écrit :

b) séparateur
J'ai mis un icon de fontawesome.com, mais il est rayé. Est-ce possible d'enlever cette rayure?
&lt;div class="separateur"&gt;
	&lt;h4&gt;
		&lt;svg viewBox="0 0 1200 1200"&gt;
			&lt;i class="fa fa-link" aria-hidden="true"&gt;&lt;/i&gt;

		&lt;/svg&gt;&lt;span&gt;Autres Informations&lt;/span&gt;
	&lt;/h4&gt;
&lt;/div&gt;

Sinon je me rabattrai sur les svg mais je connais moins bien
J'ai vu plusieurs sites ressources, mais certains sont payant. J'ai trouvé https://www.flaticon.com/

Oui, c'est possible d'enlever la rayure. En fait tout est possible mais plus ou moins compliqué à réaliser. Smiley cligne

Bon, déjà, dans ton séparateur, il reste un <svg>...</svg> vide. Il faut le retirer. Ensuite, tu rajoutes un background à ton font-awesome qui viendra recouvrir le trait qui est en dessous, genre :
.separateur .fa {background:white;}

HDcms a écrit :

c) Encadré
Plus embêtant, les mots sont collés par défaut à gauche. J'ai voulu les espace un peu mais il espace tout les mots. Est- ce possible de mettre un espace juste après la virgule ?

Personnellement, je ne chercherais pas à rajouter plus d'espace après la virgule que l'espace standard (il faut bien sûr qu'il y ait un caractère espace après chaque virgule). D'un point de vue typographique, c'est mieux de laisser la police de caractère s'afficher comme cela a été prévu lors de sa conception. Mais si tu tiens absolument à rajouter des espaces après les virgules, tu peux les encapsuler par exemple dans un <span>, et donner à ces spams les propriétés css display:inline-block; et margin-right:0.25em; (ou toute autre valeur qui te conviendrait).

HDcms a écrit :

J'enlève l'effet mais pour info, j'envisage peut-être un jour d'intégrer un effet en m'appuyant sur https://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/ Ca m'a l'air sympa, pas hors standard maintenant ?

Des effets, ce n'est pas ça qui manque ! Smiley cligne

À toi de voir ce qui te plait ! C'est le plus important !

Amicalement,
Modérateur
Bonjour,

Pour le a), il faudrait aussi rajouter un clear:left sur la balise qui suit les paragraphes qui sont à afficher à la droite de l'image. On est ainsi certain que ce qui vient après ne sera pas aussi affiché à droite de l'image (ce qui serait probablement source de problèmes). C'est à dire :

div.share862 {clear:left;}

Amicalement,
Bonjour,

a) texte à coté image:
je bute et ce n'est pas la 1ère fois (plus d'un an!)
J'ai beau avoir ajouter ce que tu dis (même avec !important) et c'est actif sur le css:
v2.clibre.eu/_clibre-eu/css/communs_cLibre.eu.css
mais pas d'affichage.
J'ai essayé d'encadré le contenu par un span.
Plus difficile de toucher au code généré pour l'image !

b) séparateur
J'ai enlevé le svg et ajouté le code css, mais l'affichage est différent Smiley eek . Bon je ne souhaite ps d'embêter si cela est compliqué et prend trop de temps. Au pire, je reprends les svg avec le site dont je parlais pour trouver d'autres icônes.
Juste je trouve différent le trait plus fin (et plus agréable) sur l'ancien site. J’imagine que tu as copié le code sinon une idée s'il y a un paramètre css pour alléger, améliorer le rendu comme l'autre ?

c) encadré
Ok la encore je ne veux pas compliqué les choses et je peux en rester là. Néanmoins je vois souvent des after et je me demandais, est que c'est capable de reconnaître dans une chaine de caractère un ... caractère?

Oui tu as raison, cela m'affolait au départ, c'est pour cela que je repoussait depuis des mois. Je ne pensais pas y arriver et c'est grâce à tes simplifications et ton aide que l'on va y arriver.
Si tu veux que je te cites (avec ou sans site pro) dans les crédits, cela serait avec plaisir Smiley biggrin
Modifié par HDcms (09 Oct 2020 - 14:59)
Modérateur
Bonjour,
HDcms a écrit :
a) texte à coté image:
je bute et ce n'est pas la 1ère fois (plus d'un an!)
J'ai beau avoir ajouter ce que tu dis (même avec !important) et c'est actif sur le css:
v2.clibre.eu/_clibre-eu/css/communs_cLibre.eu.css
mais pas d'affichage.
J'ai essayé d'encadré le contenu par un span.
Plus difficile de toucher au code généré pour l'image !

Je me suis trompé dans mon post précédent. Le nom de la classe du conteneur "extérieur" est (actuellement) "econaArticleImageBlock" et non pas "econaListImageBlock". Mea culpa. Je me demande où j'ai pu pêcher l'autre nom !

HDcms a écrit :
b) séparateur
J'ai enlevé le svg et ajouté le code css, mais l'affichage est différent Smiley eek . Bon je ne souhaite ps d'embêter si cela est compliqué et prend trop de temps. Au pire, je reprends les svg avec le site dont je parlais pour trouver d'autres icônes.
Juste je trouve différent le trait plus fin (et plus agréable) sur l'ancien site. J’imagine que tu as copié le code sinon une idée s'il y a un paramètre css pour alléger, améliorer le rendu comme l'autre ?

L'épaisseur de la ligne peut se modifier facilement. C'est la ligne "background-size: 100% 0.2vw;" dans le css de .separateur qu'il faut modifier. L'épaisseur est représentée par la valeur 0.2vw (0,2% de la largeur du viewport). Tu peux essayer de modifier cette valeur. Tu peux aussi mettre des px ou des rem ou des em etc.

Tu peux aussi jouer sur les couleurs du trait : c'est la ligne "background-image: radial-gradient(#777, #888, #fff);". Tu peux même rajouter des couleurs intermédiaires.

Y a tout un tas d'autres possibilités aussi.

Dans l'ancienne page, c'était une image. Dans la nouvelle c'est du css. La correspondance est forcément approximative (en plus de ça, je n'ai pas vraiment cherché à faire la même chose).

HDcms a écrit :
c) encadré
Ok la encore je ne veux pas compliqué les choses et je peux en rester là. Néanmoins je vois souvent des after et je me demandais, est que c'est capable de reconnaître dans une chaine de caractère un ... caractère?

Il faut une balise autour des virgules, ou bien autour des mots clés. Ou bien il faut du javascript (qui rajoutera ces balises lors de l'affichage de la page).

Tu peux éventuellement regarder comment est générée ta liste de mots clés. Peut-être qu'il est possible avec quelques changements de fabriquer cette liste en mettant chaque mot clé à l'intérieur d'un <span>, et sans mettre de virgule. Si on a ce html à disposition, on peut ensuite rajouter les virgules et de l'espace après les virgules comme on veut en css.

Par exemple, au lieu de "Chrome, Microsoft edge, Safari", si on a "<span>Chrome</span><span>Microsoft edge</span><span>Safari</span>", alors on peut faire comme on veut avec du css ensuite. Par exemple, on pourra ajouter les virgules et de l'espace après les virgules en mettant dans le css :

span:after
{
  content: ", ";
  display: inline-block;
  padding-right: 0.25em;
}
span:last-of-type:after
{
  content: "";
  padding-right: 0;
}


Amicalement,
Modifié par parsimonhi (09 Oct 2020 - 16:17)
Re
Bon j'espère que c'est ma dernière demande
a) texte à coté image:
C'est bon (c'est vrai aussi que je n'ai pas vérifié), mais ... comme prévu le retour ne se fait pas bien.
je tombe sur un "os" car les boutons qu'il aurait été judicieux de passer à la ligne ont un id ... différent Smiley eek au chargement de page (probablement le code php de cette extension qui génère ce rendu)
J'ai essayé de me caler sur le séparateur en dessous, mais sans effet Smiley confus
span.separateur {clear:left!important;}

J'ai du faire une erreur bête, la vois-tu ?

b) séparateur
ok pour jouer sur l'épaisseur mais j'ai toujours ce rendu bizarre depuis que j'ai enlevé les balises svg. Bizarre si je n’utilise plus de svg mais bon si c'est facile à corriger sinon je reviendrai au svg en cherchant d'autres icônes comme mentionné (ou peut-être j'ouvrirai un nouveau fil?)

c) encadré
Je laisse tomber car c'est du code php ou je n'ai pas la main facilement

Merci
Modérateur
Bonjour,
HDcms a écrit :
Re
Bon j'espère que c'est ma dernière demande
a) texte à coté image:
C'est bon (c'est vrai aussi que je n'ai pas vérifié), mais ... comme prévu le retour ne se fait pas bien.
je tombe sur un "os" car les boutons qu'il aurait été judicieux de passer à la ligne ont un id ... différent Smiley eek au chargement de page (probablement le code php de cette extension qui génère ce rendu)
J'ai essayé de me caler sur le séparateur en dessous, mais sans effet Smiley confus
span.separateur {clear:left!important;}

J'ai du faire une erreur bête, la vois-tu ?

C'est un <div> et pas un <span>, le séparateur.

Tu as encapsulé ce qui suit l'image dans un <span> ? Je n'avais pas remarqué ce <span> avant. En tout cas tu ne devrais pas faire ça car ce <span> entoure des balises qu'il n'a pas le droit de contenir (ça marche, mais seulement parce que les navigateurs sont sympas avec toi). Il faudrait retirer ce <span>.

Et ensuite, bah, on cible quand même la balise <div> avec l'id "share+un nombre" car ce <div> effectivement change d'id à chaque fois, mais il semble qu'il reçoit aussi au passage la classe "jssocials".
div.jssocials {clear: left;}

On peut aussi cibler l'id en tenant compte du fait qu'il commence par "share".
div[id^=share]{clear: left;}


Amicalement,
Re
Ok génial a) est entièrement résolu et cela va me servir ailleurs. Encore une erreur bête en faisant plein d'essai. Ok j'enlève ce span ou j'essayai d’accrocher une class !
Bon après il reste b), je vais encore chercher un peu sinon je reviens au svg et je bascule enfin cette nouvelle version la semaine prochaine (si envie de me contacter en privé sur ma proposition un jour pas de soucis)
Encore un grand merci de m'avoir accompagné pour monter en compétence, je devrai en garder des traces Smiley smile
Bon week end
Modifié par HDcms (09 Oct 2020 - 18:33)
Bonjour
@parsimonhi
Désolé de te resolliciter. Comme je l'avai annoncé l'alignement à droite de l'image est quelque chose qui va me servir sur plusieurs sites Smiley smile
Je viens de reproduire le code sur un 2ème site et malheureusement celui-ci n'est pas pris en compte. Le css est pourtant bien appliqué sur les autres éléments puisque j'ai reproduit la structure html. Je ne vois pas d'autres éléments qui pourraient interférer.
J'ai bien vidé le cache serveur et navigateur
Probablement un truc bête! une piste ?
OK https://www.clibre.eu/fr/firefox-redecouvrez-le-web-avec-un-navigateur-libre-et-gratuit
PB https://www.alterweb.info/fr/livre/extensions-du-domaine-du-don-demander-donner-recevoir-rendre
//* alignement texte J! à droite de l'image */
 .econaArticleImageBlock { /* alignement à droite div[itemprop="articleBody"] */
    float: left!important;
    margin: 0 1em 1em 0;
}
div[id^=share]{clear: left; /* permet un retour à la ligne en cherchant le mot du partage social */}
Re
Bon je pense avoir résolu le problème même si je ne sais trop comment Smiley rolleyes
C'est peut-être en recopiant le code css sur le nouveau site puis maj du cache !!?