[Épinglé] Personnaliser la navigation
Je vois que peu de webcomics utilisent cette option, pourtant, elle n'est pas difficile à mettre en place. Pour ceux qui voudraient le faire mais ignorent comment procéder, voici la marche à suivre pour remplacer les liens de navigation par des images:
Tout d'abord, il vous faut des flèches. Huit en tout: quatre pour les liens actifs, quatre pour les liens inactifs.
Voici par exemple le modèle que j'emploie pour Deo Ignito:
et un set prévu pour un autre webcomic:
Les version “inactives” sont simplement les mêmes flèches, grisées.
Vous pouvez aussi ne pas faire de flèche inactives, les liens seront tout simplement invisibles sur votre webcomic.
Nommez vos fichiers comme vous voulez, mais pour vous éviter des manipulations plus tard1, je vous suggère d'adopter les noms suivants:
Pour les liens actifs:
button-first.png
button-previous.png
button-next.png
button-last.png
Pour les liens inactifs:
button-first-inactive.png
button-previous-inactive.png
button-next-inactive.png
button-last-inactive.png
Uploadez-les dans le dossier “CSS” de votre webcomics.
Le plus dur est fait. Il reste à activer l'option.
Dans l'administration de votre webcomics, cliquez sur “personnaliser le design”, passez en mode “Expert”.
Tout en bas de la feuille de style, vous trouverez ce titre: « /* replace navigation links with images: */ ».
Effacez les /* et */ qui entourent les onze lignes suivantes, en rouge sur cette image:
Si vous avez donné d'autres noms à vos fichiers, c'est ici qu'il faudra remplacer les noms par défauts par les vôtres.
Enregistrez vos modifications, et voilà !
…en fait, pas tout à fait. Il reste une toute dernière manipulation. Vos flèches ont une certaine longueur. Pour éviter de les voir se chevaucher, vous devriez indiquer précisément la taille de vos images ici:
- Notez que si vous utilisez du jpg ou du gif, vous devrez quand même intervenir dans la feuille de style.
- Dr_Folaweb
- 22 jui 2008
40 commentaires
Ton topic tombe très bien, car je l'avoue… et je cherchais comment m'y prendre… merci
22 jui 2008
Merci pour ce tutoriel Dr_Folaweb ! Je l'ai ajouté aux pages d'aide et j'ai fait une annonce sur le blog des Bruits de couloir.
22 jui 2008
Merci Dr_Folaweb je me demandais justement comment les boutons de Deo' était fait.
23 jui 2008
Merci aussi pour ce tuto, Dr_Folaweb.
J'aimerais aussi savoir comment on place les liens de navigation au milieu de la page. Ce serait chouette.
Y a-t-il une adresse web où l'on pourrait s'informer sur la syntaxe wiki?
19 aoû 2008
Voici je crois une solution. En bas de la section /* page */ de la feuille de style, j'ai cette ligne:
.navigation { width:324px; color: #888; margin:auto; }
Le margin:auto centre le blog “navigation” qui contient les liens de navigations.
Pour la syntaxe, vois dans l'aide de webcomics.fr
16 sep 2008
Cela ne marche pas chez moi.
Par contre, cela fonctionne avec text-align: center; à l'endroit que tu m'as indiqué. Merci, Dr_Folaweb. :)
16 sep 2008
Merci pour l'astuce Dr_Folaweb.
5 jan 2009
J'ai tout essayé sur le bloc “navigation” mais j'ai un problème que j'arrive pas à résoudre et je ne suis pas un expert en CSS. Comment faire pour que mes 4 images de mon bloc navigation soit collées ? Qu'il n'y ait pas d'espace entre les blocs ? En HTML, j'aurais su quoi faire mais là je ne trouve pas la bonne ligne de commande à entrer. Pour voir concrètement mon problème, allez sur mon webco “foetus et foetus”. Merci à l'âme charitable qui pourra me débloquer !
26 jan 2009
Hé bien je viens de regarder, je ne sais pas non plus. Tout est tellement imbriqué… JMG, de l'aide ?
26 jan 2009
J'ai pas regardé en détail, à tester notamment sur les internet explorer mais y a pas de raison, JMG RULZ OKAY ! ^^ - comme j'ai fait ça rapidement, j'ai pas checké les consquences et ai pas regardé le contexte, donc le maître des lieux confirmera ou pas, sauf si le feu se declare avant qu'il arrive.
remplace ta 3eme ligne actuelle de ta css perso dans le “paragraphe” replace navigation links with images par celle-là :
.navigation a, .navigation .inactive { display: block; float: left; width: 68px; height: 48px;}
et tu auras :
EDIT : ah mais ! en plus je viens de voir là, c'est LE code par defaut ce display et ce float !!! En fait Wayne avec tes display inline and co que tu avais tentés, tu t'etais compliqué la vie)
27 jan 2009
…et j'ai même pas pensé à réessayer le code du tuto, pensant que c'était une modif intervenue entre-temps. Pfff…
Sinon, chouette menu quand même :)
27 jan 2009
Bin non, moi dans tous mes webco, le défaut c'est un display inline. J'y avais pas touché. En tous cas merci bien !!! Ca fonctionne ! Génial ! :-)
Bon maintenant je pense qu'il ne faudrait que je mette qu'une seule barre de navigation, soit en haut soit en bas, car comme c'est des strips, c'est un peu lourd graphiquement, cette répétition.
27 jan 2009
fonctionne, mais pour les deux barres de nav'
devrait donc fonctionner pour celle du haut seulement, mais non.
Bizarre, bizarre.
27 jan 2009
en fait y'a quelques bugs des fois car par exemple, quand j'ai mis une image de fond à la place du titre, il m'a remis la feuille de style CSS à zéro et j'ai du refaire les manips pour remettre ma barre de navigation. bizarre…
27 jan 2009
@Dr_folaweb
.top sans le .navigation devrait fonctionner (les classes sont au même niveau dans le html et pas imbriquées ;) )
je prendrais plutot un display: none;
@Wayne
Je pense que si on passe par une modif du design depuis une interface simplifiée, ça reinitialise du coup toute la feuille de style personnelle depuis l'interface avancée (ce qui en somme est assez logique).
27 jan 2009
Effectivement j'ai placé un .top avec un display: none et ça a fonctionné. C'est presque parfait, il ne me reste plus qu'à déplacer la barre de navigation “bottom” à droite, mais je crois que ça doit faire conflit avec les données de navigation “display: block” et “float : left” car je n'arrive pas à la déplacer même avec un margin: auto ou text-align: left.
27 jan 2009
Et un
.bottom {float: right;}
^^
27 jan 2009
( c'est oim le visiteur au-dessus ;-) )
27 jan 2009
aaah merci ! Je savais qu'il fallait mettre un .bottom mais je ne savais pas pour la syntaxe derrière. Je commence à piger le truc… ;-) parfait !
27 jan 2009
Ha… ça c'est cool ! Une aide à la personnalisation ! Merci beaucoup !^^
27 jan 2009
Salut, je prépare en ce moment la page du webcomic de Pâques, et je fais quelques tests sur les boutons :
hop la
Voila ce que ça donne, pourtant j'ai suivi a la lettre les explications du doc.. les boutons sont sensés tous faire la même taille, mais il semble que ça ne soit pas le cas : j'avais d'abord posté une première version des boutons qui n'étaient pas de la même taille.. et il semblent vouloir rester !
EDIT : problème résolu, ça venait de mon navigateur (google chrome) !
1 fév 2009
Moi, j'ai toute faite les étapes inscrit mais je ne voit pas mes images… Je voit encore les anciennes?? J'ai actualiser ma page plein de fois et ça na pas marcher… À L'AIDE
Oups! Il date de longtemps se topic…
10 jui 2009
FAIL XD
Je devrais faire tout cela pour Uzi-Marchands de vies- ( autour de décembre ), je verrai bien si je me débrouille.
10 jui 2009
Jake, pitié ! :D
Moi je vois des images, mais je ne peux pas te dire si ce sont “les anciennes” ou pas, vu que je ne les connais pas, comme personne d'autre ici d'ailleurs.
As-tu remplacé les fichiers de tes images ? As-tu forcé le rafraichissement des images (Ctrl+F5) ?
10 jui 2009
Non, ok ça a marcher… peu être qu'il faut attendre un peu…
Mais la ils sont trop grosse je vais les changer…
Merci beaucoup! :D
10 jui 2009
La page d'aide concernant la personnalisation est en réfaction. J'y ai ajouté deux autres “astuces” que je vous invite à lire, éventuellement tester, et commenter ici si vous pensez qu'il faut y ajouter quelque chose :)
16 jui 2009
Merci pour les astuces supplémentaires. Je me demandais aussi comment personnaliser les citations. Est-ce que les cadres avec pointillés fonctionnent pareil?
16 jui 2009
…pour le forum du moins. J'ai deux classes perso dans la CSS de Deo Ignito, mais je ne m'en sers pas souvent.
Si vous avez des astuces à proposer, elles seront les bienvenues :)
16 jui 2009
Merci bien. :)
J'ai compris il y a seulement quelques jours que cette grande ligne…
… se traçait avec seulement quatre signes “moins” (-) successifs.
16 jui 2009
Ben oui toi, c'est fous ce qu'on apprend ici. :)
16 jui 2009
Je plussoie :
Voilà encore un truc qui n'était pas indiqué dans la FAQ “Synthaxe” !
Moi, j'aurais fait avec un tag HR (ça marche ?) :
(ça marche, en effet ^^ !)
SOUTCH : comment as-tu découvert cette astuce ? Le hasard un jour où tu as voulu faire des séparations à grand coup de tirets ?
16 jui 2009
N'était pas indiqué, en effet :)
16 jui 2009
Exactement. J'étais parti pour en faire une vingtaine ou une trentaine… :D
Puis je me suis dis que trois ou quatre tirets devaient largement suffire. Le pouvoir de la fainéantise… :)
16 jui 2009
DocFolaweb : “Uploadez-les (images des boutons) dans le dossier “CSS” de votre webcomics.”
Oui… mais comment uploader dans le CCS ??????
27 jan 2010
…
Dans le gestionnaire de fichier (celui-là qui te permet d'envoyer des planches), tu cliques sur le dossier “CSS”, puis tu envois tes images comme tu le fais pour les planches.
27 jan 2010
je ni arrive pas ='( il faut enregistrer les 4 flèches séparément ???
27 nov 2010
Oui. Il y a huit fichiers images en tout. Un pour chaque flèche active, un pour chaque flèche inactive.
27 nov 2010
ok merci je vais ressayer =)
28 nov 2010
jé rien compris lé images'affichent pas
1 mar 2011
SUPER MERCI bcp pr l'info et d'avoir pris le temps de partager ton savoir!! :D
2 mar 2011