Tutoriels tutoriels tutoriels tutoriels tutoriels tutoriels

Rappel du premier message :

FAVICONS

Coucou tout le monde !

Cette petite astuce va vous paraitre toute bête, mais peut s'avérer utile en cas de force majeure et s'applique aux favicons de toutes les plateformes. J'imagine que vous savez tous ce qu'est un favicon. Non ? Allons bon, selon wikipédia "un favicon est une icône informatique symbolisant un site web.". Cette fameuse petite image figure à côté de l'adresse http ou tout simplement à côté du nom du site ou forum dans les onglets. Forumactif et Xooit ont l'avantage de proposer à leurs utilisateurs des favicons prédéfinis. Seulement voilà, au bout d'un moment, avoir le même favicon que le voisin, ça peut devenir pénible, voilà donc différentes manières de créer le votre directement.

1. L'alternative Photoshop, ou tout autre logiciel qui permet de faire du pixel. Un favicon pour forum fait du 16*16, vous pouvez au choix prendre une image et la rétrécir ou tout simplement créer pixel par pixel votre logo à la taille finale. L'avantage : Vous pouvez faire des effets de style très rapidement, voir même créer de petits favicons animés si vous possédez Image Ready ou autre. Le bémol : Il faut posséder un logiciel approprié et savoir s'en servir, Photoshop ne s'apprend pas en un jour.
Où trouver Photoshop ? Légalement, il faut l'acheter. Tout votre salaire mensuel risque d'y passer.

2. L'option Favicon Generator, qui vous permet de réduire des images déjà existantes à la taille favicon ou de créer directement pixel par pixel le logo sans avoir à passer par des manipulations complexes. L'avantage : Vous n'aurez rien à télécharger si ce n'est votre favicon une fois terminé, et le plan de travail est assez simple d'utilisation et fonctionnel. Le bémol : Bonjour la galère pour convertir le favicon fraichement téléchargé de façon à ce que l’hébergeur accepte de faire son boulot et de l’héberger. (Personnellement je fais une capture d'écran, je l'ouvre sous photoshop et je nettoie l'image jusqu'à ce qu'elle soit en transparence).
Où trouver Favicon Generator ? http://www.favicon.cc/

3. La botte secrète : ArtIcons pro, qui est un logiciel utilisé en grande partie par les professionels mais qui demeure, contre toute attente, accessible à tous. Même principe d'utilisation que Favicon Generator, sauf que vous n'aurez pas le soucis de la conversion de votre précieux logo une fois achevé. L'avantage : Disponible en version d'essai 30 jours et fichtrement facile d'utilisation. Le bémol : Il faut télécharger la version d'essai si vous n'avez pas l'intention d'en faire l"acquisition.
Où trouver ArtIcons pro ? http://www.01net.com/telecharger/windows/Utilitaire/police_icone/fiches/20900.html

Je ne vous cache pas qu'il faut avoir un peu de pratique dans la pixel, ou du moins savoir où on va lors de la création d'un favicon, vous pouvez cependant arriver à des résultats très chouettes sans avoir beaucoup pratiqué; le pixel est une affaire de tâtonnement. Personnellement, pour les favicons, je ne me sert quasiment que de ArtIcons pro, à cause de sa maniabilité. Faites votre choix ! (: Et à bientôt pour une nouvelle astuce !

Voilà pour les différentes alternatives, si vous avec d'autres propositions, n'hésitez pas à les rajouter à la suite de ce message, j'éditerais l'astuce. Si vous avez plus de question sur les procédures, n'hésitez pas ! (:

Remplacer les boutons répondre, nouveau, vérouillé en passant que par le CSS.

Le CSS

Code:

/*-------------------------------- BOUTONS NOUVEAU, REPONDRE, VEROUILLE ---------------------------------------*/

a[href$="&mode=reply"] img, a[href$="&mode=newtopic"] img, a[href$="&mode=locked"] img,  a[href$="&mode=post"] img { /*enleve les images des boutons*/
   display: none;
}

a[href$="&mode=reply"]:before { /*remplace l'image Répondre par un texte*/
  content: "Répondre";
}

a[href$="&mode=newtopic"]:before { /*remplace l'image Nouveau par un texte*/
  content: "Nouveau";
}

a[href$="&mode=locked"]:before { /*remplace l'image Verouillé par un texte*/
  content: "Verouillé";
}

a[href$="&mode=post"]:before {
  content: "Nouveau";
}

a[href$="&mode=reply"]:before, a[href$="&mode=newtopic"]:before, a[href$="&mode=locked"]:before, a[href$="&mode=post"]:before { /*mise en forme du bouton*/
  border: 1px solid #941a2d;
  background-color:#941a2d;
  color:#ffffff;
  font-size: 18px !important;
  padding:2px 7px 2px 7px;
  margin:3px;
  text-transform: uppercase;
  border-radius: 3px;
}  

.nav { /*comprend les boutons et le fil d'ariane*/
  font-family: "Hammersmith One", serif;
  font-size:14px;
  font-weight:100;
}

La partie template (qu'on ne touche pas) dans viewtopic_body

Code:

<td align="left" valign="middle" nowrap="nowrap">
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>  &nbsp;
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>

Remplacer les boutons répondre, nouveau, vérouillé en passant par les templates et un peu de CSS

template modifié viewtopic_body (original post précédent)

Code:

      <td align="left" valign="middle" nowrap="nowrap">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a class="post_new_topic" href="{U_POST_NEW_TOPIC}" rel="nofollow">Nouveau</a>  &nbsp;
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a class="post_reply_topic" href="{U_POST_REPLY_TOPIC}">Répondre</a>
         <!-- END switch_user_authreply -->
         </span>
      </td>

Et le CSS

Code:

a.post_new_topic, a.post_reply_topic {
  font-family: "Hammersmith One", serif;
  font-size:14px;
  font-weight:100;
  border: 1px solid #941a2d;
  background-color:#941a2d;
  color:#ffffff;
  font-size: 18px !important;
  padding:2px 7px 2px 7px;
  margin:3px;
  text-transform: uppercase;
  border-radius: 3px;
}