css emails

  • Posts: 453
  • Thank you received: 31
  • Hikamarket Multivendor Hikashop Business
1 year 6 months ago #351721

Bonjour,

tout d'abord désolée pour cette nouvelle vague de posts, en espérant avoir faire le tour bientôt :S

J'ai un souci avec le css des emails.
Je créer un nouveau template mail


J'y pose mon css et la variable TPL_CONTENT :
<style>
	body {
		margin: 0;
		padding: 0;
		font-family: Arial, sans-serif;
		font-size: 18px;
		line-height: 1.6;
		background-color: #fff6f6;
	}

	.wrapper {
		max-width: 600px;
		margin: 0 auto;
	}

	.header {
		text-align: center;
		padding: 40px 0 30px 0;
		background-color: transparent;
	}

	.container {
		margin-top: 50px;
	}

	.main {
		border: 1px solid #ffeeee;
		margin: 0 auto 50px auto;
		background-color: #ffffff;
		border-top: 4px solid #dd7474;
		padding: 0 20px;
	}

	.section {
		background-color: #ffffff;
		padding: 30px 0;
	}

	.products {
		font-size: 16px;
	}

	.products thead {
		border-bottom: 1px dashed #fbcaca;
		color: #dd7474;
		font-weight: 500;
	}

	.products tfoot {
		font-weight: 600;
	}

	.product-image img {
		max-width: 65px;
		max-height: 65px;
	}

	.description {
		font-size: 14px;
	}

	.description span {
		font-style: italic;
	}

	.products-infos td {
		font-size: 14px;
		padding: 0;
		padding-bottom: 8px;
		border-bottom: 1px dashed #fbcaca;
	}

	.quantity {
		text-align: center;
		min-width: 30px;
	}

	.price {
		min-width: 80px;
		text-align: right;
	}

	.total-price {
		font-weight: bold;
	}

	.infos {
		background-color: #fff6f6;
		/* margin: 0 20px; */
		padding: 10px 20px;
		border-radius: 8px;
		font-weight: bold;
		/* color: #dd7474; */
	}

	h1,
	h2,
	h3 {
		margin: 0;
		padding: 0 8px;
	}

	h1 {
		font-size: 26px;
	}

	p {
		margin: 0;
		padding: 7px 0;
	}

	a {
		color: #dd7474;
		text-decoration: none;
	}

	.btn {
		display: inline-block;
		font-weight: 500;
		border-radius: 50px;
		padding: 10px 20px;
		background-color: #dd7474;
		color: #ffffff;
		text-decoration: none;
	}

	.img-responsive {
		display: block;
		max-width: 100%;
		height: auto;
		margin: auto;
	}
	.center {
		text-align: center;
	}
	.right {
		text-align: right;
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	td,
	th {
		text-align: left;
		padding: 8px;
	}

	th {
	}

	tfoot {
	}

	@media screen and (max-width: 600px) {
		body {
			font-size: 13px;
			line-height: 1.5;
		}
		.wrapper {
			max-width: 90%;
		}
		.main {
			padding: 0 10px;
		}
		.section {
			padding: 15px 0;
		}
		h1 {
			font-size: 20px;
		}
		td,
		th {
			text-align: left;
			padding: 4px;
		}
		.products {
			font-size: 14px;
		}
		.product-image img {
			max-width: 40px;
			max-height: 40px;
		}
		.description {
			font-size: 12px;
		}
		.infos {
			padding: 5px 15px;
		}
	}
</style>
{VAR:TPL_CONTENT}
je met le html correspondant (je n'ai pas encore fait les variables nom, email, etc..)
<body>
	<div class="wrapper">
		<div class="header">
			<img src="images/logo.png" alt="" />
		</div>
		<div class="main">
			<table cellspacing="0" cellpadding="0" border="0">
				<tr>
					<td>
						<img
							src="images/background-welcome.png"
							alt=""
							class="img-responsive"
						/>
					</td>
				</tr>
				<tr>
					<td class="section center">
						<p><strong>Bienvenue Name,</strong></p>
						<p>
							Vous venez de créer votre compte sur Khara Bijoux et nous vous en
							remercions, nous sommes ravis de vous accueillir.
						</p>
					</td>
				</tr>
				<tr>
					<td class="center">
						<p>
							Vous pouvez désormais accéder à votre compte client et bénéficier
							de tous vos avantages sur notre site.
						</p>
						<p>identifiant : <strong>identifiant</strong></p>
					</td>
				</tr>
				<tfoot>
					<tr>
						<td class="section center">
							<p>À très vite sur <a href="https://kharabijoux.com/">kharabijoux.com</a></p>
						</td>
					</tr>
				</tfoot>
			</table>
		</div>
	</div>
</body>
et je regarde l'apercu, jusque la tout va bien :


mais lorsque je fais un test réel, voici à quoi ressemble le mail (dans Gmail qui récupère très bien les mail hikashop et autres html stylisés)


absolument aucun des styles n'a été appliqué (je sais que certains ne cible pas ce html, c'est un style général qui doit être appliqué aussi sur les mails commandes)

Je tourne en rond depuis des heures, chat gpt me dit n'importe quoi, google n'a rien à me dire pour mon problème :blink: peut être avez vous une idée ?

merci d'avance

Attachments:
Last edit: 1 year 6 months ago by Minie.

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
1 year 6 months ago #351732

Bonjour,

Il y a deux choses qui peuvent faire la différence entre la preview sur votre site et le résultat dans votre boîte mail:
- sur votre site, le CSS de votre template et d'HikaShop est appliqué sur les éléments alors que ce n'est pas le cas dans votre boîte mail.
- certains code CSS ne sont pas valides pour les emails en fonction de la boîte mail que vous utilisez : www.caniemail.com/search/

Please Log in or Create an account to join the conversation.

  • Posts: 453
  • Thank you received: 31
  • Hikamarket Multivendor Hikashop Business
1 year 6 months ago #351745

Bonjour,

lorsque j'édite le template


et que je le vide, l'aperçu retrouve la forme du template par défaut. ceci me permet t'il d'exclure la possibilité 1 ?

lorsque je colle ce même css en balises style de chaque élément, le mail arrive correctement, je suppose donc que cela me permet d'exclure la possibilité 2 ?

c'est pour ca que je ne comprends pas, j'y suis même allé petit à petit, en gardant un template hikashop et ajoutant mon css, mais le mien n'est pas pris en compte :unsure:

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
1 year 6 months ago #351746

Hello,

Indeed, your conclusions seem to be correct.
We will have to see more, because there is surely a subtlety that escapes us, can you provide these elements:
- Url link to your backend access
- User backend references (with maximum Acl)
- FTP access
- Precise where is your modifications (email concerned, where is your email template in your website folder, etc etc...)
Note: Use our Contact us form to provide these elements and don't forget to add an Url link to this topic.

Awaiting your returns to progress.
Regards

Last edit: 1 year 6 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 453
  • Thank you received: 31
  • Hikamarket Multivendor Hikashop Business
1 year 6 months ago #351754

Bonjour,

les accès ont été envoyés via le formulaire de contact.

La vue test est "Compte utilisateur" , le template mail créé est "Khara"
le template est ici : /media/com_hikashop/mail/template/Khara.html.modified.php
la vue html est ici : /media/com_hikashop/mail/user_account.html.modified.php

merci à vous

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
1 year 6 months ago #351761

Bonjour,

Première chose pour une raison inconnue, nous ne parvenons pas à nous connecter via FTP, mais ceci étant dit, nous avons peut être une piste!
Pouvez vous faire ce test de rebaptiser votre fichier de template "Khara.html.modified" pour "Khara.html" ?
Et nous faire vos retours.

Petite aparté, votre site est vraiment magnifique, a tel point que je me demande si nous pourrions, avec votre accord bien entendu, le mettre dans notre page," They use HikaShop " ?

En attente de vos retours
Cordialement

Last edit: 1 year 6 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 453
  • Thank you received: 31
  • Hikamarket Multivendor Hikashop Business
1 year 6 months ago #351773

Bonjour,

merci beaucoup pour le compliment, nous sommes bien sûr d'accord pour le partager sur cette page, nous demandons juste un peu de temps pour le rendre fonctionnel avant la publication ;)

J'espère qu'il sera finalisé d'ici quelques jours, il ne manque pas grand chose, les templates emails et le split des paiements de commissions vendeurs (plugin en cours de dev)

J'ai renommé le fichier et fait un test, malheureusement j'obtiens toujours le même résultat, sans css.

Pour le FTP apparemment il faudrait forcer le client FTP à se connecter en mode non sécurisé d'après Nicolas

Merci à vous

The following user(s) said Thank You: Philip

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
1 year 6 months ago #351802

Bonjour,

Le souci vient du fait que tout votre CSS est dans des balises <style>
Certains client email ne supportent pas cela et il faut mettre votre CSS en inline.
Je l'ai fait par exemple pour centrer le header et vous pouvez voir que cela fonctionne ensuite.
Malheureusement, cela veut dire revoir l'email, et que vous ne pouvez pas avoir un template complètement générique avec zéro CSS dans l'HTML.
C'est pour cela que nous utilisons des tables et du CSS inline dans les emails par défaut, pour garantir la meilleure intéropérabilité possible.

Please Log in or Create an account to join the conversation.

  • Posts: 453
  • Thank you received: 31
  • Hikamarket Multivendor Hikashop Business
1 year 6 months ago #351872

Bonjour,

ok, ce que je ne comprends pas c'est que j'ai présenté mon problème ainsi : "le css n'est pris en compte que lorsqu'il est inline"
justement car j'ai vu que vous mettiez du css dans des balises <style> avec des class, et je trouvais ca plus propre donc je souhaitais faire de même.

Je vais donc faire mon css inline.

Merci pour votre réponse

Please Log in or Create an account to join the conversation.

  • Posts: 453
  • Thank you received: 31
  • Hikamarket Multivendor Hikashop Business
1 year 5 months ago #352111

Bonjour,

juste un petit message pour dire que le site kharabijoux.com/ est en ligne, même si nous n'avons pas encore connecté les fournisseurs autres que perle de tahiti, il est fonctionnel, nous sommes donc ok pour l'affichage sur la page " They use HikaShop " comme demandé.

Merci à vous :)

Please Log in or Create an account to join the conversation.

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
1 year 5 months ago #352122

Bonjour,

Merci pour votre accord, votre page a maintenant été ajoutée à notre " ShowCase ".
Si quoi que ce soit semble vous manquer ou ne va pas, nous restons à votre disposition.

Cordialement

Last edit: 1 year 5 months ago by Philip.

Please Log in or Create an account to join the conversation.

Time to create page: 0.093 seconds
Powered by Kunena Forum