EXTENSION : Share On - Partager sur les réseaux sociaux
Posté : mar. 12 nov. 2019 21:21
Hello
J'ai apporté quelques améliorations personnelles, je vous les partagent au cas où.
J'ai enlevé les images pour mettre à la place des icônes vectoriels ( https://fontawesome.com/ )
Mise aux normes du codes html
Il me manque que l'icone Tuenti mais il me sert pas, si jamais quelqu'un sais où je peux l'avoir je mettrai le code à jour
De plus je les ais plaqués en bas à droite donc j'ai renommé le fichier
Il reste donc que cette partie dans le fichier
Ce qui me donne ce rendu pour notre charte graphique
J'ai apporté quelques améliorations personnelles, je vous les partagent au cas où.
J'ai enlevé les images pour mettre à la place des icônes vectoriels ( https://fontawesome.com/ )
Mise aux normes du codes html
Code : Tout sélectionner
<!-- IF S_SO_STATUS -->
<!-- IF S_SO_TYPE == '0' || postrow.S_FIRST_ROW -->
<br />
<ul class="share-buttons">
<!-- IF S_SO_FACEBOOK -->
<li><a href="{postrow.U_FACEBOOK}" title="{L_SHARE_ON_FACEBOOK}" class="js-newWindow" data-popup="width=580,height=325"><i class="icon fa-facebook-square icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_TWITTER -->
<li><a href="{postrow.U_TWITTER}" title="{L_SHARE_ON_TWITTER}" class="js-newWindow" data-popup="width=550,height=300"><i class="icon fa-twitter-square icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_TUENTI -->
<!-- --> <li><a href="{postrow.U_TUENTI}" title="{L_SHARE_ON_TUENTI}" class="share-button share-icon-button tuenti-icon js-newWindow" data-popup="width=741,height=551"></a></li> <!-- manque le svg -->
<!-- ENDIF -->
<!-- IF S_SO_DIGG -->
<li><a href="{postrow.U_DIGG}" title="{L_SHARE_ON_DIGG}" onclick="window.open(this.href);return false;"><i class="icon fa-digg icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_REDDIT -->
<li><a href="{postrow.U_REDDIT}" title="{L_SHARE_ON_REDDIT}" onclick="window.open(this.href);return false;"><i class="icon fa-reddit icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_DELICIOUS -->
<li><a href="{postrow.U_DELICIOUS}" title="{L_SHARE_ON_DELICIOUS}" class="js-newWindow" data-popup="width=540,height=500"><i class="icon fa-delicious icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_VK -->
<li><a href="{postrow.U_VK}" title="{L_SHARE_ON_VK}" class="js-newWindow" data-popup="width=607,height=510"><i class="icon fa-vk icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_TUMBLR -->
<li><a href="{postrow.U_TUMBLR}" title="{L_SHARE_ON_TUMBLR}" class="js-newWindow" data-popup="width=542,height=460"><i class="icon fa-tumblr-square icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_GOOGLE -->
<li><a href="{postrow.U_GOOGLE}" title="{L_SHARE_ON_GOOGLE}" onclick="window.open(this.href);return false;"><i class="icon fa-google-plus-g icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_WHATSAPP -->
<li><a href="{postrow.U_WHATSAPP}" title="{L_SHARE_ON_WHATSAPP}" onclick="window.open(this.href);return false;"><i class="icon fa-whatsapp icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
<!-- IF S_SO_POCKET -->
<li><a href="{postrow.U_POCKET}" title="{L_SHARE_ON_POCKET}" onclick="window.open(this.href);return false;"><i class="icon fa-get-pocket icon-gray" aria-hidden="true"></i></a></li>
<!-- ENDIF -->
</ul>
<br />
<!-- ENDIF -->
<!-- ENDIF -->
Il me manque que l'icone Tuenti mais il me sert pas, si jamais quelqu'un sais où je peux l'avoir je mettrai le code à jour
De plus je les ais plaqués en bas à droite donc j'ai renommé le fichier
viewtopic_body_postrow_post_notices_after.html
en viewtopic_body_postrow_back2top_after.html
Il reste donc que cette partie dans le fichier
shareon.css
Code : Tout sélectionner
.share-buttons {
float: none;
position: absolute;
margin: 0;
bottom: 13px;
right: 15px;
list-style: none;
}
.share-buttons > li {
float: left;
margin-right: 3px;
}
.share-buttons i { font-size: 18px; }
.share-buttons i:hover { opacity: .6; }
Ce qui me donne ce rendu pour notre charte graphique