phpBB-fr.com - Changement des icones "forum_read" et autres

DaG33K · par **DaG33K** » 02 oct. 2023 à 21:06

Bonjour / Bonsoir,

Ce style est superbe ! Avec mes amis qui m'aide à l'administration et à la modération, nous avons défini ce style pour notre forum. Merci pour cette création.

On aurais besoin de pouvoir modifier les icones des topics généraux.
Dans le style "prosilver" par défaut, ces icones sont biens présentes, dans styles/prosilver/theme/images

Il s'agit des fichiers suivants :

forum_read.gif
forum_unread.gif
forum_read_locked.gif
forum_unread_locked.gif

Merci pour votre aide

par **Mazeltof** » 03 oct. 2023 à 21:01

'soir ici

Dans prosilver French edition les icones des forums/sujets sont issues de la police FontAwesome 4.7 utilisé par defaut par phpBB. les appels se trouvent dans le fichier theme/base.min.css

tu peux modifier le fichier theme/base.css (apres la ligne 102) et le minifier quand tu as terminé tes modifs en l'enregistrant sous theme/base.min.css

DaG33K · par **DaG33K** » 06 oct. 2023 à 00:31

Bonsoir Mazeltof. Merci pour ta réponse.
Cette modif me semble trop complexe pour mon niveau technique, je préfère éviter de toucher à ça, c'est un coup à tout casser.
C'est dommage ce thème était vraiment bien.

Merci en tout cas pour ta réponse

par **Mazeltof** » 06 oct. 2023 à 08:17

Mais non ce n'est pas si compliqué

Deja, dis mous exactement ce que tu veux faire. Modifier les icones par une autre icone de la meme police ? par une image? par les icones de prosilver ?

En partant de ta reponse on va pouvoir te guider pas a pas pour que tu reussisses a modifier comme tu le souhaites

DaG33K · par **DaG33K** » 06 oct. 2023 à 11:58

Hello,

Alors l'idée c'était de remplacer par des images type gif ou png qui auraient donc un fond transparent.
Image "forum_unread" =>

Image "forum_read" =>

Image "forum_read_locked" =>

Image "forum_unread_locked" =>

Et cela que sur la page principal du forum, donc pas de changement pour les topics et les sous-topics.

par **cabot** » 06 oct. 2023 à 14:44

Code : Tout sélectionner

<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1547 1258" width="1547" height="1258">
	<title>Honda-svg</title>
	<style>
		tspan { white-space:pre }
		.shp0 { fill: #000000 } 
	</style>
	<g id="Layer">
		<path id="svg_6" class="shp0" d="M1128.17 107.05C1093.04 265.19 1078.57 338.57 1049.64 452.27C1021.74 561.83 1000.04 664.16 962.84 713.77C925.64 764.42 875.01 774.76 840.91 778.89C823.34 780.96 809.91 781.99 771.67 781.99C733.44 781.99 720.01 780.96 702.44 778.89C668.34 774.76 617.71 764.42 580.51 713.77C543.31 664.16 521.61 561.83 494.74 452.27C465.81 337.54 451.34 265.19 416.21 107.05C416.21 107.05 381.07 108.08 365.57 109.11C343.87 110.15 327.34 112.21 309.77 114.28C309.77 114.28 330.44 439.87 339.74 578.37C349.04 723.08 366.61 968.04 382.11 1153.06C382.11 1153.06 412.07 1158.22 461.67 1160.29C513.34 1163.39 537.11 1163.39 537.11 1163.39C558.81 1081.74 584.64 969.07 614.61 920.49C639.41 881.22 676.61 877.08 698.31 873.98C731.37 869.85 760.31 868.81 772.71 868.81L772.71 868.81L772.71 868.81C786.14 868.81 814.04 868.81 847.11 873.98C868.81 877.08 906.01 881.22 930.81 920.49C960.77 969.07 987.64 1081.74 1008.31 1163.39C1008.31 1163.39 1031.04 1163.39 1082.71 1160.29C1132.31 1157.19 1162.27 1153.06 1162.27 1153.06C1177.77 968.04 1195.34 724.11 1204.64 578.37C1213.94 440.9 1234.61 114.28 1234.61 114.28C1217.04 112.21 1199.47 110.15 1178.81 109.11C1163.31 108.08 1128.17 107.05 1128.17 107.05Z" />
		<path id="svg_7" fill-rule="evenodd" class="shp0" d="M1538.41 299.3C1543.57 355.11 1545.64 428.5 1546.67 508.08C1544.61 639.35 1533.24 728.24 1527.04 789.23C1522.91 830.57 1505.34 957.7 1482.61 1022.82C1451.61 1112.74 1423.71 1138.58 1390.64 1165.46C1330.71 1215.07 1231.51 1229.54 1210.84 1233.68C1099.24 1254.35 872.94 1257.45 773.74 1257.45C673.51 1257.45 448.24 1253.32 336.64 1233.68C315.97 1229.54 216.77 1214.04 156.84 1165.46C123.77 1138.58 95.87 1112.74 64.87 1022.82C42.14 957.7 24.57 831.6 20.44 789.23C14.24 727.21 2.87 639.35 0.81 508.08C-0.23 429.53 0.81 356.14 7.01 299.3C27.67 92.57 166.14 49.16 287.04 28.49C348.01 18.16 456.51 9.89 525.74 6.79C586.71 2.65 729.31 0.58 772.71 0.58C816.11 0.58 958.71 2.65 1019.67 6.79C1088.91 9.89 1197.41 18.16 1258.37 28.49C1379.27 49.16 1517.74 92.58 1538.41 299.3M1456.77 299.3C1440.24 170.1 1376.17 104.98 1238.74 80.17C1174.67 68.8 1087.87 60.53 1006.24 56.4C941.14 52.26 832.64 49.16 772.71 50.2C711.74 50.2 604.27 52.26 538.14 56.4C456.51 60.53 369.71 68.8 305.64 80.17C168.21 103.94 104.14 169.06 88.64 299.3C77.27 386.12 76.24 547.36 83.47 646.59C94.84 811.97 110.34 911.19 131.01 982.51C149.61 1044.53 172.34 1086.9 205.41 1116.88C261.21 1167.53 337.67 1177.86 383.14 1185.1C480.27 1199.57 643.54 1204.74 772.71 1204.74C900.84 1204.74 1065.14 1199.57 1162.27 1185.1C1207.74 1177.86 1284.21 1167.53 1340.01 1116.88C1373.07 1086.9 1395.81 1045.56 1414.41 982.51C1435.07 911.19 1449.54 811.97 1461.94 646.59C1469.17 546.33 1468.14 385.09 1456.77 299.3Z" />
	</g>
</svg>

DaG33K · par **DaG33K** » 06 oct. 2023 à 18:16

Merci cabot !

Je dois y copier / coller en lieu et place de la ligne 102 du fichier base.css dont me parlait Mazeltof ?
Et si c'est bien ça, j'écrase donc l'accolade qui correspond à la ligne 102 ?

Désolé, mes compétences en webmastering sont ultra limités ...

Merci en tout cas pour votre aide

par **Mazeltof** » 06 oct. 2023 à 18:45

non non, c'est juste le logo au format .svg, c'est beaucoup mieux que du .gif ou du .png

Je regarde demain dans la journée pour te preparer les icones et les modifs a apporter sur le style

DaG33K · par **DaG33K** » 06 oct. 2023 à 19:44

C'est vraiment super sympa de votre part à tous les deux, merci beaucoup !

par **cabot** » 07 oct. 2023 à 10:24

Que c'est chiant les svg et les dégradés, j'arrive à rien.

Code : Tout sélectionner

<svg xmlns="http://www.w3.org/2000/svg" width="1547" height="1258">
	<defs>
		<linearGradient id="h" x1="0%" x2="0%" y1="0%" y2="80%">
			<stop offset="0%" stop-color="#ee3636"/>
			<stop offset="80%" stop-color="#651212"/>
			<stop offset="100%" stop-color="#2a0505"/>
		</linearGradient>
	</defs>
	<path fill="none" stroke="url(#h)" stroke-width="50" d="M1128.17 107.05c-35.13 158.14-49.6 231.52-78.53 345.22-27.9 109.56-49.6 211.89-86.8 261.5-37.2 50.65-87.83 60.99-121.93 65.12-17.57 2.07-31 3.1-69.24 3.1-38.23 0-51.66-1.03-69.23-3.1-34.1-4.13-84.73-14.47-121.93-65.12-37.2-49.61-58.9-151.94-85.77-261.5-28.93-114.73-43.4-187.08-78.53-345.22 0 0-35.14 1.03-50.64 2.06-21.7 1.04-38.23 3.1-55.8 5.17 0 0 20.67 325.59 29.97 464.09 9.3 144.71 26.87 389.67 42.37 574.69 0 0 29.96 5.16 79.56 7.23 51.67 3.1 75.44 3.1 75.44 3.1 21.7-81.65 47.53-194.32 77.5-242.9 24.8-39.27 62-43.41 83.7-46.51 33.06-4.13 62-5.17 74.4-5.17 13.43 0 41.33 0 74.4 5.17 21.7 3.1 58.9 7.24 83.7 46.51 29.96 48.58 56.83 161.25 77.5 242.9 0 0 22.73 0 74.4-3.1 49.6-3.1 79.56-7.23 79.56-7.23 15.5-185.02 33.07-428.95 42.37-574.69 9.3-137.47 29.97-464.09 29.97-464.09-17.57-2.07-35.14-4.13-55.8-5.17-15.5-1.03-50.64-2.06-50.64-2.06Z"/>
	<path fill="#981717" d="M1538.41 299.3c5.16 55.81 7.23 129.2 8.26 208.78-2.06 131.27-13.43 220.16-19.63 281.15-4.13 41.34-21.7 168.47-44.43 233.59-31 89.92-58.9 115.76-91.97 142.64-59.93 49.61-159.13 64.08-179.8 68.22-111.6 20.67-337.9 23.77-437.1 23.77-100.23 0-325.5-4.13-437.1-23.77-20.67-4.14-119.87-19.64-179.8-68.22-33.07-26.88-60.97-52.72-91.97-142.64-22.73-65.12-40.3-191.22-44.43-233.59C14.24 727.21 2.87 639.35.81 508.08c-1.04-78.55 0-151.94 6.2-208.78C27.67 92.57 166.14 49.16 287.04 28.49c60.97-10.33 169.47-18.6 238.7-21.7C586.71 2.65 729.31.58 772.71.58c43.4 0 186 2.07 246.96 6.21 69.24 3.1 177.74 11.37 238.7 21.7 120.9 20.67 259.37 64.09 280.04 270.81m-81.64 0c-16.53-129.2-80.6-194.32-218.03-219.13-64.07-11.37-150.87-19.64-232.5-23.77-65.1-4.14-173.6-7.24-233.53-6.2-60.97 0-168.44 2.06-234.57 6.2-81.63 4.13-168.43 12.4-232.5 23.77-137.43 23.77-201.5 88.89-217 219.13-11.37 86.82-12.4 248.06-5.17 347.29 11.37 165.38 26.87 264.6 47.54 335.92 18.6 62.02 41.33 104.39 74.4 134.37 55.8 50.65 132.26 60.98 177.73 68.22 97.13 14.47 260.4 19.64 389.57 19.64 128.13 0 292.43-5.17 389.56-19.64 45.47-7.24 121.94-17.57 177.74-68.22 33.06-29.98 55.8-71.32 74.4-134.37 20.66-71.32 35.13-170.54 47.53-335.92 7.23-100.26 6.2-261.5-5.17-347.29Z"/>
</svg>

Je laisse le chef graphiste et spécholiste du svg s'en occuper.

par **Mazeltof** » 07 oct. 2023 à 11:09

ah mais tu as mis les degrades sur le logo ? je voyais plus sans degrade (pour rester dans l'esprit du style) mais qui change de couleurs light/dark (comme les rangs en cours)

quoi qu'il en soit reproduire les memes degrades que l'original me semble compliqué pour des icones de ce type ... le compromis serait ce que tu as fait

par **cabot** » 07 oct. 2023 à 12:18

Je m'y suis essayé mais ça m'a vite gonflé.

par **Mazeltof** » 07 oct. 2023 à 18:20

je dois reconnaitre que depuis que je n'ai plus AI ce n'est plus aussi simple a faire

C'est parti pour les modifs.

télécharge l'archive d'icones suivante et depose son contenu dans prosilver_fr/theme/images

icons_svg.zip: (44.59 Kio) Téléchargé 5 fois

(je t'ai fait des icones pour tout le forum, dans l'esprit de celui que tu nous donnes en exemple. tu me dis si ca te vas ou pas)

Avec ton editeur de texte prefere (comme par exemple notepad++) modifie les fichiers suivants :
prosilver_fr/theme/base.css

trouve et supprime (vers ligne 86) :

Code : Tout sélectionner

.forum_link:before, .row-item[class*=_read]:before, .row-item[class*=_mine]:after, .row-item[class*=_unread]:before, .topic_moved:before {
	font-family: 'FontAwesome';
	font-variant: normal;
	text-rendering: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.forum_link:before, .row-item[class*=_read]:before, .row-item[class*=_unread]:before, .topic_moved:before {
	left: 10px;
	line-height: 32px;
	width: 32px;
	height: 32px;
	font-size: 16px;
	text-align: center;
	border-radius: 50%}
.row-item[class*=_mine]:after {
	content: "\f005";
	border-radius: 50%;
	font-size: 7px;
	left: 6px;
	padding: 1px;
}
.row-item[class*=global_]:before, .row-item[class*=announce_]:before {
	content: "\f0a1"}
.row-item[class*=sticky_]:before {
	content: "\f08d"}
.row-item[class*=forum_]:before {
	content: "\f039"}
.row-item[class*=topic_]:before, .row-item[class*=pm_]:before {
	content: "\f036"}
.rtl.row-item[class*=topic_]:before, .rtl.row-item[class*=pm_]:before {
	content: "\f038"}
.row-item[class*=_locked]:before {
	content: "\f023"}
.row-item.forum_link:before {
	content: "\f0c1"}
.row-item.topic_moved:before {
	content: "\f064"}

enregistre tes modifications.

prosilver_fr/theme/light_dark.css

trouve et supprime (vers ligne 453) :

Code : Tout sélectionner

.row-item[class*=_read], .row-item[class*=_unread], .forum_link, .topic_moved {
	background-image: none;
}
.row-item[class*=_read]:before, .forum_link:before, .topic_moved:before {
	background-color: var(--color05);
}
.row-item[class*=_unread]:before {
	background-color: var(--color01);
}

ajoute a la fin du fichier (apres ligne 826) :

Code : Tout sélectionner

.global_read					{ background-image: url("./images/announce_read.svg"); }
.global_read_mine				{ background-image: url("./images/announce_read_mine.svg"); }
.global_read_locked				{ background-image: url("./images/announce_read_locked.svg"); }
.global_read_locked_mine		{ background-image: url("./images/announce_read_locked_mine.svg"); }
.global_unread					{ background-image: url("./images/announce_unread.svg"); }
.global_unread_mine				{ background-image: url("./images/announce_unread_mine.svg"); }
.global_unread_locked			{ background-image: url("./images/announce_unread_locked.svg"); }
.global_unread_locked_mine		{ background-image: url("./images/announce_unread_locked_mine.svg"); }

.announce_read					{ background-image: url("./images/announce_read.svg"); }
.announce_read_mine				{ background-image: url("./images/announce_read_mine.svg"); }
.announce_read_locked			{ background-image: url("./images/announce_read_locked.svg"); }
.announce_read_locked_mine		{ background-image: url("./images/announce_read_locked_mine.svg"); }
.announce_unread				{ background-image: url("./images/announce_unread.svg"); }
.announce_unread_mine			{ background-image: url("./images/announce_unread_mine.svg"); }
.announce_unread_locked			{ background-image: url("./images/announce_unread_locked.svg"); }
.announce_unread_locked_mine	{ background-image: url("./images/announce_unread_locked_mine.svg"); }

.forum_link						{ background-image: url("./images/forum_link.svg"); }
.forum_read						{ background-image: url("./images/forum_read.svg"); }
.forum_read_locked				{ background-image: url("./images/forum_read_locked.svg"); }
.forum_read_subforum			{ background-image: url("./images/forum_read_subforum.svg"); }
.forum_unread					{ background-image: url("./images/forum_unread.svg"); }
.forum_unread_locked			{ background-image: url("./images/forum_unread_locked.svg"); }
.forum_unread_subforum			{ background-image: url("./images/forum_unread_subforum.svg"); }

.sticky_read					{ background-image: url("./images/sticky_read.svg"); }
.sticky_read_mine				{ background-image: url("./images/sticky_read_mine.svg"); }
.sticky_read_locked				{ background-image: url("./images/sticky_read_locked.svg"); }
.sticky_read_locked_mine		{ background-image: url("./images/sticky_read_locked_mine.svg"); }
.sticky_unread					{ background-image: url("./images/sticky_unread.svg"); }
.sticky_unread_mine				{ background-image: url("./images/sticky_unread_mine.svg"); }
.sticky_unread_locked			{ background-image: url("./images/sticky_unread_locked.svg"); }
.sticky_unread_locked_mine		{ background-image: url("./images/sticky_unread_locked_mine.svg"); }

.topic_moved					{ background-image: url("./images/topic_moved.svg"); }
.pm_read,
.topic_read						{ background-image: url("./images/topic_read.svg"); }
.topic_read_mine				{ background-image: url("./images/topic_read_mine.svg"); }
.topic_read_hot					{ background-image: url("./images/topic_read_hot.svg"); }
.topic_read_hot_mine			{ background-image: url("./images/topic_read_hot_mine.svg"); }
.topic_read_locked				{ background-image: url("./images/topic_read_locked.svg"); }
.topic_read_locked_mine			{ background-image: url("./images/topic_read_locked_mine.svg"); }
.pm_unread,
.topic_unread					{ background-image: url("./images/topic_unread.svg"); }
.topic_unread_mine				{ background-image: url("./images/topic_unread_mine.svg"); }
.topic_unread_hot				{ background-image: url("./images/topic_unread_hot.svg"); }
.topic_unread_hot_mine			{ background-image: url("./images/topic_unread_hot_mine.svg"); }
.topic_unread_locked			{ background-image: url("./images/topic_unread_locked.svg"); }
.topic_unread_locked_mine		{ background-image: url("./images/topic_unread_locked_mine.svg"); }

enregistre tes modifications.

maintenant, tu minifies tes fichiers modifies avec un site en ligne comme par exemple cssminifier et tu enregistres le resultat respectivement dans prosilver_fr/them/base.min.css et prosilver_fr/theme/light_dark.min.css

sauf erreur de ma part tu devrais avoir des icones personnalisés sur ton forum

DaG33K · par **DaG33K** » 08 oct. 2023 à 12:29

Salut à tous les deux !
Un immense merci pour le temps que vous avez pris et passé sur ma demande, c'est réellement super cool de votre part.

J'ai télécharger le zip, et j'ai mis son contenu dans le dossier prosilver_fr/theme/images comme demandé, sans supprimer ce qu'il y avait déjà dedans.

Ensuite j'ai modifié les fichier CSS dont tu m'as parlé. Le premier je n'ai pas eu de problème.
Le 2e fichier en revanche, il n'y avait pas les lignes que tu m'as demandé de supprimer à la ligne 86. Avec une recherche, elles était (de mémoire) à la ligne 453 jusqu'à 462. Je les ais supprimés et j'ai rajouté à la fin, le code que tu m'as donné.
Je suis aller sur le site cssminifier et j'ai copier / coller les contenus des deux fichiers pour créer et enregistrer les deux fichiers *.min.css .

J'ai purgé le cache du forum, changé le thème, puis remis le thème "prosilver_fr" et j'ai à nouveau fait une purge du cache.
J'ai actualisé la page d'accueil et les icônes n'ont pas changées malheureusement.

Voici le lien du forum si vous souhaitez voir par vous même => https://civicyume.site/

Encore une fois, un immense merci pour votre aide à tous les deux !! Sincèrement Merci !!

par **Mazeltof** » 08 oct. 2023 à 14:17

au temps pour moi, erreur de redaction de ma part c'est bien a la ligne 453 que commence la modification du fichier light_dark.css. je corrige mon message precedent.

et sur le forum de ton lien les fichiers base.min.css et light_dark.min.css ne sont pas modifiés.

prosilver French edition

Changement des icones "forum_read" et autres - prosilver French edition

Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres

Re: Changement des icones "forum_read" et autres