[Tuto] Ajouter des icônes Font Awesome au "Qui est en ligne"

[Fred]

Voici comment ajouter des icônes Font Awesome à :

• Qui est en ligne

• Anniversaire

• Statistiques

Se rendre ici :

► ./styles/NOM DU STYLE/template

Et ouvrir le template index_body.html
Si ce template n'est pas présent dans le répertoire du style du forum il suffit de l'importer depuis Prosilver

Qui est en ligne

Trouver : (peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.)

Code : Tout sélectionner

<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->

Remplacer par : (remplacer les lignes de code précédemment trouvées par celles ci-dessous.)

Code : Tout sélectionner

<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">
		<i class="icon fa-users fa-fw icon-CornflowerBlue" aria-hidden="true"></i>{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3><i class="icon fa-users fa-fw icon-CornflowerBlue" aria-hidden="true"></i>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->

Anniversaire

Trouver : (peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.)

Code : Tout sélectionner

<h3>{L_BIRTHDAYS}</h3>

Remplacer par : (remplacer les lignes de code précédemment trouvées par celles ci-dessous.)

Code : Tout sélectionner

<h3><i class="icon fa-birthday-cake fa-fw icon-CornflowerBlue" aria-hidden="true"></i>{L_BIRTHDAYS}</h3>

Statistiques

Trouver : (peut correspondre à un résultat partiel dans une ligne de code ou à une ligne de code entière.)

Code : Tout sélectionner

<h3>{L_STATISTICS}</h3>

Remplacer par : (remplacer les lignes de code précédemment trouvées par celles ci-dessous.)

Code : Tout sélectionner

<h3><i class="icon fa-bar-chart-o fa-fw icon-CornflowerBlue" aria-hidden="true"></i>{L_STATISTICS}</h3>

Il faudra bien évidemment vider le cache pour afficher les icônes sur l'index du forum

[stone23]

Salut Fred,
C'est bizarre, sur mon forum, ça fonctionne pour les anniversaires et les statistiques mais l’icône ne s'affiche pas pour "qui est en ligne"...

J'ai mis cette ligne de code :

Code : Tout sélectionner

		<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}"><i class="icon fa-wifi fa-fw" aria-hidden="true"></i>{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3><i class="icon fa-users fa-fw" aria-hidden="true"></i>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->

[Fred]

Salut Claude

Essai de remplacer par ceci :

Code : Tout sélectionner

<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">
		<i class="icon fa-wifi fa-fw" aria-hidden="true"></i>{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3><i class="icon fa-wifi fa-fw" aria-hidden="true"></i>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->

[stone23]

Salut Fred, je vis que je m'étais gouré dans le nom de l'icône mais ça fait toujours pareil si je mets ton code...
J'ai essayé de faire également la modif sur le fichier de prosilver mais ça ne change rien.
J'ai une modif sur le fichier de mon style perso pour cacher le qui est en ligne aux invités ainsi qu'à un groupe "Membres sous restrictions" :

Après :

Code : Tout sélectionner

<!-- EVENT index_body_stat_blocks_before -->

Le code du restant du fichier :

Code : Tout sélectionner

<!-- IF S_USER_LOGGED_IN and not S_GROUP_2555 -->

<!-- IF S_DISPLAY_ONLINE_LIST -->
	<div class="stat-block online-list">
		<!-- IF U_VIEWONLINE --><h3><a href="{U_VIEWONLINE}">{L_WHO_IS_ONLINE}</a></h3><!-- ELSE --><h3>{L_WHO_IS_ONLINE}</h3><!-- ENDIF -->
		<p>
			<!-- EVENT index_body_block_online_prepend -->
			{TOTAL_USERS_ONLINE} ({L_ONLINE_EXPLAIN})<br />{RECORD_USERS}<br /> 
			<!-- IF U_VIEWONLINE -->
				<br />{LOGGED_IN_USER_LIST}
				<!-- IF LEGEND --><br /><em>{L_LEGEND}{L_COLON} {LEGEND}</em><!-- ENDIF -->
			<!-- ENDIF -->
			<!-- EVENT index_body_block_online_append -->
		</p>
	</div>
<!-- ENDIF -->

<!-- EVENT index_body_birthday_block_before -->

<!-- IF S_DISPLAY_BIRTHDAY_LIST -->
	<div class="stat-block birthday-list">
		<h3>{L_BIRTHDAYS}</h3>
		<p>
			<!-- EVENT index_body_block_birthday_prepend -->
			<!-- IF .birthdays -->{L_CONGRATULATIONS}{L_COLON} <strong><!-- BEGIN birthdays -->{birthdays.USERNAME}<!-- IF birthdays.AGE !== '' --> ({birthdays.AGE})<!-- ENDIF --><!-- IF not birthdays.S_LAST_ROW -->, <!-- ENDIF --><!-- END birthdays --></strong><!-- ELSE -->{L_NO_BIRTHDAYS}<!-- ENDIF -->
			<!-- EVENT index_body_block_birthday_append -->
		</p>
	</div>
<!-- ENDIF -->


<!-- IF NEWEST_USER -->
	<div class="stat-block statistics">
		<h3>{L_STATISTICS}</h3>
		<p>
			<!-- EVENT index_body_block_stats_prepend -->
			{TOTAL_POSTS} &bull; {TOTAL_TOPICS} &bull; {TOTAL_USERS} &bull; {NEWEST_USER}
			<!-- EVENT index_body_block_stats_append -->
		</p>
	</div>
<!-- ENDIF -->

<!-- ENDIF -->
<!-- EVENT index_body_stat_blocks_after -->										   
<!-- INCLUDE overall_footer.html -->

Alors est-ce que ça perturbe l'affichage de l'icônes Font Awesome ?
Mystère...

[Fred]

J'ai essayé de faire également la odif sur le fichier de prosilver mais ça ne change rien.

En essayant avec le style prosilver tu aurais du voir apparaître les icônes Font Awesome.

Voici le codage présent sur le style de ce forum :

Code : Tout sélectionner

{% if S_DISPLAY_ONLINE_LIST %}
	<div class="stat-block online-list">
		{% if U_VIEWONLINE %}<h3><a href="{{ U_VIEWONLINE }}">
		<i class="icon fa-wifi fa-fw icon-CornflowerBlue" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i>{{ lang('WHO_IS_ONLINE') }}</a></h3>{% else %}<h3><i class="icon fa-wifi fa-fw icon-CornflowerBlue" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i>{{ lang('WHO_IS_ONLINE') }}</h3>{% endif %}
		<p>
			{% EVENT index_body_block_online_prepend %}
			{{ TOTAL_USERS_ONLINE }} ({{ lang('ONLINE_EXPLAIN') }})<br />{{ RECORD_USERS }}<br /> 
			{% if U_VIEWONLINE %}
				<br />{{ LOGGED_IN_USER_LIST }}
				{% if LEGEND %}<br /><em>{{ lang('LEGEND') }}{{ lang('COLON') }} {{ LEGEND }}</em>{% endif %}
			{% endif %}
			{% EVENT index_body_block_online_append %}
		</p>
	</div>
{% endif %}

{% EVENT index_body_birthday_block_before %}

{% if S_DISPLAY_BIRTHDAY_LIST %}
	<div class="stat-block birthday-list">
		<h3><i class="icon fa-birthday-cake fa-fw icon-grey" aria-hidden="true" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i>{{ lang('BIRTHDAYS') }}</h3>
		<p>
			{% EVENT index_body_block_birthday_prepend %}
			{% if loops.birthdays|length %}{{ lang('CONGRATULATIONS') }}{{ lang('COLON') }} <strong>{% for birthdays in loops.birthdays %}{{ birthdays.USERNAME }}{% if birthdays.AGE !== '' %} ({{ birthdays.AGE }}){% endif %}{% if not birthdays.S_LAST_ROW %}, {% endif %}{% endfor %}</strong>{% else %}{{ lang('NO_BIRTHDAYS') }}{% endif %}
			{% EVENT index_body_block_birthday_append %}
		</p>
	</div>
{% endif %}

{% if NEWEST_USER %}
	<div class="stat-block statistics">
		<h3><i class="icon fa-bar-chart-o fa-fw icon-grey" aria-hidden="true" aria-hidden="true" style="vertical-align:middle; padding-right:5px;"></i>{{ lang('STATISTICS') }}</h3>
		<p>
			{% EVENT index_body_block_stats_prepend %}
			{{ TOTAL_POSTS }} &bull; {{ TOTAL_TOPICS }} &bull; {{ TOTAL_USERS }} <br /> {{ NEWEST_USER }}
			{% EVENT index_body_block_stats_append %}
		</p>
	</div>
{% endif %}

Le style de ce forum utilise la syntaxe TWIG

[stone23]

Rien à faire...
ça fonctionne bien sur mon forum local mais le forum en prod ne veut rien savoir... J'ai beaucoup d'extensions installées, ç doit en être une qui perturbe...

[stone23]

Finalement, tu avais déjà donné la solution ici : https://www.forums.caforum.fr/viewtopic ... 2892#p2892
J'ai donc fait la modif dans "Separate users and bots" et ça fonctionne nickel.