Accueil | Forum | S'inscrire | Se connecter | Contact | Donation
Tutoriels graphiques Apprentissage du codage
Tutoriels graphiques Apprentissage du codage
Téléchargements N-U Chronicles
Téléchargements Never-Utopia Chronicles
Survolez l'un des icones ci-contre pour en obtenir une description.
Codage'Actif : Bannière & Navigation

Si vous utilisez des astuces et des codes fournis par le site ou le forum, nous vous serons très reconnaissant d'afficher sur votre page d'accueil le lien de Never-Utopia, en crédit pour l'aide apportée. Merci d'avance !

Mettre une bannière Flash
Rédigé par Riku Asakura & Sparrow-style

Comment installer une bannière en flash sur un forum Forumactif ?

La première chose à faire est d'héberger votre création, pour cela allez sur Photomaniak. Vous devez vous inscrire, c'est rapide et gratuit.
Uploadez votre image et cliquez sur le symbole pour avoir les liens de votre image. Il vous faut choisir celui-ci :



Maintenant il faut savoir où mettre ce code. N'essayez pas de le mettre dans le vrai emplacement de la bannière car ça marchera pas (vous pouvez toujours essayer si vous me croyez pas sur parole XD).
Il vous faut le mettre dans :

Général Forum Configuration Arrow Description du Site.

Et là, vous remarquez que vous avez deux bannières, la votre (en flash) et celle à l'origine sur le forum. Pas de panique, il vous suffit cette fois d'aller dans Affichage Gestion des images, et de laisser vide l'emplacement de l'adresse de l'image de la bannière.
Vous avez alors votre bannière flash^^

Si la barre de Navig' est sur ma ban flash, comment j'enlève la vraie ?

Rien de plus facile, allez dans :

Affichage Images et Couleurs Gestion des images Arrow Mode simple

Là vous aurez les liens de votre barre d'affichés avec pour chaque l'illustration qui la représente. Cliquez sur chaque et cliquez sur "masquer", ou bien alors mettez comme adresse d'image ceci :


Ce qui laissera l'emplacement vide.

Attention ! Les Nouveau MP ne peuvent pas être mis sur la bannière flash (pas à ma connaissance en tout cas). Du coup je vous conseille de laisser ce bouton là, en créant par exemple une image qui apparaitra avec les nouveaux MP.


Un souci de lecture du flash ?

J'ai appris il n'y a pas longtemps que les problèmes de lien cliquable en flash était, pour partie, dû à une nouvelle version du Flash player 8 et ultérieurs.
Il suffit de modifier le code d'intégration du flash (< embed >).
Je vais pour cela vous fournir une petite astuce pour intégrer une navigation Flash (ou une bannière Flash).

Explications préalables :
Dans votre panneau d'admin, allez sur Affichage > En-tête et navig > Afficher seulement les images dans la barre des liens > OUI.
Ensuite allez dans Affichage > Gestion des images, puis à la place de vos images de navigation, placez l'image vide : http://illiweb.com/fa/vide.gif
Idem pour votre bannière, si vous décidez d'intégrer un flash à la place.

Intégration du flash :
Maintenant que vous ne possédez plus aucune image dans la navigation, il vous suffit de placer votre Flash dans les templates... (ben ouais... facile qu'il dit ! Oo)
Allez pour cela dans Affichage > (Templates) Général > overall_header (cliquez sur l'engrenage orange)
Tout à la fin du code, copiez et collez ce code :


A la place de "animation.swf" placez l'url de votre animation.
Remplacez aussi la largeur et la hauteur par celles de votre flash.

Vous pouvez voir le détail allowscriptAccess="always" dans le code, il permet d'autoriser toujours les getURL dans vos flash (à savoir, les attributions de liens dans un flash).

Le Lien "Déconnexion" (pour ban flash ou wigets)
Rédigé par Sparrow-style

Il y avait toujours un soucis lorsqu'on voulait faire une bannière avec la navigation en flash, ou bien une navigation avec Wiget car il y a deux chose qui restaient difficiles à mettre : les nouveaux MP et le bouton déconnexion puisqu'il ne comporte pas de lien fixe.

Pour les nouveaux MP ont peut toujours faire avec les Pop up et/ou avec le wiget "connexion" qui nous affiche le nombre de nouveaux MP non lus qu'on possède.

Par contre en ce qui concerne le bouton déconnexion c'est plus difficile, il n'existe pas de lien à proprement parlé qui soit disponible sur le forum, même dans le panneau... Sauf que je l'ai trouvé XD (le vilain s'était caché ^^).
En fouinant dans les codes du panneau j'ai trouvé l'adresse qui permet d'accéder à une page de déconnexion (vous demandant d'ailleurs si vous êtes sûr de vouloir vous déconnecter, ce qui est une très bonne chose pour les baka dans mon genre qui cliquent sans faire exprès sur le bouton déconnexion car ils veulent toujours tout faire trop vite U.U).

Voici donc l'adresse (la même pour tout les forums, puisqu'elle s'adaptera automatiquement au votre) :

Une navigation personnelle ET interactive
Rédigé par Stone

Qui n'a jamais songé à disposer lui-même sa barre de navigations ? Le problème : comment faire pour faire apparaître le menu recherche ? Comment faire pour faire disparaître le bouton Déconnexion et S'inscrire lorsqu'on est connecté ? Comment faire pour faire disparaître les bouton membres, groupes, mp et Connexion lorsqu'on est déconnecté ? Comment changer le bouton Messagerie ? Je connais la réponse à ces questions.

Aller lire le tuto

Agir sur l'image de fond du forum
Rédigé par Sparrow-style

Il peut être important de caler votre fond de forum exactement là où vous le souhaitez car l'image de fond peut servir de bannière, par exemple, et dans ce cas là il est appréciable qu'elle soit centrée. Il peut aussi être nécessaire que l'image soit fixe, s'il s'agit de vos bordures de forum... Voici comment le placer :

Le code est à mettre dans la Feuille de style CSS de votre forum (ne copiez pas les indications après les flèches.
Image et Hover en CSS/HTML
Rédigé par Riku Asakura
Tout d'abord, de quoi il s'agit? : C'est en fait un code, qui va permettre de changer l'image, lorsque la souris passera dessus. Ainsi, on peut donner l'illusion, sans recourir au flash, que lorsque l'on passe la souris sur une image, cette dernière se met à briller. Bien sûr, ce n'est qu'une suggestion d'utilisation, ensuite, libre à vous de vous en servir comme bon vous semble.

Aller lire le Tutoriel sur le forum

Décorations des liens au passage de la souris
Rédigé par Riku Asakura
Pour que les lettres s'espacent au survol :



Soulignement haut et bas :

Résultat : Lien survolé

Clignotement (déconseillé cependant...) :

Résultat : Lien survolé

Changement de couleur :

Résultat : Lien survolé

Une image de fond :

(j'ai mis l'image du genre Mâle pour forum actif, mais c'est juste pour l'exemple) Résultat : Lien survolé

Je continue avec l'ajout d'une seule astuce... mais on va dire que j'ai découvert cela il n'y a pas longtemps... Ben ouais j'en apprends encore XD non mais oh !

Lien normal
>>Lien survolé

Lien normal
Lien survolé>>

Alors celui qui veut faire le malin peut faire ça :

<< Lien normal >>
>> Lien survolé <<

Vous allez me dire que ça ne set à rien ! Ben moi je trouve ça très puissant au contraire. Vous pouvez même placer une image avec ce système en utilisant :

Enfin bref... amusez-vous bien ;)

Tout les codes sont à mettre dans la Feuille de style CSS

[phpBB3] Retirer la bordure sous le menu
Rédigé par Sparrow-style

A mettre dans la Feuille de style CSS

Créer un wiget flottant (fixe)
Rédigé par Coriolis

Le widget flottant, c'est un petit cadre qui se place sur votre page et qui accompagne le visiteur même s'il descend ou remonte sur cette même page. Sa position est fixe, ainsi, peu importe où vous vous situez sur la page il restera présent.

Voir le tutoriel

Créer un sélecteur de thèmes
Rédigé par Sparrow-style

Je déconseille fortement aux personnes n'ayant pas ou peu de connaissances sur le CSS d'utiliser ce code... Sachez aussi qu'il comporte des inconvénients, notamment au niveau des couleurs utilisées dans les messages ou des icones de nouveaux sujets qui doivent être communs à tout les thèmes.

Voir le tutoriel

Coller la navigation en haut de la page
Rédigé par Amaziel

Ce tutoriel permet d'avoir la barre de navigation en haut du forum et que celle-ci ne bouge pas, même lorsque l'on descend en bas de page. Il est possible d'enlever cette dernière focntion.

Aperçu

Voir le tutoriel

Mise en forme d'une barre de navigation en CSS
Rédigé par Sui'

Avec les liens par défaut et sans image de la navigation, ce tutoriel vous propose de créer par CSS de véritables petits boutons.

Aperçu

Voir le tutoriel

Rollover sur la navigation (toute version de forum)
Rédigé par Sparrow-style

Voici une méthode déjà connue mais bien pratique pour afficher une barre de navigation en rollover (avec image changeant au survol de la souris donc) très simplement, sans toucher aux templates, juste en modifiant le CSS de votre forum.
Cette astuce a le gros avantage de fonctionner sur toutes les versions de forum (du moins celles sorties pour le moment^^), ainsi que de pouvoir d'appliquer aux boutons de base et donc d'avoir le changement d'image pour les nouveaux MP par exemple^^

Principe :
Nous allons mettre les images directement via le css et afficher une image différente pour le lien "neutre" et le lien survolé.
• Commencez par enlever toutes les images de votre barre de navigation et allez dans :
Affichage > Page d'accueil > En-tête & navigation
Et sélectionnez "oui" dans "Afficher seulement des images dans la barre de navigation".
• Allez ensuite dans votre feuille CSS de forum (je rappelle qu'elle se situe dans "Affichage" > "Couleur" Onglet "Feuille CSS"). Je vous donne l'exemple pour le bouton "Accueil" (l'index, selon vos appellations) :

Je vous explique ce que signifie ce code :
- l'information avec # c'est le nom du bouton accueil, pour résumer, les informations entre {} sont donc interprétées comme s'appliquant forcément à ce bouton là et pas un autre.
- le "background-image" c'est simplement l'image de fond du lien (rassurez-vous, le lien sera toujours là^^). Il vous faudra donc héberger l'image voulue et mettre l'adresse entre les parenthèses.
- width : c'est la largeur de l'emplacement de l'image, autrement dit celle de l'image elle-même.
- height : c'est la hauteur de l'image.
- la seconde partie avec le nom de la zone # suivie de "hover" désigne la même zone une fois survolée, il vous faut donc mettre dans "background-image" l'adresse de l'image devant apparaitre lorsque l'on passe sur le lien avec la souris.
Remarque : il n'est pas nécessaire de remettre la taille pour le "hover".

• Normalement, vous devez avoir votre bouton "Accueil" placé. Il s'agit maintenant de faire la même chose avec tout les autres ! Je vous donne simplement le nom de la "division" (zone de chaque bouton), à vous de refaire pareil que précédemment avec les images correspondantes.

En espérant que ce code vous serve !

Insérer des images ou du texte sous la navigation
Rédigé par Taki

Ce tuto une fois exploité vous permet d'ajouter des liens, des images, ou un texte (qui peut être défilant) en dessous de la navigation de votre forum.

Voir le tutoriel

Placer la navigation au dessus de la bannière
Rédigé par Sui'

Ce petit tutoriel vous permettra de placer votre barre de navigation au dessus de la bannière.

Voir l'exemple

Voir le tutoriel